igniteui-angular 19.1.0-rc.0 → 19.1.1

package/lib/checkbox/public_api.d.ts

@@ -1,2 +1,2 @@
-export { type LabelPosition, IChangeCheckboxEventArgs } from "./checkbox-base.directive";
+export { LabelPosition, IChangeCheckboxEventArgs } from "./checkbox-base.directive";
 export * from "./checkbox.component";

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

@@ -261,7 +261,6 @@
         }
     }
 
-    %form-group-bundle:not(%form-group-bundle--disabled):hover,
     %form-group-bundle:not(%form-group-bundle--disabled):focus-within {
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-focus');
@@ -274,6 +273,14 @@
         }
     }
 
+    @if $variant == 'indigo' {
+        %form-group-bundle:not(%form-group-bundle--disabled):hover {
+            %igx-combo__toggle-button {
+                color: var-get($theme, 'toggle-button-foreground-focus');
+            }
+        }
+    }
+
     .igx-input-group--filled {
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-filled');
@@ -293,8 +300,10 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        %igx-combo__toggle-button {
-            background: var-get($theme, 'toggle-button-background-focus--border');
+        @if $variant != 'fluent' {
+            %igx-combo__toggle-button {
+                background: var-get($theme, 'toggle-button-background-focus--border');
+            }
         }
     }
 
@@ -310,4 +319,12 @@
             }
         }
     }
+
+    %form-group-bundle {
+        &:hover {
+            %igx-combo__clear-button {
+                color: inherit;
+            }
+        }
+    }
 }

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

@@ -1791,8 +1791,8 @@
     %grid-cell--active {
         box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'cell-active-border-color');
 
-        %igx-grid__filtering-cell,
-        %grid-cell-header {
+        > %igx-grid__filtering-cell,
+        > %grid-cell-header {
             border-inline-end-color: var-get($theme, 'cell-active-border-color');
             border-bottom-color: var-get($theme, 'cell-active-border-color');
         }

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

@@ -244,6 +244,24 @@
             }
         }
 
+        @include m(warning) {
+            @include e(label) {
+                @extend %form-group-label--warning !optional;
+            }
+
+            @include e(line) {
+                @extend %form-group-line--warning !optional;
+            }
+
+            @include e(hint) {
+                @extend %form-group-helper--warning !optional;
+            }
+
+            @include e(bundle) {
+                @extend %form-group-bundle--warning !optional;
+            }
+        }
+
         @include m(invalid) {
             @include e(label) {
                 @extend %form-group-label--error !optional;

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

@@ -512,6 +512,7 @@
     }
 
     %form-group-display--disabled {
+        pointer-events: none;
         user-select: none;
         color: var-get($theme, 'disabled-text-color') !important;
 
@@ -613,6 +614,13 @@
         caret-color: initial;
     }
 
+    %form-group-bundle--warning {
+        &::after {
+            border-block-end-color: var-get($theme, 'warning-secondary-color');
+        }
+        caret-color: initial;
+    }
+
     %form-group-bundle--error {
         &::after {
             border-block-end-color: var-get($theme, 'error-secondary-color');
@@ -803,6 +811,25 @@
         &::after {
             display: none;
         }
+
+        &:hover {
+            %form-group-bundle-start {
+                border-color: var-get($theme, 'hover-border-color');
+            }
+    
+            %igx-input-group__filler {
+                border-color: var-get($theme, 'hover-border-color');
+            }
+    
+            %igx-input-group__notch {
+                border-block-start-color: var-get($theme, 'hover-border-color');
+                border-block-end-color: var-get($theme, 'hover-border-color');
+            }
+    
+            %form-group-bundle-end {
+                border-color: var-get($theme, 'hover-border-color');
+            }
+        }
     }
 
     %form-group-bundle-border--disabled {
@@ -981,6 +1008,21 @@
         }
     }
 
+    %form-group-label--focused-border:not(:is(
+        %form-group-border--error, 
+        %form-group-border--warning, 
+        %form-group-border--success))
+    {
+        &:hover {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %igx-input-group__filler,
+            %igx-input-group__notch {
+                border-color: var-get($theme, 'focused-border-color');
+            }
+        }
+    }
+
     %form-group-label--float-border {
         --label-position: #{sizable(18px, 22px, 26px)};
 
@@ -1064,6 +1106,10 @@
         color: var-get($theme, 'focused-secondary-color');
     }
 
+    %form-group-label--warning {
+        color: var-get($theme, 'warning-secondary-color');
+    }
+
     %form-group-label--success {
         color: var-get($theme, 'success-secondary-color');
     }
@@ -1305,10 +1351,19 @@
         %igx-input-group__filler {
             border-block-color: var-get($theme, 'success-secondary-color');
         }
+
+        %form-group-bundle--border:hover {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %igx-input-group__filler,
+            %igx-input-group__notch {
+                border-color: var-get($theme, 'success-secondary-color');
+            }
+        }
     }
 
     %form-group-line--warning {
-        background: var-get($theme, 'error-secondary-color');
+        background: var-get($theme, 'warning-secondary-color');
     }
 
     %form-group-border--warning {
@@ -1328,6 +1383,15 @@
         %igx-input-group__filler {
             border-block-color: var-get($theme, 'warning-secondary-color');
         }
+
+        %form-group-bundle--border:hover {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %igx-input-group__filler,
+            %igx-input-group__notch {
+                border-color: var-get($theme, 'warning-secondary-color');
+            }
+        }
     }
 
     %form-group-line--error {
@@ -1351,6 +1415,15 @@
         %igx-input-group__filler {
             border-block-color: var-get($theme, 'error-secondary-color');
         }
+
+        %form-group-bundle--border:hover {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %igx-input-group__filler,
+            %igx-input-group__notch {
+                border-color: var-get($theme, 'error-secondary-color');
+            }
+        }
     }
 
     %form-group-border--disabled {
@@ -1413,6 +1486,10 @@
             color: var-get($theme, 'success-secondary-color');
         }
 
