igniteui-angular 17.0.13 → 17.0.15

package/esm2022/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.mjs

@@ -186,10 +186,10 @@ export class IgxExcelStyleCustomDialogComponent {
             this.expressionsContainer.nativeElement.scrollTop = this.expressionsContainer.nativeElement.scrollHeight;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: i1.IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId", displayDensity: "displayDensity" }, 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.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\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                [displayDensity]=\"displayDensity\"\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                [displayDensity]=\"displayDensity\"\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 [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>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                [displayDensity]=\"displayDensity\"\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                [displayDensity]=\"displayDensity\"\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=\"raised\"\n                [displayDensity]=\"displayDensity\"\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", "displayDensity"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: i1.IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId", displayDensity: "displayDensity" }, 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.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\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                [displayDensity]=\"displayDensity\"\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                [displayDensity]=\"displayDensity\"\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 [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>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                [displayDensity]=\"displayDensity\"\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                [displayDensity]=\"displayDensity\"\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=\"raised\"\n                [displayDensity]=\"displayDensity\"\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", "displayDensity"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", 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.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\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                [displayDensity]=\"displayDensity\"\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                [displayDensity]=\"displayDensity\"\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 [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>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                [displayDensity]=\"displayDensity\"\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                [displayDensity]=\"displayDensity\"\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=\"raised\"\n                [displayDensity]=\"displayDensity\"\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: i1.IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: i2.PlatformUtil }], propDecorators: { expressionsList: [{

package/esm2022/lib/grids/filtering/excel-style/excel-style-date-expression.component.mjs

@@ -33,10 +33,10 @@ export class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultEx
     get weekStart() {
         return getLocaleFirstDayOfWeek(this.grid.locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-date-expression', standalone: true, imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], propDecorators: { input: [{

package/esm2022/lib/grids/filtering/excel-style/excel-style-default-expression.component.mjs

@@ -126,10 +126,10 @@ export class IgxExcelStyleDefaultExpressionComponent {
     onOutletPointerDown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleDefaultExpressionComponent, isStandalone: true, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid", displayDensity: "displayDensity" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n        </div>\n    </igx-select-item>\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\" [displayDensity]=\"displayDensity\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\">\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #orButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleDefaultExpressionComponent, isStandalone: true, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid", displayDensity: "displayDensity" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n        </div>\n    </igx-select-item>\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\" [displayDensity]=\"displayDensity\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\">\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #orButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-default-expression', standalone: true, imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n        </div>\n    </igx-select-item>\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\" [displayDensity]=\"displayDensity\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\">\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        tabindex=\"0\"\n        #orButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.PlatformUtil }], propDecorators: { column: [{

package/esm2022/lib/grids/filtering/excel-style/excel-style-filtering.component.mjs

@@ -22,10 +22,10 @@ import { IgxExcelStyleHeaderComponent } from './excel-style-header.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../core/utils";
 export class IgxExcelStyleColumnOperationsTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleColumnOperationsTemplateDirective, isStandalone: true, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleColumnOperationsTemplateDirective, isStandalone: true, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleColumnOperationsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-excel-style-column-operations,[igxExcelStyleColumnOperations]',
@@ -33,10 +33,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
                 }]
         }] });
 export class IgxExcelStyleFilterOperationsTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleFilterOperationsTemplateDirective, isStandalone: true, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleFilterOperationsTemplateDirective, isStandalone: true, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleFilterOperationsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]',
