igniteui-angular 20.2.0-alpha.3 → 20.2.0-alpha.5

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/list/_list-theme.scss

@@ -229,7 +229,8 @@
             display: none;
         }
 
-        > * {
+        > *,
+        [class^='igx'] {
             --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
         }
 

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/snackbar/_snackbar-theme.scss

@@ -33,7 +33,8 @@
 
         [igxButton] {
             @include animation(fade-in .35s ease-out);
-            --ig-size: 1;
+
+            --ig-size: 2;
             background: transparent;
             color: var-get($theme, 'button-color');
             -webkit-tap-highlight-color: transparent;
@@ -43,10 +44,6 @@
         @if $variant == 'indigo' {
             padding: pad-block(rem(4px)) pad-inline(rem(16px));
             min-height: rem(36px);
-
-            [igxButton] {
-                --ig-size: 2;
-            }
         }
     }
 

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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "20.2.0-alpha.3",
+  "version": "20.2.0-alpha.5",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -127,6 +127,10 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/igniteui-angular.mjs"
     },
+    "./chat-extras": {
+      "types": "./chat-extras/index.d.ts",
+      "default": "./fesm2022/igniteui-angular-chat-extras.mjs"
+    },
     "./animations": {
       "types": "./animations/index.d.ts",
       "default": "./fesm2022/igniteui-angular-animations.mjs"