+        %form-group-helper--warning {
+            color: var-get($theme, 'warning-secondary-color');
+        }
+
         %form-group-helper--error {
             color: var-get($theme, 'error-secondary-color');
         }

package/lib/core/styles/components/list/_list-component.scss

@@ -28,6 +28,11 @@
             @extend %igx-list-item-base--active !optional;
         }
 
+        // css class `igx-list__item-base--selected
+        @include e(item-base, $m: selected) {
+            @extend %igx-list-item-base--selected !optional;
+        }
+
         // css class 'igx-list__item-right' applied to the panning container shown when the list item is panned left
         @include e(item-right) {
             @extend %igx-list-item-pan !optional;

package/lib/core/styles/components/list/_list-theme.scss

@@ -19,21 +19,27 @@
 /// @param {Color} $item-background [null] - The list item background color.
 /// @param {Color} $item-background-hover [null] - The list item hover background color.
 /// @param {Color} $item-background-active [null] - The active list item background color.
+/// @param {Color} $item-background-selected [null] - The selected list item background color.
 /// @param {Color} $item-text-color [null] - The list item text color.
 /// @param {Color} $item-text-color-hover [null] - The list item hover text color.
 /// @param {Color} $item-text-color-active [null] - The active list item text color.
+/// @param {Color} $item-text-color-selected [null] - The selected list item text color.
 /// @param {Color} $item-title-color [null] - The list item title color.
 /// @param {Color} $item-title-color-hover [null] - The list item hover title color.
 /// @param {Color} $item-title-color-active [null] - The active list item title color.
+/// @param {Color} $item-title-color-selected [null] - The selected list item title color.
 /// @param {Color} $item-subtitle-color [null] - The list item subtitle color.
 /// @param {Color} $item-subtitle-color-hover [null] - The list item hover subtitle color.
 /// @param {Color} $item-subtitle-color-active [null] - The active list item subtitle color.
+/// @param {Color} $item-subtitle-color-selected [null] - The selected list item subtitle color.
 /// @param {Color} $item-action-color [null] - The list item action color.
 /// @param {Color} $item-action-color-hover [null] - The list item hover action color.
 /// @param {Color} $item-action-color-active [null] - The active list item action color.
+/// @param {Color} $item-action-color-selected [null] - The selected list item action color.
 /// @param {Color} $item-thumbnail-color [null] - The list item thumbnail color.
 /// @param {Color} $item-thumbnail-color-hover [null] - The list item hover thumbnail color.
 /// @param {Color} $item-thumbnail-color-active [null] - The active list item thumbnail color.
+/// @param {Color} $item-thumbnail-color-selected [null] - The selected list item thumbnail color.
 /// @param {List} $border-radius [null] - The border radius used for list component.
 /// @param {List} $item-border-radius [null] - The border radius used for list item.
 /// @param {Color} $border-width [null] - The list border width.
@@ -54,21 +60,27 @@
     $item-background: null,
     $item-background-hover: null,
     $item-background-active: null,
+    $item-background-selected: null,
     $item-text-color: null,
     $item-text-color-hover: null,
     $item-text-color-active: null,
+    $item-text-color-selected: null,
     $item-title-color: null,
     $item-title-color-hover: null,
     $item-title-color-active: null,
+    $item-title-color-selected: null,
     $item-subtitle-color: null,
     $item-subtitle-color-hover: null,
     $item-subtitle-color-active: null,
+    $item-subtitle-color-selected: null,
     $item-action-color: null,
     $item-action-color-hover: null,
     $item-action-color-active: null,
+    $item-action-color-selected: null,
     $item-thumbnail-color: null,
     $item-thumbnail-color-hover: null,
     $item-thumbnail-color-active: null,
+    $item-thumbnail-color-selected: null,
     $border-color: null,
     $border-width: null,
 ) {
@@ -120,6 +132,16 @@
         }
     }
 