@@ -621,10 +621,10 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.PlatformUtil }, { token: DOCUMENT }, { token: IGX_GRID_BASE, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxGridExcelStyleFilteringComponent, isStandalone: true, selector: "igx-grid-excel-style-filtering", inputs: { column: "column", minHeight: "minHeight", maxHeight: "maxHeight" }, outputs: { loadingStart: "loadingStart", loadingEnd: "loadingEnd", initialized: "initialized", sortingChanged: "sortingChanged", columnChange: "columnChange", listDataLoaded: "listDataLoaded" }, host: { properties: { "class.igx-excel-filter": "this.defaultClass", "class.igx-excel-filter--inline": "this.inline", "style.max-height": "this.maxHeight" } }, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], queries: [{ propertyName: "excelColumnOperationsDirective", first: true, predicate: IgxExcelStyleColumnOperationsTemplateDirective, descendants: true, read: IgxExcelStyleColumnOperationsTemplateDirective }, { propertyName: "excelFilterOperationsDirective", first: true, predicate: IgxExcelStyleFilterOperationsTemplateDirective, descendants: true, read: IgxExcelStyleFilterOperationsTemplateDirective }], viewQueries: [{ propertyName: "mainDropdown", first: true, predicate: ["mainDropdown"], descendants: true, read: ElementRef }, { propertyName: "defaultExcelColumnOperations", first: true, predicate: ["defaultExcelColumnOperations"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultExcelFilterOperations", first: true, predicate: ["defaultExcelFilterOperations"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"grid?.moving\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n", dependencies: [{ kind: "component", type: IgxExcelStyleHeaderComponent, selector: "igx-excel-style-header", inputs: ["showPinning", "showSelecting", "showHiding"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxExcelStyleSortingComponent, selector: "igx-excel-style-sorting" }, { kind: "component", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving" }, { kind: "component", type: IgxExcelStylePinningComponent, selector: "igx-excel-style-pinning" }, { kind: "component", type: IgxExcelStyleHidingComponent, selector: "igx-excel-style-hiding" }, { kind: "component", type: IgxExcelStyleSelectingComponent, selector: "igx-excel-style-selecting" }, { kind: "component", type: IgxExcelStyleClearFiltersComponent, selector: "igx-excel-style-clear-filters" }, { kind: "component", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.PlatformUtil }, { token: DOCUMENT }, { token: IGX_GRID_BASE, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxGridExcelStyleFilteringComponent, isStandalone: true, selector: "igx-grid-excel-style-filtering", inputs: { column: "column", minHeight: "minHeight", maxHeight: "maxHeight" }, outputs: { loadingStart: "loadingStart", loadingEnd: "loadingEnd", initialized: "initialized", sortingChanged: "sortingChanged", columnChange: "columnChange", listDataLoaded: "listDataLoaded" }, host: { properties: { "class.igx-excel-filter": "this.defaultClass", "class.igx-excel-filter--inline": "this.inline", "style.max-height": "this.maxHeight" } }, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], queries: [{ propertyName: "excelColumnOperationsDirective", first: true, predicate: IgxExcelStyleColumnOperationsTemplateDirective, descendants: true, read: IgxExcelStyleColumnOperationsTemplateDirective }, { propertyName: "excelFilterOperationsDirective", first: true, predicate: IgxExcelStyleFilterOperationsTemplateDirective, descendants: true, read: IgxExcelStyleFilterOperationsTemplateDirective }], viewQueries: [{ propertyName: "mainDropdown", first: true, predicate: ["mainDropdown"], descendants: true, read: ElementRef }, { propertyName: "defaultExcelColumnOperations", first: true, predicate: ["defaultExcelColumnOperations"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultExcelFilterOperations", first: true, predicate: ["defaultExcelFilterOperations"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"grid?.moving\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n", dependencies: [{ kind: "component", type: IgxExcelStyleHeaderComponent, selector: "igx-excel-style-header", inputs: ["showPinning", "showSelecting", "showHiding"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxExcelStyleSortingComponent, selector: "igx-excel-style-sorting" }, { kind: "component", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving" }, { kind: "component", type: IgxExcelStylePinningComponent, selector: "igx-excel-style-pinning" }, { kind: "component", type: IgxExcelStyleHidingComponent, selector: "igx-excel-style-hiding" }, { kind: "component", type: IgxExcelStyleSelectingComponent, selector: "igx-excel-style-selecting" }, { kind: "component", type: IgxExcelStyleClearFiltersComponent, selector: "igx-excel-style-clear-filters" }, { kind: "component", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxGridExcelStyleFilteringComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], selector: 'igx-grid-excel-style-filtering', standalone: true, imports: [IgxExcelStyleHeaderComponent, NgIf, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass], template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"grid?.moving\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.PlatformUtil }, { type: undefined, decorators: [{

package/esm2022/lib/grids/filtering/excel-style/excel-style-header.component.mjs

@@ -11,10 +11,10 @@ export class IgxExcelStyleHeaderComponent {
     constructor(esf) {
         this.esf = esf;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.0.5", type: IgxExcelStyleHeaderComponent, isStandalone: true, selector: "igx-excel-style-header", inputs: { showPinning: ["showPinning", "showPinning", booleanAttribute], showSelecting: ["showSelecting", "showSelecting", booleanAttribute], showHiding: ["showHiding", "showHiding", booleanAttribute] }, ngImport: i0, template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon>done</igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n        </button>\n    </div>\n</header>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.1", type: IgxExcelStyleHeaderComponent, isStandalone: true, selector: "igx-excel-style-header", inputs: { showPinning: ["showPinning", "showPinning", booleanAttribute], showSelecting: ["showSelecting", "showSelecting", booleanAttribute], showHiding: ["showHiding", "showHiding", booleanAttribute] }, ngImport: i0, template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon>done</igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n        </button>\n    </div>\n</header>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-header', standalone: true, imports: [NgIf, IgxButtonDirective, NgClass, IgxIconComponent], template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon>done</igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            type=\"button\"\n            igxButton=\"icon\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n        </button>\n    </div>\n</header>\n" }]
         }], ctorParameters: () => [{ type: i1.BaseFilteringComponent }], propDecorators: { showPinning: [{

package/esm2022/lib/grids/filtering/excel-style/excel-style-hiding.component.mjs

@@ -10,10 +10,10 @@ export class IgxExcelStyleHidingComponent {
     constructor(esf) {
         this.esf = esf;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleHidingComponent, isStandalone: true, selector: "igx-excel-style-hiding", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    class=\"igx-excel-filter__actions-hide\"\n    tabindex=\"0\"\n    (click)=\"esf.onHideToggle()\"\n    role=\"menuitem\">\n    <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n    <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleHidingComponent, isStandalone: true, selector: "igx-excel-style-hiding", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    class=\"igx-excel-filter__actions-hide\"\n    tabindex=\"0\"\n    (click)=\"esf.onHideToggle()\"\n    role=\"menuitem\">\n    <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n    <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-hiding', standalone: true, imports: [NgIf, IgxIconComponent], template: "<div *ngIf=\"esf.column\"\n    class=\"igx-excel-filter__actions-hide\"\n    tabindex=\"0\"\n    (click)=\"esf.onHideToggle()\"\n    role=\"menuitem\">\n    <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n    <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.BaseFilteringComponent }] });

package/esm2022/lib/grids/filtering/excel-style/excel-style-moving.component.mjs

@@ -90,10 +90,10 @@ export class IgxExcelStyleMovingComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleMovingComponent, isStandalone: true, selector: "igx-excel-style-moving", host: { properties: { "class.igx-excel-filter__move": "this.defaultClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<igx-buttongroup>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</igx-buttongroup>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleMovingComponent, isStandalone: true, selector: "igx-excel-style-moving", host: { properties: { "class.igx-excel-filter__move": "this.defaultClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<igx-buttongroup>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</igx-buttongroup>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-moving', standalone: true, imports: [NgIf, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent], template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<igx-buttongroup>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.displayDensity\"\n        type=\"button\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</igx-buttongroup>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1.BaseFilteringComponent }], propDecorators: { defaultClass: [{

package/esm2022/lib/grids/filtering/excel-style/excel-style-pinning.component.mjs

@@ -10,10 +10,10 @@ export class IgxExcelStylePinningComponent {
     constructor(esf) {
         this.esf = esf;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStylePinningComponent, isStandalone: true, selector: "igx-excel-style-pinning", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n    (click)=\"esf.onPin()\"\n    tabindex=\"0\"\n    role=\"menuitem\">\n    <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n    <igx-icon family=\"imx-icons\" name=\"{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}\"></igx-icon>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStylePinningComponent, isStandalone: true, selector: "igx-excel-style-pinning", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n    (click)=\"esf.onPin()\"\n    tabindex=\"0\"\n    role=\"menuitem\">\n    <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n    <igx-icon family=\"imx-icons\" name=\"{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}\"></igx-icon>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-pinning', standalone: true, imports: [NgIf, NgClass, IgxIconComponent], template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n    (click)=\"esf.onPin()\"\n    tabindex=\"0\"\n    role=\"menuitem\">\n    <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n    <igx-icon family=\"imx-icons\" name=\"{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}\"></igx-icon>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.BaseFilteringComponent }] });

package/esm2022/lib/grids/filtering/excel-style/excel-style-search.component.mjs

@@ -35,10 +35,10 @@ export class IgxExcelStyleLoadingValuesTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleLoadingValuesTemplateDirective, isStandalone: true, selector: "[igxExcelStyleLoading]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleLoadingValuesTemplateDirective, isStandalone: true, selector: "[igxExcelStyleLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleLoading]',
@@ -699,10 +699,10 @@ export class IgxExcelStyleSearchComponent {
         const subRequired = indexOutOfChunk || scrollNeeded;
         return subRequired;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.BaseFilteringComponent }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleSearchComponent, isStandalone: true, selector: "igx-excel-style-search", inputs: { id: "id" }, host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: IgxButtonDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list role=\"listbox\" [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n[attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\" \n        *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\" #cancelButton\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.BaseFilteringComponent }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleSearchComponent, isStandalone: true, selector: "igx-excel-style-search", inputs: { id: "id" }, host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: IgxButtonDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list role=\"listbox\" [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n[attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\" \n        *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\" #cancelButton\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-search', standalone: true, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, NgFor, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective], template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list role=\"listbox\" [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n[attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\" \n        *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree [displayDensity]=\"esf.displayDensity\" selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\n\n<ng-template #emptySearch>\n    <div class=\"igx-excel-filter__empty\">\n        {{esf.grid?.resourceStrings.igx_grid_excel_no_matches}}\n    </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button type=\"button\" #cancelButton\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.BaseFilteringComponent }, { type: i2.PlatformUtil }], propDecorators: { defaultClass: [{

package/esm2022/lib/grids/filtering/excel-style/excel-style-selecting.component.mjs

@@ -10,10 +10,10 @@ export class IgxExcelStyleSelectingComponent {
     constructor(esf) {
         this.esf = esf;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleSelectingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleSelectingComponent, isStandalone: true, selector: "igx-excel-style-selecting", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n    tabindex=\"0\"\n    (click)=\"esf.onSelect()\"\n    role=\"button\"\n    [attr.aria-pressed]=\"esf.column.selected\">\n    <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n    <igx-icon>done</igx-icon>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleSelectingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleSelectingComponent, isStandalone: true, selector: "igx-excel-style-selecting", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n    tabindex=\"0\"\n    (click)=\"esf.onSelect()\"\n    role=\"button\"\n    [attr.aria-pressed]=\"esf.column.selected\">\n    <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n    <igx-icon>done</igx-icon>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-selecting', standalone: true, imports: [NgIf, NgClass, IgxIconComponent], template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n    tabindex=\"0\"\n    (click)=\"esf.onSelect()\"\n    role=\"button\"\n    [attr.aria-pressed]=\"esf.column.selected\">\n    <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n    <igx-icon>done</igx-icon>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.BaseFilteringComponent }] });

package/esm2022/lib/grids/filtering/excel-style/excel-style-sorting.component.mjs

@@ -54,10 +54,10 @@ export class IgxExcelStyleSortingComponent {
             this.sortButtonGroup.selectButton(sortDirection - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [{ token: i1.BaseFilteringComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: IgxExcelStyleSortingComponent, isStandalone: true, selector: "igx-excel-style-sorting", host: { properties: { "class.igx-excel-filter__sort": "this.defaultClass" } }, viewQueries: [{ propertyName: "sortButtonGroup", first: true, predicate: ["sortButtonGroup"], descendants: true, read: IgxButtonGroupComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n</header>\n<igx-buttongroup #sortButtonGroup>\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(1)\"\n        >\n        <igx-icon>arrow_upwards</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n        </span>\n    </button>\n\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(2)\"\n        >\n        <igx-icon>arrow_downwards</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n        }}\n        </span>\n    </button>\n</igx-buttongroup>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleSortingComponent, deps: [{ token: i1.BaseFilteringComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: IgxExcelStyleSortingComponent, isStandalone: true, selector: "igx-excel-style-sorting", host: { properties: { "class.igx-excel-filter__sort": "this.defaultClass" } }, viewQueries: [{ propertyName: "sortButtonGroup", first: true, predicate: ["sortButtonGroup"], descendants: true, read: IgxButtonGroupComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n</header>\n<igx-buttongroup #sortButtonGroup>\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(1)\"\n        >\n        <igx-icon>arrow_upwards</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n        </span>\n    </button>\n\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(2)\"\n        >\n        <igx-icon>arrow_downwards</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n        }}\n        </span>\n    </button>\n</igx-buttongroup>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: IgxExcelStyleSortingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: IgxExcelStyleSortingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-sorting', standalone: true, imports: [NgIf, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent], template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }}\n</header>\n<igx-buttongroup #sortButtonGroup>\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(1)\"\n        >\n        <igx-icon>arrow_upwards</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_asc  }}\n        </span>\n    </button>\n\n    <button type=\"button\"\n        igxButton\n        [displayDensity]=\"esf.displayDensity\"\n        [attr.data-togglable]=\"true\"\n        (click)=\"onSortButtonClicked(2)\"\n        >\n        <igx-icon>arrow_downwards</igx-icon>\n        <span>\n            {{ esf.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_sorting_desc\n        }}\n        </span>\n    </button>\n</igx-buttongroup>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1.BaseFilteringComponent }, { type: i0.ChangeDetectorRef }], propDecorators: { defaultClass: [{