Merge branch '18.2.x' into didimmova/vhelper-scrollbar-size-18.2.x

Author: didimmova

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^14.2.0",
+    "igniteui-theming": "^14.2.1",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^14.2.0",
+        "igniteui-theming": "^14.2.1",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -51,7 +51,7 @@
 
         @include e(input) {
             @extend %form-group-input !optional;
-            @extend %chrome-autofill-fix !optional;
+            @extend %autofill-background-fix !optional;
             @extend %edge-clear-icon-fix !optional;
 
             &:hover {
@@ -403,6 +403,7 @@
 
         // Type border START
         @include m(border) {
+            @extend %form-group-display--border !optional;
             @extend %form-group-display--no-margin !optional;
 
             @include e(bundle) {

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -393,6 +393,25 @@
         }
     }
 
+    @if $variant == 'material' {
+        %form-group-display--border {
+            &:has(input:-webkit-autofill, input:autofill) {
+                %igx-input-group__notch--border {
+                    border-block-start-color: transparent;
+                }
+
+                %form-group-label {
+                    --label-position: #{sizable(18px, 22px, 26px)};
+
+                    transform: translateY(calc(var(--label-position) * -1));
+                    margin-top: 0;
+                    overflow: hidden;
+                    will-change: font-size, color, transform;
+                }
+            }
+        }
+    }
+
     %form-group-display--box {
         %form-group-border {
             margin-bottom: 0;
@@ -463,6 +482,20 @@
                 --size: var(--input-icon) !important;
             }
         }
+
+        @if $variant == 'material' {
+            &:not(%form-group-display--border) {
+                &:has(input:-webkit-autofill, input:autofill) {
+                    %form-group-label {
+                        --floating-label-position: -73%;
+
+                        @include type-style('caption');
+
+                        transform: translateY(var(--floating-label-position));
+                    }
+                }
+            }
+        }
     }
 
     %form-group-placeholder {
@@ -1179,13 +1212,20 @@
         }
     }
 
-    %chrome-autofill-fix {
+    // This is a hack that removes the autofill background and it's essential,
+    // otherwise the background is on top of the floating label in material theme.
+    // The !important flag is because bootstrap theme(and potentially feature themes) is overriding the transition delay.
+    %autofill-background-fix {
         &:-webkit-autofill,
         &:-webkit-autofill:hover,
         &:-webkit-autofill:focus,
-        &:-webkit-autofill:active {
-            -webkit-transition-delay: 99999s;
-            transition-delay: 99999s;
+        &:-webkit-autofill:active,
+        &:autofill,
+        &:autofill:hover,
+        &:autofill:focus,
+        &:autofill:active, {
+            -webkit-transition-delay: 99999s !important;
+            transition-delay: 99999s !important;
         }
     }
 
@@ -1980,7 +2020,15 @@
             map.get($bootstrap-inline-padding, 'cosy'),
             map.get($bootstrap-inline-padding, 'comfortable')
         );
-        transition: box-shadow .15s ease-out, border .15s ease-out;
+    }
+
+    // The :not selector is needed otherwise bootstrap will override the %autofill-background-fix
+    %form-group-display--bootstrap {
+        :not(:has(input:-webkit-autofill, input:autofill)) {
+            %bootstrap-input {
+                transition: box-shadow .15s ease-out, border .15s ease-out;
+            }
+        }
     }
 
     %bootstrap-input,

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -502,7 +502,14 @@
 
         &:hover {
             background: var-get($theme, 'step-hover-background');
-            color: var-get($theme, 'title-hover-color');
+
+            %igx-stepper__step-title {
+                color: var-get($theme, 'title-hover-color');
+            }
+
+            %igx-stepper__step-subtitle {
+                color: var-get($theme, 'subtitle-hover-color');
+            }
         }
 
         @if $variant != material {

projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss

@@ -187,6 +187,7 @@
         button-ripple-color: $button-ripple-color,
         border-color: $border-color,
         border-radius: $border-radius,
+        border-color--hover: $border-color--hover,
         theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
@@ -267,6 +268,21 @@
                 }
             }
         }
