igniteui-angular 20.1.9 → 20.1.10

package/index.d.ts

@@ -2960,7 +2960,7 @@ declare class IgxCellCrudState {
     /** Exit cell edit mode */
     exitCellEdit(event?: Event): IGridEditDoneEventArgs;
     /** Clears cell editing state */
-    endCellEdit(): void;
+    endCellEdit(restoreFocus?: boolean): void;
     /** Returns whether the targeted cell is in edit mode */
     targetInEdit(rowIndex: number, columnIndex: number): boolean;
 }
@@ -43427,6 +43427,7 @@ declare class IgxDateRangePickerComponent extends PickerBaseDirective implements
     /** @hidden @internal */
     projectedInputs: QueryList<IgxDateRangeInputsBaseComponent>;
     label: IgxLabelDirective;
+    hint: IgxHintDirective;
     pickerActions: IgxPickerActionsDirective;
     /** @hidden @internal */
     dateSeparatorTemplate: TemplateRef<any>;
@@ -43595,7 +43596,7 @@ declare class IgxDateRangePickerComponent extends PickerBaseDirective implements
     /** @hidden @internal */
     ngOnDestroy(): void;
     /** @hidden @internal */
-    getEditElement(): HTMLInputElement | undefined;
+    getEditElement(): HTMLInputElement;
     protected onStatusChanged: () => void;
     private setValidityState;
     private get isTouchedOrDirty();
