igniteui-angular 19.0.0-rc.0 → 19.0.0

package/lib/core/styles/components/dock-manager/_dock-manager-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
@@ -65,7 +66,7 @@
 
     $theme: digest-schema($dock-manager-schema);
 
-    @return extend($theme, (name: $name, prefix: 'igc'), keywords($rest));
+    @return extend($theme, (name: $name, prefix: 'igc'), meta.keywords($rest));
 }
 
 /// @deprecated Use the `css-vars` mixin instead.

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

@@ -1434,15 +1434,15 @@
         }
 
         &%igx-grid__tr--ghost {
+            background: var-get($theme, 'row-ghost-background');
+            color: var-get($theme, 'row-drag-color');
+            z-index: 10002;
+
             @include css-vars((
                 name: 'igx-grid-row',
                 row-ghost-background: map.get($theme, 'row-ghost-background'),
                 row-drag-color: map.get($theme, 'row-drago-color')
             ));
-
-            background: var-get($theme, 'row-ghost-background');
-            color: var-get($theme, 'row-drag-color');
-            z-index: 10002;
         }
     }
 
@@ -2797,9 +2797,9 @@
             compact: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width})
         );
 
-        $level--comfortable: map-get($row-indentation-level, 'comfortable');
-        $level--cosy: map-get($row-indentation-level, 'cosy');
-        $level--compact: map-get($row-indentation-level, 'compact');
+        $level--comfortable: map.get($row-indentation-level, 'comfortable');
+        $level--cosy: map.get($row-indentation-level, 'cosy');
+        $level--compact: map.get($row-indentation-level, 'compact');
 
         %igx-grid__row-indentation--level-#{$i} {
             --indicator-inline-inset: #{sizable(

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

