igniteui-angular 18.2.25 → 18.2.26

package/lib/core/styles/components/input/_input-group-component.scss

@@ -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) {

package/lib/core/styles/components/input/_input-group-theme.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,

package/lib/directives/tooltip/tooltip.directive.d.ts

@@ -1,8 +1,9 @@
-import { ElementRef, ChangeDetectorRef } from '@angular/core';
+import { ElementRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { OverlaySettings } from '../../services/public_api';
 import { IgxNavigationService } from '../../core/navigation';
 import { IgxToggleDirective } from '../toggle/toggle.directive';
+import { IgxTooltipTargetDirective } from './tooltip-target.directive';
 import * as i0 from "@angular/core";
 /**
  * **Ignite UI for Angular Tooltip** -
@@ -18,7 +19,7 @@ import * as i0 from "@angular/core";
  * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
  * ```
  */
-export declare class IgxTooltipDirective extends IgxToggleDirective {
+export declare class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy {
     /**
      * @hidden
      */
@@ -74,8 +75,15 @@ export declare class IgxTooltipDirective extends IgxToggleDirective {
      * Returns whether open time out has started
      */
     toBeShown: boolean;
+    /**
+     * @hidden
+     */
+    tooltipTarget: IgxTooltipTargetDirective;
+    private _destroy$;
     /** @hidden */
     constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, overlayService: IgxOverlayService, navigationService: IgxNavigationService);
+    /** @hidden */
+    ngOnDestroy(): void;
     /**
      * If there is open animation in progress this method will finish is.
      * If there is no open animation in progress this method will open the toggle with no animation.
@@ -90,6 +98,7 @@ export declare class IgxTooltipDirective extends IgxToggleDirective {
      * @param overlaySettings settings to use for closing the toggle
      */
     protected forceClose(overlaySettings?: OverlaySettings): void;
+    private onDocumentTouchStart;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxTooltipDirective, [null, null, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<IgxTooltipDirective, "[igxTooltip]", ["tooltip"], { "context": { "alias": "context"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "18.2.25",
+  "version": "18.2.26",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",