@@ -43631,7 +43632,7 @@ declare class IgxDateRangePickerComponent extends PickerBaseDirective implements
     private _isValueInDisabledRange;
     private _setCalendarActiveDate;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxDateRangePickerComponent, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxDateRangePickerComponent, "igx-date-range-picker", never, { "displayMonthsCount": { "alias": "displayMonthsCount"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "hideOutsideDays": { "alias": "hideOutsideDays"; "required": false; }; "formatter": { "alias": "formatter"; "required": false; }; "doneButtonText": { "alias": "doneButtonText"; "required": false; }; "cancelButtonText": { "alias": "cancelButtonText"; "required": false; }; "overlaySettings": { "alias": "overlaySettings"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "inputFormat": { "alias": "inputFormat"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "specialDates": { "alias": "specialDates"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "outlet": { "alias": "outlet"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "usePredefinedRanges": { "alias": "usePredefinedRanges"; "required": false; }; "customRanges": { "alias": "customRanges"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, ["label", "pickerActions", "dateSeparatorTemplate", "headerTitleTemplate", "headerTemplate", "subheaderTemplate", "projectedInputs"], ["igx-date-single", "igx-date-range-start", "igx-date-range-end", "[igxLabel]", "igx-prefix,[igxPrefix]", "igx-suffix,[igxSuffix]", "igx-hint,[igxHint]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxDateRangePickerComponent, "igx-date-range-picker", never, { "displayMonthsCount": { "alias": "displayMonthsCount"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "hideOutsideDays": { "alias": "hideOutsideDays"; "required": false; }; "formatter": { "alias": "formatter"; "required": false; }; "doneButtonText": { "alias": "doneButtonText"; "required": false; }; "cancelButtonText": { "alias": "cancelButtonText"; "required": false; }; "overlaySettings": { "alias": "overlaySettings"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "inputFormat": { "alias": "inputFormat"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "specialDates": { "alias": "specialDates"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "outlet": { "alias": "outlet"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "usePredefinedRanges": { "alias": "usePredefinedRanges"; "required": false; }; "customRanges": { "alias": "customRanges"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, ["label", "hint", "pickerActions", "dateSeparatorTemplate", "headerTitleTemplate", "headerTemplate", "subheaderTemplate", "projectedInputs"], ["igx-date-single", "igx-date-range-start", "igx-date-range-end", "[igxLabel]", "igx-prefix,[igxPrefix]", "igx-suffix,[igxSuffix]", "igx-hint,[igxHint]"], true, never>;
     static ngAcceptInputType_hideOutsideDays: unknown;
     static ngAcceptInputType_showWeekNumbers: unknown;
     static ngAcceptInputType_readOnly: unknown;

package/lib/core/styles/components/badge/_badge-theme.scss

@@ -24,7 +24,7 @@
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background-color');
         border-radius: calc(var(--size) / 2);
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
         overflow: hidden;
 
         igx-icon {

package/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -43,13 +43,13 @@
     %igx-bottom-nav-menu--top {
         inset-block-start: 0;
         inset-block-end: inherit;
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
     }
 
     %igx-bottom-nav-menu--bottom {
         inset-block-start: inherit;
         inset-block-end: 0;
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
     }
 
     %igx-bottom-nav-menu-item {

package/lib/core/styles/components/button/_button-theme.scss

@@ -193,7 +193,7 @@
 
     $contained-shadow: map.get(
         (
-            'material': var-get($contained-theme, 'resting-shadow'),
+            'material': var-get($contained-theme, 'resting-elevation'),
             'fluent': none,
             'bootstrap': none,
             'indigo': none,
@@ -203,7 +203,7 @@
 
     $contained-shadow--hover: map.get(
         (
-            'material': var-get($contained-theme, 'hover-shadow'),
+            'material': var-get($contained-theme, 'hover-elevation'),
             'fluent': none,
             'bootstrap': none,
             'indigo': none,
@@ -213,8 +213,8 @@
 
     $contained-shadow--focus: map.get(
         (
-            'material': var-get($contained-theme, 'focus-shadow'),
-            'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+            'material': var-get($contained-theme, 'focus-elevation'),
+            'fluent': none,
             'bootstrap': 0 0 0 rem(4px)
                 var-get($contained-theme, 'shadow-color'),
             'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
@@ -224,8 +224,8 @@
 
     $contained-shadow--active: map.get(
         (
-            'material': var-get($contained-theme, 'active-shadow'),
-            'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+            'material': var-get($contained-theme, 'active-elevation'),
+            'fluent': none,
             'bootstrap': 0 0 0 rem(4px)
                 var-get($contained-theme, 'shadow-color'),
             'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
@@ -235,7 +235,7 @@
 
     $fab-shadow: map.get(
         (
-            'material': var-get($fab-theme, 'resting-shadow'),
+            'material': var-get($fab-theme, 'resting-elevation'),
             'fluent': none,
             'bootstrap': none,
             'indigo': none,
@@ -245,7 +245,7 @@
 
     $fab-shadow--hover: map.get(
         (
-            'material': var-get($fab-theme, 'hover-shadow'),
+            'material': var-get($fab-theme, 'hover-elevation'),
             'fluent': none,
             'bootstrap': none,
             'indigo': none,
@@ -255,8 +255,8 @@
 
     $fab-shadow--focus: map.get(
         (
-            'material': var-get($fab-theme, 'focus-shadow'),
-            'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+            'material': var-get($fab-theme, 'focus-elevation'),
+            'fluent': none,
             'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
             'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
         ),
@@ -265,8 +265,8 @@
 
     $fab-shadow--active: map.get(
         (
-            'material': var-get($fab-theme, 'active-shadow'),
-            'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+            'material': var-get($fab-theme, 'active-elevation'),
+            'fluent': none,
             'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
             'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
         ),
@@ -407,7 +407,11 @@
         border-color: var-get($flat-theme, 'focus-visible-border-color');
 
         igx-icon {
-            color: var-get($flat-theme, 'icon-color');
+            @if $variant == 'material' {
+                color: var-get($flat-theme, 'icon-color-hover');
+            } @else {
+                color: var-get($flat-theme, 'icon-color');
+            }
         }
 
         &:hover {
@@ -547,7 +551,16 @@
         &:active {
             background: var-get($outlined-theme, 'focus-background');
             color: var-get($outlined-theme, 'focus-foreground');
-            border-color: var-get($outlined-theme, 'active-border-color');
+
+            @if $variant == 'material' {
+                border-color: var-get($outlined-theme, 'focus-border-color');
+
+                igx-icon {
+                    color: var-get($outlined-theme, 'focus-foreground');
+                }
+            } @else {
+                border-color: var-get($outlined-theme, 'active-border-color');
+            }
 
             @if $variant == 'indigo' {
                 igx-icon {
@@ -573,7 +586,10 @@
         background: var-get($contained-theme, 'background');
         border-color: var-get($contained-theme, 'border-color');
         border-radius: var-get($contained-theme, 'border-radius');
-        box-shadow: var-get($contained-theme, 'resting-shadow');
+
+        @if $variant == 'material' {
+            box-shadow: var-get($contained-theme, 'resting-elevation');
+        }
 
         igx-icon {
             color: var-get($contained-theme, 'icon-color');
@@ -583,7 +599,10 @@
             color: var-get($contained-theme, 'hover-foreground');
             background: var-get($contained-theme, 'hover-background');
             border-color: var-get($contained-theme, 'hover-border-color');
-            box-shadow: var-get($contained-theme, 'hover-shadow');
+
+            @if $variant == 'material' {
+                box-shadow: var-get($contained-theme, 'hover-elevation');
+            }
 
             igx-icon {
                 color: var-get($contained-theme, 'icon-color-hover');
@@ -594,7 +613,10 @@
             color: var-get($contained-theme, 'active-foreground');
             background: var-get($contained-theme, 'active-background');
             border-color: var-get($contained-theme, 'active-border-color');
-            box-shadow: var-get($contained-theme, 'active-shadow');
+
+            @if $variant == 'material' {
+                box-shadow: var-get($contained-theme, 'active-elevation');
+            }
 
             igx-icon {
                 color: var-get($contained-theme, 'active-foreground');
@@ -627,7 +649,7 @@
         }
 
         @if $variant == 'material' {
-            box-shadow: var-get($contained-theme, 'focus-shadow');
+            box-shadow: var-get($contained-theme, 'focus-elevation');
         } @else {
             box-shadow: $contained-shadow--active;
         }
@@ -652,7 +674,7 @@
             }
 
             @if $variant == 'material' {
-                box-shadow: var-get($contained-theme, 'focus-shadow');
+                box-shadow: var-get($contained-theme, 'focus-elevation');
             }
         }
 
@@ -713,7 +735,10 @@
         background: var-get($fab-theme, 'background');
         border-color: var-get($fab-theme, 'border-color');
         border-radius: var-get($fab-theme, 'border-radius');
-        box-shadow: var-get($fab-theme, 'resting-shadow');
+
+        @if $variant == 'material' {
+            box-shadow: var-get($fab-theme, 'resting-elevation');
+        }
 
         igx-icon {
             color: var-get($fab-theme, 'icon-color');
@@ -723,7 +748,10 @@
             color: var-get($fab-theme, 'hover-foreground');
             background: var-get($fab-theme, 'hover-background');
             border-color: var-get($fab-theme, 'hover-border-color');
-            box-shadow: var-get($fab-theme, 'hover-shadow');
+
+            @if $variant == 'material' {
+                box-shadow: var-get($fab-theme, 'hover-elevation');
+            }
 
             igx-icon {
                 color: var-get($fab-theme, 'icon-color-hover');
@@ -734,7 +762,10 @@
             color: var-get($fab-theme, 'active-foreground');
             background: var-get($fab-theme, 'active-background');
             border-color: var-get($fab-theme, 'active-border-color');
-            box-shadow: var-get($fab-theme, 'active-shadow');
+
+            @if $variant == 'material' {
+                box-shadow: var-get($fab-theme, 'active-elevation');
+            }
 
             igx-icon {
                 color: var-get($fab-theme, 'active-foreground');
@@ -758,7 +789,7 @@
         }
 
         @if $variant == 'material' {
-            box-shadow: var-get($fab-theme, 'focus-shadow');
+            box-shadow: var-get($fab-theme, 'focus-elevation');
         } @else {
             box-shadow: $contained-shadow--focus;
         }

package/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -36,7 +36,7 @@
 
     %igx-group-display {
         display: flex;
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
         border-radius: var-get($theme, 'border-radius');
 
         button {
@@ -269,6 +269,7 @@
                 color: var-get($theme, 'item-focused-text-color');
                 background: var-get($theme, 'item-focused-background');
                 border-color: var-get($theme, 'item-focused-border-color');
+                box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
                 z-index: 2;
 
                 igx-icon {
@@ -352,12 +353,12 @@
             &:active {
                 @extend %item-overlay;
 
-                color: var-get($theme, 'item-selected-text-color');
+                color: var-get($theme, 'item-selected-hover-text-color');
                 background: var-get($theme, 'item-selected-background');
                 border-color: var-get($theme, 'item-selected-border-color');
 
                 igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
+                    color: var-get($theme, 'item-selected-hover-icon-color');
                 }
 
                 &::before {

package/lib/core/styles/components/card/_card-theme.scss

@@ -31,10 +31,10 @@
     }
 
     %igx-card--elevated {
-        box-shadow: var-get($theme, 'resting-shadow');
+        box-shadow: var-get($theme, 'resting-elevation');
 
         &:hover {
-            box-shadow: var-get($theme, 'hover-shadow');
+            box-shadow: var-get($theme, 'hover-elevation');
         }
 
         @if $not-material-theme {

package/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -46,7 +46,7 @@
         outline-style: none;
         transition: all .15s ease-in-out;
         background: var-get($theme, 'button-background');
-        box-shadow: var-get($theme, 'button-shadow');
+        box-shadow: var-get($theme, 'button-elevation');
         border: rem(1px) solid var-get($theme, 'button-border-color');
         border-radius: var(--nav-btn-border-radius);
 
@@ -167,7 +167,7 @@
         inset-inline-start: 50%;
         transform: translateX(-50%);
         background: var-get($theme, 'indicator-background');
-        box-shadow: var-get($theme, 'button-shadow');
+        box-shadow: var-get($theme, 'button-elevation');
         border-radius: var-get($theme, 'border-radius');
 
         [dir='rtl'] & {

package/lib/core/styles/components/chip/_chip-theme.scss

@@ -540,7 +540,7 @@
         @extend %igx-chip;
 
         position: absolute;
-        box-shadow: var-get($theme, 'ghost-shadow');
+        box-shadow: var-get($theme, 'ghost-elevation');
         overflow: hidden;
         color: var-get($theme, 'focus-text-color');
         background: var-get($theme, 'ghost-background');

package/lib/core/styles/components/combo/_combo-theme.scss

@@ -276,8 +276,8 @@
 
     .igx-input-group--disabled {
         %igx-combo__toggle-button {
-            background: var-get($theme, 'toggle-button-background-disabled') !important;
-            color: var-get($theme, 'toggle-button-foreground-disabled') !important;
+            background: var-get($theme, 'toggle-button-background-disabled');
+            color: var-get($theme, 'toggle-button-foreground-disabled');
         }
 
         %igx-combo__clear-button {

package/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss

@@ -6,8 +6,12 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin date-range-picker($theme) {
     @include css-vars($theme);
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-date-range-picker {
+        @include sizable();
+        --input-group-size: #{map.get($theme, 'size')};
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
         display: flex;
 
         > igx-icon {
@@ -32,6 +36,8 @@
     igx-date-range-end,
     %igx-date-range-picker__start,
     %igx-date-range-picker__end {
+        --size: var(--input-group-size) !important;
+
         flex: 1 0 0%;
     }
 
@@ -40,6 +46,21 @@
         align-items: center;
         color: var-get($theme, 'label-color');
         margin: 0 rem(8px);
+        height: var(--input-group-size);
+
+        @if $variant != 'material' {
+            align-self: flex-end;
+
+            &.input-has-hint {
+                align-self: center;
+
+                &:not(.input-has-label) {
+                    align-self: flex-start;
+                }
+            }
+        } @else {
+            align-self: flex-start;
+        }
     }
 
     %igx-date-range-picker-buttons {

package/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -51,7 +51,7 @@
         border: rem(1px) solid var-get($theme, 'border-color');
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'background');
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
         overflow: hidden;
 
         .igx-calendar {

package/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -20,7 +20,7 @@
         overflow: hidden;
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'background-color');
-        box-shadow: var-get($theme, 'shadow');
+        box-shadow: var-get($theme, 'elevation');
         min-width: rem(128px);
         border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 

package/lib/core/styles/components/grid/_grid-theme.scss

@@ -34,7 +34,7 @@
     ), $variant);
     $cbx-bs-size: rem(14px);
 
-    $grid-shadow: var-get($theme, 'grid-shadow');
+    $grid-shadow: var-get($theme, 'grid-elevation');
 
     $grid-caption-fs: rem(20px);
     $grid-caption-lh: rem(32px);
@@ -292,6 +292,12 @@
             box-shadow: none !important;
             border: none !important;
         }
+
+        .igx-input-group--disabled,
+        .igx-input-group--disabled igx-prefix,
+        .igx-input-group--disabled igx-suffix {
+            color: var-get($theme, 'cell-disabled-color');
+        }
     }
 
     @if $variant != 'indigo' {
@@ -888,7 +894,7 @@
             @include css-vars((
                 name: 'igx-grid-row',
                 row-ghost-background: map.get($theme, 'row-ghost-background'),
-                row-drag-color: map.get($theme, 'row-drago-color')
+                row-drag-color: map.get($theme, 'row-drag-color')
             ));
         }
     }
@@ -1000,7 +1006,11 @@
         }
 
         %igx-icon--error {
-            color: color($color: 'gray', $variant: 500);
+            @if $variant == 'fluent' and $theme-variant == 'light' or $variant == 'material' and $theme-variant == 'light' {
+                color: color($color: 'gray', $variant: 600);
+            } @else {
+                color: color($color: 'gray', $variant: 500);
+            }
         }
     }
 
@@ -1192,6 +1202,21 @@
         align-items: center;
         outline-style: none;
 
+        @extend %cell-input-overrides;
+
+        > igx-input-group,
+        igx-combo,
+        igx-simple-combo,
+        igx-select,
+        igx-date-picker,
+        igx-time-picker {
+            height: auto;
+        }
+
+        igx-input-group {
+            background: transparent;
+        }
+
         @if $variant != 'indigo' {
             padding-inline: pad-inline(
                 map.get($grid-cell-padding-inline, 'compact'),
@@ -1407,8 +1432,6 @@
         &%grid-cell-number {
             justify-content: flex-start !important;
         }
-
-        @extend %cell-input-overrides;
     }
 
     %grid-cell--pinned {
@@ -1908,7 +1931,7 @@
         top: rem(-99999px);
         inset-inline-start: rem(-99999px);
         border: none;
-        box-shadow: var-get($theme, 'drag-shadow');
+        box-shadow: var-get($theme, 'drag-elevation');
         overflow: hidden;
         z-index: 20;
 

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

@@ -754,12 +754,6 @@
         @include mx(fluent, search, focused) {
             @extend %igx-input-group-fluent-search--focused !optional;
         }
-
-        @include mx(fluent, search, disabled) {
-            @include e(bundle) {
-                @extend %form-group-bundle-search--disabled !optional;
-            }
-        }
         // FLUENT END
 
         // ============================== //