@@ -1884,15 +1884,14 @@
     %form-group-bundle-start--bootstrap,
     %form-group-bundle-end--bootstrap {
         flex: none;
-
-        &:empty {
-            display: none;
-        }
-
         border-width: rem(1px);
         border-style: solid;
         border-color: var-get($theme, 'border-color');
         overflow: hidden;
+
+        &:empty {
+            display: none;
+        }
     }
 
     %form-group-bundle-start--bootstrap {

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

@@ -373,7 +373,7 @@
         color: var-get($theme, 'item-text-color');
         background: var-get($theme, 'item-background');
 
-        @if $bootstrap-theme {
+        @if $bootstrap-theme or $variant == 'fluent' {
             border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 
             &:last-of-type {
@@ -435,10 +435,7 @@
         display: flex;
         flex-direction: column;
         flex: 1 0 0%;
-
-        @if $variant == 'indigo' {
-            gap: rem(2px);
-        }
+        gap: rem(2px);
 
         &:empty {
             display: none;
@@ -447,7 +444,6 @@
 
     %igx-list__item-line-subtitle {
         color: var-get($theme, 'item-subtitle-color');
-        opacity: .74
     }
 
     %igx-list__item-line-title {
@@ -524,6 +520,10 @@
     }
 
     %igx-list-item-content--active {
+        color: var-get($theme, 'item-text-color-active');
+        background: var-get($theme, 'item-background-active');
+        z-index: 3;
+
         %igx-list__item-line-title {
             color: var-get($theme, 'item-title-color-active')
         }
@@ -548,10 +548,6 @@
                 color: var-get($theme, 'item-thumbnail-color-active')
             }
         }
-
-        color: var-get($theme, 'item-text-color-active');
-        background: var-get($theme, 'item-background-active');
-        z-index: 3;
     }
 
     %igx-list-item-content--inactive {
@@ -563,13 +559,13 @@
 /// Uses the 'caption' and 'subtitle-1'
 /// categories from the typographic scale.
 /// @group typography
-/// @param {Map} $categories [(header: 'overline', item: 'subtitle-1', title: 'subtitle-1', subtitle: 'caption')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(header: 'overline', item: 'subtitle-1', title: 'subtitle-1', subtitle: 'body-2')] - The categories from the typographic scale used for type styles.
 @mixin list-typography(
     $categories: (
         header: 'overline',
         item: 'subtitle-1',
         title: 'subtitle-1',
-        subtitle: 'caption'
+        subtitle: 'body-2'
     )
 ) {
     $header: map.get($categories, 'header');

package/lib/core/styles/components/rating/_rating-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
@@ -40,7 +41,7 @@
 
     $theme: digest-schema($rating-schema);
 
-    @return extend($theme, (name: $name), keywords($rest));
+    @return extend($theme, (name: $name), meta.keywords($rest));
 }
 
 /// @deprecated Use the `css-vars` mixin instead.

package/lib/core/styles/components/scrollbar/scrollbar-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
@@ -99,7 +100,7 @@
         }
 
         ::-webkit-scrollbar {
-            @if type-of(map.get($theme, 'sb-size') == 'string') {
+            @if meta.type-of(map.get($theme, 'sb-size') == 'string') {
                 width: var-get($theme, 'sb-size');
                 height: var-get($theme, 'sb-size');
             }

package/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -360,13 +360,6 @@
     }
 
     %tabs-header-item {
-        > * {
-            margin-inline-start: rem(if($variant != 'indigo', 12px, 8px));
-
-            &:first-child {
-                margin-inline-start: 0;
-            }
-        }
         display: inline-flex;
         justify-content: center;
         align-items: center;
@@ -390,32 +383,6 @@
             color: var-get($theme, 'item-icon-color');
         }
 
-        &::-moz-focus-inner {
-            border: 0;
-        }
-
-        &:focus {
-            background: var-get($theme, 'item-active-background');
-            color: var-get($theme, 'item-hover-color');
-            border-bottom-color: transparent;
-        }
-
-        &:hover {
-            background: var-get($theme, 'item-hover-background');
-            color: var-get($theme, 'item-hover-color');
-
-            @if $bootstrap-theme {
-                box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover');
-            }
-        }
-
-        &:hover,
-        &:focus {
-            igx-icon {
-                color: var-get($theme, 'item-hover-icon-color');
-            }
-        }
-
         @if $bootstrap-theme {
             padding-block: rem(12px);
             border-start-start-radius: var-get($theme, 'border-radius');
@@ -448,6 +415,40 @@
             }
         }
 
+        > * {
+            margin-inline-start: rem(if($variant != 'indigo', 12px, 8px));
+
+            &:first-child {
+                margin-inline-start: 0;
+            }
+        }
+
+        &::-moz-focus-inner {
+            border: 0;
+        }
+
+        &:focus {
+            background: var-get($theme, 'item-active-background');
+            color: var-get($theme, 'item-hover-color');
+            border-bottom-color: transparent;
+        }
+
+        &:hover {
+            background: var-get($theme, 'item-hover-background');
+            color: var-get($theme, 'item-hover-color');
+
+            @if $bootstrap-theme {
+                box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover');
+            }
+        }
+
+        &:hover,
+        &:focus {
+            igx-icon {
+                color: var-get($theme, 'item-hover-icon-color');
+            }
+        }
+
         @include ripple($tabs-ripple-theme);
         @include css-vars($tabs-ripple-theme);
     }

package/lib/core/styles/themes/generators/_base.scss

@@ -6,6 +6,7 @@
 @use '../../base' as *;
 @use '../../components' as *;
 @use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
 @use 'igniteui-theming/sass/elevations' as *;
 @use 'igniteui-theming/sass/elevations/presets' as elevations;
 @use 'igniteui-theming/sass/utils' as *;
@@ -683,7 +684,7 @@
     );
 
     @include theme(
-        $palette: $light-palette,
+        $palette: $light-material-palette,
         $schema: $light-material-schema,
         $exclude: $exclude,
         $roundness: $roundness,
@@ -716,7 +717,7 @@
     );
 
     @include theme(
-        $palette: $dark-palette,
+        $palette: $dark-material-palette,
         $schema: $dark-material-schema,
         $exclude: $exclude,
         $roundness: $roundness,

package/lib/core/styles/themes/generators/_bootstrap.scss

@@ -1,6 +1,7 @@
 @use 'base' as *;
 @use '../schemas' as *;
 @use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
 
 ////
 /// @group themes
@@ -20,7 +21,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($light-bootstrap-palette, 'gray');
+    $surface: color($light-bootstrap-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -30,8 +32,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != #f8f9fa, $surface, #f8f9fa),
-            $gray: #212529,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,
@@ -56,7 +58,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($dark-bootstrap-palette, 'gray');
+    $surface: color($dark-bootstrap-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -66,8 +69,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != white, $surface, #222),
-            $gray: #fff,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,

package/lib/core/styles/themes/generators/_fluent.scss

@@ -1,6 +1,7 @@
 @use 'base' as *;
 @use '../schemas' as *;
 @use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
 
 ////
 /// @group themes
@@ -20,7 +21,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($light-fluent-palette, 'gray');
+    $surface: color($light-fluent-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -30,8 +32,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != #fff, $surface, #fff),
-            $gray: #000,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,
@@ -56,7 +58,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($dark-fluent-palette, 'gray');
+    $surface: color($dark-fluent-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -66,8 +69,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != #fff, $surface, #222),
-            $gray: #fff,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,

package/lib/core/styles/themes/generators/_indigo.scss

@@ -1,6 +1,7 @@
 @use 'base' as *;
 @use '../schemas' as *;
 @use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
 @use 'igniteui-theming/sass/elevations/presets' as elevations;
 
 ////
@@ -21,7 +22,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($light-indigo-palette, 'gray');
+    $surface: color($light-indigo-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -31,8 +33,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != #fff, $surface, #fff),
-            $gray: #060716,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,
@@ -58,7 +60,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($dark-indigo-palette, 'gray');
+    $surface: color($dark-indigo-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -68,8 +71,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != white, $surface, #2a2b2f),
-            $gray: #fff,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,

package/lib/core/styles/themes/presets/igniteui-angular-dark.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
-@include dark-theme($dark-material-palette);
+@include typography(
+    $font-family: $material-typeface,
+    $type-scale: $material-type-scale
+);
+@include theme(
+    $schema: $dark-material-schema,
+    $palette: $dark-material-palette,
+);

package/lib/core/styles/themes/presets/igniteui-angular.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
-@include theme($light-material-palette);
+@include typography(
+    $font-family: $material-typeface,
+    $type-scale: $material-type-scale
+);
+@include theme(
+    $schema: $light-material-schema,
+    $palette: $light-material-palette,
+);

package/lib/core/styles/themes/presets/igniteui-bootstrap-dark.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale);
-@include bootstrap-dark-theme($dark-bootstrap-palette);
+@include typography(
+    $font-family: $bootstrap-typeface,
+    $type-scale: $bootstrap-type-scale
+);
+@include theme(
+    $schema: $dark-bootstrap-schema,
+    $palette: $dark-bootstrap-palette,
+);

package/lib/core/styles/themes/presets/igniteui-bootstrap-light.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale);
-@include bootstrap-light-theme($light-bootstrap-palette);
+@include typography(
+    $font-family: $bootstrap-typeface,
+    $type-scale: $bootstrap-type-scale
+);
+@include theme(
+    $schema: $light-bootstrap-schema,
+    $palette: $light-bootstrap-palette,
+);

package/lib/core/styles/themes/presets/igniteui-dark-green.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
-@include dark-theme($dark-green-palette);
+@include typography(
+    $font-family: $material-typeface,
+    $type-scale: $material-type-scale
+);
+@include theme(
+    $schema: $dark-material-schema,
+    $palette: $dark-green-palette,
+);

package/lib/core/styles/themes/presets/igniteui-fluent-dark-excel.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale);
-@include fluent-dark-theme($dark-fluent-excel-palette);
+@include typography(
+    $font-family: $fluent-typeface,
+    $type-scale: $fluent-type-scale
+);
+@include theme(
+    $schema: $dark-fluent-schema,
+    $palette: $dark-fluent-excel-palette,
+);

package/lib/core/styles/themes/presets/igniteui-fluent-dark-word.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale);
-@include fluent-dark-theme($dark-fluent-word-palette);
+@include typography(
+    $font-family: $fluent-typeface,
+    $type-scale: $fluent-type-scale
+);
+@include theme(
+    $schema: $dark-fluent-schema,
+    $palette: $dark-fluent-word-palette,
+);

package/lib/core/styles/themes/presets/igniteui-fluent-dark.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale);
-@include fluent-dark-theme($dark-fluent-palette);
+@include typography(
+    $font-family: $fluent-typeface,
+    $type-scale: $fluent-type-scale
+);
+@include theme(
+    $schema: $dark-fluent-schema,
+    $palette: $dark-fluent-palette,
+);

package/lib/core/styles/themes/presets/igniteui-fluent-light-excel.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale);
-@include fluent-light-theme($light-fluent-excel-palette);
+@include typography(
+    $font-family: $fluent-typeface,
+    $type-scale: $fluent-type-scale
+);
+@include theme(
+    $schema: $light-fluent-schema,
+    $palette: $light-fluent-excel-palette,
+);

package/lib/core/styles/themes/presets/igniteui-fluent-light-word.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale);
-@include fluent-light-theme($light-fluent-word-palette);
+@include typography(
+    $font-family: $fluent-typeface,
+    $type-scale: $fluent-type-scale
+);
+@include theme(
+    $schema: $light-fluent-schema,
+    $palette: $light-fluent-word-palette,
+);

package/lib/core/styles/themes/presets/igniteui-fluent-light.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale);
-@include fluent-light-theme($light-fluent-palette);
+@include typography(
+    $font-family: $fluent-typeface,
+    $type-scale: $fluent-type-scale
+);
+@include theme(
+    $schema: $light-fluent-schema,
+    $palette: $light-fluent-palette,
+);

