igniteui-angular 19.2.6 → 19.2.8

package/lib/core/i18n/grid-resources.d.ts

@@ -45,6 +45,8 @@ export interface IGridResourceStrings {
     igx_grid_filter_true?: string;
     igx_grid_filter_false?: string;
     igx_grid_filter_all?: string;
+    igx_grid_filter_in?: string;
+    igx_grid_filter_notIn?: string;
     igx_grid_filter_condition_placeholder?: string;
     igx_grid_summary_count?: string;
     igx_grid_summary_min?: string;
@@ -89,6 +91,7 @@ export interface IGridResourceStrings {
     igx_grid_excel_no_matches?: string;
     igx_grid_excel_matches_count?: string;
     igx_grid_advanced_filter_title?: string;
+    igx_grid_advanced_filter_from_label?: string;
     igx_grid_advanced_filter_and_group?: string;
     igx_grid_advanced_filter_or_group?: string;
     igx_grid_advanced_filter_end_group?: string;
@@ -97,12 +100,23 @@ export interface IGridResourceStrings {
     igx_grid_advanced_filter_and_label?: string;
     igx_grid_advanced_filter_or_label?: string;
     igx_grid_advanced_filter_add_condition?: string;
+    igx_grid_advanced_filter_add_condition_root?: string;
+    igx_grid_advanced_filter_add_group?: string;
+    igx_grid_advanced_filter_add_group_root?: string;
     igx_grid_advanced_filter_ungroup?: string;
     igx_grid_advanced_filter_delete?: string;
     igx_grid_advanced_filter_delete_filters?: string;
     igx_grid_advanced_filter_initial_text?: string;
     igx_grid_advanced_filter_column_placeholder?: string;
     igx_grid_advanced_filter_value_placeholder?: string;
+    igx_grid_advanced_filter_query_value_placeholder?: string;
+    igx_grid_advanced_filter_switch_group?: string;
+    igx_grid_advanced_filter_dialog_title?: string;
+    igx_grid_advanced_filter_dialog_message?: string;
+    igx_grid_advanced_filter_dialog_checkbox_text?: string;
+    igx_grid_advanced_filter_drop_ghost_text?: string;
+    igx_grid_advanced_filter_select_entity?: string;
+    igx_grid_advanced_filter_select_return_field_single?: string;
     igx_grid_pinned_row_indicator?: string;
     igx_grid_hiding_check_all_label?: string;
     igx_grid_hiding_uncheck_all_label?: string;

package/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -308,7 +308,7 @@
         }
 
         igx-icon {
-            --component-size: #{if($variant == 'indigo', 2, var(--grid-size))};
+            --component-size: #{if($variant == 'indigo', 2, 1)};
 
             display: initial;
             width: var(--size) !important;

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 {
@@ -421,6 +421,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

@@ -394,6 +394,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;
@@ -464,6 +483,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 {
@@ -1234,13 +1267,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;
         }
     }
 
@@ -2092,7 +2132,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/core/styles/components/label/_label-theme.scss

@@ -11,9 +11,11 @@
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $color [null] - The text color.
+/// @param {Map} $disabled-color [null] - The disabled text color.
 @function label-theme(
     $schema: $light-material-schema,
-    $color: null
+    $color: null,
+    $disabled-color: null,
 ) {
     $name: 'igx-label';
     $selector: '[igxLabel]';
@@ -31,6 +33,7 @@
         name: $name,
         selector: $selector,
         color: $color,
+        disabled-color: $disabled-color,
         theme: map.get($schema, '_meta', 'theme'),
         variant: map.get($schema, '_meta', 'theme'),
     ));

package/lib/core/styles/components/radio/_radio-component.scss

@@ -115,6 +115,10 @@
             @include e(label) {
                 @extend %radio-label--disabled !optional;
             }
+
+            @include e(label, $m: before) {
+                @extend %radio-label--disabled !optional;
+            }
         }
 
         @include m(invalid) {
@@ -217,5 +221,13 @@
         @include m(vertical) {
             @extend %radio-group-display--vertical !optional;
         }
+
+        @include m(before) {
+            @extend %radio-group-display--before !optional;
+        }
+
+        @include m(disabled) {
+            @extend %radio-group-display--disabled !optional;
+        }
     }
 }

package/lib/core/styles/components/radio/_radio-theme.scss

