igniteui-angular 19.0.5 → 19.0.6

package/fesm2022/igniteui-angular.mjs

@@ -34179,6 +34179,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;
@@ -34457,15 +34459,15 @@ class IgxSlideComponent {
         this._destroy$.next(true);
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }, { token: IgxCarouselComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", 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: "19.0.0", 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: "19.0.0", 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: [{
@@ -35610,7 +35612,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: "19.0.0", ngImport: i0, type: IgxCarouselComponent, decorators: [{
@@ -35619,7 +35622,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         {
                             provide: HAMMER_GESTURE_CONFIG,
                             useClass: CarouselHammerConfig
-                        }
+                        },
+                        { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
                     ], selector: 'igx-carousel', 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,
@@ -44202,7 +44206,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
@@ -44231,7 +44235,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
@@ -44246,7 +44250,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
@@ -44306,7 +44310,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;
@@ -44715,7 +44719,7 @@ class IgxColumnComponent {
             this._calcWidth = this.grid.minColumnWidth;
         }
         else if (isPercentageWidth) {
-            this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
+            this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
         }
         else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
@@ -44724,7 +44728,7 @@ class IgxColumnComponent {
         else {
             this._calcWidth = this.width;
         }
-        this.calcPixelWidth = parseInt(this._calcWidth, 10);
+        this.calcPixelWidth = parseFloat(this._calcWidth);
     }
     /**
      * @hidden
@@ -45423,7 +45427,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';
     }
@@ -45529,7 +45533,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 */
@@ -45544,7 +45548,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;
     }
@@ -50009,10 +50013,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,
@@ -50072,6 +50077,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));
@@ -50182,13 +50191,13 @@ class IgxExcelStyleCustomDialogComponent {
             this.expressionsContainer.nativeElement.scrollTop = this.expressionsContainer.nativeElement.scrollHeight;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", 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: "19.0.0", 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: "19.0.0", 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: "19.0.0", 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: "19.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-custom-dialog', 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', 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
@@ -55898,7 +55907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", 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: "19.0.0", ngImport: i0, type: IgxHeaderGroupWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: IgxHeaderGroupWidthPipe, isStandalone: true, name: "igxHeaderGroupWidth" }); }
@@ -65339,7 +65348,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;
@@ -66104,7 +66113,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
@@ -66123,7 +66132,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;
             }
@@ -66137,9 +66146,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';
     }
     /**
@@ -67131,8 +67140,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 {