igniteui-angular 20.1.14 → 20.1.15

package/fesm2022/igniteui-angular.mjs

@@ -4101,7 +4101,8 @@ class IgxBaseExporter {
             this._ownersMap.set(grid, columnList);
             const childLayoutList = grid.childLayoutList;
             for (const island of childLayoutList) {
-                this.mapHierarchicalGridColumns(island, grid.data[0]);
+                const gridData = grid.data && grid.data.length > 0 ? grid.data[0] : {};
+                this.mapHierarchicalGridColumns(island, gridData);
             }
         }
         else if (grid.type === 'pivot') {
@@ -4904,27 +4905,33 @@ class IgxBaseExporter {
         let columnList;
         let keyData;
         if (island.autoGenerate) {
-            keyData = gridData[island.key];
-            const islandKeys = island.children.map(i => i.key);
-            const islandData = keyData.map(i => {
-                const newItem = {};
-                Object.keys(i).map(k => {
-                    if (!islandKeys.includes(k)) {
-                        newItem[k] = i[k];
-                    }
+            keyData = gridData && gridData[island.key] ? gridData[island.key] : undefined;
+            const islandKeys = island.children && island.children.length > 0 ? island.children.map(i => i.key) : [];
+            if (keyData && Array.isArray(keyData) && keyData.length > 0) {
+                const islandData = keyData.map(i => {
+                    const newItem = {};
+                    Object.keys(i).map(k => {
+                        if (!islandKeys.includes(k)) {
+                            newItem[k] = i[k];
+                        }
+                    });
+                    return newItem;
                 });
-                return newItem;
-            });
-            columnList = this.getAutoGeneratedColumns(islandData);
+                columnList = this.getAutoGeneratedColumns(islandData);
+            }
+            else {
+                // If no data available, create empty column list
+                columnList = this.getAutoGeneratedColumns([{}]);
+            }
         }
         else {
             const islandColumnList = island.columns;
             columnList = this.getColumns(islandColumnList);
         }
         this._ownersMap.set(island, columnList);
-        if (island.children.length > 0) {
+        if (island.children && island.children.length > 0) {
             for (const childIsland of island.children) {
-                const islandKeyData = keyData !== undefined ? keyData[0] : {};
+                const islandKeyData = keyData && Array.isArray(keyData) && keyData.length > 0 ? keyData[0] : {};
                 this.mapHierarchicalGridColumns(childIsland, islandKeyData);
             }
         }
@@ -5141,19 +5148,27 @@ class CharSeparatedValueData {
         this._dataRecords = this.processDataRecords(this._data, keys);
         return this._headerRecord + this._dataRecords;
     }
-    prepareDataAsync(done) {
+    prepareDataAsync(done, alwaysExportHeaders = true) {
         const columns = this.columns?.filter(c => !c.skip)
             .sort((a, b) => a.startIndex - b.startIndex)
             .sort((a, b) => a.pinnedIndex - b.pinnedIndex);
         const keys = columns && columns.length ? columns.map(c => c.field) : ExportUtilities.getKeysFromData(this._data);
-        this._isSpecialData = ExportUtilities.isSpecialData(this._data[0]);
+        if (this._data && this._data.length > 0) {
+            this._isSpecialData = ExportUtilities.isSpecialData(this._data[0]);
+        }
         this._escapeCharacters.push(this._delimiter);
         const headers = columns && columns.length ?
             columns.map(c => c.header ?? c.field) :
             keys;
         this._headerRecord = this.processHeaderRecord(headers, this._data.length);
         if (keys.length === 0 || ((!this._data || this._data.length === 0) && keys.length === 0)) {
-            done('');
+            // If alwaysExportHeaders is true and we have headers, export headers only
+            if (alwaysExportHeaders && headers && headers.length > 0) {
+                done(this._headerRecord);
+            }
+            else {
+                done('');
+            }
         }
         else {
             this.processDataRecordsAsync(this._data, keys, (dr) => {
@@ -5488,10 +5503,33 @@ class IgxCsvExporterService extends IgxBaseExporter {
         this.exportEnded = new EventEmitter();
     }
     exportDataImplementation(data, options, done) {
-        const dimensionKeys = data[0]?.dimensionKeys;
-        data = dimensionKeys?.length ?
-            data.map((item) => item.rawData) :
-            data.map((item) => item.data);
+        const firstDataElement = data[0];
+        const dimensionKeys = firstDataElement?.dimensionKeys;
+        const dataRecords = dimensionKeys?.length ?
+            data.filter(item => item.type !== ExportRecordType.SummaryRecord).map((item) => item.rawData) :
+            data.filter(item => item.type !== ExportRecordType.SummaryRecord).map((item) => item.data);
+        // Get summary records if exportSummaries is enabled
+        const summaryRecords = [];
+        if (options.exportSummaries) {
+            const summaries = data.filter(item => item.type === ExportRecordType.SummaryRecord);
+            for (const summary of summaries) {
+                // Convert summary record data to a flat object format for CSV
+                const summaryData = {};
+                if (summary.data) {
+                    for (const [key, value] of Object.entries(summary.data)) {
+                        if (value && typeof value === 'object' && 'label' in value && 'value' in value) {
+                            summaryData[key] = `${value.label}: ${value.value}`;
+                        }
+                        else {
+                            summaryData[key] = value;
+                        }
+                    }
+                }
+                summaryRecords.push(summaryData);
+            }
+        }
+        // Combine data records and summary records
+        const allRecords = [...dataRecords, ...summaryRecords];
         const columnList = this._ownersMap.get(DEFAULT_OWNER);
         const columns = columnList?.columns.filter(c => c.headerType === ExportHeaderType.ColumnHeader);
         if (dimensionKeys) {
@@ -5509,13 +5547,13 @@ class IgxCsvExporterService extends IgxBaseExporter {
             });
             columns.unshift(...dimensionCols);
         }
-        const csvData = new CharSeparatedValueData(data, options.valueDelimiter, columns);
+        const csvData = new CharSeparatedValueData(allRecords, options.valueDelimiter, columns);
         csvData.prepareDataAsync((r) => {
             this._stringData = r;
             this.saveFile(options);
             this.exportEnded.emit({ csvData: this._stringData });
             done();
-        });
+        }, options.alwaysExportHeaders);
     }
     saveFile(options) {
         switch (options.fileType) {
@@ -6106,9 +6144,15 @@ class WorksheetFile {
         }
     }
     getSummaryFunction(type, key, dimensionMapKey, recordLevel, col) {
-        const dimensionMap = dimensionMapKey ? this.hierarchicalDimensionMap.get(dimensionMapKey) : this.dimensionMap;
+        const dimensionMap = dimensionMapKey ? (this.hierarchicalDimensionMap.get(dimensionMapKey) ?? this.dimensionMap) : this.dimensionMap;
+        if (!dimensionMap) {
+            return '';
+        }
         const dimensions = dimensionMap.get(key);
         const levelDimensions = dimensionMap.get(GRID_LEVEL_COL);
+        if (!dimensions || !levelDimensions) {
+            return '';
+        }
         let func = '';
         let funcType = '';
         let result = '';
@@ -6733,6 +6777,10 @@ class IgxExcelExporterService extends IgxBaseExporter {
         const firstDataElement = data[0];
         const isHierarchicalGrid = firstDataElement?.type === ExportRecordType.HierarchicalGridRecord;
         const isPivotGrid = firstDataElement?.type === ExportRecordType.PivotGridRecord;
+        const ownersKeys = Array.from(this._ownersMap.keys());
+        const firstKey = ownersKeys[0];
+        const isHierarchicalGridByMap = firstKey && typeof firstKey !== 'string';
+        const filterColumns = (columns) => columns.filter(col => col.field !== GRID_LEVEL_COL && !col.skip && col.headerType === ExportHeaderType.ColumnHeader);
         let rootKeys;
         let columnCount;
         let columnWidths;
@@ -6762,19 +6810,28 @@ class IgxExcelExporterService extends IgxBaseExporter {
                 defaultOwner = this._ownersMap.get(firstDataElement.owner);
             }
             else {
-                defaultOwner = this._ownersMap.get(DEFAULT_OWNER);
-                const columns = defaultOwner.columns.filter(col => col.field !== GRID_LEVEL_COL && !col.skip && col.headerType === ExportHeaderType.ColumnHeader);
-                columnWidths = defaultOwner.columnWidths;
-                indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
-                columnCount = isPivotGrid ? columns.length + this.pivotGridFilterFieldsCount : columns.length;
-                rootKeys = columns.map(c => c.field);
+                // Check if this is actually a hierarchical grid (when data only contains summary records)
+                defaultOwner = isHierarchicalGridByMap
+                    ? this._ownersMap.get(firstKey)
+                    : this._ownersMap.get(DEFAULT_OWNER) || this._ownersMap.get(firstKey);
+                if (defaultOwner) {
+                    const columns = filterColumns(defaultOwner.columns);
+                    columnWidths = defaultOwner.columnWidths;
+                    indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
+                    columnCount = isPivotGrid ? columns.length + this.pivotGridFilterFieldsCount : columns.length;
+                    rootKeys = columns.map(c => c.field);
+                }
             }
         }
         else {
-            const ownersKeys = Array.from(this._ownersMap.keys());
-            defaultOwner = this._ownersMap.get(ownersKeys[0]);
-            columnWidths = defaultOwner.columnWidths;
-            columnCount = defaultOwner.columns.filter(col => col.field !== GRID_LEVEL_COL && !col.skip && col.headerType === ExportHeaderType.ColumnHeader).length;
+            // For hierarchical grids with empty data, use the grid instance; otherwise try DEFAULT_OWNER first
+            defaultOwner = isHierarchicalGridByMap
+                ? this._ownersMap.get(firstKey)
+                : this._ownersMap.get(DEFAULT_OWNER) || this._ownersMap.get(firstKey);
+            if (defaultOwner) {
+                columnWidths = defaultOwner.columnWidths;
+                columnCount = filterColumns(defaultOwner.columns).length;
+            }
         }
         const worksheetData = new WorksheetData(data, options, this._sort, columnCount, rootKeys, indexOfLastPinnedColumn, columnWidths, defaultOwner, this._ownersMap);
         const rootFolder = ExcelElementsFactory.getExcelFolder(ExcelFolderTypes.RootExcelFolder);
@@ -10655,7 +10712,9 @@ class IgxButtonBaseDirective {
         }
     }
     ngOnDestroy() {
-        this._animationScheduler.unsubscribe();
+        if (this._animationScheduler) {
+            this._animationScheduler.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -53429,11 +53488,11 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
         return getLocaleFirstDayOfWeek(this.grid.locale);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, 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        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(value)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\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        <span igxButton\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\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: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "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", "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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["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"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, 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        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\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        <span igxButton\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\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: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "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", "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: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["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"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-date-expression', imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(value)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\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        <span igxButton\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\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
+            args: [{ selector: 'igx-excel-style-date-expression', imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\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        <span igxButton\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\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { read: IgxInputDirective, static: false }]
@@ -57801,8 +57860,8 @@ class IgxExcelStyleSearchComponent {
      * @hidden @internal
      */
     get applyButtonDisabled() {
-        return (this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||
-            (this.displayedListData && this.displayedListData.length === 0);
+        return ((this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||
+            (this.displayedListData && this.displayedListData.length === 0)) && !this._addToCurrentFilterItem?.isSelected;
     }
     /**
      * @hidden @internal
@@ -57918,11 +57977,28 @@ class IgxExcelStyleSearchComponent {
             selectedItems = this._hierarchicalSelectedItems;
         }
         else {
-            const item = this.displayedListData[1];
-            const addToCurrentFilterOptionVisible = item === this.addToCurrentFilterItem;
-            selectedItems = addToCurrentFilterOptionVisible && item.isSelected ?
-                this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected || el.isFiltered) :
-                this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected);
+            const addToCurrentFilter = this._addToCurrentFilterItem?.isSelected;
+            const displayedSet = new Set(this.displayedListData);
+            const listData = this.esf.listData;
+            for (let i = 1; i < listData.length; i++) {
+                const el = listData[i];
+                const isDisplayed = displayedSet.has(el);
+                if (isDisplayed) {
+                    if (el.isSelected) {
+                        selectedItems.push(el);
+                    }
+                }
+                else if (addToCurrentFilter) {
+                    // Hidden items with "add to current filter": include if selected or filtered
+                    if (el.isSelected || el.isFiltered) {
+                        selectedItems.push(el);
+                    }
+                }
+                else if (el.isSelected) {
+                    // Hidden items without "add to current filter": include if selected
+                    selectedItems.push(el);
+                }
+            }
         }
         let unselectedItem;
         if (this.isHierarchical()) {