igniteui-angular 13.0.17 → 13.0.18

package/fesm2020/igniteui-angular.mjs

@@ -48445,10 +48445,10 @@ class IgxGridToolbarAdvancedFilteringComponent {
     }
 }
 IgxGridToolbarAdvancedFilteringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, deps: [{ token: IgxToolbarToken }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridToolbarAdvancedFilteringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridToolbarAdvancedFilteringComponent, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog()\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IgxGridToolbarAdvancedFilteringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridToolbarAdvancedFilteringComponent, selector: "igx-grid-toolbar-advanced-filtering", inputs: { overlaySettings: "overlaySettings" }, ngImport: i0, template: "<button igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog()\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridToolbarAdvancedFilteringComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-advanced-filtering', template: "<button igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog()\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n" }]
+            args: [{ selector: 'igx-grid-toolbar-advanced-filtering', template: "<button igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog()\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n" }]
         }], ctorParameters: function () { return [{ type: IgxToolbarToken, decorators: [{
                     type: Inject,
                     args: [IgxToolbarToken]
@@ -51595,10 +51595,10 @@ class IgxAdvancedFilteringDialogComponent {
     }
 }
 IgxAdvancedFilteringDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxAdvancedFilteringDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxAdvancedFilteringDialogComponent, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "columnSelect", first: true, predicate: ["columnSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<article\n    *ngIf=\"grid\"\n    class=\"igx-advanced-filter\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\"\n    (dragEnd)=\"dragEnd()\"\n    (dragMove)=\"onDragMove($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter--cosy': grid.displayDensity === 'cosy',\n        'igx-advanced-filter--compact': grid.displayDensity === 'compact',\n        'igx-advanced-filter--inline': inline\n    }\"\n>\n    <header class=\"igx-advanced-filter__header\" igxDragHandle>\n        <h4 class=\"igx-typography__h6\" style=\"pointer-events: none;\">\n            {{ grid.resourceStrings.igx_grid_advanced_filter_title }}\n        </h4>\n        <div class=\"igx-filter-legend\">\n            <div class=\"igx-filter-legend__item--and\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_and_label }}</span>\n            </div>\n            <div class=\"igx-filter-legend__item--or\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_or_label }}</span>\n            </div>\n        </div>\n    </header>\n\n    <article #expressionsContainer\n             class=\"igx-advanced-filter__main\"\n             (scroll)=\"onExpressionsScrolled()\">\n        <ng-container *ngIf=\"!rootGroup\">\n\n            <button #addRootAndGroupButton\n                igxButton=\"outlined\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"addAndGroup()\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\" [displayDensity]=\"displayDensity\" (click)=\"addOrGroup()\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{grid.resourceStrings.igx_grid_advanced_filter_initial_text}}\n                </h6>\n            </div>\n        </ng-container>\n\n        <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n            <button #addConditionButton\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addCondition(expressionItem, afterExpression)\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_add_condition}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addAndGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addOrGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n        </ng-template>\n\n        <ng-template #filterOperandTemplate let-expressionItem>\n            <div *ngIf=\"!expressionItem.inEditMode\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                >\n                <igx-chip [data]=\"expressionItem\"\n                          [displayDensity]=\"displayDensity === 'compact' ? 'cosy' : displayDensity\"\n                          [removable]=\"true\"\n                          [selected]=\"expressionItem.selected\"\n                          (keydown)=\"invokeClick($event)\"\n                          (click)=\"onChipClick(expressionItem)\"\n                          (dblclick)=\"onChipDblClick(expressionItem)\"\n                          (remove)=\"onChipRemove(expressionItem)\"\n                          (selectedChanged)=\"onChipSelectionEnd()\"\n                    >\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">{{ expressionItem.columnHeader || expressionItem.expression.fieldName }}</span>\n                    <igx-prefix>\n                        <igx-icon family=\"imx-icons\" [name]=\"expressionItem.expression.condition.iconName\">\n                    </igx-icon>\n                    </igx-prefix>\n                    <span class=\"igx-filter-tree__expression-condition\">\n                        {{ getConditionFriendlyName(expressionItem.expression.condition.name) }}\n                    </span>\n                    <span igxSuffix *ngIf=\"!expressionItem.expression.condition.isUnary\">\n                        {{\n                            isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal | columnFormatter:getFormatter(expressionItem.expression.fieldName):undefined)\n                                : (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):undefined:grid.locale)\n                            : expressionItem.expression.searchVal\n                        }}\n                    </span>\n                </igx-chip>\n                <div class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"(expressionItem.selected && selectedExpressions.length === 1) || expressionItem.hovered\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionEdit(expressionItem)\">\n                        edit\n                    </igx-icon>\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionAdd(expressionItem)\"\n                        *ngIf=\"!expressionItem.inAddMode && (expressionItem.parent !== currentGroup || expressionItem !== currentGroup.children[currentGroup.children.length - 1])\"\n                    >\n                        add\n                    </igx-icon>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inEditMode\"\n                #editingInputsContainer\n                class=\"igx-filter-tree__inputs\"\n            >\n                <igx-select #columnSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"columnSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_column_placeholder\"\n                            [(ngModel)]=\"selectedColumn\">\n                    <igx-select-item *ngFor=\"let column of filterableColumns\" [value]=\"column\">\n                        {{column.header || column.field}}\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-select #conditionSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"conditionSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_filter_condition_placeholder\"\n                            [(ngModel)]=\"selectedCondition\"\n                            [disabled]=\"!selectedColumn\">\n                    <igx-prefix *ngIf=\"selectedColumn && conditionSelect.value && selectedColumn.filters.condition(conditionSelect.value)\">\n                        <igx-icon family=\"imx-icons\" [name]=\"selectedColumn.filters.condition(conditionSelect.value).iconName\">\n                        </igx-icon>\n                    </igx-prefix>\n                    <igx-select-item *ngFor=\"let condition of getConditionList()\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\">\n                        <div class=\"igx-grid__filtering-dropdown-items\">\n                            <igx-icon family=\"imx-icons\"\n                                      [name]=\"selectedColumn.filters.condition(condition).iconName\">\n                            </igx-icon>\n                            <span class=\"igx-grid__filtering-dropdown-text\">{{getConditionFriendlyName(condition)}}</span>\n                        </div>\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-input-group *ngIf=\"!selectedColumn || (selectedColumn.dataType !== 'date' && selectedColumn.dataType !== 'time' && selectedColumn.dataType !== 'dateTime')\"\n                                 type=\"box\"\n                                 [displayDensity]=\"'compact'\">\n                    <input #searchValueInput\n                           igxInput\n                           [disabled]=\"!selectedColumn || !selectedCondition\n                            || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"\n                           [type]=\"selectedColumn && selectedColumn.dataType === 'number' ? 'number' : 'text'\"\n                           [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_value_placeholder\"\n                           [(ngModel)]=\"searchValue\"/>\n                </igx-input-group>\n\n                <igx-date-picker #picker *ngIf=\"selectedColumn && selectedColumn.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [displayDensity]=\"'compact'\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                    [disabled]=\"!selectedColumn || !selectedCondition\n                        || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\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=\"selectedColumn && selectedColumn.dataType === 'time'\"\n                    [inputFormat]=\"selectedColumn.defaultTimeFormat\"\n                    [(value)]=\"searchValue\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    [displayDensity]=\"'compact'\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_time_placeholder\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"!selectedColumn || !selectedCondition ||\n                             (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\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 #inputGroup type=\"box\" *ngIf=\"selectedColumn && selectedColumn.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\">\n                    <input #input igxInput tabindex=\"0\"\n                        [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                        [igxDateTimeEditor]=\"selectedColumn.defaultDateTimeFormat\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"/>\n                </igx-input-group>\n\n                <div class=\"igx-filter-tree__inputs-actions\">\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitOperandEdit()\">\n                        <igx-icon>check</igx-icon>\n                    </button>\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            (click)=\"cancelOperandEdit()\">\n                        <igx-icon>close</igx-icon>\n                    </button>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inAddMode\"\n                #addModeContainer\n                class=\"igx-filter-tree__buttons\"\n            >\n                <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)\"></ng-container>\n                <button igxButton=\"icon\"\n                        [displayDensity]=\"displayDensity\"\n                        (click)=\"cancelOperandAdd()\">\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n\n        </ng-template>\n\n        <ng-template #expressionTreeTemplate let-expressionItem>\n            <div class=\"igx-filter-tree\">\n                <div tabindex=\"0\"\n                     class=\"igx-filter-tree__line\"\n                     [ngClass]=\"{\n                         'igx-filter-tree__line--and': expressionItem.operator === 0,\n                         'igx-filter-tree__line--or': expressionItem.operator === 1,\n                         'igx-filter-tree__line--selected': expressionItem.selected\n                     }\"\n                     (keydown)=\"invokeClick($event)\"\n                     (click)=\"onGroupClick(expressionItem)\"\n                ></div>\n\n                <div class=\"igx-filter-tree__expression\">\n                    <ng-container *ngFor=\"let expr of expressionItem.children\">\n                        <ng-container *ngTemplateOutlet=\"isExpressionGroup(expr) ? expressionTreeTemplate : filterOperandTemplate; context: context(expr)\"></ng-container>\n                    </ng-container>\n                    <div *ngIf=\"currentGroup === expressionItem\"\n                        #currentGroupButtonsContainer\n                        class=\"igx-filter-tree__buttons\">\n                        <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem)\"></ng-container>\n                        <button igxButton=\"outlined\"\n                                *ngIf=\"expressionItem !== rootGroup\"\n                                [displayDensity]=\"displayDensity\"\n                                [disabled]=\"hasEditedExpression || expressionItem.children.length < 2\"\n                                (click)=\"endGroup(expressionItem)\">\n                            <span>{{grid.resourceStrings.igx_grid_advanced_filter_end_group}}</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </ng-template>\n\n        <ng-container *ngIf=\"rootGroup\">\n            <ng-container *ngTemplateOutlet=\"expressionTreeTemplate; context: context(rootGroup)\"></ng-container>\n        </ng-container>\n\n        <div igxToggle\n            class=\"igx-filter-contextual-menu\"\n            (keydown)=\"onKeyDown($event)\"\n            (closed)=\"contextMenuClosed()\"\n            [ngClass]=\"{\n                'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n                'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n            }\"\n        >\n            <button igxButton=\"icon\"\n                    class=\"igx-filter-contextual-menu__close-btn\"\n                    (click)=\"clearSelection()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n\n            <ng-container *ngIf=\"contextualGroup\">\n                <igx-buttongroup [displayDensity]=\"displayDensity\"\n                                 [multiSelection]=\"false\"\n                                 [values]=\"filteringLogics\"\n                                 type=\"outline\"\n                                 (selected)=\"selectFilteringLogic($event)\">\n                </igx-buttongroup>\n\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"!contextualGroup.parent\"\n                    (click)=\"ungroup()\"\n                >\n                    <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_ungroup}}</span>\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteGroup()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    <igx-icon>delete</igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_delete}}</span>\n                </button>\n            </ng-container>\n            <ng-container *ngIf=\"!contextualGroup\">\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createAndGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_and_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createOrGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_or_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteFilters()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_delete_filters}}\n                </button>\n            </ng-container>\n        </div>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n<div #overlayOutlet\n     igxOverlayOutlet\n     class=\"igx-advanced-filter__outlet\"\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter"] }, { type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["weekStart", "hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { 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"] }, { type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostTemplate", "ghostHost", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }], pipes: { "columnFormatter": IgxColumnFormatterPipe, "date": i4.DatePipe } });
+IgxAdvancedFilteringDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxAdvancedFilteringDialogComponent, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "columnSelect", first: true, predicate: ["columnSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<article\n    *ngIf=\"grid\"\n    class=\"igx-advanced-filter\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\"\n    (dragEnd)=\"dragEnd()\"\n    (dragMove)=\"onDragMove($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter--cosy': grid.displayDensity === 'cosy',\n        'igx-advanced-filter--compact': grid.displayDensity === 'compact',\n        'igx-advanced-filter--inline': inline\n    }\"\n>\n    <header class=\"igx-advanced-filter__header\" igxDragHandle>\n        <h4 class=\"igx-typography__h6\" style=\"pointer-events: none;\">\n            {{ grid.resourceStrings.igx_grid_advanced_filter_title }}\n        </h4>\n        <div class=\"igx-filter-legend\">\n            <div class=\"igx-filter-legend__item--and\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_and_label }}</span>\n            </div>\n            <div class=\"igx-filter-legend__item--or\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_or_label }}</span>\n            </div>\n        </div>\n    </header>\n\n    <article #expressionsContainer\n             class=\"igx-advanced-filter__main\"\n             (scroll)=\"onExpressionsScrolled()\">\n        <ng-container *ngIf=\"!rootGroup\">\n\n            <button #addRootAndGroupButton\n                igxButton=\"outlined\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"addAndGroup()\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\" [displayDensity]=\"displayDensity\" (click)=\"addOrGroup()\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{grid.resourceStrings.igx_grid_advanced_filter_initial_text}}\n                </h6>\n            </div>\n        </ng-container>\n\n        <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n            <button #addConditionButton\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addCondition(expressionItem, afterExpression)\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_add_condition}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addAndGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addOrGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n        </ng-template>\n\n        <ng-template #filterOperandTemplate let-expressionItem>\n            <div *ngIf=\"!expressionItem.inEditMode\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                >\n                <igx-chip [data]=\"expressionItem\"\n                          [displayDensity]=\"displayDensity === 'compact' ? 'cosy' : displayDensity\"\n                          [removable]=\"true\"\n                          [selected]=\"expressionItem.selected\"\n                          (keydown)=\"invokeClick($event)\"\n                          (click)=\"onChipClick(expressionItem)\"\n                          (dblclick)=\"onChipDblClick(expressionItem)\"\n                          (remove)=\"onChipRemove(expressionItem)\"\n                          (selectedChanged)=\"onChipSelectionEnd()\"\n                    >\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">{{ expressionItem.columnHeader || expressionItem.expression.fieldName }}</span>\n                    <igx-prefix>\n                        <igx-icon family=\"imx-icons\" [name]=\"expressionItem.expression.condition.iconName\">\n                    </igx-icon>\n                    </igx-prefix>\n                    <span class=\"igx-filter-tree__expression-condition\">\n                        {{ getConditionFriendlyName(expressionItem.expression.condition.name) }}\n                    </span>\n                    <span igxSuffix *ngIf=\"!expressionItem.expression.condition.isUnary\">\n                        {{\n                            isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal | columnFormatter:getFormatter(expressionItem.expression.fieldName):undefined)\n                                : (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):undefined:grid.locale)\n                            : expressionItem.expression.searchVal\n                        }}\n                    </span>\n                </igx-chip>\n                <div class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"(expressionItem.selected && selectedExpressions.length === 1) || expressionItem.hovered\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionEdit(expressionItem)\">\n                        edit\n                    </igx-icon>\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionAdd(expressionItem)\"\n                        *ngIf=\"!expressionItem.inAddMode && (expressionItem.parent !== currentGroup || expressionItem !== currentGroup.children[currentGroup.children.length - 1])\"\n                    >\n                        add\n                    </igx-icon>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inEditMode\"\n                #editingInputsContainer\n                class=\"igx-filter-tree__inputs\"\n            >\n                <igx-select #columnSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"columnSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_column_placeholder\"\n                            [(ngModel)]=\"selectedColumn\">\n                    <igx-select-item *ngFor=\"let column of filterableColumns\" [value]=\"column\">\n                        {{column.header || column.field}}\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-select #conditionSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"conditionSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_filter_condition_placeholder\"\n                            [(ngModel)]=\"selectedCondition\"\n                            [disabled]=\"!selectedColumn\">\n                    <igx-prefix *ngIf=\"selectedColumn && conditionSelect.value && selectedColumn.filters.condition(conditionSelect.value)\">\n                        <igx-icon family=\"imx-icons\" [name]=\"selectedColumn.filters.condition(conditionSelect.value).iconName\">\n                        </igx-icon>\n                    </igx-prefix>\n                    <igx-select-item *ngFor=\"let condition of getConditionList()\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\">\n                        <div class=\"igx-grid__filtering-dropdown-items\">\n                            <igx-icon family=\"imx-icons\"\n                                      [name]=\"selectedColumn.filters.condition(condition).iconName\">\n                            </igx-icon>\n                            <span class=\"igx-grid__filtering-dropdown-text\">{{getConditionFriendlyName(condition)}}</span>\n                        </div>\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-input-group *ngIf=\"!selectedColumn || (selectedColumn.dataType !== 'date' && selectedColumn.dataType !== 'time' && selectedColumn.dataType !== 'dateTime')\"\n                                 type=\"box\"\n                                 [displayDensity]=\"'compact'\">\n                    <input #searchValueInput\n                           igxInput\n                           [disabled]=\"!selectedColumn || !selectedCondition\n                            || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"\n                           [type]=\"selectedColumn && selectedColumn.dataType === 'number' ? 'number' : 'text'\"\n                           [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_value_placeholder\"\n                           [(ngModel)]=\"searchValue\"/>\n                </igx-input-group>\n\n                <igx-date-picker #picker *ngIf=\"selectedColumn && selectedColumn.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [displayDensity]=\"'compact'\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                    [disabled]=\"!selectedColumn || !selectedCondition\n                        || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\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=\"selectedColumn && selectedColumn.dataType === 'time'\"\n                    [inputFormat]=\"selectedColumn.defaultTimeFormat\"\n                    [(value)]=\"searchValue\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    [displayDensity]=\"'compact'\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_time_placeholder\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"!selectedColumn || !selectedCondition ||\n                             (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\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 #inputGroup type=\"box\" *ngIf=\"selectedColumn && selectedColumn.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\">\n                    <input #input igxInput tabindex=\"0\"\n                        [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                        [igxDateTimeEditor]=\"selectedColumn.defaultDateTimeFormat\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"/>\n                </igx-input-group>\n\n                <div class=\"igx-filter-tree__inputs-actions\">\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitOperandEdit()\">\n                        <igx-icon>check</igx-icon>\n                    </button>\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            (click)=\"cancelOperandEdit()\">\n                        <igx-icon>close</igx-icon>\n                    </button>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inAddMode\"\n                #addModeContainer\n                class=\"igx-filter-tree__buttons\"\n            >\n                <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)\"></ng-container>\n                <button igxButton=\"icon\"\n                        [displayDensity]=\"displayDensity\"\n                        (click)=\"cancelOperandAdd()\">\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n\n        </ng-template>\n\n        <ng-template #expressionTreeTemplate let-expressionItem>\n            <div class=\"igx-filter-tree\">\n                <div tabindex=\"0\"\n                     class=\"igx-filter-tree__line\"\n                     [ngClass]=\"{\n                         'igx-filter-tree__line--and': expressionItem.operator === 0,\n                         'igx-filter-tree__line--or': expressionItem.operator === 1,\n                         'igx-filter-tree__line--selected': expressionItem.selected\n                     }\"\n                     (keydown)=\"invokeClick($event)\"\n                     (click)=\"onGroupClick(expressionItem)\"\n                ></div>\n\n                <div class=\"igx-filter-tree__expression\">\n                    <ng-container *ngFor=\"let expr of expressionItem.children\">\n                        <ng-container *ngTemplateOutlet=\"isExpressionGroup(expr) ? expressionTreeTemplate : filterOperandTemplate; context: context(expr)\"></ng-container>\n                    </ng-container>\n                    <div *ngIf=\"currentGroup === expressionItem\"\n                        #currentGroupButtonsContainer\n                        class=\"igx-filter-tree__buttons\">\n                        <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem)\"></ng-container>\n                        <button igxButton=\"outlined\"\n                                *ngIf=\"expressionItem !== rootGroup\"\n                                [displayDensity]=\"displayDensity\"\n                                [disabled]=\"hasEditedExpression || expressionItem.children.length < 2\"\n                                (click)=\"endGroup(expressionItem)\">\n                            <span>{{grid.resourceStrings.igx_grid_advanced_filter_end_group}}</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </ng-template>\n\n        <ng-container *ngIf=\"rootGroup\">\n            <ng-container *ngTemplateOutlet=\"expressionTreeTemplate; context: context(rootGroup)\"></ng-container>\n        </ng-container>\n\n        <div igxToggle\n            class=\"igx-filter-contextual-menu\"\n            (keydown)=\"onKeyDown($event)\"\n            (closed)=\"contextMenuClosed()\"\n            [ngClass]=\"{\n                'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n                'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n            }\"\n        >\n            <button igxButton=\"icon\"\n                    class=\"igx-filter-contextual-menu__close-btn\"\n                    (click)=\"clearSelection()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n\n            <ng-container *ngIf=\"contextualGroup\">\n                <igx-buttongroup [displayDensity]=\"displayDensity\"\n                                 [multiSelection]=\"false\"\n                                 [values]=\"filteringLogics\"\n                                 type=\"outline\"\n                                 (selected)=\"selectFilteringLogic($event)\">\n                </igx-buttongroup>\n\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"!contextualGroup.parent\"\n                    (click)=\"ungroup()\"\n                >\n                    <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_ungroup}}</span>\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteGroup()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    <igx-icon>delete</igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_delete}}</span>\n                </button>\n            </ng-container>\n            <ng-container *ngIf=\"!contextualGroup\">\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createAndGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_and_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createOrGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_or_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteFilters()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_delete_filters}}\n                </button>\n            </ng-container>\n        </div>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n<div #overlayOutlet\n     igxOverlayOutlet\n     class=\"igx-advanced-filter__outlet\"\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter"] }, { type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["weekStart", "hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { 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"] }, { type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostTemplate", "ghostHost", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }], pipes: { "columnFormatter": IgxColumnFormatterPipe, "date": i4.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-advanced-filtering-dialog', template: "<article\n    *ngIf=\"grid\"\n    class=\"igx-advanced-filter\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\"\n    (dragEnd)=\"dragEnd()\"\n    (dragMove)=\"onDragMove($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter--cosy': grid.displayDensity === 'cosy',\n        'igx-advanced-filter--compact': grid.displayDensity === 'compact',\n        'igx-advanced-filter--inline': inline\n    }\"\n>\n    <header class=\"igx-advanced-filter__header\" igxDragHandle>\n        <h4 class=\"igx-typography__h6\" style=\"pointer-events: none;\">\n            {{ grid.resourceStrings.igx_grid_advanced_filter_title }}\n        </h4>\n        <div class=\"igx-filter-legend\">\n            <div class=\"igx-filter-legend__item--and\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_and_label }}</span>\n            </div>\n            <div class=\"igx-filter-legend__item--or\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_or_label }}</span>\n            </div>\n        </div>\n    </header>\n\n    <article #expressionsContainer\n             class=\"igx-advanced-filter__main\"\n             (scroll)=\"onExpressionsScrolled()\">\n        <ng-container *ngIf=\"!rootGroup\">\n\n            <button #addRootAndGroupButton\n                igxButton=\"outlined\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"addAndGroup()\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\" [displayDensity]=\"displayDensity\" (click)=\"addOrGroup()\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{grid.resourceStrings.igx_grid_advanced_filter_initial_text}}\n                </h6>\n            </div>\n        </ng-container>\n\n        <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n            <button #addConditionButton\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addCondition(expressionItem, afterExpression)\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_add_condition}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addAndGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addOrGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n        </ng-template>\n\n        <ng-template #filterOperandTemplate let-expressionItem>\n            <div *ngIf=\"!expressionItem.inEditMode\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                >\n                <igx-chip [data]=\"expressionItem\"\n                          [displayDensity]=\"displayDensity === 'compact' ? 'cosy' : displayDensity\"\n                          [removable]=\"true\"\n                          [selected]=\"expressionItem.selected\"\n                          (keydown)=\"invokeClick($event)\"\n                          (click)=\"onChipClick(expressionItem)\"\n                          (dblclick)=\"onChipDblClick(expressionItem)\"\n                          (remove)=\"onChipRemove(expressionItem)\"\n                          (selectedChanged)=\"onChipSelectionEnd()\"\n                    >\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">{{ expressionItem.columnHeader || expressionItem.expression.fieldName }}</span>\n                    <igx-prefix>\n                        <igx-icon family=\"imx-icons\" [name]=\"expressionItem.expression.condition.iconName\">\n                    </igx-icon>\n                    </igx-prefix>\n                    <span class=\"igx-filter-tree__expression-condition\">\n                        {{ getConditionFriendlyName(expressionItem.expression.condition.name) }}\n                    </span>\n                    <span igxSuffix *ngIf=\"!expressionItem.expression.condition.isUnary\">\n                        {{\n                            isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal | columnFormatter:getFormatter(expressionItem.expression.fieldName):undefined)\n                                : (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):undefined:grid.locale)\n                            : expressionItem.expression.searchVal\n                        }}\n                    </span>\n                </igx-chip>\n                <div class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"(expressionItem.selected && selectedExpressions.length === 1) || expressionItem.hovered\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionEdit(expressionItem)\">\n                        edit\n                    </igx-icon>\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionAdd(expressionItem)\"\n                        *ngIf=\"!expressionItem.inAddMode && (expressionItem.parent !== currentGroup || expressionItem !== currentGroup.children[currentGroup.children.length - 1])\"\n                    >\n                        add\n                    </igx-icon>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inEditMode\"\n                #editingInputsContainer\n                class=\"igx-filter-tree__inputs\"\n            >\n                <igx-select #columnSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"columnSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_column_placeholder\"\n                            [(ngModel)]=\"selectedColumn\">\n                    <igx-select-item *ngFor=\"let column of filterableColumns\" [value]=\"column\">\n                        {{column.header || column.field}}\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-select #conditionSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"conditionSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_filter_condition_placeholder\"\n                            [(ngModel)]=\"selectedCondition\"\n                            [disabled]=\"!selectedColumn\">\n                    <igx-prefix *ngIf=\"selectedColumn && conditionSelect.value && selectedColumn.filters.condition(conditionSelect.value)\">\n                        <igx-icon family=\"imx-icons\" [name]=\"selectedColumn.filters.condition(conditionSelect.value).iconName\">\n                        </igx-icon>\n                    </igx-prefix>\n                    <igx-select-item *ngFor=\"let condition of getConditionList()\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\">\n                        <div class=\"igx-grid__filtering-dropdown-items\">\n                            <igx-icon family=\"imx-icons\"\n                                      [name]=\"selectedColumn.filters.condition(condition).iconName\">\n                            </igx-icon>\n                            <span class=\"igx-grid__filtering-dropdown-text\">{{getConditionFriendlyName(condition)}}</span>\n                        </div>\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-input-group *ngIf=\"!selectedColumn || (selectedColumn.dataType !== 'date' && selectedColumn.dataType !== 'time' && selectedColumn.dataType !== 'dateTime')\"\n                                 type=\"box\"\n                                 [displayDensity]=\"'compact'\">\n                    <input #searchValueInput\n                           igxInput\n                           [disabled]=\"!selectedColumn || !selectedCondition\n                            || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"\n                           [type]=\"selectedColumn && selectedColumn.dataType === 'number' ? 'number' : 'text'\"\n                           [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_value_placeholder\"\n                           [(ngModel)]=\"searchValue\"/>\n                </igx-input-group>\n\n                <igx-date-picker #picker *ngIf=\"selectedColumn && selectedColumn.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [displayDensity]=\"'compact'\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                    [disabled]=\"!selectedColumn || !selectedCondition\n                        || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\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=\"selectedColumn && selectedColumn.dataType === 'time'\"\n                    [inputFormat]=\"selectedColumn.defaultTimeFormat\"\n                    [(value)]=\"searchValue\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    [displayDensity]=\"'compact'\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_time_placeholder\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"!selectedColumn || !selectedCondition ||\n                             (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\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 #inputGroup type=\"box\" *ngIf=\"selectedColumn && selectedColumn.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\">\n                    <input #input igxInput tabindex=\"0\"\n                        [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                        [igxDateTimeEditor]=\"selectedColumn.defaultDateTimeFormat\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"/>\n                </igx-input-group>\n\n                <div class=\"igx-filter-tree__inputs-actions\">\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitOperandEdit()\">\n                        <igx-icon>check</igx-icon>\n                    </button>\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            (click)=\"cancelOperandEdit()\">\n                        <igx-icon>close</igx-icon>\n                    </button>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inAddMode\"\n                #addModeContainer\n                class=\"igx-filter-tree__buttons\"\n            >\n                <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)\"></ng-container>\n                <button igxButton=\"icon\"\n                        [displayDensity]=\"displayDensity\"\n                        (click)=\"cancelOperandAdd()\">\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n\n        </ng-template>\n\n        <ng-template #expressionTreeTemplate let-expressionItem>\n            <div class=\"igx-filter-tree\">\n                <div tabindex=\"0\"\n                     class=\"igx-filter-tree__line\"\n                     [ngClass]=\"{\n                         'igx-filter-tree__line--and': expressionItem.operator === 0,\n                         'igx-filter-tree__line--or': expressionItem.operator === 1,\n                         'igx-filter-tree__line--selected': expressionItem.selected\n                     }\"\n                     (keydown)=\"invokeClick($event)\"\n                     (click)=\"onGroupClick(expressionItem)\"\n                ></div>\n\n                <div class=\"igx-filter-tree__expression\">\n                    <ng-container *ngFor=\"let expr of expressionItem.children\">\n                        <ng-container *ngTemplateOutlet=\"isExpressionGroup(expr) ? expressionTreeTemplate : filterOperandTemplate; context: context(expr)\"></ng-container>\n                    </ng-container>\n                    <div *ngIf=\"currentGroup === expressionItem\"\n                        #currentGroupButtonsContainer\n                        class=\"igx-filter-tree__buttons\">\n                        <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem)\"></ng-container>\n                        <button igxButton=\"outlined\"\n                                *ngIf=\"expressionItem !== rootGroup\"\n                                [displayDensity]=\"displayDensity\"\n                                [disabled]=\"hasEditedExpression || expressionItem.children.length < 2\"\n                                (click)=\"endGroup(expressionItem)\">\n                            <span>{{grid.resourceStrings.igx_grid_advanced_filter_end_group}}</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </ng-template>\n\n        <ng-container *ngIf=\"rootGroup\">\n            <ng-container *ngTemplateOutlet=\"expressionTreeTemplate; context: context(rootGroup)\"></ng-container>\n        </ng-container>\n\n        <div igxToggle\n            class=\"igx-filter-contextual-menu\"\n            (keydown)=\"onKeyDown($event)\"\n            (closed)=\"contextMenuClosed()\"\n            [ngClass]=\"{\n                'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n                'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n            }\"\n        >\n            <button igxButton=\"icon\"\n                    class=\"igx-filter-contextual-menu__close-btn\"\n                    (click)=\"clearSelection()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n\n            <ng-container *ngIf=\"contextualGroup\">\n                <igx-buttongroup [displayDensity]=\"displayDensity\"\n                                 [multiSelection]=\"false\"\n                                 [values]=\"filteringLogics\"\n                                 type=\"outline\"\n                                 (selected)=\"selectFilteringLogic($event)\">\n                </igx-buttongroup>\n\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"!contextualGroup.parent\"\n                    (click)=\"ungroup()\"\n                >\n                    <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_ungroup}}</span>\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteGroup()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    <igx-icon>delete</igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_delete}}</span>\n                </button>\n            </ng-container>\n            <ng-container *ngIf=\"!contextualGroup\">\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createAndGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_and_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createOrGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_or_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteFilters()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_delete_filters}}\n                </button>\n            </ng-container>\n        </div>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n<div #overlayOutlet\n     igxOverlayOutlet\n     class=\"igx-advanced-filter__outlet\"\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
+            args: [{ selector: 'igx-advanced-filtering-dialog', template: "<article\n    *ngIf=\"grid\"\n    class=\"igx-advanced-filter\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\"\n    (dragEnd)=\"dragEnd()\"\n    (dragMove)=\"onDragMove($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter--cosy': grid.displayDensity === 'cosy',\n        'igx-advanced-filter--compact': grid.displayDensity === 'compact',\n        'igx-advanced-filter--inline': inline\n    }\"\n>\n    <header class=\"igx-advanced-filter__header\" igxDragHandle>\n        <h4 class=\"igx-typography__h6\" style=\"pointer-events: none;\">\n            {{ grid.resourceStrings.igx_grid_advanced_filter_title }}\n        </h4>\n        <div class=\"igx-filter-legend\">\n            <div class=\"igx-filter-legend__item--and\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_and_label }}</span>\n            </div>\n            <div class=\"igx-filter-legend__item--or\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_or_label }}</span>\n            </div>\n        </div>\n    </header>\n\n    <article #expressionsContainer\n             class=\"igx-advanced-filter__main\"\n             (scroll)=\"onExpressionsScrolled()\">\n        <ng-container *ngIf=\"!rootGroup\">\n\n            <button #addRootAndGroupButton\n                igxButton=\"outlined\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"addAndGroup()\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\" [displayDensity]=\"displayDensity\" (click)=\"addOrGroup()\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{grid.resourceStrings.igx_grid_advanced_filter_initial_text}}\n                </h6>\n            </div>\n        </ng-container>\n\n        <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n            <button #addConditionButton\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addCondition(expressionItem, afterExpression)\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_add_condition}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addAndGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addOrGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n        </ng-template>\n\n        <ng-template #filterOperandTemplate let-expressionItem>\n            <div *ngIf=\"!expressionItem.inEditMode\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                >\n                <igx-chip [data]=\"expressionItem\"\n                          [displayDensity]=\"displayDensity === 'compact' ? 'cosy' : displayDensity\"\n                          [removable]=\"true\"\n                          [selected]=\"expressionItem.selected\"\n                          (keydown)=\"invokeClick($event)\"\n                          (click)=\"onChipClick(expressionItem)\"\n                          (dblclick)=\"onChipDblClick(expressionItem)\"\n                          (remove)=\"onChipRemove(expressionItem)\"\n                          (selectedChanged)=\"onChipSelectionEnd()\"\n                    >\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">{{ expressionItem.columnHeader || expressionItem.expression.fieldName }}</span>\n                    <igx-prefix>\n                        <igx-icon family=\"imx-icons\" [name]=\"expressionItem.expression.condition.iconName\">\n                    </igx-icon>\n                    </igx-prefix>\n                    <span class=\"igx-filter-tree__expression-condition\">\n                        {{ getConditionFriendlyName(expressionItem.expression.condition.name) }}\n                    </span>\n                    <span igxSuffix *ngIf=\"!expressionItem.expression.condition.isUnary\">\n                        {{\n                            isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal | columnFormatter:getFormatter(expressionItem.expression.fieldName):undefined)\n                                : (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):undefined:grid.locale)\n                            : expressionItem.expression.searchVal\n                        }}\n                    </span>\n                </igx-chip>\n                <div class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"(expressionItem.selected && selectedExpressions.length === 1) || expressionItem.hovered\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionEdit(expressionItem)\">\n                        edit\n                    </igx-icon>\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionAdd(expressionItem)\"\n                        *ngIf=\"!expressionItem.inAddMode && (expressionItem.parent !== currentGroup || expressionItem !== currentGroup.children[currentGroup.children.length - 1])\"\n                    >\n                        add\n                    </igx-icon>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inEditMode\"\n                #editingInputsContainer\n                class=\"igx-filter-tree__inputs\"\n            >\n                <igx-select #columnSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"columnSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_column_placeholder\"\n                            [(ngModel)]=\"selectedColumn\">\n                    <igx-select-item *ngFor=\"let column of filterableColumns\" [value]=\"column\">\n                        {{column.header || column.field}}\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-select #conditionSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"conditionSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_filter_condition_placeholder\"\n                            [(ngModel)]=\"selectedCondition\"\n                            [disabled]=\"!selectedColumn\">\n                    <igx-prefix *ngIf=\"selectedColumn && conditionSelect.value && selectedColumn.filters.condition(conditionSelect.value)\">\n                        <igx-icon family=\"imx-icons\" [name]=\"selectedColumn.filters.condition(conditionSelect.value).iconName\">\n                        </igx-icon>\n                    </igx-prefix>\n                    <igx-select-item *ngFor=\"let condition of getConditionList()\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\">\n                        <div class=\"igx-grid__filtering-dropdown-items\">\n                            <igx-icon family=\"imx-icons\"\n                                      [name]=\"selectedColumn.filters.condition(condition).iconName\">\n                            </igx-icon>\n                            <span class=\"igx-grid__filtering-dropdown-text\">{{getConditionFriendlyName(condition)}}</span>\n                        </div>\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-input-group *ngIf=\"!selectedColumn || (selectedColumn.dataType !== 'date' && selectedColumn.dataType !== 'time' && selectedColumn.dataType !== 'dateTime')\"\n                                 type=\"box\"\n                                 [displayDensity]=\"'compact'\">\n                    <input #searchValueInput\n                           igxInput\n                           [disabled]=\"!selectedColumn || !selectedCondition\n                            || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"\n                           [type]=\"selectedColumn && selectedColumn.dataType === 'number' ? 'number' : 'text'\"\n                           [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_value_placeholder\"\n                           [(ngModel)]=\"searchValue\"/>\n                </igx-input-group>\n\n                <igx-date-picker #picker *ngIf=\"selectedColumn && selectedColumn.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [displayDensity]=\"'compact'\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                    [disabled]=\"!selectedColumn || !selectedCondition\n                        || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\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=\"selectedColumn && selectedColumn.dataType === 'time'\"\n                    [inputFormat]=\"selectedColumn.defaultTimeFormat\"\n                    [(value)]=\"searchValue\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    [displayDensity]=\"'compact'\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_time_placeholder\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"!selectedColumn || !selectedCondition ||\n                             (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\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 #inputGroup type=\"box\" *ngIf=\"selectedColumn && selectedColumn.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\">\n                    <input #input igxInput tabindex=\"0\"\n                        [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                        [igxDateTimeEditor]=\"selectedColumn.defaultDateTimeFormat\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"/>\n                </igx-input-group>\n\n                <div class=\"igx-filter-tree__inputs-actions\">\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitOperandEdit()\">\n                        <igx-icon>check</igx-icon>\n                    </button>\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            (click)=\"cancelOperandEdit()\">\n                        <igx-icon>close</igx-icon>\n                    </button>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inAddMode\"\n                #addModeContainer\n                class=\"igx-filter-tree__buttons\"\n            >\n                <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)\"></ng-container>\n                <button igxButton=\"icon\"\n                        [displayDensity]=\"displayDensity\"\n                        (click)=\"cancelOperandAdd()\">\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n\n        </ng-template>\n\n        <ng-template #expressionTreeTemplate let-expressionItem>\n            <div class=\"igx-filter-tree\">\n                <div tabindex=\"0\"\n                     class=\"igx-filter-tree__line\"\n                     [ngClass]=\"{\n                         'igx-filter-tree__line--and': expressionItem.operator === 0,\n                         'igx-filter-tree__line--or': expressionItem.operator === 1,\n                         'igx-filter-tree__line--selected': expressionItem.selected\n                     }\"\n                     (keydown)=\"invokeClick($event)\"\n                     (click)=\"onGroupClick(expressionItem)\"\n                ></div>\n\n                <div class=\"igx-filter-tree__expression\">\n                    <ng-container *ngFor=\"let expr of expressionItem.children\">\n                        <ng-container *ngTemplateOutlet=\"isExpressionGroup(expr) ? expressionTreeTemplate : filterOperandTemplate; context: context(expr)\"></ng-container>\n                    </ng-container>\n                    <div *ngIf=\"currentGroup === expressionItem\"\n                        #currentGroupButtonsContainer\n                        class=\"igx-filter-tree__buttons\">\n                        <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem)\"></ng-container>\n                        <button igxButton=\"outlined\"\n                                *ngIf=\"expressionItem !== rootGroup\"\n                                [displayDensity]=\"displayDensity\"\n                                [disabled]=\"hasEditedExpression || expressionItem.children.length < 2\"\n                                (click)=\"endGroup(expressionItem)\">\n                            <span>{{grid.resourceStrings.igx_grid_advanced_filter_end_group}}</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </ng-template>\n\n        <ng-container *ngIf=\"rootGroup\">\n            <ng-container *ngTemplateOutlet=\"expressionTreeTemplate; context: context(rootGroup)\"></ng-container>\n        </ng-container>\n\n        <div igxToggle\n            class=\"igx-filter-contextual-menu\"\n            (keydown)=\"onKeyDown($event)\"\n            (closed)=\"contextMenuClosed()\"\n            [ngClass]=\"{\n                'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n                'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n            }\"\n        >\n            <button igxButton=\"icon\"\n                    class=\"igx-filter-contextual-menu__close-btn\"\n                    (click)=\"clearSelection()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n\n            <ng-container *ngIf=\"contextualGroup\">\n                <igx-buttongroup [displayDensity]=\"displayDensity\"\n                                 [multiSelection]=\"false\"\n                                 [values]=\"filteringLogics\"\n                                 type=\"outline\"\n                                 (selected)=\"selectFilteringLogic($event)\">\n                </igx-buttongroup>\n\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"!contextualGroup.parent\"\n                    (click)=\"ungroup()\"\n                >\n                    <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_ungroup}}</span>\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteGroup()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    <igx-icon>delete</igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_delete}}</span>\n                </button>\n            </ng-container>\n            <ng-container *ngIf=\"!contextualGroup\">\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createAndGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_and_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createOrGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_or_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteFilters()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_delete_filters}}\n                </button>\n            </ng-container>\n        </div>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n<div #overlayOutlet\n     igxOverlayOutlet\n     class=\"igx-advanced-filter__outlet\"\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }]; }, propDecorators: { columnSelect: [{
                 type: ViewChild,
                 args: ['columnSelect', { read: IgxSelectComponent }]
@@ -67974,10 +67974,10 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
     }
 }
 IgxGridToolbarExporterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridToolbarExporterComponent, deps: [{ token: IgxToolbarToken }, { token: IgxExcelExporterService }, { token: IgxCsvExporterService }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridToolbarExporterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridToolbarExporterComponent, selector: "igx-grid-toolbar-exporter", inputs: { exportCSV: "exportCSV", exportExcel: "exportExcel", filename: "filename" }, outputs: { exportStarted: "exportStarted", exportEnded: "exportEnded" }, queries: [{ propertyName: "hasExcelAttr", first: true, predicate: IgxExcelTextDirective, descendants: true }, { propertyName: "hasCSVAttr", first: true, predicate: IgxCSVTextDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon>import_export</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">\n        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n    </span>\n    <igx-icon>arrow_drop_down</igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"export('excel', toggleRef)\">\n            <ng-template #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </ng-template>\n            <excel-text *ngIf=\"!hasExcelAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n            <ng-container *ngTemplateOutlet=\"excel\"></ng-container>\n        </li>\n\n        <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"export('csv', toggleRef)\">\n            <ng-template #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </ng-template>\n            <csv-text *ngIf=\"!hasCSVAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n            <ng-container *ngTemplateOutlet=\"csv\"></ng-container>\n        </li>\n    </ul>\n</div>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxExcelTextDirective, selector: "[excelText],excel-text" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxCSVTextDirective, selector: "[csvText],csv-text" }] });
+IgxGridToolbarExporterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridToolbarExporterComponent, selector: "igx-grid-toolbar-exporter", inputs: { exportCSV: "exportCSV", exportExcel: "exportExcel", filename: "filename" }, outputs: { exportStarted: "exportStarted", exportEnded: "exportEnded" }, queries: [{ propertyName: "hasExcelAttr", first: true, predicate: IgxExcelTextDirective, descendants: true }, { propertyName: "hasCSVAttr", first: true, predicate: IgxCSVTextDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon>import_export</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">\n        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n    </span>\n    <igx-icon>arrow_drop_down</igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"export('excel', toggleRef)\">\n            <ng-template #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </ng-template>\n            <excel-text *ngIf=\"!hasExcelAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n            <ng-container *ngTemplateOutlet=\"excel\"></ng-container>\n        </li>\n\n        <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"export('csv', toggleRef)\">\n            <ng-template #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </ng-template>\n            <csv-text *ngIf=\"!hasCSVAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n            <ng-container *ngTemplateOutlet=\"csv\"></ng-container>\n        </li>\n    </ul>\n</div>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxExcelTextDirective, selector: "[excelText],excel-text" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxCSVTextDirective, selector: "[csvText],csv-text" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridToolbarExporterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-exporter', template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon>import_export</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">\n        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n    </span>\n    <igx-icon>arrow_drop_down</igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"export('excel', toggleRef)\">\n            <ng-template #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </ng-template>\n            <excel-text *ngIf=\"!hasExcelAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n            <ng-container *ngTemplateOutlet=\"excel\"></ng-container>\n        </li>\n\n        <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"export('csv', toggleRef)\">\n            <ng-template #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </ng-template>\n            <csv-text *ngIf=\"!hasCSVAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n            <ng-container *ngTemplateOutlet=\"csv\"></ng-container>\n        </li>\n    </ul>\n</div>\n" }]
+            args: [{ selector: 'igx-grid-toolbar-exporter', template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon>import_export</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">\n        {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n    </span>\n    <igx-icon>arrow_drop_down</igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"export('excel', toggleRef)\">\n            <ng-template #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </ng-template>\n            <excel-text *ngIf=\"!hasExcelAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n            <ng-container *ngTemplateOutlet=\"excel\"></ng-container>\n        </li>\n\n        <li *ngIf=\"exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"export('csv', toggleRef)\">\n            <ng-template #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </ng-template>\n            <csv-text *ngIf=\"!hasCSVAttr\">\n                {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n            <ng-container *ngTemplateOutlet=\"csv\"></ng-container>\n        </li>\n    </ul>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: IgxToolbarToken, decorators: [{
                     type: Inject,
                     args: [IgxToolbarToken]
@@ -68017,10 +68017,10 @@ class IgxGridToolbarHidingComponent extends BaseToolbarColumnActionsDirective {
     }
 }
 IgxGridToolbarHidingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridToolbarHidingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxGridToolbarHidingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridToolbarHidingComponent, selector: "igx-grid-toolbar-hiding", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnHidingDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\" #btn igxButton=\"outlined\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon>{{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }}</igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxColumnHidingDirective, selector: "[igxColumnHiding]" }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }], pipes: { "async": i4.AsyncPipe } });
+IgxGridToolbarHidingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridToolbarHidingComponent, selector: "igx-grid-toolbar-hiding", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnHidingDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\" #btn igxButton=\"outlined\" type=\"button\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon>{{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }}</igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxColumnHidingDirective, selector: "[igxColumnHiding]" }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }], pipes: { "async": i4.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridToolbarHidingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-hiding', template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\" #btn igxButton=\"outlined\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon>{{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }}</igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n" }]
+            args: [{ selector: 'igx-grid-toolbar-hiding', template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\" #btn igxButton=\"outlined\" type=\"button\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon>{{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }}</igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n" }]
         }], propDecorators: { content: [{
                 type: ViewChild,
                 args: [IgxColumnHidingDirective, { read: IgxColumnActionsComponent }]
@@ -68044,10 +68044,10 @@ class IgxGridToolbarPinningComponent extends BaseToolbarColumnActionsDirective {
     }
 }
 IgxGridToolbarPinningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridToolbarPinningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxGridToolbarPinningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridToolbarPinningComponent, selector: "igx-grid-toolbar-pinning", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnPinningDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\" #btn igxButton=\"outlined\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon family=\"imx-icons\" [name]=\"!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxColumnPinningDirective, selector: "[igxColumnPinning]" }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }], pipes: { "async": i4.AsyncPipe } });
+IgxGridToolbarPinningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridToolbarPinningComponent, selector: "igx-grid-toolbar-pinning", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnPinningDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\" #btn igxButton=\"outlined\" type=\"button\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon family=\"imx-icons\" [name]=\"!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n", components: [{ type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxColumnPinningDirective, selector: "[igxColumnPinning]" }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }], pipes: { "async": i4.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridToolbarPinningComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-pinning', template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\" #btn igxButton=\"outlined\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon family=\"imx-icons\" [name]=\"!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n" }]
+            args: [{ selector: 'igx-grid-toolbar-pinning', template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\" #btn igxButton=\"outlined\" type=\"button\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon family=\"imx-icons\" [name]=\"!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ buttonText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n" }]
         }], propDecorators: { content: [{
                 type: ViewChild,
                 args: [IgxColumnPinningDirective, { read: IgxColumnActionsComponent }]