+    @if not($item-background-selected) and $item-background {
+        @if meta.type-of($item-background) == 'color' {
+            @if luminance($item-background) < .5 {
+                $item-background-selected: color.scale($item-background, $lightness: 8%);
+            } @else {
+                $item-background-selected: color.scale($item-background, $lightness: -8%);
+            }
+        }
+    }
+
     @if not($header-text-color) and $header-background {
         $header-text-color: text-contrast($header-background);
     }
@@ -180,28 +202,54 @@
         $item-text-color-active: text-contrast($item-background-active);
     }
 
+    @if not($item-text-color-selected) and $item-background-selected {
+        $item-text-color-selected: text-contrast($item-background-selected);
+    }
+
     @if not($item-title-color-active) and $item-background-active {
         $item-title-color-active: text-contrast($item-background-active);
     }
 
+    @if not($item-title-color-selected) and $item-background-selected {
+        $item-title-color-selected: text-contrast($item-background-selected);
+    }
+
     @if not($item-action-color-active) and $item-background-active {
         $item-action-color-active: text-contrast($item-background-active);
     }
 
+    @if not($item-action-color-selected) and $item-background-selected {
+        $item-action-color-selected: text-contrast($item-background-selected);
+    }
+
     @if not($item-thumbnail-color-active) and $item-background-active {
         $item-thumbnail-color-active: text-contrast($item-background-active);
     }
 
+    @if not($item-thumbnail-color-selected) and $item-background-selected {
+        $item-thumbnail-color-selected: text-contrast($item-background-selected);
+    }
+
     @if not($item-subtitle-color-active) and $item-background-active {
         @if meta.type-of($item-background-active) == 'color' {
             $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);
         }
     }
 
+    @if not($item-subtitle-color-selected) and $item-background-selected {
+        @if meta.type-of($item-background-selected) == 'color' {
+            $item-subtitle-color-selected: rgba(text-contrast($item-background-selected), .74);
+        }
+    }
+
     @if not($item-subtitle-color-active) and $item-text-color-active {
         $item-subtitle-color-active: $item-text-color-active;
     }
 
+    @if not($item-subtitle-color-selected) and $item-text-color-selected {
+        $item-subtitle-color-selected: $item-text-color-selected;
+    }
+
     @return extend($theme, (
         name: $name,
         border-radius: $border-radius,
@@ -212,21 +260,27 @@
         item-background: $item-background,
         item-background-hover: $item-background-hover,
         item-background-active: $item-background-active,
+        item-background-selected: $item-background-selected,
         item-text-color: $item-text-color,
         item-text-color-hover: $item-text-color-hover,
         item-text-color-active: $item-text-color-active,
+        item-text-color-selected: $item-text-color-selected,
         item-title-color:$item-title-color,
         item-title-color-hover:$item-title-color-hover,
         item-title-color-active:$item-title-color-active,
+        item-title-color-selected:$item-title-color-selected,
         item-subtitle-color: $item-subtitle-color,
         item-subtitle-color-hover: $item-subtitle-color-hover,
         item-subtitle-color-active: $item-subtitle-color-active,
+        item-subtitle-color-selected: $item-subtitle-color-selected,
         item-action-color: $item-action-color,
         item-action-color-hover: $item-action-color-hover,
         item-action-color-active: $item-action-color-active,
+        item-action-color-selected: $item-action-color-selected,
         item-thumbnail-color: $item-thumbnail-color,
         item-thumbnail-color-hover: $item-thumbnail-color-hover,
         item-thumbnail-color-active: $item-thumbnail-color-active,
+        item-thumbnail-color-selected: $item-thumbnail-color-selected,
         border-color: $border-color,
         border-width: $border-width,
         theme: map.get($schema, '_meta', 'theme'),
@@ -423,6 +477,12 @@
         }
     }
 
