igniteui-angular 20.0.3 → 20.0.5

package/index.d.ts

@@ -3779,7 +3779,7 @@ declare class IgxSorting implements IGridSortingStrategy {
    * Returns an array containing the grouped result.
    * @internal
    */
-    protected groupDataRecursive(data: any[], state: IGroupingState, level: number, parent: IGroupByRecord, metadata: IGroupByRecord[], grid?: GridType, groupsRecords?: any[], fullResult?: IGroupByResult): any[];
+    protected groupDataRecursive(data: any[], state: IGroupingState, level: number, parent: IGroupByRecord, metadata: IGroupByRecord[], grid?: GridType, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult;
     /**
    * Retrieves the value of the specified field from the given object, considering date and time data types.
    * `key`: The key of the field to retrieve.
@@ -3940,6 +3940,9 @@ declare class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     private _afterViewInit;
     private _scrollNativeSize;
     private _detached;
+    protected renderer: Renderer2;
+    protected platformId: Object;
+    protected ngZone: NgZone;
     constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, _zone: NgZone, document: any, platformUtil: PlatformUtil);
     onScroll(event: any): void;
     ngAfterViewInit(): void;
@@ -3950,6 +3953,8 @@ declare class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     get size(): number;
     get scrollNativeSize(): number;
     protected get isAttachedToDom(): boolean;
+    private toggleClass;
+    private updateScrollbarClass;
     protected handleMutations(event: any): void;
     protected restoreScroll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<VirtualHelperBaseDirective, never>;
@@ -34448,7 +34453,7 @@ declare class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowCompon
  * </igx-pivot-grid>
  * ```
  */
-declare class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit, GridType, AfterViewInit, OnChanges {
+declare class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit, PivotGridType, AfterViewInit, OnChanges {
     navigation: IgxPivotGridNavigationService;
     /**
      * Emitted when the dimension collection is changed via the grid chip area.
@@ -41178,6 +41183,7 @@ declare class IgxSplitterPaneComponent {
     private el;
     private _minSize;
     private _maxSize;
+    private _order;
     /**
      * @hidden @internal
      * Gets/Sets the 'display' property of the current pane.
@@ -41232,7 +41238,8 @@ declare class IgxSplitterPaneComponent {
      */
     collapsedChange: EventEmitter<boolean>;
     /** @hidden @internal */
-    order: number;
+    get order(): number;
+    set order(val: number);
     /**
      * @hidden @internal
      * Gets/Sets the `overflow`.
@@ -41358,6 +41365,7 @@ declare interface ISplitterBarResizeEventArgs {
 declare class IgxSplitterComponent implements AfterContentInit {
     document: any;
     private elementRef;
+    private zone;
     /**
      * Gets the list of splitter panes.
      *
@@ -41441,7 +41449,7 @@ declare class IgxSplitterComponent implements AfterContentInit {
      * The sibling pane in each pair of panes divided by a splitter bar.
      */
     private sibling;
-    constructor(document: any, elementRef: ElementRef);
+    constructor(document: any, elementRef: ElementRef, zone: NgZone);
     /**
      * Gets/Sets the splitter orientation.
      *

package/lib/core/styles/components/date-picker/_date-picker-theme.scss

@@ -13,7 +13,8 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The calendar theme used to style the component.
 @mixin date-picker($theme) {
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $border-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
 
@@ -26,11 +27,17 @@
 
     %date-picker {
         // TODO move the shadow in the schemas
-        box-shadow: $border-shadow, elevation(24),;
+        box-shadow: $border-shadow, elevation(24);
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'content-background');
         overflow: hidden;
 
+        @if $variant == 'indigo' and  $theme-variant == 'light' {
+            box-shadow: $border-shadow, elevation(5);
+        } @else if $variant == 'indigo' and $theme-variant == 'dark' {
+            box-shadow: $border-shadow, elevation(7);
+        }
+
         igx-calendar,
         %days-view,
         %months-view,

package/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -259,7 +259,7 @@
         -webkit-overflow-scrolling: touch;
         position: relative;
 
-        igx-display-container {
+        .igx-display-container--scrollbar {
             padding-inline-end: var(--vhelper-scrollbar-size);
         }
     }
@@ -299,20 +299,16 @@
             bottom: 0;
         }
 
-        igx-icon {
+        igx-icon,
+        igc-icon {
             justify-content: center;
-            --component-size: 1;
-
-            @if $variant == 'fluent' {
-                --component-size: 3;
-            }
 
             @if $variant == 'indigo' {
                 $icon-size: sizable(rem(14px), rem(16px), rem(16px));
 
-                width: var(--ig-icon-size, $icon-size);
-                height: var(--ig-icon-size, $icon-size);
-                font-size: var(--ig-icon-size, $icon-size);
+                --size: #{$icon-size};
+            } @else {
+                --component-size: 1;
             }
         }
     }

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

@@ -456,12 +456,12 @@
 
     @if not($grid-shadow) {
         $grid-elevation: map.get($grid-schema, 'grid-elevation');
-        $grid-shadow: elevation(var(--grid-elevation));
+        $grid-shadow: elevation($grid-elevation);
     }
 
     @if not($drag-shadow) {
         $drag-elevation: map.get($grid-schema, 'drag-elevation');
-        $drag-shadow: elevation(var(--drag-elevation));
+        $drag-shadow: elevation($drag-elevation);
     }
 
     @if not($drop-area-border-radius) {
@@ -758,8 +758,7 @@
         igx-time-picker {
             position: relative;
             height: calc(100% - #{$editing-outline-width * 2});
-            width: calc(100% - #{$editing-outline-width * 2}) !important;
-            inset-inline-start: $editing-outline-width;
+            width: 100% !important;
             overflow: hidden;
         }
 
@@ -1535,6 +1534,9 @@
     }
 
     %igx-grid__td--bool {
+        display: flex;
+        flex-grow: 1;
+
         igx-icon {
             --component-size: #{if($variant == 'indigo', 2, 1)};
         }
@@ -1804,7 +1806,6 @@
         padding-inline-end: rem(4px) !important;
 
         > igx-icon {
-            margin-inline-start: auto;
             color: color($color: 'error');
             width: var(--igx-icon-size, rem(18px));
             height: var(--igx-icon-size, rem(18px));
@@ -1910,11 +1911,10 @@
     %igx-grid__td--editing {
         background: var-get($theme, 'cell-editing-background') !important;
         box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color');
-        padding: 0 !important;
+        padding-inline: rem(4px);
 
         &.igx-grid__td--invalid {
             box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important;
-            padding-inline-end: rem(4px) !important;
         }
 
         &%grid-cell-number {
@@ -2105,7 +2105,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-	        
+
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2133,7 +2133,7 @@
         &%igx-grid-th--sorted {
             .sort-icon {
                 color: var-get($theme, 'header-selected-text-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
@@ -2141,7 +2141,7 @@
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
-	                
+
 	                > igx-icon {
 		                color: inherit;
 	                }
@@ -2198,14 +2198,14 @@
         .sort-icon {
             opacity: 1;
             color: var-get($theme, 'sorted-header-icon-color');
-	        
+
 	        > igx-icon {
 		        color: inherit;
 	        }
 
             &:hover {
                 color: var-get($theme, 'sortable-header-icon-hover-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
@@ -2241,6 +2241,7 @@
     %grid-cell-number {
         text-align: $grid-cell-align-num;
         justify-content: flex-end;
+        flex-grow: 1;
 
         %grid-cell-header-icons {
             justify-content: flex-start;

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

@@ -1928,7 +1928,7 @@
     }
 
     %indigo--box-focused {
-        background: var-get($theme, 'box-background-hover');
+        background: var-get($theme, 'box-background-focus');
     }
 
     %form-group-bundle--indigo--disabled {

package/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -131,6 +131,14 @@
     %advanced-filter {
         @include sizable();
 
+        --_tree-scrollbar-gutter: #{rem(16px)};
+
+        @if $variant == 'bootstrap' {
+            --query-builder-outer-padding: #{rem(16px)};
+        } @else {
+            --query-builder-outer-padding: #{rem(24px)};
+        }
+
         width: auto;
         min-width: rem(660px);
         background-color: var-get($theme, 'background');
@@ -139,11 +147,19 @@
         overflow: hidden;
 
         &:has(:not(igx-query-builder-header)) {
-            padding-block-start: if($variant != 'bootstrap', rem(24px), rem(16px))
+            padding-block-start: var(--query-builder-outer-padding);
+
+            %query-level-0 {
+                padding-block: 0 var(--query-builder-outer-padding);
+            }
         }
 
         &:has(igx-query-builder-header) {
             padding-block-start: 0;
+
+            %query-level-0 {
+                padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--query-builder-outer-padding);
+            }
         }
 
 	    .igx-chip__ghost {
@@ -162,10 +178,8 @@
     %query-level-0 {
         display: block;
         width: 100%;
-        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
-        padding-block:
-            if($variant != 'bootstrap', 0, rem(16px))
-            if($variant != 'bootstrap', rem(24px), rem(16px));
+
+        padding-inline: var(--query-builder-outer-padding);
 
         > %advanced-filter__main {
             gap: rem(16px);
@@ -176,7 +190,7 @@
                 max-height: rem(570px);
                 overflow-y: auto;
                 overflow-x: hidden;
-                padding-inline-end: rem(16px);
+                padding-inline-end: var(--_tree-scrollbar-gutter);
             }
         }
     }
@@ -247,8 +261,8 @@
         margin-bottom: 0;
         border-block-end: rem(1px) solid var-get($theme, 'header-border');
 
-        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
-        padding-block: if($variant != 'bootstrap', rem(24px), rem(16px)) rem(16px);
+        padding-inline: var(--query-builder-outer-padding);
+        padding-block: var(--query-builder-outer-padding) rem(16px);
     }
 
     %advanced-filter__title {

package/package.json

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