igniteui-angular 20.1.6 → 20.1.8

package/index.d.ts

@@ -9319,9 +9319,10 @@ declare const IgxBaseButtonType: {
     readonly Contained: "contained";
     readonly Outlined: "outlined";
 };
-declare abstract class IgxButtonBaseDirective {
+declare abstract class IgxButtonBaseDirective implements AfterViewInit {
     element: ElementRef;
     private _platformUtil;
+    private _viewInit;
     /**
      * Emitted when the button is clicked.
      */
@@ -9372,6 +9373,7 @@ declare abstract class IgxButtonBaseDirective {
      */
     get disabledAttribute(): true;
     protected constructor(element: ElementRef);
+    ngAfterViewInit(): void;
     /**
      * @hidden
      * @internal
@@ -15110,6 +15112,17 @@ declare class IgxBadgeComponent {
      * ```
      */
     outlined: boolean;
+    /**
+     * Sets/gets whether the badge is displayed as a dot.
+     * When true, the badge will be rendered as a minimal 8px indicator without any content.
+     * Default value is `false`.
+     *
+     * @example
+     * ```html
+     * <igx-badge dot type="success"></igx-badge>
+     * ```
+     */
+    dot: boolean;
     /**
      * Defines a human-readable, accessor, author-localized description for
      * the `type` and the `icon` or `value` of the element.
@@ -15123,8 +15136,9 @@ declare class IgxBadgeComponent {
     get warningClass(): boolean;
     get errorClass(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxBadgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxBadgeComponent, "igx-badge", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxBadgeComponent, "igx-badge", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_outlined: unknown;
+    static ngAcceptInputType_dot: unknown;
 }
 
 /**
@@ -16215,6 +16229,7 @@ declare abstract class IgxCalendarViewDirective implements ControlValueAccessor
 declare class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #private;
     el: ElementRef;
+    private platform;
     /**
      * Sets/gets the `id` of the months view.
      * If not set, the `id` will have value `"igx-months-view-0"`.
@@ -16303,6 +16318,7 @@ declare class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
 declare class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #private;
     el: ElementRef;
+    private platform;
     /**
      * The default css class applied to the component.
      *
@@ -16404,6 +16420,7 @@ declare class KeyboardNavigationService {
     private ngZone;
     private keyHandlers;
     private eventUnsubscribeFn;
+    private platform;
     constructor(eventManager: EventManager, ngZone: NgZone);
     attachKeyboardHandlers(elementRef: ElementRef, context: any): this;
     detachKeyboardHandlers(): void;
@@ -34164,6 +34181,7 @@ declare abstract class IgxGridBaseDirective implements GridType, OnInit, DoCheck
      * @hidden @internal
      */
     repositionRowEditingOverlay(row: RowType): void;
+    protected viewDetachHandler(args: any): void;
     /**
      * @hidden @internal
      */
@@ -37298,6 +37316,10 @@ declare class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     protected onColumnsAddedOrRemoved(): void;
+    /**
+     * @hidden
+     */
+    protected onColumnsChanged(change: QueryList<IgxColumnComponent>): void;
     /**
      * @hidden @internal
      */

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

@@ -35,6 +35,10 @@
             @extend %igx-badge--error !optional;
         }
 
+        @include m(dot) {
+            @extend %igx-badge--dot !optional;
+        }
+
         @include m(outlined) {
             @extend %igx-badge--outlined !optional;
         }

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

@@ -6,12 +6,15 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin badge($theme) {
     @include css-vars($theme);
-
+    $theme-variant: map.get($theme, '_meta', 'variant');
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
-        --size: #{rem(22px)};
-        --_badge-size: var(--size);
+        @include sizable();
+
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+        --badge-size: var(--component-size);
+        --_badge-size: #{var-get($theme, 'size')};
 
         display: inline-flex;
         justify-content: center;
@@ -25,18 +28,18 @@
         overflow: hidden;
 
         igx-icon {
-            --size: var(--igx-icon-size, calc(var(--_badge-size) / 2));
+            --size: var(--igx-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
+            --component-size: var(--badge-size);
 
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            font-weight: 400;
             color: var-get($theme, 'icon-color');
         }
 
         @if $variant == 'indigo' {
             igx-icon {
-                $icon-size: rem(12px);
+                $icon-size: sizable(rem(8px), rem(10px), rem(12px));
 
                 --ig-icon-size: #{$icon-size};
                 --igx-icon-size: #{$icon-size};
@@ -45,7 +48,7 @@
     }
 
     %igx-badge--outlined {
-        box-shadow: inset 0 0 0 rem(if($variant != 'bootstrap', 2px, 1px)) var-get($theme, 'border-color');
+        box-shadow: 0 0 0 rem(2px) var-get($theme, 'border-color');
     }
 
     %igx-badge--square {
@@ -54,23 +57,57 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding-inline: pad-inline(rem(4px));
+        padding-inline: pad-inline(rem(4px), rem(6px), if($variant == 'indigo', rem(6px), rem(8px)));
     }
 
     %igx-badge--success {
-        background: color($color: 'success');
+        background: color($color: 'success', $variant: if($variant != 'material', if($variant == 'indigo', 700, 500), 900));
     }
 
     %igx-badge--info {
-        background: color($color: 'info');
+        background: color($color: 'info', $variant: if($variant != 'material', if($variant == 'fluent', 700, 500), 800));
     }
 
     %igx-badge--warn {
         background: color($color: 'warn');
+
+        @if $variant == 'indigo' and $theme-variant == 'light' {
+            color: color($color: 'gray', $variant: 900);
+
+            igx-icon {
+                color: color($color: 'gray', $variant: 900);
+            }
+        } @else if $variant == 'indigo' and $theme-variant == 'dark' {
+            color: color($color: 'gray', $variant: 50);
+
+            igx-icon {
+                color: color($color: 'gray', $variant: 50);
+            }
+        } @else {
+            color: contrast-color($color: 'warn', $variant: 500);
+
+            igx-icon {
+                color: contrast-color($color: 'warn', $variant: 500);
+            }
+        }
     }
 
     %igx-badge--error {
-        background: color($color: 'error');
+        background: color($color: 'error', $variant: if($variant == 'material', 700, 500));
+        color: contrast-color($color: 'error', $variant: if($variant == 'bootstrap', 100, 900));
+    }
+
+    %igx-badge--dot {
+        --_dot-size: #{var-get($theme, 'dot-size')};
+
+        min-width: var(--_dot-size);
+        min-height: var(--_dot-size);
+        padding: 0;
+
+        igx-icon,
+        > * {
+            display: none;
+        }
     }
 
     %igx-badge--hidden {
@@ -79,15 +116,28 @@
 }
 
 /// Adds typography styles for the igx-badge component.
-/// Uses the 'caption' category from the typographic scale.
+/// Uses 'caption' and 'body-2' categories from the typographic scale.
 /// @group typography
 /// @param {Map} $categories [(text: 'caption')] - The categories from the typographic scale used for type styles.
-@mixin badge-typography($categories: (text: 'caption')) {
+@mixin badge-typography($categories: (text: null), $theme: null) {
     $text: map.get($categories, 'text');
 
     %igx-badge-display {
-        @include type-style($text) {
-            margin: 0;
+        @if $text {
+            @include type-style($text);
+        } @else {
+            @if $theme == 'indigo' {
+                @include type-style('button', false) {
+                    font-size: sizable(rem(9px), rem(10px), var(--ig-button-font-size));
+                    line-height: sizable(rem(12px), rem(14px), var(--ig-button-line-height));
+                }
+            } @else {
+                font-size: sizable(var(--ig-caption-font-size), var(--ig-body-2-font-size), var(--ig-body-2-font-size));
+                font-weight: sizable(var(--ig-caption-font-weight), var(--ig-body-2-font-weight), var(--ig-body-2-font-weight));
+                line-height: sizable(var(--ig-caption-line-height), var(--ig-body-2-line-height), var(--ig-body-2-line-height));
+                letter-spacing: sizable(var(--ig-caption-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing));
+                text-transform: sizable(var(--ig-caption-text-transform), var(--ig-body-2-text-transform), var(--ig-body-2-text-transform));
+            }
         }
     }
 }

package/lib/core/styles/components/checkbox/_checkbox-component.scss

@@ -14,10 +14,22 @@
         @extend %cbx-display !optional;
 
         &:hover {
+            @include e(label) {
+                @extend %cbx-label--hover !optional;
+            }
+
+            @include e(label, $m: before) {
+                 @extend %cbx-label--hover !optional;
+            }
+
             @include e(ripple) {
                 @extend %cbx-ripple--hover !optional;
             }
 
+            @include e(composite) {
+                @extend %cbx-composite--hover !optional;
+            }
+
             @include e(composite-mark) {
                 @extend %cbx-composite-mark--fluent !optional;
             }
@@ -60,30 +72,10 @@
             @extend %cbx-ripple !optional;
         }
 
-        @include m(bootstrap) {
-            @include e(composite) {
-                &:hover {
-                    @extend %cbx-composite--hover !optional;
-                }
-            }
-        }
-
         @include m(indigo) {
-            @include e(composite) {
-                &:hover {
-                    @extend %cbx-composite--hover !optional;
-                }
-            }
-
             @include e(composite-mark) {
                 @extend %cbx-composite-mark-indigo !optional;
             }
-
-            @include e(label) {
-                &:hover {
-                    @extend %cbx-label--hover !optional;
-                }
-            }
         }
 
         @include m(invalid) {
@@ -99,6 +91,10 @@
                 @extend %cbx-label--invalid !optional;
             }
 
+            @include e(label, $m: before) {
+                @extend %cbx-label--invalid !optional;
+            }
+
             &:hover {
                 @include e(ripple) {
                     @extend %cbx-ripple--hover !optional;
@@ -112,6 +108,14 @@
                 @include e(composite-mark) {
                     @extend %cbx-composite-mark--invalid--fluent !optional;
                 }
+
+                @include e(label) {
+                    @extend %cbx-label--invalid !optional;
+                }
+
+                @include e(label, $m: before) {
+                    @extend %cbx-label--invalid !optional;
+                }
             }
 
             &:active {
@@ -183,6 +187,12 @@
             @include e(ripple) {
                 @extend %cbx-ripple--focused-invalid !optional;
             }
+
+            &:hover {
+                @include e(ripple) {
+                    @extend %cbx-ripple--hover-invalid !optional;
+                }
+            }
         }
 
         @include mx(indigo, focused, invalid) {
@@ -239,11 +249,19 @@
                 @include e(composite) {
                     @extend %cbx-composite--x--hover !optional;
                 }
+
+                @include e(composite-mark) {
+                    @extend %cbx-composite-mark--in--fluent !optional;
+                }
             }
         }
 
         @include mx(material, disabled, indeterminate) {
-            @extend %igx-checkbox--disabled-indeterminate-material !optional;
+            @extend %igx-checkbox--disabled-indeterminate !optional;
+        }
+
+        @include mx(bootstrap, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate !optional;
         }
 
         @include mx(fluent, disabled, indeterminate) {
@@ -251,7 +269,9 @@
         }
 
         @include mx(indigo, disabled, indeterminate) {
-            @extend %igx-checkbox--disabled-indeterminate-indigo !optional;
+            @include e(composite) {
+                @extend %igx-checkbox--disabled-indeterminate-indigo !optional;
+            }
         }
 
         @include mx(indigo, focused, indeterminate) {
@@ -324,6 +344,21 @@
                 @extend %cbx-ripple--focused !optional;
                 @extend %cbx-ripple--focused-checked !optional;
             }
+
+            &:hover {
+                @include e(ripple) {
+                    @extend %cbx-ripple--focused !optional;
+                    @extend %cbx-ripple--focused--hover-checked !optional;
+                }
+            }
+        }
+
+        @include mx(focused, invalid, checked) {
+            &:hover {
+                @include e(ripple) {
+                    @extend %cbx-ripple--hover-invalid !optional;
+                }
+            }
         }
 
         @include mx(focused, indeterminate) {

package/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -122,7 +122,9 @@
     }
 
     %cbx-composite--hover {
-        border-color: var-get($theme, 'empty-color-hover');
+        @if $variant == 'bootstrap' or $variant == 'indigo' {
+            border-color: var-get($theme, 'empty-color-hover');
+        }
     }
 
     %cbx-composite--x {
@@ -175,6 +177,7 @@
     %cbx-composite--x--disabled {
         @if $variant == 'material' or $variant == 'fluent' {
             background: var-get($theme, 'disabled-color');
+            border-color: var-get($theme, 'disabled-color');
         }
 
         @if $variant == 'indigo' or $variant == 'bootstrap' {
@@ -262,7 +265,7 @@
     }
 
     %igx-checkbox--disabled-indeterminate-indigo {
-        @extend %igx-checkbox--indeterminate-indigo;
+        @extend %cbx-composite--x--disabled;
 
         %cbx-composite-mark {
             rect {
@@ -291,6 +294,14 @@
                 z-index: 1;
             }
         }
+
+        &:hover {
+            %cbx-composite {
+                &::before {
+                    background: var-get($theme, 'fill-color-hover');
+                }
+            }
+        }
     }
 
     %igx-checkbox--disabled-indeterminate-fluent {
@@ -299,7 +310,7 @@
         }
 
         %cbx-composite--x--disabled {
-            background: transparent;
+            border-color: var-get($theme, 'disabled-color');
 
             &::before {
                 background: var-get($theme, 'disabled-color');
@@ -307,7 +318,7 @@
         }
     }
 
-    %igx-checkbox--disabled-indeterminate-material {
+    %igx-checkbox--disabled-indeterminate {
         %cbx-composite--x--disabled {
             border-color: var-get($theme, 'disabled-indeterminate-color');
             background: var-get($theme, 'disabled-indeterminate-color');
@@ -458,11 +469,11 @@
     }
 
     %cbx-ripple--hover-checked {
-        background: var-get($theme, 'fill-color');
+        background: var-get($theme, 'fill-color-hover');
     }
 
     %cbx-ripple--hover-invalid {
-        background: var-get($theme, 'error-color');
+        background: var-get($theme, 'error-color-hover');
     }
 
     %igx-checkbox--focused-indigo {
@@ -544,6 +555,10 @@
         background: var-get($theme, 'fill-color');
     }
 
+    %cbx-ripple--focused--hover-checked {
+        background: var-get($theme, 'fill-color-hover');
+    }
+
     %cbx-ripple--focused-invalid {
         background: var-get($theme, 'error-color');
     }

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

@@ -210,12 +210,24 @@
             color: var-get($theme, 'clear-button-foreground-focus');
             background: var-get($theme, 'clear-button-background-focus');
         }
+
+        &%form-group-bundle--border {
+            %igx-combo__toggle-button {
+                background: var-get($theme, 'toggle-button-background-focus--border');
+            }
+        }
     }
 
     @if $variant == 'indigo' {
         %form-group-bundle:not(%form-group-bundle--disabled):hover {
             %igx-combo__toggle-button {
                 color: var-get($theme, 'toggle-button-foreground-focus');
+                background: var-get($theme, 'toggle-button-background-focus');
+            }
+
+            %igx-combo__clear-button {
+                color: var-get($theme, 'clear-button-foreground-focus');
+                background: var-get($theme, 'clear-button-background-focus');
             }
         }
     }
@@ -224,6 +236,14 @@
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-filled');
         }
+
+        @if $variant == 'material' {
+            &.igx-input-group--focused {
+                %igx-combo__toggle-button {
+                    color: var-get($theme, 'toggle-button-foreground-filled');
+                }
+            }
+        }
     }
 
     .igx-input-group--focused {
@@ -254,14 +274,6 @@
         }
     }
 
-    //.igx-input-group:not(.igx-input-group--box) {
-    //    %igx-combo__toggle-button:focus {
-    //        @if $variant == 'material' {
-    //            background: var-get($theme, 'toggle-button-background-focus--border');
-    //        }
-    //    }
-    //}
-
     .igx-input-group--disabled {
         %igx-combo__toggle-button {
             background: var-get($theme, 'toggle-button-background-disabled') !important;
@@ -274,12 +286,4 @@
             }
         }
     }
-
-    %form-group-bundle {
-        &:hover {
-            %igx-combo__clear-button {
-                color: inherit;
-            }
-        }
-    }
 }

package/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -38,6 +38,11 @@
             igx-input-group {
                 --ig-size: 1;
             }
+
+            .igx-icon-button,
+            igc-icon-button {
+                --ig-size: 2;
+            }
         }
 
         @if $variant == 'bootstrap' {
@@ -114,30 +119,27 @@
 
         igx-icon,
         igc-icon {
-            --component-size: 3;
+            --component-size: #{if($variant == 'indigo', 2, 3)};
 
             cursor: pointer;
             user-select: none;
             transition: color .15s $out-quad;
+
+            @if $variant == 'indigo' {
+                width: auto;
+                height: auto;
+                padding: rem(6px);
+            }
         }
 
-        >igx-icon,
-        >igc-icon {
+        > igx-icon,
+        > igc-icon {
             color: var-get($theme, 'idle-icon-color');
 
             &:hover {
                 color: var-get($theme, 'hover-icon-color');
             }
         }
-
-        @if $variant == 'indigo' {
-            igx-icon,
-            igc-icon {
-                --component-size: 2;
-
-                margin-inline: rem(6px);
-            }
-        }
     }
 
     igx-navbar-action,

package/lib/core/styles/components/select/_select-theme.scss

@@ -55,7 +55,7 @@
 
     .igx-input-group.igx-input-group--disabled.igx-input-group--filled,
     .igx-input-group.igx-input-group--disabled {
-        %igx-select__toggle-button {
+        %form-group-bundle %igx-select__toggle-button {
             background: var-get($theme, 'toggle-button-background-disabled');
             color: var-get($theme, 'toggle-button-foreground-disabled');
         }

package/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -23,21 +23,6 @@
         'indigo': rem(16px),
     ), $variant);
 
-    .igx-input-group {
-        display: flex;
-        flex-direction: column;
-
-        @if $variant == 'indigo' or $variant == 'bootstrap' {
-            [igxLabel] {
-                margin-block-end: rem(4px);
-            }
-        } @else if $variant == 'fluent' {
-            [igxLabel] {
-                margin-block-end: rem(5px);
-            }
-        }
-    }
-
     %time-picker-display {
         @include sizable();
 

package/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -23,7 +23,7 @@
         gap: rem(8px);
         min-height: rem(24px);
         min-width: rem(24px);
-        max-width: 200px;
+        max-width: rem(200px);
         width: fit-content;
 
         igx-icon {
@@ -34,6 +34,10 @@
             display: flex;
             cursor: default;
         }
+
+        &:not([data-default]) {
+            max-width: initial;
+        }
     }
 
     %arrow--top {

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

@@ -36,7 +36,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
-    @include badge-typography();
+    @include badge-typography($theme: 'bootstrap');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();

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

@@ -35,7 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
-    @include badge-typography();
+    @include badge-typography($theme: 'fluent');
     @include banner-typography($categories: (
         message: 'caption'
     ));

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

@@ -35,9 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography($type-scale) {
-    @include badge-typography($categories: (
-        text: 'button',
-    ));
+    @include badge-typography($theme: 'indigo');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();

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

@@ -35,7 +35,7 @@
 @use '../components/input/file-input-theme' as *;
 
 @mixin typography() {
-    @include badge-typography();
+    @include badge-typography($theme: 'material');
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();