igniteui-angular 17.2.4 → 17.2.6

package/lib/card/card.component.d.ts

@@ -138,7 +138,6 @@ export declare class IgxCardFooterDirective {
  * ```
  */
 export declare class IgxCardComponent {
-    private static ngAcceptInputType_elevated;
     /**
      * Sets/gets the `id` of the card.
      * If not set, `id` will have value `"igx-card-0"`;
@@ -181,8 +180,7 @@ export declare class IgxCardComponent {
      * let cardElevation = this.card.elevated;
      * ```
      */
-    get elevated(): boolean;
-    set elevated(value: boolean);
+    elevated: boolean;
     /**
      * Sets the value of the `horizontal` attribute of the card.
      * Setting this to `true` will make the different card sections align horizontally,
@@ -194,13 +192,9 @@ export declare class IgxCardComponent {
      * ```
      */
     horizontal: boolean;
-    /**
-     * @hidden
-     * @internal
-     */
-    private _elevated;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IgxCardComponent, "igx-card", never, { "id": { "alias": "id"; "required": false; }; "role": { "alias": "role"; "required": false; }; "elevated": { "alias": "elevated"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_elevated: unknown;
     static ngAcceptInputType_horizontal: unknown;
 }
 export declare const IgxCardActionsLayout: {

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

@@ -61,33 +61,45 @@
         }
     }
 
+    @if not($icon-color) and $background {
+        @if meta.type-of($background) == 'color' {
+            $icon-color: text-contrast($background);
+        }
+    }
+
     @if not($icon-color) and $label-color {
         @if meta.type-of($label-color) == 'color' {
             $icon-color: $label-color;
         }
     }
 
-    @if not($icon-disabled-color) and $label-disabled-color {
-        @if meta.type-of($label-disabled-color) == 'color' {
-            $icon-disabled-color: $label-disabled-color;
+    @if not($label-color) and $icon-color {
+        @if meta.type-of($icon-color) == 'color' {
+            $label-color: $icon-color;
         }
     }
 
-    @if not($label-disabled-color) and $icon-disabled-color {
-        @if meta.type-of($icon-disabled-color) == 'color' {
-            $label-disabled-color: $icon-disabled-color;
+    @if not($icon-selected-color) and $label-selected-color {
+        @if meta.type-of($label-selected-color) == 'color' {
+            $icon-selected-color: $label-selected-color;
         }
     }
 
-    @if not($icon-selected-color) and $label-selected-color {
-        @if meta.type-of($background) == 'color' {
-            $icon-selected-color: $label-selected-color;
+    @if not($label-selected-color) and $icon-selected-color {
+        @if meta.type-of($icon-selected-color) == 'color' {
+            $label-selected-color: $icon-selected-color;
         }
     }
 
-    @if not($icon-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $icon-color: text-contrast($background);
+    @if not($icon-disabled-color) and $label-disabled-color {
+        @if meta.type-of($label-disabled-color) == 'color' {
+            $icon-disabled-color: $label-disabled-color;
+        }
+    }
+
+    @if not($label-disabled-color) and $icon-disabled-color {
+        @if meta.type-of($icon-disabled-color) == 'color' {
+            $label-disabled-color: $icon-disabled-color;
         }
     }
 

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

@@ -139,6 +139,12 @@
             }
         }
 
+        @if not($icon-color) and $background {
+            @if meta.type-of($background) == 'color' {
+                $icon-color: text-contrast($background);
+            }
+        }
+
         @if not($icon-color-hover) and $hover-foreground {
             @if meta.type-of($hover-background) == 'color' {
                 $icon-color-hover: $hover-foreground;
@@ -577,7 +583,7 @@
         background: var-get($flat-theme, 'focus-visible-background');
         color: var-get($flat-theme, 'focus-visible-foreground');
         border-color: var-get($flat-theme, 'focus-visible-border-color');
-        
+
         igx-icon {
             color: var-get($flat-theme, 'icon-color');
         }
@@ -599,7 +605,7 @@
                 color: var-get($flat-theme, 'focus-foreground');
             }
         }
-        
+
         @if ($variant == 'bootstrap') {
             box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
         }
@@ -780,7 +786,7 @@
                 map.get($items-gap, 'cosy'),
                 $items-gap-indigo-comfortable
             );
-            
+
             &:active {
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');

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

@@ -98,15 +98,35 @@
             --item-hover-background: #{color($color: 'gray', $variant: 100)};
             --item-selected-background: #{color($color: 'gray', $variant: 100)};
             --item-text-color: #{color($color: 'gray', $variant: 700)};
+            --item-icon-color: #{color($color: 'gray', $variant: 700)};
             --item-hover-text-color: #{color($color: 'gray', $variant: 800)};
+            --item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
             --item-selected-text-color: #{if(
                 $variant == 'indigo-design',
                 contrast-color($color: 'surface'),
                 color($color: 'secondary', $variant: 500)
             )};
+            --item-selected-icon-color: #{if(
+                $variant == 'indigo-design',
+                contrast-color($color: 'surface'),
+                color($color: 'secondary', $variant: 500)
+            )};
+            --item-selected-hover-icon-color: #{if(
+                $variant == 'fluent',
+                color($color: 'secondary', $variant: 500),
+                contrast-color($color: 'gray', $variant: 50)
+            )};
             --item-border-color: transparent;
