igniteui-angular 15.0.0 → 15.0.2

package/fesm2020/igniteui-angular.mjs

@@ -1668,7 +1668,8 @@ class PlatformUtil {
             style.flexBasis = '';
         }
         range.selectNodeContents(node);
-        const width = range.getBoundingClientRect().width;
+        const scale = node.getBoundingClientRect().width / node.offsetWidth;
+        const width = range.getBoundingClientRect().width / scale;
         if (!this.isFirefox) {
             // we need that hack - otherwise content won't be measured correctly in IE/Edge
             node.style.overflow = overflow;
@@ -11114,6 +11115,8 @@ class IgxForOfDirective {
         }
     }
     updateSizes() {
+        if (!this.scrollComponent.nativeElement.isConnected)
+            return;
         const scrollable = this.isScrollable();
         this.recalcUpdateSizes();
         this._applyChanges();
@@ -11479,7 +11482,7 @@ class IgxForOfDirective {
         this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
         const scrollable = this.isScrollable();
         if (this.igxForScrollOrientation === 'horizontal') {
-            const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
+            const totalWidth = parseInt(this.igxForContainerSize, 10) > 0 ? this.initSizesCache(this.igxForOf) : 0;
             this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
             this.scrollComponent.size = totalWidth;
             if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
@@ -12947,7 +12950,8 @@ const GridResourceStringsEN = {
     igx_grid_min_length_validation_error: 'Entry should be at least {0} character(s) long',
     igx_grid_max_length_validation_error: 'Entry should be no more than {0} character(s) long',
     igx_grid_email_validation_error: 'A valid email address should be entered',
-    igx_grid_pattern_validation_error: 'Entry does not match the required pattern'
+    igx_grid_pattern_validation_error: 'Entry does not match the required pattern',
+    igx_grid_pivot_no_aggregator: 'No valid aggregator found for {0}. Please set either a valid aggregatorName or aggregator.'
 };
 
 const TimePickerResourceStringsEN = {
@@ -23493,10 +23497,28 @@ class PivotUtil {
     static aggregate(records, values) {
         const result = {};
         for (const pivotValue of values) {
-            result[pivotValue.member] = pivotValue.aggregate.aggregator(records.map(r => r[pivotValue.member]), records);
+            const aggregator = PivotUtil.getAggregatorForType(pivotValue.aggregate, pivotValue.dataType);
+            if (!aggregator) {
+                throw CurrentResourceStrings.GridResStrings.igx_grid_pivot_no_aggregator.replace("{0}", pivotValue.member);
+            }
+            result[pivotValue.member] = aggregator(records.map(r => r[pivotValue.member]), records);
         }
         return result;
     }
+    static getAggregatorForType(aggregate, dataType) {
+        let aggregator = aggregate.aggregator;
+        if (aggregate.aggregatorName) {
+            let aggregators = IgxPivotNumericAggregate.aggregators();
+            if (!dataType || dataType === 'date' || dataType === 'dateTime') {
+                aggregators = aggregators.concat(IgxPivotDateAggregate.aggregators());
+            }
+            else if (dataType === 'time') {
+                aggregators = aggregators.concat(IgxPivotTimeAggregate.aggregators());
+            }
+            aggregator = aggregators.find(x => x.key === aggregate.aggregatorName)?.aggregator;
+        }
+        return aggregator;
+    }
     static processHierarchy(hierarchies, pivotKeys, level = 0, rootData = false) {
         const flatData = [];
         hierarchies.forEach((h, key) => {
@@ -38879,14 +38901,14 @@ IgxSimpleComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         IgxComboAPIService,
         { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-    ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] });
+    ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-simple-combo', providers: [
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-                    ], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
+                    ], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item  [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection;\n                index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -58830,10 +58852,10 @@ class IgxGridFilteringRowComponent {
     }
 }
 IgxGridFilteringRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [{ token: IgxFilteringService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridFilteringRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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        [weekStart]=\"column.pipeArgs.weekStart\"\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]=\"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]=\"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]=\"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", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxGridFilteringRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.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        [weekStart]=\"column.pipeArgs.weekStart\"\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\" type=\"button\" 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 type=\"button\" (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"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\" type=\"button\" 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]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" 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]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" 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", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["class", "width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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        [weekStart]=\"column.pipeArgs.weekStart\"\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]=\"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]=\"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]=\"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" }]
+            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        [weekStart]=\"column.pipeArgs.weekStart\"\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\" type=\"button\" 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 type=\"button\" (click)=\"toggleOperatorsDropDown($event, i)\" [igxDropDownItemNavigation]=\"operators\" [displayDensity]=\"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\" type=\"button\" 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]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" 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]=\"displayDensity\" [igxButton]=\"isNarrowWidth ? 'icon' : 'flat'\" type=\"button\" 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: IgxFilteringService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }]; }, propDecorators: { column: [{
                 type: Input
             }], value: [{
@@ -64580,6 +64602,23 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.visibleColumns.find((col) => !col.columnGroup && !col.columnLayout &&
             col.visibleIndex === index);
     }
+    /**
+     * Recalculates all widths of columns that have size set to `auto`.
+     *
+     * @example
+     * ```typescript
+     * this.grid1.recalculateAutoSizes();
+     * ```
+     */
+    recalculateAutoSizes() {
+        // reset auto-size and calculate it again.
+        this._columns.forEach(x => x.autoSize = undefined);
+        this.resetCaches();
+        this.zone.onStable.pipe(first$1()).subscribe(() => {
+            this.cdr.detectChanges();
+            this.autoSizeColumnsInView();
+        });
+    }
     /**
      * Returns an array of visible `IgxColumnComponent`s.
      *
@@ -70674,6 +70713,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         return this._data;
     }
     set data(value) {
+        const dataLoaded = (!this._data || this._data.length === 0) && value && value.length > 0;
         this._data = value || [];
         this.summaryService.clearSummaryCache();
         if (this.shouldGenerate) {
@@ -70683,6 +70723,10 @@ class IgxGridComponent extends IgxGridBaseDirective {
         if (this.isPercentHeight) {
             this.notifyChanges(true);
         }
+        // check if any columns have width auto and if so recalculate their auto-size on data loaded.
+        if (dataLoaded && this._columns.some(x => x._width === 'auto')) {
+            this.recalculateAutoSizes();
+        }
     }
     /**
      * Gets/Sets an array of objects containing the filtered data.
@@ -80772,7 +80816,8 @@ class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
         const gridTop = this._getMaxTop(this.grid);
         const diffTop = rowElem.getBoundingClientRect().bottom -
             rowElem.offsetHeight - gridTop;
-        const isInView = isNext ? diffBottom <= 0 : diffTop >= 0;
+        // Adding Math.Round because Chrome has some inconsistencies when the page is zoomed
+        const isInView = isNext ? Math.round(diffBottom) <= 0 : Math.round(diffTop) >= 0;
         const calcOffset = isNext ? diffBottom : diffTop;
         return { inView: isInView, offset: calcOffset };
     }
@@ -82800,8 +82845,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         const nestedColumns = childLayouts.map((layout) => layout.columnList.toArray());
         const colsArray = [].concat.apply([], nestedColumns);
         const colLength = this.columnList.length;
-        if (colsArray.length > 0) {
-            const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
+        const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
+        if (topCols.length > 0) {
             this.updateColumns(topCols);
             if (recalcColSizes && this.columns.length !== colLength) {
                 this.calculateGridSizes(false);