package/lib/core/styles/themes/presets/igniteui-indigo-dark.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale);
-@include indigo-dark-theme($dark-indigo-palette);
+@include typography(
+    $font-family: $indigo-typeface,
+    $type-scale: $indigo-type-scale
+);
+@include theme(
+    $schema: $dark-indigo-schema,
+    $palette: $dark-indigo-palette,
+);

package/lib/core/styles/themes/presets/igniteui-indigo-light.scss

@@ -1,5 +1,11 @@
 @use '../../themes' as *;
 
 @include core();
-@include typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale);
-@include indigo-light-theme($light-indigo-palette);
+@include typography(
+    $font-family: $indigo-typeface,
+    $type-scale: $indigo-type-scale
+);
+@include theme(
+    $schema: $light-indigo-schema,
+    $palette: $light-indigo-palette,
+);

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

@@ -1989,6 +1989,7 @@ export declare abstract class IgxGridBaseDirective implements GridType, OnInit,
     private _selectRowOnClick;
     private _columnSelectionMode;
     private lastAddedRowIndex;
+    protected isColumnWidthSum: boolean;
     private _currencyPositionLeft;
     private rowEditPositioningStrategy;
     private rowEditSettings;

package/lib/grids/pivot-grid/pivot-grid.component.d.ts

