igniteui-angular 13.0.0 → 13.0.1

package/esm2020/lib/grids/filtering/base/grid-filtering-row.component.mjs

@@ -701,9 +701,9 @@ export class IgxGridFilteringRowComponent {
         return this.nativeElement.offsetWidth < this.NARROW_WIDTH_THRESHOLD;
     }
 }
-IgxGridFilteringRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [{ token: i1.IgxFilteringService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridFilteringRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass", "class.igx-grid__filtering-row--compact": "this.compactCSSClass", "class.igx-grid__filtering-row--cosy": "this.cosyCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    <igx-drop-down-item *ngFor=\"let condition of conditions\"\n        [value]=\"condition\"\n        [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n        </div>\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [readOnly]=\"true\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [displayDensity]=\"displayDensity\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.defaultTimeFormat\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [displayDensity]=\"displayDensity\"\n        type=\"box\"\n        [readOnly]=\"true\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n        tabindex=\"0\"\n        (click)=\"inputGroupPrefixClick($event)\"\n        (keydown)=\"onPrefixKeyDown($event)\"\n        [igxDropDownItemNavigation]=\"inputGroupConditions\">\n        <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n    </igx-prefix>\n    <igx-suffix *ngIf=\"value\">\n        <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n        <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n    </igx-suffix>\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n    <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n         <igx-chips-area #chipsArea>\n            <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n                <igx-chip #chip id='chip'\n                    (pointerdown)=\"onChipPointerdown($event, chip)\"\n                    (click)=\"onChipClick($event, item)\"\n                    (keydown)=\"onChipKeyDown($event, item)\"\n                    (remove)=\"onChipRemoved($event, item)\"\n                    [selectable]=\"false\"\n                    [selected]=\"item.isSelected\"\n                    [displayDensity]=\"displayDensity\"\n                    [removable]=\"true\">\n                    <igx-icon\n                        igxPrefix\n                        family=\"imx-icons\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                </igx-chip>\n\n                <span id='operand' *ngIf=\"!last\">\n                    <button igxButton (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"column.grid.displayDensity\">\n                        <igx-icon>expand_more</igx-icon>\n                        <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                    </button>\n                    <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                            <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                    </igx-drop-down>\n                </span>\n            </ng-container>\n        </igx-chips-area>\n    </div>\n</div>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n    <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    <button [displayDensity]=\"column.grid.displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n        <igx-icon>refresh</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n    </button>\n    <button #closeButton [displayDensity]=\"column.grid.displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\"  igxRipple (click)=\"close()\">\n        <igx-icon>close</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n    </button>\n</div>\n", components: [{ type: i3.IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus"], outputs: ["opening", "opened", "closing", "closed"] }, { type: i4.IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { type: i5.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i6.IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i7.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: i8.IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { type: i8.IgxPickerClearComponent, selector: "igx-picker-clear" }, { type: i9.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: i10.IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { type: i11.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"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: i14.IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: i15.IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i17.IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i18.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19.IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
+IgxGridFilteringRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [{ token: i1.IgxFilteringService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
+IgxGridFilteringRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass", "class.igx-grid__filtering-row--compact": "this.compactCSSClass", "class.igx-grid__filtering-row--cosy": "this.cosyCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    <igx-drop-down-item *ngFor=\"let condition of conditions\"\n        [value]=\"condition\"\n        [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n        </div>\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [readOnly]=\"true\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [displayDensity]=\"displayDensity\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.defaultTimeFormat\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [displayDensity]=\"displayDensity\"\n        type=\"box\"\n        [readOnly]=\"true\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n        tabindex=\"0\"\n        (click)=\"inputGroupPrefixClick($event)\"\n        (keydown)=\"onPrefixKeyDown($event)\"\n        [igxDropDownItemNavigation]=\"inputGroupConditions\">\n        <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n    </igx-prefix>\n    <igx-suffix *ngIf=\"value\">\n        <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n        <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n    </igx-suffix>\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n    <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n         <igx-chips-area #chipsArea>\n            <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n                <igx-chip #chip id='chip'\n                    (pointerdown)=\"onChipPointerdown($event, chip)\"\n                    (click)=\"onChipClick($event, item)\"\n                    (keydown)=\"onChipKeyDown($event, item)\"\n                    (remove)=\"onChipRemoved($event, item)\"\n                    [selectable]=\"false\"\n                    [selected]=\"item.isSelected\"\n                    [displayDensity]=\"displayDensity\"\n                    [removable]=\"true\">\n                    <igx-icon\n                        igxPrefix\n                        family=\"imx-icons\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                </igx-chip>\n\n                <span id='operand' *ngIf=\"!last\">\n                    <button igxButton (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"column.grid.displayDensity\">\n                        <igx-icon>expand_more</igx-icon>\n                        <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                    </button>\n                    <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                            <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                    </igx-drop-down>\n                </span>\n            </ng-container>\n        </igx-chips-area>\n    </div>\n</div>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n    <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    <button [displayDensity]=\"column.grid.displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n        <igx-icon>refresh</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n    </button>\n    <button #closeButton [displayDensity]=\"column.grid.displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\"  igxRipple (click)=\"close()\">\n        <igx-icon>close</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n    </button>\n</div>\n", components: [{ type: i3.IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus"], outputs: ["opening", "opened", "closing", "closed"] }, { type: i4.IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { type: i5.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i6.IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i7.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: i8.IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { type: i8.IgxPickerClearComponent, selector: "igx-picker-clear" }, { type: i9.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: i10.IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { type: i11.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"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: i14.IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: i15.IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i17.IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i18.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19.IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down #inputGroupConditions [displayDensity]=\"displayDensity\" [height]=\"'200px'\" (selectionChanging)=\"onConditionsChanged($event)\">\n    <igx-drop-down-item *ngFor=\"let condition of conditions\"\n        [value]=\"condition\"\n        [selected]=\"isConditionSelected(condition)\">\n        <div class=\"igx-grid__filtering-dropdown-items\">\n            <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n        </div>\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            autocomplete=\"off\"\n            [value]=\"value\"\n            (input)=\"onInput($event)\"\n            [type]=\"type\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n    <igx-date-picker #picker\n        [(value)]=\"value\"\n        [readOnly]=\"true\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [locale]=\"filteringService.grid.locale\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\"\n        type=\"box\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [formatter]=\"column.formatter\"\n        [placeholder]=\"placeholder\"\n        [displayDensity]=\"displayDensity\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (closed)=\"focusEditElement()\">\n        <igx-prefix #inputGroupPrefix\n            tabindex=\"0\"\n            (click)=\"inputGroupPrefixClick($event)\"\n            (keydown)=\"onPrefixKeyDown($event)\"\n            [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n        </igx-prefix>\n        <igx-suffix *ngIf=\"value\">\n            <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n            <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n        </igx-suffix>\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n    <igx-time-picker #picker\n        [(value)]=\"value\"\n        [inputFormat]=\"column.defaultTimeFormat\"\n        [locale]=\"filteringService.grid.locale\"\n        [formatter]=\"column.formatter\"\n        [outlet]=\"filteringService.grid.outlet\"\n        [displayDensity]=\"displayDensity\"\n        type=\"box\"\n        [readOnly]=\"true\"\n        [placeholder]=\"placeholder\"\n        (closed)=\"focusEditElement()\"\n        (focusout)=\"onInputGroupFocusout()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        (click)=\"expression.condition.isUnary ? null : picker.open()\">\n        <igx-prefix #inputGroupPrefix\n        tabindex=\"0\"\n        (click)=\"inputGroupPrefixClick($event)\"\n        (keydown)=\"onPrefixKeyDown($event)\"\n        [igxDropDownItemNavigation]=\"inputGroupConditions\">\n        <igx-icon family=\"imx-icons\" [name]=\"expression.condition.iconName\"></igx-icon>\n    </igx-prefix>\n    <igx-suffix *ngIf=\"value\">\n        <igx-icon tabindex=\"0\" (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick($event)\">done</igx-icon>\n        <igx-icon tabindex=\"0\" (keydown)=\"onClearKeyDown($event)\" (click)=\"clearInput($event)\">clear</igx-icon>\n    </igx-suffix>\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n    <igx-input-group #inputGroup type=\"box\" [displayDensity]=\"displayDensity\" (focusout)=\"onInputGroupFocusout()\">\n        <igx-prefix #inputGroupPrefix\n                    (click)=\"inputGroupPrefixClick($event)\"\n                    (keydown)=\"onPrefixKeyDown($event)\"\n                    tabindex=\"0\"\n                    [igxDropDownItemNavigation]=\"inputGroupConditions\">\n            <igx-icon family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        </igx-prefix>\n        <input\n            #input\n            igxInput\n            tabindex=\"0\"\n            [placeholder]=\"placeholder\"\n            [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n            [value]=\"value\"\n            (valueChange)=\"onInput($event)\"\n            [readonly]=\"isUnaryCondition\"\n            (click)=\"onInputClick()\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keyup)=\"onInputKeyUp()\"/>\n            <igx-suffix *ngIf=\"value || value === 0\" >\n                <igx-icon (keydown)=\"onCommitKeyDown($event)\" (click)=\"onCommitClick()\" tabindex=\"0\">done</igx-icon>\n                <igx-icon (keydown)=\"onClearKeyDown($event)\" (click)=\"onClearClick()\" tabindex=\"0\">clear</igx-icon>\n            </igx-suffix>\n    </igx-input-group>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-start\" *ngIf=\"showArrows\" (keydown)=\"onLeftArrowKeyDown($event)\" (click)=\"scrollChipsOnArrowPress('left')\">\n    <igx-icon>navigate_before</igx-icon>\n</button>\n\n<div #container class=\"igx-grid__filtering-row-main\">\n    <div>\n         <igx-chips-area #chipsArea>\n            <ng-container *ngFor=\"let item of expressionsList; index as i; let last = last;\" tabindex=\"0\">\n                <igx-chip #chip id='chip'\n                    (pointerdown)=\"onChipPointerdown($event, chip)\"\n                    (click)=\"onChipClick($event, item)\"\n                    (keydown)=\"onChipKeyDown($event, item)\"\n                    (remove)=\"onChipRemoved($event, item)\"\n                    [selectable]=\"false\"\n                    [selected]=\"item.isSelected\"\n                    [displayDensity]=\"displayDensity\"\n                    [removable]=\"true\">\n                    <igx-icon\n                        igxPrefix\n                        family=\"imx-icons\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span>{{filteringService.getChipLabel(item.expression)}}</span>\n                </igx-chip>\n\n                <span id='operand' *ngIf=\"!last\">\n                    <button igxButton (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"column.grid.displayDensity\">\n                        <igx-icon>expand_more</igx-icon>\n                        <span>{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n                    </button>\n                    <igx-drop-down [displayDensity]=\"column.grid.displayDensity\" #operators (selectionChanging)=\"onLogicOperatorChanged($event, item)\">\n                            <igx-drop-down-item [value]=\"0\" [selected]=\"item.afterOperator === 0\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}}</igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"1\" [selected]=\"item.afterOperator === 1\">{{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}}</igx-drop-down-item>\n                    </igx-drop-down>\n                </span>\n            </ng-container>\n        </igx-chips-area>\n    </div>\n</div>\n\n<button igxButton=\"icon\" class=\"igx-grid__filtering-row-scroll-end\" *ngIf=\"showArrows\" (click)=\"scrollChipsOnArrowPress('right')\">\n    <igx-icon>navigate_next</igx-icon>\n</button>\n\n<div #buttonsContainer [ngClass]=\"isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'\">\n    <button [displayDensity]=\"column.grid.displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" igxRipple (click)=\"clearFiltering()\" [disabled]=\"disabled\" [tabindex]=\"disabled\">\n        <igx-icon>refresh</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</span>\n    </button>\n    <button #closeButton [displayDensity]=\"column.grid.displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\"  igxRipple (click)=\"close()\">\n        <igx-icon>close</igx-icon>\n        <span>{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</span>\n    </button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.IgxFilteringService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.PlatformUtil }]; }, propDecorators: { column: [{

package/esm2020/lib/grids/filtering/excel-style/base-filtering.component.mjs

@@ -8,9 +8,9 @@ export class BaseFilteringComponent {
         this.platform = platform;
     }
 }
-BaseFilteringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BaseFilteringComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive });
-BaseFilteringComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: BaseFilteringComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BaseFilteringComponent, decorators: [{
+BaseFilteringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: BaseFilteringComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive });
+BaseFilteringComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: BaseFilteringComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: BaseFilteringComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.PlatformUtil }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1maWx0ZXJpbmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaWduaXRldWktYW5ndWxhci9zcmMvbGliL2dyaWRzL2ZpbHRlcmluZy9leGNlbC1zdHlsZS9iYXNlLWZpbHRlcmluZy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFxQixTQUFTLEVBQTRCLE1BQU0sZUFBZSxDQUFDOzs7QUFTdkYsTUFBTSxPQUFnQixzQkFBc0I7SUFrQnhDLFlBQ2MsR0FBc0IsRUFDekIsT0FBZ0MsRUFDN0IsUUFBc0I7UUFGdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFDekIsWUFBTyxHQUFQLE9BQU8sQ0FBeUI7UUFDN0IsYUFBUSxHQUFSLFFBQVEsQ0FBYztJQUNoQyxDQUFDOzttSEF0QmEsc0JBQXNCO3VHQUF0QixzQkFBc0I7MkZBQXRCLHNCQUFzQjtrQkFEM0MsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRGlzcGxheURlbnNpdHkgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2Rpc3BsYXlEZW5zaXR5JztcbmltcG9ydCB7IFBsYXRmb3JtVXRpbCB9IGZyb20gJy4uLy4uLy4uL2NvcmUvdXRpbHMnO1xuaW1wb3J0IHsgSWd4T3ZlcmxheVNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9vdmVybGF5L292ZXJsYXknO1xuaW1wb3J0IHsgRXhwcmVzc2lvblVJLCBGaWx0ZXJMaXN0SXRlbSB9IGZyb20gJy4vY29tbW9uJztcblxuXG5cbkBEaXJlY3RpdmUoKVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEJhc2VGaWx0ZXJpbmdDb21wb25lbnQge1xuXG4gICAgcHVibGljIGFic3RyYWN0IGNvbHVtbjogYW55O1xuICAgIHB1YmxpYyBhYnN0cmFjdCBnZXQgZ3JpZCgpOiBhbnk7XG4gICAgcHVibGljIGFic3RyYWN0IGdldCBkaXNwbGF5RGVuc2l0eSgpOiBEaXNwbGF5RGVuc2l0eTtcblxuICAgIHB1YmxpYyBhYnN0cmFjdCBvdmVybGF5Q29tcG9uZW50SWQ6IHN0cmluZztcbiAgICBwdWJsaWMgYWJzdHJhY3QgbWFpbkRyb3Bkb3duOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcbiAgICBwdWJsaWMgYWJzdHJhY3QgZXhwcmVzc2lvbnNMaXN0OiBFeHByZXNzaW9uVUlbXTtcbiAgICBwdWJsaWMgYWJzdHJhY3QgbGlzdERhdGE6IEZpbHRlckxpc3RJdGVtW107XG5cbiAgICBhYnN0cmFjdCBsb2FkaW5nU3RhcnQ6IEV2ZW50RW1pdHRlcjx1bmRlZmluZWQ+O1xuICAgIGFic3RyYWN0IGxvYWRpbmdFbmQ6IEV2ZW50RW1pdHRlcjx1bmRlZmluZWQ+O1xuICAgIGFic3RyYWN0IGluaXRpYWxpemVkOiBFdmVudEVtaXR0ZXI8dW5kZWZpbmVkPjtcbiAgICBhYnN0cmFjdCBjb2x1bW5DaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+O1xuICAgIGFic3RyYWN0IHNvcnRpbmdDaGFuZ2VkOiBFdmVudEVtaXR0ZXI8dW5kZWZpbmVkPjtcbiAgICBhYnN0cmFjdCBsaXN0RGF0YUxvYWRlZDogRXZlbnRFbWl0dGVyPHVuZGVmaW5lZD47XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJvdGVjdGVkIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgICAgIHB1YmxpYyBlbGVtZW50OiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICAgICAgcHJvdGVjdGVkIHBsYXRmb3JtOiBQbGF0Zm9ybVV0aWxcbiAgICApIHsgfVxuXG5cbiAgICBhYnN0cmFjdCBpbml0aWFsaXplKGNvbHVtbjogYW55LCBvdmVybGF5U2VydmljZTogSWd4T3ZlcmxheVNlcnZpY2UpOiB2b2lkO1xuICAgIGFic3RyYWN0IGRldGVjdENoYW5nZXMoKTogdm9pZDtcbiAgICBhYnN0cmFjdCBoaWRlKCk6IHZvaWQ7XG4gICAgYWJzdHJhY3QgY2xvc2VEcm9wZG93bigpOiB2b2lkO1xuICAgIGFic3RyYWN0IG9uU2VsZWN0KCk6IHZvaWQ7XG4gICAgYWJzdHJhY3Qgb25QaW4oKTogdm9pZDtcbiAgICBhYnN0cmFjdCBvbkhpZGVUb2dnbGUoKTogdm9pZDtcbiAgICBhYnN0cmFjdCBjYW5jZWwoKTogdm9pZDtcblxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1maWx0ZXJpbmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaWduaXRldWktYW5ndWxhci9zcmMvbGliL2dyaWRzL2ZpbHRlcmluZy9leGNlbC1zdHlsZS9iYXNlLWZpbHRlcmluZy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFxQixTQUFTLEVBQTRCLE1BQU0sZUFBZSxDQUFDOzs7QUFTdkYsTUFBTSxPQUFnQixzQkFBc0I7SUFrQnhDLFlBQ2MsR0FBc0IsRUFDekIsT0FBZ0MsRUFDN0IsUUFBc0I7UUFGdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFDekIsWUFBTyxHQUFQLE9BQU8sQ0FBeUI7UUFDN0IsYUFBUSxHQUFSLFFBQVEsQ0FBYztJQUNoQyxDQUFDOzttSEF0QmEsc0JBQXNCO3VHQUF0QixzQkFBc0I7MkZBQXRCLHNCQUFzQjtrQkFEM0MsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRGlzcGxheURlbnNpdHkgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2Rpc3BsYXlEZW5zaXR5JztcbmltcG9ydCB7IFBsYXRmb3JtVXRpbCB9IGZyb20gJy4uLy4uLy4uL2NvcmUvdXRpbHMnO1xuaW1wb3J0IHsgSWd4T3ZlcmxheVNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9vdmVybGF5L292ZXJsYXknO1xuaW1wb3J0IHsgRXhwcmVzc2lvblVJLCBGaWx0ZXJMaXN0SXRlbSB9IGZyb20gJy4vY29tbW9uJztcblxuXG5cbkBEaXJlY3RpdmUoKVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEJhc2VGaWx0ZXJpbmdDb21wb25lbnQge1xuXG4gICAgcHVibGljIGFic3RyYWN0IGNvbHVtbjogYW55O1xuICAgIHB1YmxpYyBhYnN0cmFjdCBnZXQgZ3JpZCgpOiBhbnk7XG4gICAgcHVibGljIGFic3RyYWN0IGdldCBkaXNwbGF5RGVuc2l0eSgpOiBEaXNwbGF5RGVuc2l0eTtcblxuICAgIHB1YmxpYyBhYnN0cmFjdCBvdmVybGF5Q29tcG9uZW50SWQ6IHN0cmluZztcbiAgICBwdWJsaWMgYWJzdHJhY3QgbWFpbkRyb3Bkb3duOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcbiAgICBwdWJsaWMgYWJzdHJhY3QgZXhwcmVzc2lvbnNMaXN0OiBFeHByZXNzaW9uVUlbXTtcbiAgICBwdWJsaWMgYWJzdHJhY3QgbGlzdERhdGE6IEZpbHRlckxpc3RJdGVtW107XG5cbiAgICBwdWJsaWMgYWJzdHJhY3QgbG9hZGluZ1N0YXJ0OiBFdmVudEVtaXR0ZXI8dW5kZWZpbmVkPjtcbiAgICBwdWJsaWMgYWJzdHJhY3QgbG9hZGluZ0VuZDogRXZlbnRFbWl0dGVyPHVuZGVmaW5lZD47XG4gICAgcHVibGljIGFic3RyYWN0IGluaXRpYWxpemVkOiBFdmVudEVtaXR0ZXI8dW5kZWZpbmVkPjtcbiAgICBwdWJsaWMgYWJzdHJhY3QgY29sdW1uQ2hhbmdlOiBFdmVudEVtaXR0ZXI8YW55PjtcbiAgICBwdWJsaWMgYWJzdHJhY3Qgc29ydGluZ0NoYW5nZWQ6IEV2ZW50RW1pdHRlcjx1bmRlZmluZWQ+O1xuICAgIHB1YmxpYyBhYnN0cmFjdCBsaXN0RGF0YUxvYWRlZDogRXZlbnRFbWl0dGVyPHVuZGVmaW5lZD47XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJvdGVjdGVkIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgICAgIHB1YmxpYyBlbGVtZW50OiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICAgICAgcHJvdGVjdGVkIHBsYXRmb3JtOiBQbGF0Zm9ybVV0aWxcbiAgICApIHsgfVxuXG5cbiAgICBwdWJsaWMgYWJzdHJhY3QgaW5pdGlhbGl6ZShjb2x1bW46IGFueSwgb3ZlcmxheVNlcnZpY2U6IElneE92ZXJsYXlTZXJ2aWNlKTogdm9pZDtcbiAgICBwdWJsaWMgYWJzdHJhY3QgZGV0ZWN0Q2hhbmdlcygpOiB2b2lkO1xuICAgIHB1YmxpYyBhYnN0cmFjdCBoaWRlKCk6IHZvaWQ7XG4gICAgcHVibGljIGFic3RyYWN0IGNsb3NlRHJvcGRvd24oKTogdm9pZDtcbiAgICBwdWJsaWMgYWJzdHJhY3Qgb25TZWxlY3QoKTogdm9pZDtcbiAgICBwdWJsaWMgYWJzdHJhY3Qgb25QaW4oKTogdm9pZDtcbiAgICBwdWJsaWMgYWJzdHJhY3Qgb25IaWRlVG9nZ2xlKCk6IHZvaWQ7XG4gICAgcHVibGljIGFic3RyYWN0IGNhbmNlbCgpOiB2b2lkO1xuXG59XG4iXX0=

package/esm2020/lib/grids/filtering/excel-style/excel-style-clear-filters.component.mjs

@@ -44,9 +44,9 @@ export class IgxExcelStyleClearFiltersComponent {
         this.esf.detectChanges();
     }
 }
-IgxExcelStyleClearFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, deps: [{ token: i1.BaseFilteringComponent }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleClearFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleClearFiltersComponent, selector: "igx-excel-style-clear-filters", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    tabindex=\"0\"\n    [ngClass]=\"clearFilterClass()\"\n    (keydown)=\"onClearFilterKeyDown($event)\"\n    (click)=\"clearFilter()\"\n    role=\"menuitem\">\n    <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>\n    <igx-icon>clear</igx-icon>\n</div>\n", components: [{ type: i3.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, decorators: [{
+IgxExcelStyleClearFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, deps: [{ token: i1.BaseFilteringComponent }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
+IgxExcelStyleClearFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleClearFiltersComponent, selector: "igx-excel-style-clear-filters", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    tabindex=\"0\"\n    [ngClass]=\"clearFilterClass()\"\n    (keydown)=\"onClearFilterKeyDown($event)\"\n    (click)=\"clearFilter()\"\n    role=\"menuitem\">\n    <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>\n    <igx-icon>clear</igx-icon>\n</div>\n", components: [{ type: i3.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleClearFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-clear-filters', template: "<div *ngIf=\"esf.column\"\n    tabindex=\"0\"\n    [ngClass]=\"clearFilterClass()\"\n    (keydown)=\"onClearFilterKeyDown($event)\"\n    (click)=\"clearFilter()\"\n    role=\"menuitem\">\n    <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>\n    <igx-icon>clear</igx-icon>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.BaseFilteringComponent }, { type: i2.PlatformUtil }]; } });

package/esm2020/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.mjs

@@ -152,9 +152,9 @@ export class IgxExcelStyleConditionalFilterComponent {
         return this.esf.column.filters.conditionList();
     }
 }
-IgxExcelStyleConditionalFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [{ token: i1.BaseFilteringComponent }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleConditionalFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter", viewQueries: [{ propertyName: "customDialog", first: true, predicate: ["customDialog"], descendants: true, read: IgxExcelStyleCustomDialogComponent }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\">\n        <span>{{ subMenuText }}</span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        [displayDensity]=\"esf.grid.displayDensity\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\"\n        [allowItemsFocus]=\"true\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\"\n        [displayDensity]=\"esf.grid.displayDensity\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n", components: [{ type: i3.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i4.IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus"], outputs: ["opening", "opened", "closing", "closed"] }, { type: i5.IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { type: i6.IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId", "displayDensity"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
+IgxExcelStyleConditionalFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, deps: [{ token: i1.BaseFilteringComponent }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
+IgxExcelStyleConditionalFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleConditionalFilterComponent, selector: "igx-excel-style-conditional-filter", viewQueries: [{ propertyName: "customDialog", first: true, predicate: ["customDialog"], descendants: true, read: IgxExcelStyleCustomDialogComponent }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\">\n        <span>{{ subMenuText }}</span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        [displayDensity]=\"esf.grid.displayDensity\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\"\n        [allowItemsFocus]=\"true\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\"\n        [displayDensity]=\"esf.grid.displayDensity\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n", components: [{ type: i3.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i4.IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus"], outputs: ["opening", "opened", "closing", "closed"] }, { type: i5.IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { type: i6.IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: ["expressionsList", "column", "selectedOperator", "filteringService", "overlayComponentId", "displayDensity"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleConditionalFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-conditional-filter', template: "<ng-container *ngIf=\"esf.column\">\n    <div tabindex=\"0\"\n        class=\"igx-excel-filter__actions-filter\"\n        (keydown)=\"onTextFilterKeyDown($event)\"\n        (click)=\"onTextFilterClick($event)\"\n        [igxDropDownItemNavigation]=\"subMenu\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\">\n        <span>{{ subMenuText }}</span>\n        <igx-icon>keyboard_arrow_right</igx-icon>\n    </div>\n\n    <igx-drop-down\n        #subMenu\n        [maxHeight]=\"'397px'\"\n        [displayDensity]=\"esf.grid.displayDensity\"\n        (selectionChanging)=\"onSubMenuSelection($event)\"\n        (closed)=\"onSubMenuClosed()\"\n        [allowItemsFocus]=\"true\">\n        <div>\n            <igx-drop-down-item\n            *ngFor=\"let condition of conditions\"\n            [value]=\"condition\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ translateCondition(condition) }}</span>\n                </div>\n            </igx-drop-down-item>\n            <igx-drop-down-item *ngIf=\"showCustomFilterItem()\">\n                <div class=\"igx-grid__filtering-dropdown-items\">\n                    <igx-icon>filter_list</igx-icon>\n                    <span class=\"igx-grid__filtering-dropdown-text\">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>\n                </div>\n            </igx-drop-down-item>\n        </div>\n    </igx-drop-down>\n\n    <igx-excel-style-custom-dialog\n        #customDialog\n        [column]=\"esf.column\"\n        [filteringService]=\"esf.grid.filteringService\"\n        [overlayComponentId]=\"esf.overlayComponentId\"\n        [displayDensity]=\"esf.grid.displayDensity\">\n    </igx-excel-style-custom-dialog>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i1.BaseFilteringComponent }, { type: i2.PlatformUtil }]; }, propDecorators: { customDialog: [{

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

@@ -188,9 +188,9 @@ export class IgxExcelStyleCustomDialogComponent {
         });
     }
 }
-IgxExcelStyleCustomDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: i1.IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleCustomDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId", displayDensity: "displayDensity" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"igx-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button igxButton [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>add</igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", components: [{ type: i3.IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", inputs: ["displayDensity"] }, { type: i4.IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid", "displayDensity"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { type: i5.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i6.IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
+IgxExcelStyleCustomDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: i1.IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
+IgxExcelStyleCustomDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleCustomDialogComponent, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId", displayDensity: "displayDensity" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"igx-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button igxButton [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>add</igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", components: [{ type: i3.IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", inputs: ["displayDensity"] }, { type: i4.IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid", "displayDensity"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { type: i5.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i6.IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-custom-dialog', template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',\n        'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"igx-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [displayDensity]=\"displayDensity\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button igxButton [displayDensity]=\"displayDensity\"\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon>add</igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
         }], ctorParameters: function () { return [{ type: i1.IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: i2.PlatformUtil }]; }, propDecorators: { expressionsList: [{

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

@@ -31,9 +31,9 @@ export class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultEx
         return this.grid.resourceStrings['igx_grid_filter_row_time_placeholder'];
     }
 }
-IgxExcelStyleDateExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleDateExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", inputs: { displayDensity: "displayDensity" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", components: [{ type: i1.IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { type: i2.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i3.IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { type: i4.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: i5.IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { type: i5.IgxPickerClearComponent, selector: "igx-picker-clear" }, { type: i6.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: i7.IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i8.IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }], directives: [{ type: i9.IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.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: i12.IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i13.IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i15.IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
+IgxExcelStyleDateExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+IgxExcelStyleDateExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", inputs: { displayDensity: "displayDensity" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", components: [{ type: i1.IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { type: i2.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i3.IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { type: i4.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: i5.IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { type: i5.IgxPickerClearComponent, selector: "igx-picker-clear" }, { type: i6.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: i7.IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i8.IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }], directives: [{ type: i9.IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.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: i12.IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i13.IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i15.IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-date-expression', template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], propDecorators: { displayDensity: [{

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

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

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

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

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

@@ -11,9 +11,9 @@ export class IgxExcelStyleHidingComponent {
         this.esf = esf;
     }
 }
-IgxExcelStyleHidingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleHidingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleHidingComponent, selector: "igx-excel-style-hiding", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    class=\"igx-excel-filter__actions-hide\"\n    tabindex=\"0\"\n    (click)=\"esf.onHideToggle()\"\n    role=\"menuitem\">\n    <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n    <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n</div>\n", components: [{ type: i2.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
+IgxExcelStyleHidingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleHidingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });
+IgxExcelStyleHidingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleHidingComponent, selector: "igx-excel-style-hiding", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    class=\"igx-excel-filter__actions-hide\"\n    tabindex=\"0\"\n    (click)=\"esf.onHideToggle()\"\n    role=\"menuitem\">\n    <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n    <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n</div>\n", components: [{ type: i2.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleHidingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-hiding', template: "<div *ngIf=\"esf.column\"\n    class=\"igx-excel-filter__actions-hide\"\n    tabindex=\"0\"\n    (click)=\"esf.onHideToggle()\"\n    role=\"menuitem\">\n    <span>{{ esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide }}</span>\n    <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.BaseFilteringComponent }]; } });

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

@@ -90,9 +90,9 @@ export class IgxExcelStyleMovingComponent {
         }
     }
 }
-IgxExcelStyleMovingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleMovingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving", host: { properties: { "class.igx-excel-filter__move": "this.defaultClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<section class=\"igx-excel-filter__move-buttons\">\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</section>\n</ng-container>\n", components: [{ type: i2.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
+IgxExcelStyleMovingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleMovingComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });
+IgxExcelStyleMovingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleMovingComponent, selector: "igx-excel-style-moving", host: { properties: { "class.igx-excel-filter__move": "this.defaultClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<section class=\"igx-excel-filter__move-buttons\">\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</section>\n</ng-container>\n", components: [{ type: i2.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleMovingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-moving', template: "<ng-container *ngIf=\"esf.column\">\n<header>\n    {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }}\n</header>\n<section class=\"igx-excel-filter__move-buttons\">\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveLeft\"\n        (click)=\"onMoveButtonClicked(0)\">\n        <igx-icon>arrow_back</igx-icon>\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_left }}\n        </span>\n    </button>\n    <button [displayDensity]=\"esf.grid.displayDensity\"\n        igxButton\n        [disabled]=\"canNotMoveRight\"\n        (click)=\"onMoveButtonClicked(1)\">\n        <span>\n            {{ esf.grid.displayDensity==='compact'?\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right_short:\n            esf.grid.resourceStrings.igx_grid_excel_filter_moving_right }}\n        </span>\n        <igx-icon>arrow_forwards</igx-icon>\n    </button>\n</section>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i1.BaseFilteringComponent }]; }, propDecorators: { defaultClass: [{

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

@@ -11,9 +11,9 @@ export class IgxExcelStylePinningComponent {
         this.esf = esf;
     }
 }
-IgxExcelStylePinningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStylePinningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStylePinningComponent, selector: "igx-excel-style-pinning", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n    (click)=\"esf.onPin()\"\n    tabindex=\"0\"\n    role=\"menuitem\">\n    <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n    <igx-icon family=\"imx-icons\" name=\"{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}\"></igx-icon>\n</div>\n", components: [{ type: i2.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
+IgxExcelStylePinningComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStylePinningComponent, deps: [{ token: i1.BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component });
+IgxExcelStylePinningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStylePinningComponent, selector: "igx-excel-style-pinning", ngImport: i0, template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n    (click)=\"esf.onPin()\"\n    tabindex=\"0\"\n    role=\"menuitem\">\n    <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n    <igx-icon family=\"imx-icons\" name=\"{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}\"></igx-icon>\n</div>\n", components: [{ type: i2.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStylePinningComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-pinning', template: "<div *ngIf=\"esf.column\"\n    [ngClass]=\"esf.column.pinned ? 'igx-excel-filter__actions-unpin' : 'igx-excel-filter__actions-pin'\"\n    (click)=\"esf.onPin()\"\n    tabindex=\"0\"\n    role=\"menuitem\">\n    <span>{{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }}</span>\n    <igx-icon family=\"imx-icons\" name=\"{{ esf.column.pinned ? 'unpin-left' : 'pin-left' }}\"></igx-icon>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.BaseFilteringComponent }]; } });

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

@@ -31,9 +31,9 @@ export class IgxExcelStyleLoadingValuesTemplateDirective {
         this.template = template;
     }
 }
-IgxExcelStyleLoadingValuesTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-IgxExcelStyleLoadingValuesTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleLoadingValuesTemplateDirective, selector: "[igxExcelStyleLoading]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
+IgxExcelStyleLoadingValuesTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+IgxExcelStyleLoadingValuesTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleLoadingValuesTemplateDirective, selector: "[igxExcelStyleLoading]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleLoading]'
@@ -374,9 +374,9 @@ export class IgxExcelStyleSearchComponent {
     }
 }
 IgxExcelStyleSearchComponent.filterOptimizationThreshold = 2;
-IgxExcelStyleSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.BaseFilteringComponent }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxExcelStyleSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n</igx-list>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", components: [{ type: i3.IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i4.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i5.IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { type: i6.IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index"] }, { type: i7.IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { type: i8.IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "indeterminate", "textVisibility", "text", "value"] }], directives: [{ type: i9.IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: i10.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: i11.IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i14.IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { type: i15.IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i16.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
+IgxExcelStyleSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.BaseFilteringComponent }, { token: i2.PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
+IgxExcelStyleSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n</igx-list>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n", components: [{ type: i3.IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i4.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i5.IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { type: i6.IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index"] }, { type: i7.IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { type: i8.IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "indeterminate", "textVisibility", "text", "value"] }], directives: [{ type: i9.IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { type: i10.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: i11.IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i14.IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { type: i15.IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i16.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-excel-style-search', template: "<igx-input-group\n            type=\"box\"\n            [displayDensity]=\"esf.displayDensity\">\n    <igx-icon igxPrefix>search</igx-icon>\n    <input\n        #input\n        igxInput\n        tabindex=\"0\"\n        [(ngModel)]=\"searchValue\"\n        (ngModelChange)=\"filterListData()\"\n        (keydown)=\"onInputKeyDown($event)\"\n        [placeholder]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n        clear\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list [displayDensity]=\"esf.displayDensity\" [isLoading]=\"isLoading\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item\n        *igxFor=\"let item of displayedListData scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n</igx-list>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n    <igx-circular-bar [indeterminate]=\"true\">\n    </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n    <div class=\"igx-excel-filter__cancel\">\n        <button\n            igxButton=\"flat\"\n            [displayDensity]=\"esf.displayDensity\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button\n            igxButton=\"raised\"\n            [displayDensity]=\"esf.displayDensity\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n        </button>\n    </div>\n</footer>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.BaseFilteringComponent }, { type: i2.PlatformUtil }]; }, propDecorators: { defaultClass: [{