igniteui-angular 18.2.8 → 18.2.10

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

@@ -232,10 +232,6 @@
             @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;
 
@@ -246,6 +242,14 @@
             }
         }
 
+        @include mx(material, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate-material !optional;
+        }
+
+        @include mx(fluent, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate-fluent !optional;
+        }
+
         @include mx(indigo, focused, indeterminate) {
             @extend %igx-checkbox--focused-checked-indigo !optional;
         }

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

@@ -377,6 +377,12 @@
                 z-index: 1;
             }
         }
+    }
+
+    %igx-checkbox--disabled-indeterminate-fluent {
+        %cbx-composite-mark {
+            stroke: transparent;
+        }
 
         %cbx-composite--x--disabled {
             background: transparent;
@@ -387,7 +393,7 @@
         }
     }
 
-    %igx-checkbox--indeterminate-material {
+    %igx-checkbox--disabled-indeterminate-material {
         %cbx-composite--x--disabled {
             border-color: var-get($theme, 'disabled-indeterminate-color');
             background: var-get($theme, 'disabled-indeterminate-color');

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

@@ -386,7 +386,7 @@
         }
 
         @if $variant == 'indigo' {
-            %igx-icon-display {
+            igx-icon {
                 --size: #{sizable(rem(14px), rem(14px), rem(16px))}
             }
         }

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

@@ -174,14 +174,14 @@
     // The wrapping element here is needed
     // in order to override the !important rule of .igx-icon--inactive.
     %igx-combo__case-icon {
-        .igx-icon {
+        igx-icon {
             // Important is needed since the .igx-icon--inactive has !important
             color: color($color: 'gray', $variant: 600) !important;
         }
     }
 
     %igx-combo__case-icon--active {
-        .igx-icon {
+        igx-icon {
             color: color($color: 'primary')
         }
     }

package/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -99,13 +99,9 @@
             }
         }
 
-        igx-icon {
-            @if $variant == 'indigo' {
-                --component-size: 2;
-            } @else {
-                width: var(--igx-icon-size, #{rem(15px)});
-                height: var(--igx-icon-size, #{rem(15px)});
-                font-size: var(--igx-icon-size, #{rem(15px)});
+        @if $variant != 'indigo' {
+            igx-icon {
+                --size: var(--igx-icon-size, #{rem(15px)});
             }
         }
     }

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

@@ -1206,7 +1206,7 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            %igx-icon-display {
+            igx-icon {
                 opacity: if($theme-variant == 'light', .75, .85);
 
                 &:hover {
@@ -1460,12 +1460,12 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            %igx-icon-display {
+            igx-icon {
                 opacity: if($theme-variant == 'light', .75, .85);
             }
 
             &:hover {
-                %igx-icon-display {
+                igx-icon {
                     opacity: 1;
                 }
             }
@@ -2037,13 +2037,10 @@
             position: relative;
             display: flex;
 
-            igx-icon {
-                @if $variant == 'indigo' {
-                    --component-size: 2;
-                } @else {
-                    width: var(--igx-icon-size, #{rem(15px)});
-                    height: var(--igx-icon-size, #{rem(15px)});
-                    font-size: var(--igx-icon-size, #{rem(15px)});
+
+            @if $variant != 'indigo' {
+                igx-icon {
+                    --size: var(--igx-icon-size, #{rem(15px)});
                 }
             }
 
@@ -2149,7 +2146,7 @@
             %grid-excel-icon {
                 color: var-get($theme, 'header-selected-text-color');
 
-                %igx-icon-display {
+                igx-icon {
                     color: var-get($theme, 'header-selected-text-color');
                 }
 
@@ -2157,7 +2154,7 @@
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
 
-                    %igx-icon-display {
+                    igx-icon {
                         color: var-get($theme, 'header-selected-text-color');
                     }
                 }
@@ -2501,7 +2498,7 @@
     }
 
     %igx-group-label__icon {
-        &.igx-icon {
+        @at-root igx-icon#{&} {
             --component-size: #{if($variant == 'indigo', 2, 1)};
 
             color: var-get($theme, 'group-label-icon');
@@ -3248,6 +3245,14 @@
         }
     }
 
+    igx-child-grid-row {
+        igx-child-grid-row {
+            %igx-grid__tr-action {
+                border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
+            }
+        }
+    }
+
     // Pivot grid
     %igx-grid__pivot--super-compact {
         --ig-size: 1 !important;
@@ -3441,10 +3446,9 @@
             }
 
             @if $variant == 'indigo' {
-                %igx-icon-display {
+                igx-icon {
                     opacity: if($theme-variant == 'light', .75, .85);
 
-
                     &:hover {
                         opacity: 1;
                         cursor: pointer;

package/lib/core/styles/components/progress/_progress-theme.scss

@@ -153,13 +153,6 @@
         } @else if $variant == 'fluent' {
             gap: rem(2px);
         }
-
-        &[dir='rtl'],
-        [dir='rtl'] & {
-            %linear-bar {
-                transform: rotateY(180deg);
-            }
-        }
     }
 
     %linear-bar {
@@ -225,6 +218,13 @@
         &::after {
             animation: indeterminate-primary-scale 2000ms infinite linear;
         }
+
+        [dir="rtl"] & {
+            animation: indeterminate-primary-rtl 2000ms infinite linear;
+            left: auto;
+            right: -145.166611%;
+            transform-origin: top right;
+        }
     }
 
     %linear-indicator--indeterminate-secondary {
@@ -236,6 +236,13 @@
             width: 100%;
             height: inherit;
         }
+
+        [dir="rtl"] & {
+            animation: indeterminate-secondary-rtl 2000ms infinite linear;
+            left: auto;
+            right: -54.888891%;
+            transform-origin: top right;
+        }
     }
 
     %linear-indicator--default {
@@ -317,6 +324,26 @@
         }
     }
 
+    @keyframes indeterminate-primary-rtl {
+        0% {
+          transform: translateX(0);
+        }
+
+        20% {
+          animation-timing-function: $indeterminate-primary-translate-step-2;
+          transform: translateX(0);
+        }
+
+        59.15% {
+          animation-timing-function: $indeterminate-primary-translate-step-3;
+          transform: translateX(-83.67142%);
+        }
+
+        100% {
+          transform: translateX(-200.611057%);
+        }
+    }
+
     @keyframes indeterminate-primary-scale {
         0% {
             transform: scaleX(.08);
@@ -359,6 +386,27 @@
         }
     }
 
+    @keyframes indeterminate-secondary-rtl {
+        0% {
+          animation-timing-function: $indeterminate-secondary-translate-step-1;
+          transform: translateX(0);
+        }
+
+        25% {
+          animation-timing-function: $indeterminate-secondary-translate-step-2;
+          transform: translateX(-37.651913%);
+        }
+
+        48.35% {
+          animation-timing-function: $indeterminate-secondary-translate-step-3;
+          transform: translateX(-84.386165%);
+        }
+
+        100% {
+          transform: translateX(-160.277782%);
+        }
+    }
+
     @keyframes indeterminate-secondary-scale {
         0% {
             animation-timing-function: $indeterminate-secondary-scale-step-1;

package/lib/grids/common/grid.interface.d.ts

@@ -659,6 +659,10 @@ export interface GridType extends IGridDataBindable {
     isLoading: boolean;
     /** @hidden @internal */
     gridSize: Size;
+    /** @hidden @internal */
+    isColumnWidthSum: boolean;
+    /** @hidden @internal */
+    minColumnWidth: number;
     /** Strategy, used for cloning the provided data. The type has one method, that takes any type of data */
     dataCloneStrategy: IDataCloneStrategy;
     /** Represents the grid service type providing API methods for the grid */

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

@@ -1830,6 +1830,10 @@ export declare abstract class IgxGridBaseDirective implements GridType, OnInit,
      * @hidden @internal
      */
     filteringPipeTrigger: number;
+    /**
+     * @hidden @internal
+     */
+    isColumnWidthSum: boolean;
     /**
      * @hidden @internal
      */
@@ -1987,7 +1991,6 @@ export declare abstract class IgxGridBaseDirective implements GridType, OnInit,
     private _selectRowOnClick;
     private _columnSelectionMode;
     private lastAddedRowIndex;
-    protected isColumnWidthSum: boolean;
     private _currencyPositionLeft;
     private rowEditPositioningStrategy;
     private rowEditSettings;
@@ -2004,7 +2007,7 @@ export declare abstract class IgxGridBaseDirective implements GridType, OnInit,
     /**
      * @hidden @internal
      */
-    protected get minColumnWidth(): number;
+    get minColumnWidth(): number;
     protected get isCustomSetRowHeight(): boolean;
     /**
      * @hidden @internal

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

@@ -223,7 +223,7 @@ export declare class IgxPivotGridComponent extends IgxGridBaseDirective implemen
     /**
      * @hidden @internal
      */
-    protected get minColumnWidth(): 200 | 104;
+    get minColumnWidth(): 200 | 104;
     /**
      * @hidden @internal
      */

package/lib/grids/resizing/resizer.directive.d.ts

@@ -16,7 +16,9 @@ export declare class IgxColumnResizerDirective implements OnInit, OnDestroy {
     resizeStart: Subject<MouseEvent>;
     resize: Subject<any>;
     private _left;
+    private _ratio;
     private _destroy;
+    get ratio(): number;
     constructor(element: ElementRef<HTMLElement>, document: any, zone: NgZone);
     ngOnInit(): void;
     ngOnDestroy(): void;

package/lib/grids/resizing/resizing.service.d.ts

@@ -31,7 +31,7 @@ export declare class IgxColumnResizingService {
     /**
      * @hidden
      */
-    getColumnHeaderRenderedWidth(): any;
+    getColumnHeaderRenderedWidth(): number;
     /**
      * @hidden
      */
@@ -53,7 +53,7 @@ export declare class IgxColumnResizingService {
     /**
      * Resizes the column regaridng to the column minWidth and maxWidth.
      */
-    resizeColumn(event: MouseEvent): void;
+    resizeColumn(event: MouseEvent, ratio?: number): void;
     protected _handlePixelResize(diff: number, column: ColumnType): void;
     protected _handlePercentageResize(diff: number, column: ColumnType): void;
     protected getColMinWidth(column: ColumnType): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "18.2.8",
+  "version": "18.2.10",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",