igniteui-angular 17.2.1 → 17.2.3

package/lib/core/styles/components/switch/_switch-theme.scss

@@ -24,6 +24,7 @@
 /// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled.
 /// @param {Color} $track-on-disabled-color [null] - The color of the track when the switch is on and disabled.
 /// @param {Color} $label-color [null] - The color of the switch label
+/// @param {Color} $label-hover-color [null] - The color of the switch label on hover.
 /// @param {Color} $label-disabled-color [null] - The color of the switch label when the switch is disabled
 /// @param {box-shadow} $resting-shadow [null] - The shadow used for the thumb in resting state of the switch.
 /// @param {box-shadow} $hover-shadow [null] - The shadow used for the thumb in hover state of the switch.
@@ -66,6 +67,7 @@
     $thumb-on-disabled-color: null,
 
     $label-color: null,
+    $label-hover-color: null,
     $label-disabled-color: null,
     $label-invalid-color: null,
 
@@ -144,6 +146,7 @@
         thumb-on-disabled-color: $thumb-on-disabled-color,
 
         label-color: $label-color,
+        label-hover-color: $label-hover-color,
         label-disabled-color: $label-disabled-color,
         label-invalid-color: $label-invalid-color,
 
@@ -189,7 +192,7 @@
         material: 36px,
         fluent: 40px,
         bootstrap: 32px,
-        indigo-design: 34px
+        indigo-design: 32px
     ), $variant);
 
     $switch-height: map.get((
@@ -297,11 +300,9 @@
     }
 
     %switch-composite--hover {
-        @if $variant == 'material' or  $variant == 'fluent' {
-            border-color: var-get($theme, 'border-hover-color');
-        }
+        border-color: var-get($theme, 'border-hover-color');
 
-        @if $variant == 'fluent' {
+        @if $variant == 'fluent' or $variant == 'indigo-design' {
             %switch-composite-thumb {
                 background: var-get($theme, 'border-hover-color');
             }
@@ -337,13 +338,10 @@
     }
 
     %switch-composite--x--hover {
-        @if $variant != 'bootstrap' {
-            border-color: var-get($theme, 'border-on-hover-color');
-        }
-
-        @if $variant == 'fluent' {
-            background: var-get($theme, 'track-on-hover-color');
+        background: var-get($theme, 'track-on-hover-color');
+        border-color: var-get($theme, 'border-on-hover-color');
 
+        @if $variant == 'fluent' or $variant == 'indigo-design' {
             %switch-composite-thumb {
                 background: var-get($theme, 'thumb-on-color');
             }
@@ -491,14 +489,12 @@
     }
 
     %igx-switch--disabled-checked {
-        @if $variant != 'indigo-design' {
-            %switch-composite--x {
-                background: var-get($theme, 'track-on-disabled-color');
-            }
+        %switch-composite--x {
+            background: var-get($theme, 'track-on-disabled-color');
+        }
 
-            %switch-composite-thumb--x {
-                background: var-get($theme, 'thumb-on-disabled-color');
-            }
+        %switch-composite-thumb--x {
+            background: var-get($theme, 'thumb-on-disabled-color');
         }
 
         @if $variant == 'bootstrap' or $variant == 'fluent'{
@@ -506,6 +502,12 @@
                 border-color: var-get($theme, 'track-on-disabled-color');
             }
         }
+
+        @if $variant == 'indigo-design' {
+            %switch-composite--x {
+                border-color: transparent;
+            }
+        }
     }
 
     %switch-ripple--focused {
@@ -554,6 +556,10 @@
         margin-inline-end: $label-margin;
     }
 
+    %switch-label--hover {
+        color: var-get($theme, 'label-hover-color');
+    }
+
     %switch-label--invalid {
         color: var-get($theme, 'label-invalid-color');
     }

package/lib/core/styles/typography/_indigo.scss

@@ -81,8 +81,13 @@
         title: 'subtitle-1',
         subtitle: 'body-2'
     ));
-    @include navbar-typography();
-    @include navdrawer-typography();
+    @include navbar-typography($categories: (
+        title: 'h5',
+    ));
+    @include navdrawer-typography($categories: (
+        item: 'subtitle-2',
+        header: 'overline'
+    ));
     @include radio-typography($categories: (
         label: 'body-2'
     ));
@@ -91,7 +96,9 @@
         thumb-label: 'subtitle-2',
     ));
     @include snackbar-typography();
-    @include switch-typography();
+    @include switch-typography($categories: (
+        label: 'body-2'
+    ));
     @include tabs-typography();
     @include time-picker-typography($categories: (
         header-time-period: 'subtitle-1',

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

@@ -501,9 +501,9 @@ export declare class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfT
      * @hidden
      */
     protected getIndexAt(left: any, set: any): number;
-    protected _recalcScrollBarSize(): void;
+    protected _recalcScrollBarSize(containerSizeInfo?: any): void;
     protected _calcSize(): number;
-    protected _recalcOnContainerChange(): void;
+    protected _recalcOnContainerChange(containerSizeInfo?: any): void;
     /**
      * @hidden
      * Removes an element from the embedded views and updates chunkSize.

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

@@ -2387,7 +2387,7 @@ export declare abstract class IgxGridBaseDirective extends DisplayDensityBase im
     /**
      * @hidden @internal
      */
-    get isHorizontalScrollHidden(): boolean;
+    isHorizontalScrollHidden: boolean;
     /**
      * @hidden @internal
      * Gets the header cell inner width for auto-sizing.

package/lib/navigation-drawer/navigation-drawer.component.d.ts

@@ -110,7 +110,7 @@ export declare class IgxNavigationDrawerComponent implements IToggleView, OnInit
      */
     pin: boolean;
     /**
-     * Width of the drawer in its open state. Defaults to "280px".
+     * Width of the drawer in its open state.
      *
      * ```typescript
      * // get
@@ -122,7 +122,7 @@ export declare class IgxNavigationDrawerComponent implements IToggleView, OnInit
      * <igx-nav-drawer [width]="'228px'"></igx-nav-drawer>
      * ```
      */
-    width: string;
+    width: any;
     /**
      * Enables/disables the animation, when toggling the drawer. Set to `false` by default.
      * ````html
@@ -131,7 +131,7 @@ export declare class IgxNavigationDrawerComponent implements IToggleView, OnInit
      */
     disableAnimation: boolean;
     /**
-     * Width of the drawer in its mini state. Defaults to 68px.
+     * Width of the drawer in its mini state.
      *
      * ```typescript
      * // get
@@ -143,7 +143,7 @@ export declare class IgxNavigationDrawerComponent implements IToggleView, OnInit
      * <igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>
      * ```
      */
-    miniWidth: string;
+    miniWidth: any;
     /**
      * Pinned state change output for two-way binding.
      *
@@ -235,7 +235,7 @@ export declare class IgxNavigationDrawerComponent implements IToggleView, OnInit
     /**
      * @hidden
      */
-    get flexWidth(): string;
+    get flexWidth(): any;
     /** @hidden */
     get isPinnedRight(): "1" | "0";
     private _gesturesAttached;

package/migrations/migration-collection.json

@@ -176,6 +176,16 @@
             "version": "17.2.0",
             "description": "Updates Ignite UI for Angular from v17.1.x to v17.2.0",
             "factory": "./update-17_2_0"
+        },
+        "migration-36": {
+            "version": "17.2.2",
+            "description": "Updates Ignite UI for Angular from v17.2.0 to v17.2.2",
+            "factory": "./update-17_2_2"
+        },
+        "migration-37": {
+            "version": "17.2.3",
+            "description": "Updates Ignite UI for Angular from v17.2.2 to v17.2.3",
+            "factory": "./update-17_2_3"
         }
     }
 }