@@ -597,18 +597,40 @@
     }
 
     %radio-group-display {
-        display: block;
-        %radio-display:not(:last-of-type) {
-            margin-inline-end: $horizontal-group-margin;
+        display: grid;
+        column-gap: $horizontal-group-margin;
+        align-items: start;
+        width: max-content;
+    }
+
+    %radio-group-display:not(%radio-group-display--vertical) {
+        [igxLabel] {
+            margin-block-end: rem(16px);
+        }
+
+        igx-radio {
+            grid-row: 2;
         }
     }
 
     %radio-group-display--vertical {
-        display: flex;
-        flex-flow: column;
-        %radio-display:not(:last-of-type) {
-            margin-inline-end: 0;
-            margin-block-end: $vertical-group-margin;
+        row-gap: $vertical-group-margin;
+
+        [igxLabel] {
+            margin-block-end: if($variant == 'material', rem(16px), rem(8px));
+        }
+
+        &%radio-group-display--before {
+            igx-radio,
+            [igxLabel] {
+                justify-self: flex-end;
+            }
+        }
+    }
+
+    %radio-group-display--disabled {
+        [igxLabel] {
+            color: var-get($theme, 'disabled-color');
         }
     }
 }

package/lib/directives/for-of/for_of.directive.d.ts

@@ -152,7 +152,7 @@ export declare class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfT
      * }
      * ```
      */
-    dataChanged: EventEmitter<any>;
+    dataChanged: EventEmitter<IForOfDataChangeEventArgs>;
     beforeViewDestroyed: EventEmitter<EmbeddedViewRef<any>>;
     /**
      * An event that is emitted on chunk loading to emit the current state information - startIndex, endIndex, totalCount.
@@ -543,10 +543,15 @@ export interface IForOfState extends IBaseEventArgs {
     startIndex?: number;
     chunkSize?: number;
 }
+/**
+ * @deprecated in 19.2.7. Use `IForOfDataChangeEventArgs` instead.
+ */
 export interface IForOfDataChangingEventArgs extends IBaseEventArgs {
     containerSize: number;
     state: IForOfState;
 }
+export interface IForOfDataChangeEventArgs extends IForOfDataChangingEventArgs {
+}
 export declare class IgxGridForOfContext<T, U extends T[] = T[]> extends IgxForOfContext<T, U> {
     igxGridForOf: U;
     constructor($implicit: T, igxGridForOf: U, index: number, count: number);
@@ -573,7 +578,7 @@ export declare class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxFo
      * @hidden @internal
      * An event that is emitted after data has been changed but before the view is refreshed
      */
-    dataChanging: EventEmitter<IForOfDataChangingEventArgs>;
+    dataChanging: EventEmitter<IForOfDataChangeEventArgs>;
     constructor(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T>>, _differs: IterableDiffers, cdr: ChangeDetectorRef, _zone: NgZone, _platformUtil: PlatformUtil, _document: any, syncScrollService: IgxForOfScrollSyncService, syncService: IgxForOfSyncService);
     /**
      * @hidden @internal

package/lib/directives/radio/radio-group.directive.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, EventEmitter, OnDestroy, QueryList } from '@angular/core';
+import { ChangeDetectorRef, DoCheck, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { IgxRadioComponent } from '../../radio/radio.component';
 import { IgxDirectionality } from '../../services/direction/directionality';
@@ -35,10 +35,12 @@ export type RadioGroupAlignment = typeof RadioGroupAlignment[keyof typeof RadioG
  * </igx-radio-group>
  * ```
  */