+	    
+	    @if $bootstrap-theme {
+		    position: relative;
+		    
+		    &::after {
+			    content: '';
+			    position: absolute;
+			    bottom: 0;
+			    inset-inline-start: 0;
+			    width: 100%;
+			    height: rem(1px);
+			    background: var-get($theme, 'border-color');
+			    z-index: 0;
+		    }
+	    }
     }
 
     %tabs-header-content {
@@ -278,19 +294,6 @@
     %tabs-header-wrapper {
         position: relative;
         flex-grow: 1;
-
-        @if $bootstrap-theme {
-            &::after {
-                content: '';
-                position: absolute;
-                bottom: 0;
-                inset-inline-start: 0;
-                width: 100%;
-                height: rem(1px);
-                background: var-get($theme, 'border-color');
-                z-index: 0;
-            }
-        }
     }
 
     %tabs-header-scroll {
@@ -454,7 +457,7 @@
             &:focus {
                 border-top: rem(1px) solid transparent;
                 border-inline: none;
-                border-bottom: rem(1px) solid var-get($theme, 'border-color');
+                border-bottom: rem(1px) solid var-get($theme, 'border-color--hover');
             }
 
             igx-icon {

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -299,6 +299,17 @@ describe('IgxHighlight', () => {
         expect(() => component.highlight.activateIfNecessary()).not.toThrowError();
     });
 
+    it('Should not throw when attempting to activate a non-existing group.', () => {
+        const fix = TestBed.createComponent(HighlightLoremIpsumComponent);
+        fix.detectChanges();
+
+        const component: HighlightLoremIpsumComponent = fix.debugElement.componentInstance;
+        component.highlightText('a');
+        component.groupName = 'test1';
+        fix.detectChanges();
+
+        expect(() => component.highlight.activateIfNecessary()).not.toThrowError();
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts

@@ -318,7 +318,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     public activateIfNecessary(): void {
         const group = this.service.highlightGroupsMap.get(this.groupName);
 
-        if (group.index >= 0 && group.column === this.column && group.row === this.row && compareMaps(this.metadata, group.metadata)) {
+        if (group && group.index >= 0 && group.column === this.column && group.row === this.row && compareMaps(this.metadata, group.metadata)) {
             this.activate(group.index);
         }
     }

projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts

@@ -217,6 +217,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             return;
         }
 
+        this.target.tooltipTarget = this;
+
         const showingArgs = { target: this, tooltip: this.target, cancel: false };
         this.tooltipShow.emit(showingArgs);
 
@@ -258,7 +260,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     /**
      * @hidden
      */
-    @HostListener('touchstart')
     public onTouchStart() {
         if (this.tooltipDisabled) {
             return;
@@ -270,7 +271,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     /**
      * @hidden
      */
-    @HostListener('document:touchstart', ['$event'])
     public onDocumentTouchStart(event) {
         if (this.tooltipDisabled) {
             return;
@@ -301,19 +301,27 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this._overlayDefaults.closeOnEscape = true;
 
         this.target.closing.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+            if (this.target.tooltipTarget !== this) {
+                return;
+            }
+
             const hidingArgs = { target: this, tooltip: this.target, cancel: false };
             this.tooltipHide.emit(hidingArgs);
 
             if (hidingArgs.cancel) {
                 event.cancel = true;
             }
         });
+
+        this.nativeElement.addEventListener('touchstart', this.onTouchStart = this.onTouchStart.bind(this), { passive: true });
     }
 
     /**
      * @hidden
      */
     public ngOnDestroy() {
+        this.hideTooltip();
+        this.nativeElement.removeEventListener('touchstart', this.onTouchStart);
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -334,6 +342,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             this.target.toBeHidden = false;
         }
 
+        this.target.tooltipTarget = this;
+
         const showingArgs = { target: this, tooltip: this.target, cancel: false };
         this.tooltipShow.emit(showingArgs);