+            --item-hover-border-color: transparent;
+            --item-focused-border-color: #{if(
+                $variant == 'fluent',
+                color($color: 'gray', $variant: 700),
+                transparent
+            )};
             --item-selected-border-color: transparent;
+            --item-selected-hover-border-color: transparent;
             --item-disabled-border: transparent;
+            --disabled-selected-border-color: transparent;
         }
 
         @include tree(tree-theme(

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

@@ -137,6 +137,10 @@
             @extend %textarea-group--outlined !optional;
         }
 
+        @include mx(textarea-group, box) {
+            @extend %textarea-group--box !optional;
+        }
+
         @include mx(textarea-group, focused) {
             @include e(label) {
                 @extend %textarea-group-label--focused !optional;

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

@@ -1014,11 +1014,24 @@
         }
     }
 
-    %form-group-textarea-label {
-        transition-duration: 0ms;
-    }
-
     @if $material-theme {
+        %form-group-textarea-label {
+            top: calc($input-top-padding - #{rem(1px)});
+            margin-block-end: auto;
+        }
+
+        %textarea-group--outlined {
+            %form-group-textarea-label {
+                top: calc($input-top-padding - #{rem(3px)});
+            }
+        }
+
+        %textarea-group--box {
+            %form-group-textarea-label {
+                top: calc($input-top-padding - #{rem(2px)});
+            }
+        }
+
         %textarea-group-label--focused {
             transform: translateY(0);
             top: calc(#{$input-top-padding} / 4);

package/lib/core/styles/components/overlay/_overlay-theme.scss

@@ -102,6 +102,12 @@
         // WARN: This is a workaround around a bug in Safari.
         position: absolute;
         visibility: hidden;
+        // width/height/min-width to 0 needed for bug #14303
+        width: 0;
+        min-width: 0;
+        height: 0;
+        // needed for bug #14302
+        padding: 0 !important;
         top: 0;
         left: 0;
         margin: -1px;

package/lib/core/styles/components/slider/_slider-theme.scss

@@ -237,7 +237,7 @@
         border-radius: border-radius(rem(32px));
 
         @if $variant == 'indigo-design' {
-            border-radius: initial;
+            border-radius: border-radius(rem(4px));
         }
     }
 
@@ -290,6 +290,14 @@
             top: 0;
             align-items: flex-end;
         }
+
+        @if $variant == 'indigo-design' {
+            bottom: rem(3px);
+
+            &%igx-slider__ticks--top {
+                top: rem(3px);
+            }
+        }
     }
 
     %igx-slider__ticks-group {
@@ -303,7 +311,7 @@
         }
 
         &:last-of-type {
-            margin-inline-start: rem(-1px);
+            margin-inline-end: rem(-1px);
         }
     }
 
@@ -330,6 +338,10 @@
     %igx-slider__ticks--tall {
         %igx-slider__ticks-label {
             top: calc(#{$tick-height--tall} + #{$tick-height});
+
+            @if $variant == 'indigo-design' {
+                top: calc(#{$tick-height--tall} + (#{$tick-height} / 2));
+            }
         }
     }
 
@@ -348,6 +360,10 @@
 
         %igx-slider__ticks-label {
             top: calc(#{$tick-height--tall} + #{$tick-height});
+
+            @if $variant == 'indigo-design' {
+                top: calc(#{$tick-height--tall} + (#{$tick-height} / 2));
+            }
         }
     }
 
@@ -535,6 +551,10 @@
         display: flex;
         top: calc(((#{$thumb-label-height}) + rem(20px)) * -1);
         height: $thumb-label-height;
+
+        @if $variant == 'indigo-design' {
+            top: calc(((#{$thumb-label-height}) + rem(18px)) * -1);
+        }
     }
 
     %igx-slider-thumb-label__container {
@@ -561,6 +581,11 @@
             border-inline-start: rem(10px) solid transparent;
             border-inline-end: rem(10px) solid transparent;
             border-top: rem(10px) solid var-get($theme, 'label-background-color');
+
+            @if $variant == 'indigo-design' {
+                top: rem(16px);
+                border-top: rem(12px) solid var-get($theme, 'label-background-color');
+            }
         }
     }
 

package/lib/core/styles/components/tree/_tree-theme.scss

@@ -363,6 +363,10 @@
     %node-spacer {
         --component-size: var(--tree-size);
         --spacer: #{sizable(#{map.get($node-indent, 'compact')}, #{map.get($node-indent, 'cosy')}, #{map.get($node-indent, 'comfortable')})};
+
+        @if $variant == 'indigo-design' {
+            --spacer: #{sizable(24px)};
+        }
         width: var(--spacer);
         display: inline-block;
     }

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

@@ -404,6 +404,11 @@ export declare class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfT
      * Function that is called when scrolling vertically
      */
     protected onScroll(event: any): void;
+    /**
+     * @hidden
+     * @internal
+     */
+    updateScroll(): void;
     protected updateSizes(): void;
     /**
      * @hidden

package/lib/slider/slider.component.d.ts

@@ -640,7 +640,7 @@ export declare class IgxSliderComponent implements ControlValueAccessor, EditorP
      */
     private normalizeByStep;
     private updateTrack;
-    private subscribeTo;
+    private subscribeToEvents;
     private unsubscriber;
     private hasValueChanged;
     private emitValueChange;

package/lib/slider/thumb/thumb-slider.component.d.ts

@@ -22,6 +22,7 @@ export declare class IgxSliderThumbComponent implements OnInit, OnDestroy {
     deactiveState: boolean;
     thumbValueChange: EventEmitter<number>;
     thumbChange: EventEmitter<any>;
+    thumbBlur: EventEmitter<void>;
     hoverChange: EventEmitter<boolean>;
     tabindex: number;
     zIndex: number;
@@ -73,7 +74,7 @@ export declare class IgxSliderThumbComponent implements OnInit, OnDestroy {
     private stepToProceed;
     private toggleThumbIndicators;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxSliderThumbComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxSliderThumbComponent, "igx-thumb", never, { "value": { "alias": "value"; "required": false; }; "continuous": { "alias": "continuous"; "required": false; }; "thumbLabelVisibilityDuration": { "alias": "thumbLabelVisibilityDuration"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "onPan": { "alias": "onPan"; "required": false; }; "stepDistance": { "alias": "stepDistance"; "required": false; }; "step": { "alias": "step"; "required": false; }; "templateRef": { "alias": "templateRef"; "required": false; }; "context": { "alias": "context"; "required": false; }; "type": { "alias": "type"; "required": false; }; "deactiveState": { "alias": "deactiveState"; "required": false; }; }, { "thumbValueChange": "thumbValueChange"; "thumbChange": "thumbChange"; "hoverChange": "hoverChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxSliderThumbComponent, "igx-thumb", never, { "value": { "alias": "value"; "required": false; }; "continuous": { "alias": "continuous"; "required": false; }; "thumbLabelVisibilityDuration": { "alias": "thumbLabelVisibilityDuration"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "onPan": { "alias": "onPan"; "required": false; }; "stepDistance": { "alias": "stepDistance"; "required": false; }; "step": { "alias": "step"; "required": false; }; "templateRef": { "alias": "templateRef"; "required": false; }; "context": { "alias": "context"; "required": false; }; "type": { "alias": "type"; "required": false; }; "deactiveState": { "alias": "deactiveState"; "required": false; }; }, { "thumbValueChange": "thumbValueChange"; "thumbChange": "thumbChange"; "thumbBlur": "thumbBlur"; "hoverChange": "hoverChange"; }, never, never, true, never>;
     static ngAcceptInputType_continuous: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_deactiveState: unknown;

package/migrations/migration-collection.json

@@ -186,6 +186,11 @@
             "version": "17.2.3",
             "description": "Updates Ignite UI for Angular from v17.2.2 to v17.2.3",
             "factory": "./update-17_2_3"
+        },
+        "migration-38": {
+            "version": "17.2.6",
+            "description": "Updates Ignite UI for Angular from v17.2.3 to v17.2.6",
+            "factory": "./update-17_2_6"
         }
     }
 }

package/migrations/update-17_2_6/changes/theme-changes.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$active-item-color",
+      "replaceWith": "$icon-selected-color",
+      "owner": "bottom-nav-theme",
+      "type": "property"
+    }
+  ]
+}

package/migrations/update-17_2_6/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from "@angular-devkit/schematics";
+declare const _default: () => Rule;
+export default _default;

package/migrations/update-17_2_6/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const UpdateChanges_1 = require("../common/UpdateChanges");
+const version = "17.2.6";
+exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
+    update.addValueTransform('vertical_to_orientation', (args) => {
+        args.bindingType = UpdateChanges_1.InputPropertyType.STRING;
+        switch (args.value) {
+            case 'true':
+                args.value = 'vertical';
+                break;
+            case 'false':
+                args.value = 'horizontal';
+                break;
+            default:
+                args.value += ` ? 'vertical' : 'horizontal' `;
+        }
+    });
+    update.applyChanges();
+});

package/package.json

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