@@ -615,7 +615,6 @@ export declare class IgxPivotGridComponent extends IgxGridBaseDirective implemen
     /** @hidden @internal */
     get values(): IPivotValue[];
     toggleColumn(col: IgxColumnComponent): void;
-    protected getColumnWidthSum(): number;
     /**
      * @hidden @internal
      */

package/lib/tabs/tabs/tabs.component.d.ts

@@ -1,4 +1,5 @@
 import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy } from '@angular/core';
+import { PlatformUtil } from '../../core/utils';
 import { AnimationService } from '../../services/animation/animation';
 import { IgxDirectionality } from '../../services/direction/directionality';
 import { IgxTabsDirective } from '../tabs.directive';
@@ -42,6 +43,7 @@ export type IgxTabsAlignment = (typeof IgxTabsAlignment)[keyof typeof IgxTabsAli
  */
 export declare class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit, OnDestroy {
     private ngZone;
+    private platform;
     /**
      * Gets/Sets the tab alignment. Defaults to `start`.
      */
@@ -76,7 +78,7 @@ export declare class IgxTabsComponent extends IgxTabsDirective implements AfterV
     protected componentName: string;
     private _tabAlignment;
     private _resizeObserver;
-    constructor(animationService: AnimationService, cdr: ChangeDetectorRef, ngZone: NgZone, dir: IgxDirectionality);
+    constructor(animationService: AnimationService, cdr: ChangeDetectorRef, ngZone: NgZone, dir: IgxDirectionality, platform: PlatformUtil);
     /** @hidden @internal */
     ngAfterViewInit(): void;
     /** @hidden @internal */