+    %igx-list-item-base--selected {
+        %igx-list-item-content {
+            @extend %igx-list-item-content--selected;
+        }
+    }
+
     %igx-list-item-pan {
         position: absolute;
         visibility: hidden;
@@ -550,6 +610,37 @@
         }
     }
 
+    %igx-list-item-content--selected {
+        color: var-get($theme, 'item-text-color-selected');
+        background: var-get($theme, 'item-background-selected');
+        z-index: 3;
+
+        %igx-list__item-line-title {
+            color: var-get($theme, 'item-title-color-selected')
+        }
+
+        %igx-list__item-line-subtitle {
+            color: var-get($theme, 'item-subtitle-color-selected')
+        }
+
+        %igx-list__item-actions {
+            color: var-get($theme, 'item-action-color-selected');
+
+            igx-icon,
+            igc-icon {
+                color: var-get($theme, 'item-action-color-selected')}
+        }
+
+        %igx-list__item-thumbnail {
+            color: var-get($theme, 'item-thumbnail-color-selected');
+
+            igx-icon,
+            igc-icon {
+                color: var-get($theme, 'item-thumbnail-color-selected')
+            }
+        }
+    }
+
     %igx-list-item-content--inactive {
         transition: transform .3s $out-quad;
     }

package/lib/core/styles/components/progress/circular/_circular-component.scss

@@ -49,6 +49,12 @@
             }
         }
 
+        @each $modifier in ('danger', 'warning', 'info', 'success') {
+            @include m($modifier) {
+                @extend %display-circular--#{$modifier} !optional;
+            }
+        }
+
         @include m(animation-none) {
             @extend %animation-none !optional;
         }

package/lib/core/styles/components/progress/circular/_circular-theme.scss

@@ -9,7 +9,11 @@
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 ///
 /// @param {Color} $base-circle-color [null] - The base circle fill color.
-/// @param {Color | List<Color>} $progress-circle-color [null] - The progress circle fill color.
+/// @param {Color | List<Color>} $fill-color-default [null] - The progress circle fill color.
+/// @param {Color} $fill-color-danger [null] - The track danger fill color.
+/// @param {Color} $fill-color-warning [null] - The track warning fill color.
+/// @param {Color} $fill-color-info [null] - The track info fill color.
+/// @param {Color} $fill-color-success [null] - The track success fill color.
 /// @param {Color} $text-color [null] - The value text color.
 /// @param {Number} $diameter [null] - The progress circle diameter.
 ///
@@ -17,14 +21,18 @@
 ///
 /// @example scss Change the circle progress color
 ///   $my-progress-circular-theme: progress-circular-theme(