-export declare class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit, ControlValueAccessor, OnDestroy, DoCheck {
+export declare class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, DoCheck {
     ngControl: NgControl;
     private _directionality;
     private cdr;
+    private _radioButtons;
+    private _radioButtonsList;
     /**
      * Returns reference to the child radio buttons.
      *
@@ -47,7 +49,7 @@ export declare class IgxRadioGroupDirective implements AfterContentInit, AfterVi
      * let radioButtons =  this.radioGroup.radioButtons;
      * ```
      */
-    radioButtons: QueryList<IgxRadioComponent>;
+    get radioButtons(): QueryList<IgxRadioComponent>;
     /**
      * Sets/gets the `value` attribute.
      *
@@ -134,6 +136,22 @@ export declare class IgxRadioGroupDirective implements AfterContentInit, AfterVi
      * ```
      */
     private vertical;
+    /**
+     * A css class applied to the component if any of the
+     * child radio buttons labelPosition is set to `before`.
+     *
+     * @hidden
+     * @internal
+     */
+    protected get labelBefore(): boolean;
+    /**
+     * A css class applied to the component if all
+     * child radio buttons are disabled.
+     *
+     * @hidden
+     * @internal
+     */
+    protected get disabled(): boolean;
     protected handleClick(event: MouseEvent): void;
     protected handleKeyDown(event: KeyboardEvent): void;
     /**
@@ -204,16 +222,6 @@ export declare class IgxRadioGroupDirective implements AfterContentInit, AfterVi
      * @internal
      */
     private queryChange$;
-    /**
-     * @hidden
-     * @internal
-     */
-    ngAfterContentInit(): void;
-    /**
-     * @hidden
-     * @internal
-    */
-    ngAfterViewInit(): void;
     /**
      * @hidden
      * @internal
@@ -263,7 +271,17 @@ export declare class IgxRadioGroupDirective implements AfterContentInit, AfterVi
      * @hidden
      * @internal
      */
-    private _initRadioButtons;
+    private initialize;
+    /**
+     * @hidden
+     * @internal
+     */
+    private setRadioButtons;
+    /**
+     * @hidden
+     * @internal
+     */
+    private _setRadioButtonEvents;
     /**
      * @hidden
      * @internal
@@ -290,7 +308,7 @@ export declare class IgxRadioGroupDirective implements AfterContentInit, AfterVi
      */
     private _setRadioButtonsInvalid;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxRadioGroupDirective, [{ optional: true; self: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxRadioGroupDirective, "igx-radio-group, [igxRadioGroup]", ["igxRadioGroup"], { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; }, { "change": "change"; }, ["radioButtons"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxRadioGroupDirective, "igx-radio-group, [igxRadioGroup]", ["igxRadioGroup"], { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; }, { "change": "change"; }, ["_radioButtons"], never, true, never>;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_invalid: unknown;
 }

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/lib/grids/common/crud.service.d.ts

@@ -16,14 +16,14 @@ export declare class IgxEditRow {
     createRowEditEventArgs(includeNewValue?: boolean, event?: Event): IGridEditEventArgs;
     createRowDataEventArgs(event?: Event): IRowDataCancelableEventArgs;
     createRowEditDoneEventArgs(cachedRowData: any, event?: Event): IGridEditDoneEventArgs;
-    getClassName(): string;
+    get isAddRow(): boolean;
 }
 export declare class IgxAddRow extends IgxEditRow {
     recordRef: any;
-    isAddRow: boolean;
     constructor(id: any, index: number, data: any, recordRef: any, grid: GridType);
     createRowEditEventArgs(includeNewValue?: boolean, event?: Event): IGridEditEventArgs;
     createRowEditDoneEventArgs(cachedRowData: any, event?: Event): IGridEditDoneEventArgs;
+    get isAddRow(): boolean;
 }
 export interface IgxAddRowParent {
     /**

package/lib/grids/grid-base.directive.d.ts

@@ -3,7 +3,7 @@ import { Subject } from 'rxjs';
 import { PlatformUtil } from '../core/utils';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
-import { IForOfDataChangingEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
+import { IForOfDataChangeEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxTextHighlightService } from '../directives/text-highlight/text-highlight.service';
 import { ISummaryExpression } from './summaries/grid-summary';
 import type { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
@@ -782,7 +782,7 @@ export declare abstract class IgxGridBaseDirective implements GridType, OnInit,
      *  <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
      * ```
      */
-    dataChanging: EventEmitter<IForOfDataChangingEventArgs>;
+    dataChanging: EventEmitter<IForOfDataChangeEventArgs>;
     /**
      * Emitted after the grid's data view is changed because of a data operation, rebinding, etc.
      *
@@ -791,7 +791,7 @@ export declare abstract class IgxGridBaseDirective implements GridType, OnInit,
      *  <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>
      * ```
      */
-    dataChanged: EventEmitter<any>;
+    dataChanged: EventEmitter<IForOfDataChangeEventArgs>;
     /**
      * @hidden @internal
      */
@@ -2255,11 +2255,11 @@ export declare abstract class IgxGridBaseDirective implements GridType, OnInit,
     /**
      * @hidden @internal
      */
-    dataRebinding(event: IForOfDataChangingEventArgs): void;
+    dataRebinding(event: IForOfDataChangeEventArgs): void;
     /**
      * @hidden @internal
      */
-    dataRebound(event: any): void;
+    dataRebound(event: IForOfDataChangeEventArgs): void;
     /** @hidden @internal */
     createFilterDropdown(column: ColumnType, options: OverlaySettings): string;
     /** @hidden @internal */

package/package.json

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

package/public_api.d.ts

@@ -13,7 +13,7 @@ export * from './lib/directives/drag-drop/public_api';
 export * from './lib/directives/filter/filter.directive';
 export * from './lib/directives/focus/focus.directive';
 export * from './lib/directives/focus-trap/focus-trap.directive';
-export { IgxForOfContext, IgxForOfDirective, IForOfState, IgxGridForOfContext, IgxGridForOfDirective } from './lib/directives/for-of/for_of.directive';
+export { IForOfDataChangeEventArgs, IForOfDataChangingEventArgs, IForOfState, IgxForOfContext, IgxForOfDirective, IgxGridForOfContext, IgxGridForOfDirective, } from './lib/directives/for-of/for_of.directive';
 export * from './lib/directives/button/icon-button.directive';
 export * from './lib/directives/layout/layout.directive';
 export * from './lib/directives/mask/mask.directive';