igniteui-angular 18.2.9 → 18.2.11

package/fesm2022/igniteui-angular.mjs

@@ -34228,6 +34228,8 @@ var Direction;
     Direction[Direction["PREV"] = 2] = "PREV";
 })(Direction || (Direction = {}));
 /** @hidden */
+const IGX_CAROUSEL_COMPONENT = /*@__PURE__*/ new InjectionToken('IgxCarouselToken');
+/** @hidden */
 let IgxCarouselComponentBase = class IgxCarouselComponentBase {
     constructor(animationService, cdr) {
         this.animationService = animationService;
@@ -34506,15 +34508,15 @@ class IgxSlideComponent {
         this._destroy$.next(true);
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }, { token: IgxCarouselComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }, { token: IGX_CAROUSEL_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxSlideComponent, isStandalone: true, selector: "igx-slide", inputs: { index: "index", direction: "direction", total: "total", active: ["active", "active", booleanAttribute], previous: ["previous", "previous", booleanAttribute] }, outputs: { activeChange: "activeChange" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.id": "this.id", "attr.role": "this.tab", "attr.aria-labelledby": "this.ariaLabelledBy", "class.igx-slide": "this.cssClass", "class.igx-slide--current": "this.active", "class.igx-slide--previous": "this.previous" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxSlideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-slide', standalone: true, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxCarouselComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [IgxCarouselComponent]
+                    args: [IGX_CAROUSEL_COMPONENT]
                 }] }], propDecorators: { index: [{
                 type: Input
             }], direction: [{
@@ -35659,7 +35661,8 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
             {
                 provide: HAMMER_GESTURE_CONFIG,
                 useClass: CarouselHammerConfig
-            }
+            },
+            { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
         ], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: IgxCarouselIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "nextButtonTemplate", first: true, predicate: IgxCarouselNextButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "prevButtonTemplate", first: true, predicate: IgxCarouselPrevButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "slides", predicate: IgxSlideComponent }], viewQueries: [{ propertyName: "defaultIndicator", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultNextButton", first: true, predicate: ["defaultNextButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPrevButton", first: true, predicate: ["defaultPrevButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_indicators", predicate: ["indicators"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultIndicator let-slide>\n    <div class=\"igx-nav-dot\"\n        [class.igx-nav-dot--active]=\"slide.active\">\n    </div>\n</ng-template>\n\n<ng-template #defaultNextButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_next\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultPrevButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_prev\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--prev\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_previous_slide\"\n    [disabled]=\"prevButtonDisabled\"\n    (click)=\"prev()\"\n    (keydown)=\"handleKeydownPrev($event)\">\n    <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n</button>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--next\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_next_slide\"\n    [disabled]=\"nextButtonDisabled\"\n    (click)=\"next()\"\n    (keydown)=\"handleKeydownNext($event)\">\n    <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n</button>\n\n<div *ngIf=\"showIndicators\" [ngClass]=\"indicatorsClass\" [attr.role]=\"'tablist'\" (keyup)=\"handleKeyUp($event)\" (focusout)=\"handleFocusOut($event)\" (click)=\"handleClick()\" (keydown)=\"handleKeydown($event)\">\n    <div #indicators *ngFor=\"let slide of slides\"\n        class=\"igx-carousel-indicators__indicator\"\n        (click)=\"select(slide)\"\n        [id]=\"'tab-'+ slide.index + '-' + total\"\n        [attr.role]=\"'tab'\"\n        [attr.tabindex]=\"slide.active ? 0 : -1\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total\"\n        [attr.aria-controls]=\"'panel-' + slide.index\"\n        [attr.aria-selected]=\"slide.active\">\n        <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n    </div>\n</div>\n\n<div *ngIf=\"showIndicatorsLabel\" [ngClass]=\"indicatorsClass\" class=\"igx-carousel-label-indicator\">\n    <span [id]=\"labelId\" class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n</div>\n\n<div class=\"igx-carousel__inner\" [attr.aria-live]=\"!interval || stoppedByInteraction ? 'polite' : 'off'\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;outline-style:none}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxCarouselComponent, decorators: [{
@@ -35668,7 +35671,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         {
                             provide: HAMMER_GESTURE_CONFIG,
                             useClass: CarouselHammerConfig
-                        }
+                        },
+                        { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
                     ], selector: 'igx-carousel', standalone: true, imports: [IgxButtonDirective, IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet], template: "<ng-template #defaultIndicator let-slide>\n    <div class=\"igx-nav-dot\"\n        [class.igx-nav-dot--active]=\"slide.active\">\n    </div>\n</ng-template>\n\n<ng-template #defaultNextButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_next\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultPrevButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_prev\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--prev\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_previous_slide\"\n    [disabled]=\"prevButtonDisabled\"\n    (click)=\"prev()\"\n    (keydown)=\"handleKeydownPrev($event)\">\n    <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n</button>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--next\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_next_slide\"\n    [disabled]=\"nextButtonDisabled\"\n    (click)=\"next()\"\n    (keydown)=\"handleKeydownNext($event)\">\n    <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n</button>\n\n<div *ngIf=\"showIndicators\" [ngClass]=\"indicatorsClass\" [attr.role]=\"'tablist'\" (keyup)=\"handleKeyUp($event)\" (focusout)=\"handleFocusOut($event)\" (click)=\"handleClick()\" (keydown)=\"handleKeydown($event)\">\n    <div #indicators *ngFor=\"let slide of slides\"\n        class=\"igx-carousel-indicators__indicator\"\n        (click)=\"select(slide)\"\n        [id]=\"'tab-'+ slide.index + '-' + total\"\n        [attr.role]=\"'tab'\"\n        [attr.tabindex]=\"slide.active ? 0 : -1\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total\"\n        [attr.aria-controls]=\"'panel-' + slide.index\"\n        [attr.aria-selected]=\"slide.active\">\n        <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n    </div>\n</div>\n\n<div *ngIf=\"showIndicatorsLabel\" [ngClass]=\"indicatorsClass\" class=\"igx-carousel-label-indicator\">\n    <span [id]=\"labelId\" class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n</div>\n\n<div class=\"igx-carousel__inner\" [attr.aria-live]=\"!interval || stoppedByInteraction ? 'polite' : 'off'\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;outline-style:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{
                     type: Inject,
@@ -44232,7 +44236,7 @@ class IgxColumnComponent {
                 columnSizes[col.colStart - 1] = {
                     ref: col,
                     width: col.width === 'fit-content' ? col.autoSize :
-                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
+                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
                     colSpan: col.gridColumnSpan,
                     colEnd: col.colStart + col.gridColumnSpan,
                     widthSetByUser: col.widthSetByUser
@@ -44261,7 +44265,7 @@ class IgxColumnComponent {
                 columnSizes[col.colStart - 1] = {
                     ref: col,
                     width: col.width === 'fit-content' ? col.autoSize :
-                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
+                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
                     colSpan: col.gridColumnSpan,
                     colEnd: col.colStart + col.gridColumnSpan,
                     widthSetByUser: col.widthSetByUser
@@ -44276,7 +44280,7 @@ class IgxColumnComponent {
                         columnSizes[i] = {
                             ref: col,
                             width: col.width === 'fit-content' ? col.autoSize :
-                                col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
+                                col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
                             colSpan: col.gridColumnSpan,
                             colEnd: col.colStart + col.gridColumnSpan,
                             widthSetByUser: col.widthSetByUser
@@ -44336,7 +44340,7 @@ class IgxColumnComponent {
                 result.push(size.width + 'px');
             }
             else {
-                result.push(parseInt(this.grid.getPossibleColumnWidth(), 10) + 'px');
+                result.push(parseFloat(this.grid.getPossibleColumnWidth()) + 'px');
             }
         }
         return result;
@@ -44743,8 +44747,11 @@ class IgxColumnComponent {
         const colWidth = this.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         const isAutoWidth = colWidth && typeof colWidth === 'string' && colWidth === 'fit-content';
-        if (isPercentageWidth) {
-            this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
+        if (isPercentageWidth && this.grid.isColumnWidthSum) {
+            this._calcWidth = this.grid.minColumnWidth;
+        }
+        else if (isPercentageWidth) {
+            this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
         }
         else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
@@ -44753,7 +44760,7 @@ class IgxColumnComponent {
         else {
             this._calcWidth = this.width;
         }
-        this.calcPixelWidth = parseInt(this._calcWidth, 10);
+        this.calcPixelWidth = parseFloat(this._calcWidth);
     }
     /**
      * @hidden
@@ -45450,7 +45457,7 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
             if (val.hidden) {
                 return acc;
             }
-            return acc + parseInt(val.calcWidth, 10);
+            return acc + parseFloat(val.calcWidth);
         }, 0)}`;
         return width + 'px';
     }
@@ -45556,7 +45563,7 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
      * @memberof IgxColumnGroupComponent
      */
     get width() {
-        const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseInt(val, 10), 0);
+        const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseFloat(val), 0);
         return width;
     }
     /* blazorSuppress */
@@ -45571,7 +45578,7 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
         let borderWidth = 0;
         if (this.headerGroup && this.headerGroup.hasLastPinnedChildColumn) {
             const headerStyles = this.grid.document.defaultView.getComputedStyle(this.headerGroup.nativeElement.children[0]);
-            borderWidth = parseInt(headerStyles.borderRightWidth, 10);
+            borderWidth = parseFloat(headerStyles.borderRightWidth);
         }
         return super.getCalcWidth() + borderWidth;
     }
@@ -49462,8 +49469,8 @@ const GridResourceStringsEN = {
     igx_grid_excel_custom_dialog_add: 'add filter',
     igx_grid_excel_custom_dialog_clear: 'Clear filter',
     igx_grid_excel_custom_dialog_header: 'Custom auto-filter on column: ',
-    igx_grid_excel_cancel: 'cancel',
-    igx_grid_excel_apply: 'apply',
+    igx_grid_excel_cancel: 'Cancel',
+    igx_grid_excel_apply: 'Apply',
     igx_grid_excel_search_placeholder: 'Search',
     igx_grid_excel_select_all: 'Select All',
     igx_grid_excel_select_all_search_results: 'Select all search results',
@@ -50037,10 +50044,11 @@ function generateExpressionsListRecursive(expressions, operator, expressionsUIs)
  * @hidden
  */
 class IgxExcelStyleCustomDialogComponent {
-    constructor(overlayService, cdr, platform) {
+    constructor(overlayService, cdr, platform, esf) {
         this.overlayService = overlayService;
         this.cdr = cdr;
         this.platform = platform;
+        this.esf = esf;
         this.expressionsList = new Array();
         this._customDialogPositionSettings = {
             verticalDirection: VerticalAlignment.Middle,
@@ -50087,6 +50095,7 @@ class IgxExcelStyleCustomDialogComponent {
     }
     onClearButtonClick() {
         this.filteringService.clearFilter(this.column.field);
+        this.selectedOperator = null;
         this.createInitialExpressionUIElement();
         this.cdr.detectChanges();
     }
@@ -50099,6 +50108,10 @@ class IgxExcelStyleCustomDialogComponent {
             this.toggle.close();
         }
     }
+    cancelDialog() {
+        this.esf.cancel();
+        this.closeDialog();
+    }
     onApplyButtonClick() {
         this.expressionsList = this.expressionsList.filter(element => element.expression.condition &&
             (element.expression.searchVal || element.expression.searchVal === 0 || element.expression.condition.isUnary));
@@ -50209,13 +50222,13 @@ class IgxExcelStyleCustomDialogComponent {
             this.expressionsContainer.nativeElement.scrollTop = this.expressionsContainer.nativeElement.scrollHeight;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression" }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }, { token: BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression" }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-custom-dialog', standalone: true, imports: [IgxToggleDirective, NgClass, NgIf, NgFor, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent], template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
-        }], ctorParameters: () => [{ type: IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }], propDecorators: { expressionsList: [{
+            args: [{ selector: 'igx-excel-style-custom-dialog', standalone: true, imports: [IgxToggleDirective, NgClass, NgIf, NgFor, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent], template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
+        }], ctorParameters: () => [{ type: IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }, { type: BaseFilteringComponent }], propDecorators: { expressionsList: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -55079,7 +55092,8 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         this.filterValues = this.generateFilterValues();
         this.generateListData();
         this.expressionsList.forEach(expr => {
-            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
+            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase
+                && expr.expression.searchVal && expr.expression.searchVal instanceof Set) {
                 this.modifyExpression(expr);
             }
         });
@@ -55929,7 +55943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
 class IgxHeaderGroupWidthPipe {
     transform(width, minWidth, hasLayout) {
         const isFitContent = width === 'fit-content';
-        return hasLayout ? '' : isFitContent ? width : `${Math.max(parseInt(width), minWidth)}px`;
+        return hasLayout ? '' : isFitContent ? width : `${Math.max(parseFloat(width), minWidth)}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxHeaderGroupWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: IgxHeaderGroupWidthPipe, isStandalone: true, name: "igxHeaderGroupWidth" }); }
@@ -55984,7 +55998,7 @@ class IgxColumnResizingService {
      * @hidden
      */
     getColumnHeaderRenderedWidth() {
-        return this.column.headerCell.nativeElement.getBoundingClientRect().width;
+        return parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width);
     }
     /**
      * @hidden
@@ -56040,9 +56054,9 @@ class IgxColumnResizingService {
     /**
      * Resizes the column regaridng to the column minWidth and maxWidth.
      */
-    resizeColumn(event) {
+    resizeColumn(event, ratio = 1) {
         this.showResizer = false;
-        const diff = event.clientX - this.startResizePos;
+        const diff = (event.clientX - this.startResizePos) / ratio;
         const colWidth = this.column.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         let currentColWidth = parseFloat(colWidth);
@@ -60356,6 +60370,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
  * @internal
  */
 class IgxColumnResizerDirective {
+    get ratio() {
+        return this._ratio;
+    }
     constructor(element, document, zone) {
         this.element = element;
         this.document = document;
@@ -60366,9 +60383,10 @@ class IgxColumnResizerDirective {
         this.resizeStart = new Subject();
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.resize = new Subject();
+        this._ratio = 1;
         this._destroy = new Subject();
         this.resizeStart.pipe(takeUntil(this._destroy), map((event) => event.clientX), switchMap((offset) => this.resize
-            .pipe(takeUntil(this._destroy), takeUntil(this.resizeEnd), map((event) => event.clientX - offset))))
+            .pipe(takeUntil(this._destroy), takeUntil(this.resizeEnd), map((event) => (event.clientX - offset) / (this._ratio)))))
             .subscribe((pos) => {
             const left = this._left + pos;
             const min = this._left - this.restrictHResizeMin;
@@ -60411,7 +60429,12 @@ class IgxColumnResizerDirective {
     onMousedown(event) {
         event.preventDefault();
         const parent = this.element.nativeElement.parentElement.parentElement;
-        this.left = this._left = event.clientX - parent.getBoundingClientRect().left;
+        const parentRectWidth = parent.getBoundingClientRect().width;
+        const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width);
+        if (Math.abs(parentRectWidth - parentComputedWidth) > 1) {
+            this._ratio = parentRectWidth / parentComputedWidth;
+        }
+        this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;
         this.top = event.target.getBoundingClientRect().top - parent.getBoundingClientRect().top;
         this.resizeStart.next(event);
     }
@@ -60450,11 +60473,11 @@ class IgxGridColumnResizerComponent {
         this.colResizingService = colResizingService;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridColumnResizerComponent, deps: [{ token: IgxColumnResizingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridColumnResizerComponent, isStandalone: true, selector: "igx-grid-column-resizer", inputs: { restrictResizerTop: "restrictResizerTop" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: IgxColumnResizerDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridColumnResizerComponent, isStandalone: true, selector: "igx-grid-column-resizer", inputs: { restrictResizerTop: "restrictResizerTop" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: IgxColumnResizerDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridColumnResizerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-column-resizer', standalone: true, imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event)\">\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-column-resizer', standalone: true, imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n" }]
         }], ctorParameters: () => [{ type: IgxColumnResizingService }], propDecorators: { restrictResizerTop: [{
                 type: Input
             }], resizer: [{
@@ -64165,6 +64188,10 @@ class IgxGridBaseDirective {
          * @hidden @internal
          */
         this.filteringPipeTrigger = 0;
+        /**
+         * @hidden @internal
+         */
+        this.isColumnWidthSum = false;
         /**
          * @hidden @internal
          */
@@ -64293,7 +64320,6 @@ class IgxGridBaseDirective {
         this._rowSelectionMode = GridSelectionMode.none;
         this._selectRowOnClick = true;
         this._columnSelectionMode = GridSelectionMode.none;
-        this.isColumnWidthSum = false;
         this.rowEditPositioningStrategy = new RowEditPositionStrategy({
             horizontalDirection: HorizontalAlignment.Right,
             verticalDirection: VerticalAlignment.Bottom,
@@ -65338,7 +65364,7 @@ class IgxGridBaseDirective {
         let totalWidth = 0;
         let i = 0;
         for (i; i < cols.length; i++) {
-            totalWidth += parseInt(cols[i].calcWidth, 10) || 0;
+            totalWidth += parseFloat(cols[i].calcWidth) || 0;
         }
         this._totalWidth = totalWidth;
         return totalWidth;
@@ -66102,7 +66128,7 @@ class IgxGridBaseDirective {
         }
         else {
             computedWidth = this.calcWidth ||
-                parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
+                parseFloat(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'));
         }
         const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
         // Column layouts related
@@ -66121,7 +66147,7 @@ class IgxGridBaseDirective {
         const sumExistingWidths = columnsWithSetWidths
             .reduce((prev, curr) => {
             const colWidth = curr.width;
-            let widthValue = parseInt(colWidth, 10);
+            let widthValue = parseFloat(colWidth);
             if (isNaN(widthValue)) {
                 widthValue = MINIMUM_COLUMN_WIDTH$1;
             }
@@ -66135,9 +66161,9 @@ class IgxGridBaseDirective {
             return '0px';
         }
         computedWidth -= this.featureColumnsWidth();
-        const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
+        const columnWidth = !Number.isFinite(sumExistingWidths) ?
             Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
-            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth));
+            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth);
         return columnWidth + 'px';
     }
     /**
@@ -67106,8 +67132,11 @@ class IgxGridBaseDirective {
             width = this.nativeElement.offsetWidth;
         }
         if (this.width === null || !width) {
-            width = this.getColumnWidthSum();
             this.isColumnWidthSum = true;
+            width = this.getColumnWidthSum();
+        }
+        else {
+            this.isColumnWidthSum = false;
         }
         if (this.hasVerticalScroll() && this.width !== null) {
             width -= this.scrollSize;
@@ -67126,8 +67155,8 @@ class IgxGridBaseDirective {
             this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
         }
         this._columns.forEach((column) => {
-            if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
-                const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
+            if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
+                const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
             }
             else {
@@ -74641,11 +74670,11 @@ class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent {
         this.colResizingService = colResizingService;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotGridColumnResizerComponent, deps: [{ token: IgxPivotColumnResizingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxPivotGridColumnResizerComponent, isStandalone: true, selector: "igx-pivot-grid-column-resizer", usesInheritance: true, ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxPivotGridColumnResizerComponent, isStandalone: true, selector: "igx-pivot-grid-column-resizer", usesInheritance: true, ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotGridColumnResizerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-grid-column-resizer', standalone: true, imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event)\">\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-grid-column-resizer', standalone: true, imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n" }]
         }], ctorParameters: () => [{ type: IgxPivotColumnResizingService }] });
 
 class DefaultPivotGridRecordSortingStrategy extends DefaultSortingStrategy {
@@ -83435,6 +83464,7 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
         const columns = [];
         const topLevelCols = cols.filter(c => c.level === 0);
         topLevelCols.forEach((col) => {
+            col.grid = this;
             const ref = this._createColumn(col);
             ref.changeDetectorRef.detectChanges();
             columns.push(ref.instance);