-///     $progress-circle-color: purple
+///     $fill-color-default: purple
 ///   );
 ///   // Pass the theme to the igx-progress-circular component mixin
 ///   @include igx-progress-circular($my-progress-circle-theme);
 @function progress-circular-theme(
     $schema: $light-material-schema,
     $base-circle-color: null,
-    $progress-circle-color: null,
+    $fill-color-default: null,
+    $fill-color-danger: null,
+    $fill-color-warning: null,
+    $fill-color-info: null,
+    $fill-color-success: null,
     $text-color: null,
     $diameter: null
 ) {
@@ -40,24 +48,28 @@
     $theme: digest-schema($circular-bar-schema);
     $meta: map.get($theme, '_meta');
 
-    $progress-circle-color-start: map.get($theme, 'progress-circle-color');
-    $progress-circle-color-end: map.get($theme, 'progress-circle-color');
+    $fill-color-default-start: map.get($theme, 'fill-color-default');
+    $fill-color-default-end: map.get($theme, 'fill-color-default');
 
-    @if meta.type-of($progress-circle-color) == 'color' {
-        $progress-circle-color-start: $progress-circle-color;
-        $progress-circle-color-end: $progress-circle-color;
+    @if meta.type-of($fill-color-default) == 'color' {
+        $fill-color-default-start: $fill-color-default;
+        $fill-color-default-end: $fill-color-default;
     }
 
-    @if list.length($progress-circle-color) == 2 {
-        $progress-circle-color-start: list.nth($progress-circle-color, 1);
-        $progress-circle-color-end: list.nth($progress-circle-color, 2);
+    @if list.length($fill-color-default) == 2 {
+        $fill-color-default-start: list.nth($fill-color-default, 1);
+        $fill-color-default-end: list.nth($fill-color-default, 2);
     }
 
     @return extend($theme, (
         name: $name,
         base-circle-color: $base-circle-color,
-        progress-circle-color-start: $progress-circle-color-start,
-        progress-circle-color-end: $progress-circle-color-end,
+        fill-color-default-start: $fill-color-default-start,
+        fill-color-default-end: $fill-color-default-end,
+        fill-color-danger: $fill-color-danger,
+        fill-color-warning: $fill-color-warning,
+        fill-color-info: $fill-color-info,
+        fill-color-success: $fill-color-success,
         text-color: $text-color,
         diameter: $diameter,
         theme: map.get($schema, '_meta', 'theme'),
@@ -238,6 +250,14 @@
         }
     }
 
+    @each $mod in ('success','info','warning','danger') {
+        %display-circular--#{$mod} {
+            svg %outer {
+                stroke: var-get($theme, 'fill-color-#{$mod}');
+            }
+        }
+    }
+
     %outer--indeterminate {
         stroke-dasharray: 289;
         @include animation(igx-indeterminate-accordion var(--_transition-duration) cubic-bezier(0, .085, .68, .53) normal infinite);
@@ -292,11 +312,11 @@
     }
 
     %gradient-start {
-        stop-color: var-get($theme, 'progress-circle-color-start');
+        stop-color: var-get($theme, 'fill-color-default-start');
     }
 
     %gradient-end {
-        stop-color: var-get($theme, 'progress-circle-color-end');
+        stop-color: var-get($theme, 'fill-color-default-end');
     }
 
     @keyframes igx-indeterminate-accordion {

package/lib/core/styles/components/progress/linear/_linear-theme.scss

@@ -23,6 +23,8 @@
 /// @param {Color} $stripes-color [null] - The track stripes color.
 /// @param {Color} $text-color [null] - The track value text color.
 /// @param {List} $track-border-radius [null] - The border radius fraction, between 0 - 8 to be used fot the progress bar track
+/// @param {Number} $track-height [null] - The linear progress track height.
+/// @param {Number} $strip-size [null] - The linear progress bar strip width.
 /// @requires $light-material-schema
 /// @example scss Change the stripes color
 ///   $my-progress-linear-theme: progress-linear-theme(
@@ -41,6 +43,8 @@
     $stripes-color: null,
     $text-color: null,
     $track-border-radius: null,
+    $track-height: null,
+    $strip-size: null
 ) {
     $name: 'igx-linear-bar';
     $linear-bar-schema: ();
@@ -65,6 +69,8 @@
         stripes-color: $stripes-color,
         text-color: $text-color,
         track-border-radius: $track-border-radius,
+        track-height: $track-height,
+        strip-size: $strip-size,
         theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
@@ -123,21 +129,6 @@ $easing-curves: (
 
     $variant: map.get($theme, '_meta', 'variant');
 
-    // TODO all of these should be listed as design tokens in the component schema. [$bar-height, $strip-size]
-    $bar-height: map.get((
-        'material': rem(4px),
-        'fluent': rem(2px),
-        'bootstrap': rem(16px),
-        'indigo': rem(4px),
-    ), $variant);
-
-    $strip-size: map.get((
-        'material': rem(16px),
-        'fluent': rem(16px),
-        'bootstrap': rem(5px),
-        'indigo': rem(16px),
-    ), $variant);
-
     %display-linear {
         position: relative;
         display: flex;
@@ -169,14 +160,14 @@ $easing-curves: (
     }
 
     %base {
-        --stripe-size: #{$strip-size};
+        --stripe-size: #{var-get($theme, 'strip-size')};
         --linear-animation-duration: 2000ms;
 
         display: flex;
         flex-direction: column;
         position: relative;
         width: inherit;
-        height: $bar-height;
+        height: var-get($theme, 'track-height');
         background: var-get($theme, 'track-color');
         overflow: hidden;
         border-radius: var-get($theme, 'track-border-radius');

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

@@ -101,13 +101,20 @@
         }
     }
 
-    %form-group-bundle:hover,
     %form-group-bundle:focus-within {
         %igx-select__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-focus');
         }
     }
 
+    @if $variant == 'indigo' {
+        %form-group-bundle:hover {
+            %igx-select__toggle-button {
+                color: var-get($theme, 'toggle-button-foreground-focus');
+            }
+        }
+    }
+
     .igx-input-group--filled {
         %igx-select__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-filled');
@@ -120,8 +127,10 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        %igx-select__toggle-button {
-            background: var-get($theme, 'toggle-button-background-focus--border');
+        @if $variant != 'fluent' {
+            %igx-select__toggle-button {
+                background: var-get($theme, 'toggle-button-background-focus--border');
+            }
         }
     }