package/migrations/update-17_2_0/changes/inputs.json

@@ -18,38 +18,6 @@
                 "type": "component"
             }
         },
-        {
-            "name": "color",
-            "remove": true,
-            "owner": {
-                "selector": "igxButton",
-                "type": "directive"
-            }
-        },
-        {
-            "name": "background",
-            "remove": true,
-            "owner": {
-                "selector": "igxButton",
-                "type": "directive"
-            }
-        },
-        {
-            "name": "igxButtonColor",
-            "remove": true,
-            "owner": {
-                "selector": "igxButton",
-                "type": "directive"
-            }
-        },
-        {
-            "name": "igxButtonBackground",
-            "remove": true,
-            "owner": {
-                "selector": "igxButton",
-                "type": "directive"
-            }
-        },
         {
             "name": "type",
             "remove": true,
@@ -58,14 +26,6 @@
                 "type": "component"
             }
         },
-        {
-            "name": "reverse",
-            "remove": true,
-            "owner": {
-                "selector": "igx-card",
-                "type": "component"
-            }
-        },
         {
             "name": "leftButtonColor",
             "remove": true,

package/migrations/update-17_2_2/changes/inputs.json

@@ -0,0 +1,29 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "igxButtonColor",
+            "replaceWith": "style.--foreground",
+            "owner": {
+                "selector": "igxButton",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "igxButtonBackground",
+            "replaceWith": "style.--background",
+            "owner": {
+                "selector": "igxButton",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "reverse",
+            "remove": true,
+            "owner": {
+                "selector": "igx-card-actions",
+                "type": "component"
+            }
+        }
+    ]
+}

package/migrations/update-17_2_2/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_2/index.js

@@ -0,0 +1,18 @@
+"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.2";
+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.applyChanges();
+});

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

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

package/migrations/update-17_2_3/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_3/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.3";
+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.1",
+  "version": "17.2.3",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -74,7 +74,7 @@
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.0",
-    "igniteui-theming": "^6.2.0",
+    "igniteui-theming": "^6.3.0",
     "@igniteui/material-icons-extended": "^3.0.0"
   },
   "peerDependencies": {