igniteui-angular 18.2.3 → 18.2.4

package/lib/avatar/avatar.component.d.ts

@@ -148,7 +148,8 @@ export declare class IgxAvatarComponent implements OnInit {
      * ```
      * @igxFriendlyName Image URL
      */
-    src: string;
+    set src(value: string);
+    get src(): string;
     /** @hidden @internal */
     protected defaultTemplate: TemplateRef<any>;
     /** @hidden @internal */
@@ -162,6 +163,7 @@ export declare class IgxAvatarComponent implements OnInit {
      * @internal
      */
     private _size;
+    private _src;
     /**
      * Returns the size of the avatar.
      *

package/lib/checkbox/checkbox.component.d.ts

@@ -223,6 +223,42 @@ export declare class IgxCheckboxComponent implements EditorProvider, AfterViewIn
      * ```
      */
     cssClass: string;
+    /**
+     * Returns if the component is of type `material`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.material;
+     * ```
+     */
+    protected get material(): boolean;
+    /**
+     * Returns if the component is of type `indigo`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.indigo;
+     * ```
+     */
+    protected get indigo(): boolean;
+    /**
+     * Returns if the component is of type `bootstrap`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.bootstrap;
+     * ```
+     */
+    protected get bootstrap(): boolean;
+    /**
+     * Returns if the component is of type `fluent`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.fluent;
+     * ```
+     */
+    protected get fluent(): boolean;
     /**
      * Sets/gets whether the checkbox component is on focus.
      * Default value is `false`.
@@ -337,12 +373,16 @@ export declare class IgxCheckboxComponent implements EditorProvider, AfterViewIn
      * @hidden
      * @internal
      */
-    private _required;
+    protected theme: IgxTheme;
     /**
      * @hidden
      * @internal
      */
-    protected theme: IgxTheme;
+    private _required;
+    private elRef;
+    private _theme$;
+    private _subscription;
+    private destroyRef;
     constructor(cdr: ChangeDetectorRef, renderer: Renderer2, themeService: ThemeService, ngControl: NgControl);
     /**
      * @hidden

package/lib/core/styles/components/action-strip/_action-strip-component.scss

@@ -10,7 +10,7 @@
         @include register-component(
             $name: string.slice($this, 2, -1),
             $deps: (
-                igx-button,
+                igx-icon-button,
                 igx-drop-down,
                 igx-icon,
             )

package/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -58,6 +58,7 @@
         icon-color: $icon-color,
         delete-action: $delete-action,
         actions-border-radius: $actions-border-radius,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),

package/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -54,6 +54,7 @@
         icon-color: $icon-color,
         border-radius: $border-radius,
         size: $size,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),

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

@@ -73,6 +73,7 @@
         border-radius: $border-radius,
         background-color: $background-color,
         shadow: $shadow,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
         )),

package/lib/core/styles/components/banner/_banner-theme.scss

@@ -57,6 +57,7 @@
         banner-border-color: $banner-border-color,
         banner-illustration-color: $banner-illustration-color,
         border-radius: $border-radius,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),

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

@@ -107,6 +107,7 @@
         label-disabled-color: $label-disabled-color,
         border-color: $border-color,
         shadow: $shadow,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
             theme-variant: map.get($schema, '_meta', 'variant')

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

@@ -244,6 +244,7 @@
                 disabled-icon-color: $disabled-icon-color,
                 disabled-border-color: $disabled-border-color,
                 size: $size,
+                theme: map.get($schema, '_meta', 'theme'),
             ))
         ));
     }

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

@@ -208,6 +208,7 @@
         shadow: $shadow,
         idle-shadow-color: $idle-shadow-color,
         selected-shadow-color: $selected-shadow-color,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),

package/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -693,6 +693,7 @@
         actions-divider-color: $actions-divider-color,
         size: $size,
         inner-size: $inner-size,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),

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

@@ -99,6 +99,7 @@
         actions-text-color: $actions-text-color,
         resting-shadow: $resting-shadow,
         hover-shadow: $hover-shadow,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),

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

@@ -123,6 +123,7 @@
         indicator-active-dot-color: $indicator-active-dot-color,
         indicator-active-border-color: $indicator-active-border-color,
         indicator-active-hover-dot-color: $indicator-active-hover-dot-color,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),
@@ -561,17 +562,17 @@
                 transform: rotate(90deg);
             }
         }
-    
+
         %igx-carousel-arrow--prev {
             inset-block-start: 0;
             margin-block-start: rem(16px);
         }
-    
+
         %igx-carousel-arrow--next {
             inset-block-end: 0;
             margin-block-end: rem(16px);
         }
-    
+
         %igx-carousel-indicators {
             inset-inline-end: 0;
             inset-inline-start: unset;
@@ -601,12 +602,12 @@
                 margin-inline-end: rem(16px);
                 padding: rem(6px);
             }
-        
+
             %igx-carousel-label-indicator {
                 padding: rem(4px) rem(6px);
                 margin-inline-end: rem(16px);
             }
-        
+
             %igx-carousel-indicators--top {
                 margin-inline-start: rem(16px);
             }

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

@@ -18,17 +18,9 @@
                 @extend %cbx-ripple--hover !optional;
             }
 
-            @include e(composite) {
-                @extend %cbx-composite--hover !optional;
-            }
-
             @include e(composite-mark) {
                 @extend %cbx-composite-mark--fluent !optional;
             }
-
-            @include e(label) {
-                @extend %cbx-label--hover !optional;
-            }
         }
 
         &:active {
@@ -68,6 +60,32 @@
             @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) {
             @include e(composite) {
                 @extend %cbx-composite--invalid !optional;
@@ -127,26 +145,54 @@
             }
 
             &:hover {
-                @extend %igx-checkbox--focused-hovered !optional;
-                
                 @include e(ripple) {
                     @extend %cbx-ripple--focused !optional;
                 }
             }
         }
 
+        @include mx(indigo, focused) {
+            @extend %igx-checkbox--focused-indigo !optional;
+        }
+
+        @include mx(fluent, focused) {
+            @extend %igx-checkbox--focused-fluent !optional;
+        }
+
+        @include mx(bootstrap, focused) {
+            @extend %igx-checkbox--focused-bootstrap !optional;
+
+            &:hover {
+                @extend %igx-checkbox--focused-hovered !optional;
+            }
+        }
+
+        @include mx(indigo, focused, checked) {
+            @extend %igx-checkbox--focused-checked-indigo !optional;
+        }
+
+        @include mx(bootstrap, focused, checked) {
+            @extend %igx-checkbox--focused-checked-bootstrap !optional;
+        }
+
         @include mx(focused, checked) {
             @extend %igx-checkbox--focused-checked !optional;
         }
 
         @include mx(focused, invalid) {
-            @extend %igx-checkbox--focused-invalid !optional;
-
             @include e(ripple) {
                 @extend %cbx-ripple--focused-invalid !optional;
             }
         }
 
+        @include mx(indigo, focused, invalid) {
+            @extend %igx-checkbox--focused-invalid-indigo !optional;
+        }
+
+        @include mx(bootstrap, focused, invalid) {
+            @extend %igx-checkbox--focused-invalid-bootstrap !optional;
+        }
+
         @include m(indeterminate) {
             @extend %igx-checkbox--indeterminate !optional;
 
@@ -178,6 +224,18 @@
             }
         }
 
+        @include mx(indigo, indeterminate) {
+            @extend %igx-checkbox--indeterminate-indigo !optional;
+        }
+
+        @include mx(fluent, indeterminate) {
+            @extend %igx-checkbox--indeterminate-fluent !optional;
+        }
+
+        @include mx(material, indeterminate) {
+            @extend %igx-checkbox--indeterminate-material !optional;
+        }
+
         @include mx(invalid, indeterminate) {
             @extend %igx-checkbox--indeterminate--invalid !optional;
 
@@ -188,8 +246,12 @@
             }
         }
 
-        @include mx(focused, indeterminate) {
-            @extend %igx-checkbox--focused-checked !optional;
+        @include mx(indigo, focused, indeterminate) {
+            @extend %igx-checkbox--focused-checked-indigo !optional;
+        }
+
+        @include mx(bootstrap, focused, indeterminate) {
+            @extend %igx-checkbox--focused-checked-bootstrap !optional;
         }
 
         @include m(checked) {

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

@@ -90,6 +90,7 @@
         focus-outline-color: $focus-outline-color,
         error-color: $error-color,
         error-color-hover: $error-color-hover,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
             theme-variant: map.get($schema, '_meta', 'variant')
@@ -151,9 +152,9 @@
     ), $variant);
 
     $mark-offset: map.get((
-        'material': .5px,
+        'material': 0,
         'fluent': -1px,
-        'bootstrap': .5px,
+        'bootstrap': 1px,
         'indigo': 1px,
     ), $variant);
 
@@ -222,9 +223,7 @@
     }
 
     %cbx-composite--hover {
-        @if $variant == 'indigo' or $variant == 'bootstrap' {
-            border-color: var-get($theme, 'empty-color-hover');
-        }
+        border-color: var-get($theme, 'empty-color-hover');
     }
 
     %cbx-composite--x {
@@ -302,30 +301,30 @@
         fill: none;
         opacity: 0;
         z-index: 1;
+    }
 
-        @if $variant == 'material' {
-            inset-inline-start: -.5px;
-        }
+    %cbx-composite-mark-material {
+        inset-inline-start: -.5px;
+    }
 
-        @if $variant == 'indigo' {
-            stroke: unset;
-            stroke-linecap: unset;
-            stroke-width: unset;
-            stroke-dasharray: unset;
-            stroke-dashoffset: unset;
-            fill: var-get($theme, 'tick-color');
-            transition: none !important;
+    %cbx-composite-mark-indigo {
+        stroke: unset;
+        stroke-linecap: unset;
+        stroke-width: unset;
+        stroke-dasharray: unset;
+        stroke-dashoffset: unset;
+        fill: var-get($theme, 'tick-color');
+        transition: none !important;
 
-            rect {
-                fill: none;
-            }
+        rect {
+            fill: none;
         }
     }
 
     %igx-checkbox--indeterminate {
         %cbx-composite-mark {
             top: $mark-offset;
-            inset-inline-start: $mark-offset;
+            margin-inline-start: $mark-offset;
         }
 
         &:hover {
@@ -343,55 +342,55 @@
                 }
             }
         }
+    }
 
-        @if $variant == 'material' {
-            %cbx-composite--x--disabled {
-                border-color: var-get($theme, 'disabled-indeterminate-color');
-                background: var-get($theme, 'disabled-indeterminate-color');
+    %igx-checkbox--indeterminate-indigo {
+        %cbx-composite-mark {
+            fill: none;
+            stroke-dashoffset: unset !important;
+            transform: none !important;
+
+            rect {
+                fill: var-get($theme, 'tick-color');
+                opacity: 1;
             }
         }
+    }
 
-        @if $variant == 'fluent' {
-            %cbx-composite-mark {
-                stroke: transparent;
-            }
+    %igx-checkbox--indeterminate-fluent {
+        %cbx-composite-mark {
+            stroke: transparent;
+        }
 
-            %cbx-composite {
-                background: transparent;
+        %cbx-composite {
+            background: transparent;
 
-                &::before {
-                    content: '';
-                    position: absolute;
-                    top: calc($size / 2 - rem(6px));
-                    inset-inline-start: calc($size / 2 - rem(6px));
-                    width: rem(10px);
-                    height: rem(10px);
-                    border-radius: border-radius(rem(2px));
-                    background: var-get($theme, 'fill-color');
-                    z-index: 1;
-                }
+            &::before {
+                content: '';
+                position: absolute;
+                top: calc($size / 2 - rem(6px));
+                inset-inline-start: calc($size / 2 - rem(6px));
+                width: rem(10px);
+                height: rem(10px);
+                border-radius: border-radius(rem(2px));
+                background: var-get($theme, 'fill-color');
+                z-index: 1;
             }
+        }
 
-            %cbx-composite--x--disabled {
-                background: transparent;
+        %cbx-composite--x--disabled {
+            background: transparent;
 
-                &::before {
-                    background: var-get($theme, 'disabled-color');
-                }
+            &::before {
+                background: var-get($theme, 'disabled-color');
             }
         }
+    }
 
-        @if $variant == 'indigo' {
-            %cbx-composite-mark {
-                fill: none;
-                stroke-dashoffset: unset !important;
-                transform: none !important;
-
-                rect {
-                    fill: var-get($theme, 'tick-color');
-                    opacity: 1;
-                }
-            }
+    %igx-checkbox--indeterminate-material {
+        %cbx-composite--x--disabled {
+            border-color: var-get($theme, 'disabled-indeterminate-color');
+            background: var-get($theme, 'disabled-indeterminate-color');
         }
     }
 
@@ -488,9 +487,7 @@
     }
 
     %cbx-label--hover {
-        @if $variant == 'indigo' {
-            color: var-get($theme, 'label-color-hover');
-        }
+        color: var-get($theme, 'label-color-hover');
     }
 
     %cbx-label-pos--before,
@@ -549,75 +546,67 @@
         background: var-get($theme, 'error-color');
     }
 
-    %igx-checkbox--focused {
-        @if $variant == 'fluent' {
-            position: relative;
-            $focus-outline-offset: rem(2px);
-
-            &::after {
-                content: '';
-                position: absolute;
-                inset: -$focus-outline-offset;
-                box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color');
-            }
+    %igx-checkbox--focused-indigo {
+        %cbx-composite {
+            border-radius: var-get($theme, 'border-radius');
+            box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
         }
+    }
 
-        @if $variant == 'bootstrap' {
-            %cbx-composite {
-                border-radius: var-get($theme, 'border-radius');
-                border-color: color($color: 'primary', $variant: 200);
-                box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
-            }
+    %igx-checkbox--focused-fluent {
+        position: relative;
+        $focus-outline-offset: rem(2px);
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset: -$focus-outline-offset;
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color');
         }
+    }
 
-        @if $variant == 'indigo' {
-            %cbx-composite {
-                border-radius: var-get($theme, 'border-radius');
-                box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
-            }
+    %igx-checkbox--focused-bootstrap {
+        %cbx-composite {
+            border-radius: var-get($theme, 'border-radius');
+            border-color: color($color: 'primary', $variant: 200);
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
         }
     }
 
     %igx-checkbox--focused-hovered {
-        @if $variant == 'bootstrap' {
-            %cbx-composite {
-                border-color: color($color: 'primary', $variant: 300);
-            }
+        %cbx-composite {
+            border-color: color($color: 'primary', $variant: 300);
         }
     }
 
-    %igx-checkbox--focused-checked {
-        @if $variant == 'indigo' {
-            %cbx-composite {
-                border-radius: var-get($theme, 'border-radius');
-                box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused');
-            }
+    %igx-checkbox--focused-checked-indigo {
+        %cbx-composite {
+            border-radius: var-get($theme, 'border-radius');
+            box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused');
         }
+    }
 
-        @if $variant == 'bootstrap' {
-            %cbx-composite {
-                border-color: transparent;
-            }
+    %igx-checkbox--focused-checked-bootstrap {
+        %cbx-composite {
+            border-color: transparent;
         }
     }
 
-    %igx-checkbox--focused-invalid {
-        @if $variant == 'bootstrap' {
-            %cbx-composite {
-                border-color: var-get($theme, 'error-color');
-                box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color-error');
-            }
+    %igx-checkbox--focused-invalid-indigo {
+        %cbx-composite {
+            box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
+        }
+    }
 
-            &:hover {
-                %cbx-composite {
-                    border-color: var-get($theme, 'error-color-hover');
-                }
-            }
+    %igx-checkbox--focused-invalid-bootstrap {
+        %cbx-composite {
+            border-color: var-get($theme, 'error-color');
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color-error');
         }
 
-        @if $variant == 'indigo' {
+        &:hover {
             %cbx-composite {
-                box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
+                border-color: var-get($theme, 'error-color-hover');
             }
         }
     }

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

@@ -242,6 +242,7 @@
         remove-icon-color-focus: $remove-icon-color-focus,
         focus-selected-outline-color: $focus-selected-outline-color,
         focus-outline-color: $focus-outline-color,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
             theme-variant: map.get($schema, '_meta', 'variant')

package/lib/core/styles/components/column-actions/_column-actions-theme.scss

@@ -50,6 +50,7 @@
         elevations: $elevations,
         title-color: $title-color,
         background-color: $background-color,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
         )),