igniteui-angular 18.2.0-beta.0 → 18.2.0-beta.1

package/fesm2022/igniteui-angular.mjs

@@ -8791,10 +8791,6 @@ const loadIconRefs = () => [
     }),
     addIcon('input_expand', {
         default: {
-            name: 'arrow_drop_down',
-            family: 'material',
-        },
-        material: {
             name: 'expand_more',
             family: 'material',
         },
@@ -8805,10 +8801,6 @@ const loadIconRefs = () => [
     }),
     addIcon('input_collapse', {
         default: {
-            name: 'arrow_drop_up',
-            family: 'material',
-        },
-        material: {
             name: 'expand_less',
             family: 'material',
         },
@@ -8819,9 +8811,13 @@ const loadIconRefs = () => [
     }),
     addIcon('arrow_drop_down', {
         default: {
-            name: 'arrow_drop_down',
+            name: 'keyboard_arrow_down',
             family: 'material',
         },
+        indigo: {
+            name: 'chevron_down',
+            family: 'internal_indigo',
+        },
     }),
     addIcon('case_sensitive', {
         default: {
@@ -26286,7 +26282,7 @@ class IgxGridSelectionService {
     }
     /** Select all rows, if filtering is applied select only from filtered data. */
     selectAllRows(event) {
-        const addedRows = this.allData.filter((row) => !this.isRowSelected(this.getRecordKey(row)));
+        const addedRows = this.allData.filter((row) => !this.rowSelection.has(this.getRecordKey(row)));
         const selectedRows = this.getSelectedRowsData();
         const newSelection = this.rowSelection.size ? selectedRows.concat(addedRows) : addedRows;
         this.indeterminateRows.clear();
@@ -26447,10 +26443,8 @@ class IgxGridSelectionService {
         if (this.allRowsSelected !== undefined && !newSelection) {
             return this.allRowsSelected;
         }
-        const selectedData = new Set(newSelection ? newSelection : [...this.rowSelection]);
-        const allData = this.getRowIDs(this.allData);
-        const unSelectedRows = allData.filter(row => !selectedData.has(row));
-        return this.allRowsSelected = this.allData.length > 0 && unSelectedRows.length === 0;
+        const selectedData = new Set(this.getRowIDs(newSelection || this.rowSelection));
+        return this.allRowsSelected = this.allData.length > 0 && this.allData.every(row => selectedData.has(this.getRecordKey(row)));
     }
     hasSomeRowSelected() {
         const filteredData = this.isFilteringApplied() ?
@@ -26471,9 +26465,11 @@ class IgxGridSelectionService {
             owner: this.grid,
             oldSelection: currSelection,
             newSelection,
-            added, removed,
-            event, cancel: false,
-            allRowsSelected: this.areAllRowSelected(newSelection.map(r => this.getRecordKey(r)))
+            added,
+            removed,
+            event,
+            cancel: false,
+            allRowsSelected: this.areAllRowSelected(newSelection)
         };
         this.grid.rowSelectionChanging.emit(args);
         if (args.cancel) {
@@ -28258,6 +28254,16 @@ class IgxBadgeComponent {
          * ```
          */
         this.label = 'badge';
+        /**
+         * Sets/gets whether the badge is outlined.
+         * Default value is `false`.
+         *
+         * @example
+         * ```html
+         * <igx-badge outlined></igx-badge>
+         * ```
+         */
+        this.outlined = false;
     }
     /** @hidden @internal */
     get _squareShape() {
@@ -28292,7 +28298,7 @@ class IgxBadgeComponent {
         return this.type === IgxBadgeType.ERROR;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxBadgeComponent, isStandalone: true, selector: "igx-badge", inputs: { id: "id", type: "type", value: "value", icon: "icon", iconSet: "iconSet", shape: "shape" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-badge": "this.cssClass", "class.igx-badge--square": "this._squareShape", "attr.aria-label": "this.label", "attr.aria-roledescription": "this.roleDescription", "class.igx-badge--info": "this.infoClass", "class.igx-badge--success": "this.successClass", "class.igx-badge--warning": "this.warningClass", "class.igx-badge--error": "this.errorClass" } }, ngImport: i0, template: "<span *ngIf=\"value || value === 0 && !icon\" class=\"igx-badge__value\">{{value}}</span>\n<igx-icon *ngIf=\"icon && !iconSet\">{{icon}}</igx-icon>\n<igx-icon *ngIf=\"icon && iconSet\" [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxBadgeComponent, isStandalone: true, selector: "igx-badge", inputs: { id: "id", type: "type", value: "value", icon: "icon", iconSet: "iconSet", shape: "shape", outlined: ["outlined", "outlined", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-badge": "this.cssClass", "class.igx-badge--square": "this._squareShape", "attr.aria-label": "this.label", "class.igx-badge--outlined": "this.outlined", "attr.aria-roledescription": "this.roleDescription", "class.igx-badge--info": "this.infoClass", "class.igx-badge--success": "this.successClass", "class.igx-badge--warning": "this.warningClass", "class.igx-badge--error": "this.errorClass" } }, ngImport: i0, template: "<span *ngIf=\"value || value === 0 && !icon\" class=\"igx-badge__value\">{{value}}</span>\n<igx-icon *ngIf=\"icon && !iconSet\">{{icon}}</igx-icon>\n<igx-icon *ngIf=\"icon && iconSet\" [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxBadgeComponent, decorators: [{
             type: Component,
@@ -28324,6 +28330,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
             }], label: [{
                 type: HostBinding,
                 args: ['attr.aria-label']
+            }], outlined: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.igx-badge--outlined']
             }], roleDescription: [{
                 type: HostBinding,
                 args: ['attr.aria-roledescription']
@@ -45164,8 +45176,9 @@ const IGX_GRID_VALIDATION_DIRECTIVES = [
 // ] as const;
 
 const QueryBuilderResourceStringsEN = {
-    igx_query_builder_date_placeholder: 'Pick up date',
-    igx_query_builder_time_placeholder: 'Pick up time',
+    igx_query_builder_date_placeholder: 'Select date',
+    igx_query_builder_time_placeholder: 'Select time',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'And',
     igx_query_builder_filter_operator_or: 'Or',
     igx_query_builder_filter_contains: 'Contains',
@@ -45257,11 +45270,11 @@ class IgxQueryBuilderHeaderComponent {
         return this._resourceStrings;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxQueryBuilderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxQueryBuilderHeaderComponent, isStandalone: true, selector: "igx-query-builder-header", inputs: { title: "title", showLegend: ["showLegend", "showLegend", booleanAttribute], resourceStrings: "resourceStrings" }, ngImport: i0, template: "<div class=\"igx-query-builder__header\">\n    <div class=\"ig-typography__h6\" style=\"pointer-events: none;\">\n        {{ title || this.resourceStrings.igx_query_builder_title }}\n        <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showLegend\" class=\"igx-builder-legend\" >\n        <div class=\"igx-builder-legend__item--and\">\n            <span>{{this.resourceStrings.igx_query_builder_and_label}}</span>\n        </div>\n        <div class=\"igx-builder-legend__item--or\">\n            <span>{{this.resourceStrings.igx_query_builder_or_label}}</span>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxQueryBuilderHeaderComponent, isStandalone: true, selector: "igx-query-builder-header", inputs: { title: "title", showLegend: ["showLegend", "showLegend", booleanAttribute], resourceStrings: "resourceStrings" }, ngImport: i0, template: "<div class=\"igx-query-builder__header\">\n    <div class=\"igx-query-builder__title\">\n        {{ title || this.resourceStrings.igx_query_builder_title }}\n        <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showLegend\" class=\"igx-builder-legend\" >\n        <div class=\"igx-builder-legend__item--and\">\n            <span>{{this.resourceStrings.igx_query_builder_and_label}}</span>\n        </div>\n        <div class=\"igx-builder-legend__item--or\">\n            <span>{{this.resourceStrings.igx_query_builder_or_label}}</span>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxQueryBuilderHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-query-builder-header', standalone: true, imports: [NgIf], template: "<div class=\"igx-query-builder__header\">\n    <div class=\"ig-typography__h6\" style=\"pointer-events: none;\">\n        {{ title || this.resourceStrings.igx_query_builder_title }}\n        <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showLegend\" class=\"igx-builder-legend\" >\n        <div class=\"igx-builder-legend__item--and\">\n            <span>{{this.resourceStrings.igx_query_builder_and_label}}</span>\n        </div>\n        <div class=\"igx-builder-legend__item--or\">\n            <span>{{this.resourceStrings.igx_query_builder_or_label}}</span>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'igx-query-builder-header', standalone: true, imports: [NgIf], template: "<div class=\"igx-query-builder__header\">\n    <div class=\"igx-query-builder__title\">\n        {{ title || this.resourceStrings.igx_query_builder_title }}\n        <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showLegend\" class=\"igx-builder-legend\" >\n        <div class=\"igx-builder-legend__item--and\">\n            <span>{{this.resourceStrings.igx_query_builder_and_label}}</span>\n        </div>\n        <div class=\"igx-builder-legend__item--or\">\n            <span>{{this.resourceStrings.igx_query_builder_or_label}}</span>\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], showLegend: [{
@@ -49022,7 +49035,7 @@ class IgxQueryBuilderTreeComponent {
         this.currentGroup = this.rootGroup;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PlatformUtil }, { token: i0.ElementRef }, { token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "selectedReturnFieldsCombo", first: true, predicate: ["selectedReturnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <div class=\"igx-query-builder__root\">\n            <div class=\"igx-query-builder__root-actions\">\n                <button type=\"button\"\n                        #addRootAndGroupButton\n                        igxButton=\"outlined\"\n                        (click)=\"addAndGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n                </button>\n\n                <button type=\"button\"\n                        igxButton=\"outlined\"\n                        (click)=\"addOrGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n                </button>\n            </div>\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{ this.resourceStrings.igx_query_builder_initial_text }}\n                </h6>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                [selected]=\"expressionItem.selected && isInEditMode()\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"isInEditMode() ? onChipClick(expressionItem) : null\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                </span>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                | fieldFormatter\n                                    : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                    : undefined)\n                                : (expressionItem.expression.searchVal\n                                | date\n                                    : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                    : undefined\n                                    : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                {{\n                    expressionItem.expression.searchTree ?\n                        expressionItem.expression.searchTree.returnFields :\n                        expressionItem.expression.condition.isUnary ?\n                            getConditionFriendlyName(expressionItem.expression.condition.name) :\n                            expressionItem.expression.searchVal\n                }}\n            </div>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <span tabindex=\"-1\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        family=\"default\"\n                        name=\"edit\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionEdit(expressionItem)\"\n                    >\n                    </igx-icon>\n                </span>\n                <span tabindex=\"-1\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        family=\"default\"\n                        name=\"add\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionAdd(expressionItem)\"\n                        *ngIf=\"\n                            !expressionItem.inAddMode &&\n                            (expressionItem.parent !== currentGroup ||\n                                expressionItem !==\n                                    currentGroup.children[\n                                        currentGroup.children.length - 1\n                                    ])\n                        \"\n                    >\n                    </igx-icon>\n                </span>\n            </div>\n            <div igxButton class=\"igx-filter-tree__details-button\" *ngIf=\"!expressionItem.inEditMode && expressionItem.expression.searchTree\"\n                (click)=\"expanderClick($event, expressionItem)\">\n                <span>{{this.resourceStrings.igx_query_builder_details}}</span>\n                <igx-icon *ngIf=\"!expressionItem.expanded\" family=\"default\" name=\"unfold_less\" role=\"button\"></igx-icon>\n                <igx-icon *ngIf=\"expressionItem.expanded\" family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n            </div>\n\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [(ngModel)]=\"selectedField\"\n                [disabled]=\"!fields\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_column_placeholder}}</label>\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_condition_placeholder}}</label>\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                    context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                \"\n            >\n            </ng-container>\n\n            <ng-template #defaultSearchValueTemplate>\n                <igx-input-group\n                    *ngIf=\"\n                        !selectedField ||\n                        (selectedField.dataType !== 'date' &&\n                            selectedField.dataType !== 'time' &&\n                            selectedField.dataType !== 'dateTime')\n                    \"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_value_placeholder}}</label>\n                    <input\n                        #searchValueInput\n                        igxInput\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary) ||\n                            selectedCondition === 'in' ||\n                            selectedCondition === 'notIn'\n                        \"\n                        [type]=\"\n                            selectedField && selectedField.dataType === 'number'\n                                ? 'number'\n                                : 'text'\n                        \"\n                        [(ngModel)]=\"searchValue.value\"\n                    />\n                </igx-input-group>\n\n                <igx-date-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                    [(value)]=\"searchValue.value\"\n                    (keydown)=\"openPicker($event)\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                    [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                >\n                    <!-- disable default icons -->\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-date-picker>\n\n                <igx-time-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                    [(value)]=\"searchValue.value\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [inputFormat]=\"selectedField.defaultTimeFormat\"\n                >\n                    <!-- disable default icons -->\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_time_placeholder}}</label>\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n\n                <igx-input-group\n                    #inputGroup\n                    type=\"box\"\n                    *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_date_placeholder}}</label>\n                    <input\n                        #input\n                        igxInput\n                        tabindex=\"0\"\n                        [(ngModel)]=\"searchValue.value\"\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary)\n                        \"\n                        [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                    />\n                </igx-input-group>\n            </ng-template>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"(!expressionItem.inEditMode && expressionItem.expression.searchTree) || (expressionItem.inEditMode && (selectedCondition === 'in' || selectedCondition === 'notIn'))\">\n            <igx-query-builder-tree\n                [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                [entities]=\"entities\"\n                [queryBuilder]=\"this.queryBuilder\"\n                [parentExpression]=\"expressionItem\"\n                [expressionTree]=\"expressionItem.expression.searchTree\"\n                (inEditModeChange)=\"onInEditModeChanged($event)\"\n                [searchValueTemplate]=\"searchValueTemplate\">\n            </igx-query-builder-tree>\n        </ng-container>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem?.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem?.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem?.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'\">\n                    <ng-container *ngIf=\"!expressionItem.parent\">\n                        <igx-select #entitySelect\n                            type=\"box\"\n                            (selectionChanging)=\"onEntitySelectChanging($event)\"\n                            [overlaySettings]=\"entitySelectOverlaySettings\"\n                            [ngModel]=\"selectedEntity\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>\n                            <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                                {{entity.name}}\n                            </igx-select-item>\n                        </igx-select>\n\n                        <igx-combo\n                            #selectedReturnFieldsCombo\n                            [itemsMaxHeight]=\"250\"\n                            [data]=\"fields\"\n                            [displayKey]=\"'field'\"\n                            [valueKey]=\"'field'\"\n                            [disabled]=\"!selectedEntity\"\n                            [(ngModel)]=\"selectedReturnFields\"\n                            [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                            searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <ng-template igxComboHeader>\n                                <div\n                                    class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                                    (click)=\"onSelectAllClicked($event)\"\n                                    [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                                >\n                                    <igx-checkbox\n                                            [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                            [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                            [readonly]=\"true\"\n                                            [disableRipple]=\"true\"\n                                            [tabindex]=\"-1\"\n                                            class=\"igx-combo__checkbox\">\n                                    </igx-checkbox>\n                                    <div class=\"igx-drop-down__inner\">\n                                        {{ this.resourceStrings.igx_query_builder_select_all }}\n                                    </div>\n                                </div>\n                            </ng-template>\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>\n                        </igx-combo>\n                    </ng-container>\n                </div>\n\n                <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem && isInEditMode()\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "filterable", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxLabelDirective, selector: "[igxLabel]", inputs: ["id"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "selectedReturnFieldsCombo", first: true, predicate: ["selectedReturnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <div class=\"igx-query-builder__root\">\n            <div class=\"igx-query-builder__root-actions\">\n                <button type=\"button\"\n                        #addRootAndGroupButton\n                        igxButton=\"outlined\"\n                        (click)=\"addAndGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n                </button>\n\n                <button type=\"button\"\n                        igxButton=\"outlined\"\n                        (click)=\"addOrGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n                </button>\n            </div>\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{ this.resourceStrings.igx_query_builder_initial_text }}\n                </h6>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                [selected]=\"expressionItem.selected && isInEditMode()\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"isInEditMode() ? onChipClick(expressionItem) : null\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                </span>\n                <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span *ngIf=\"!expressionItem.expression.condition.isUnary\">\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                | fieldFormatter\n                                    : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                    : undefined)\n                                : (expressionItem.expression.searchVal\n                                | date\n                                    : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                    : undefined\n                                    : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                {{\n                    expressionItem.expression.searchTree ?\n                        expressionItem.expression.searchTree.returnFields.join(', ') :\n                        expressionItem.expression.condition.isUnary ?\n                            getConditionFriendlyName(expressionItem.expression.condition.name) :\n                            expressionItem.expression.searchVal\n                }}\n            </div>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <span tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"edit\"\n                    >\n                    </igx-icon>\n                </span>\n                <span tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"add\"\n                        *ngIf=\"\n                            !expressionItem.inAddMode &&\n                            (expressionItem.parent !== currentGroup ||\n                                expressionItem !==\n                                    currentGroup.children[\n                                        currentGroup.children.length - 1\n                                    ])\n                        \"\n                    >\n                    </igx-icon>\n                </span>\n            </div>\n            <div *ngIf=\"!expressionItem.inEditMode && expressionItem.expression.searchTree\"\n                igxButton\n                class=\"igx-filter-tree__details-button\"\n                (click)=\"expanderClick($event, expressionItem)\"\n                (keydown)=\"invokeClick($event)\"\n                tabindex=\"0\">\n                <span>{{this.resourceStrings.igx_query_builder_details}}</span>\n                <igx-icon *ngIf=\"expressionItem.expanded\" family=\"default\" name=\"unfold_less\" role=\"button\"></igx-icon>\n                <igx-icon *ngIf=\"!expressionItem.expanded\" family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n            </div>\n\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [(ngModel)]=\"selectedField\"\n                [disabled]=\"!fields\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_column_placeholder}}</label>\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_condition_placeholder}}</label>\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                    context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                \"\n            >\n            </ng-container>\n\n            <ng-template #defaultSearchValueTemplate>\n                <igx-input-group\n                    *ngIf=\"\n                        !selectedField ||\n                        (selectedField.dataType !== 'date' &&\n                            selectedField.dataType !== 'time' &&\n                            selectedField.dataType !== 'dateTime')\n                    \"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_value_placeholder}}</label>\n                    <input\n                        #searchValueInput\n                        igxInput\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary) ||\n                            selectedCondition === 'in' ||\n                            selectedCondition === 'notIn'\n                        \"\n                        [type]=\"\n                            selectedField && selectedField.dataType === 'number'\n                                ? 'number'\n                                : 'text'\n                        \"\n                        [(ngModel)]=\"searchValue.value\"\n                    />\n                </igx-input-group>\n\n                <igx-date-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                    [(value)]=\"searchValue.value\"\n                    (keydown)=\"openPicker($event)\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                    [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_date_placeholder}}</label>\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\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                    [(value)]=\"searchValue.value\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [inputFormat]=\"selectedField.defaultTimeFormat\"\n                >\n                    <!-- disable default icons -->\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_time_placeholder}}</label>\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n\n                <igx-input-group\n                    #inputGroup\n                    type=\"box\"\n                    *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_datetime_placeholder}}</label>\n                    <input\n                        #input\n                        igxInput\n                        tabindex=\"0\"\n                        [(ngModel)]=\"searchValue.value\"\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary)\n                        \"\n                        [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                    />\n                </igx-input-group>\n            </ng-template>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"(!expressionItem.inEditMode && expressionItem.expression.searchTree) || (expressionItem.inEditMode && (selectedCondition === 'in' || selectedCondition === 'notIn'))\">\n            <igx-query-builder-tree\n                [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                [entities]=\"entities\"\n                [queryBuilder]=\"this.queryBuilder\"\n                [parentExpression]=\"expressionItem\"\n                [expressionTree]=\"expressionItem.expression.searchTree\"\n                (inEditModeChange)=\"onInEditModeChanged($event)\"\n                [searchValueTemplate]=\"searchValueTemplate\">\n            </igx-query-builder-tree>\n        </ng-container>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem?.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem?.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem?.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'\">\n                    <ng-container *ngIf=\"!expressionItem.parent\">\n                        <igx-select #entitySelect\n                            type=\"box\"\n                            (selectionChanging)=\"onEntitySelectChanging($event)\"\n                            [overlaySettings]=\"entitySelectOverlaySettings\"\n                            [ngModel]=\"selectedEntity\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>\n                            <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                                {{entity.name}}\n                            </igx-select-item>\n                        </igx-select>\n\n                        <igx-combo\n                            #selectedReturnFieldsCombo\n                            [itemsMaxHeight]=\"250\"\n                            [data]=\"fields\"\n                            [displayKey]=\"'field'\"\n                            [valueKey]=\"'field'\"\n                            [disabled]=\"!selectedEntity\"\n                            [(ngModel)]=\"selectedReturnFields\"\n                            [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                            searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <ng-template igxComboHeader>\n                                <div\n                                    class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                                    (click)=\"onSelectAllClicked($event)\"\n                                    [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                                >\n                                    <igx-checkbox\n                                            [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                            [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                            [readonly]=\"true\"\n                                            [disableRipple]=\"true\"\n                                            [tabindex]=\"-1\"\n                                            class=\"igx-combo__checkbox\">\n                                    </igx-checkbox>\n                                    <div class=\"igx-drop-down__inner\">\n                                        {{ this.resourceStrings.igx_query_builder_select_all }}\n                                    </div>\n                                </div>\n                            </ng-template>\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>\n                        </igx-combo>\n                    </ng-container>\n                </div>\n\n                <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem && isInEditMode()\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "filterable", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxLabelDirective, selector: "[igxLabel]", inputs: ["id"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
             type: Component,
@@ -49061,7 +49074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                         IgxDialogComponent,
                         IgxTooltipTargetDirective,
                         IgxTooltipDirective
-                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <div class=\"igx-query-builder__root\">\n            <div class=\"igx-query-builder__root-actions\">\n                <button type=\"button\"\n                        #addRootAndGroupButton\n                        igxButton=\"outlined\"\n                        (click)=\"addAndGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n                </button>\n\n                <button type=\"button\"\n                        igxButton=\"outlined\"\n                        (click)=\"addOrGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n                </button>\n            </div>\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{ this.resourceStrings.igx_query_builder_initial_text }}\n                </h6>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                [selected]=\"expressionItem.selected && isInEditMode()\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"isInEditMode() ? onChipClick(expressionItem) : null\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                </span>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                | fieldFormatter\n                                    : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                    : undefined)\n                                : (expressionItem.expression.searchVal\n                                | date\n                                    : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                    : undefined\n                                    : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                {{\n                    expressionItem.expression.searchTree ?\n                        expressionItem.expression.searchTree.returnFields :\n                        expressionItem.expression.condition.isUnary ?\n                            getConditionFriendlyName(expressionItem.expression.condition.name) :\n                            expressionItem.expression.searchVal\n                }}\n            </div>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <span tabindex=\"-1\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        family=\"default\"\n                        name=\"edit\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionEdit(expressionItem)\"\n                    >\n                    </igx-icon>\n                </span>\n                <span tabindex=\"-1\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        family=\"default\"\n                        name=\"add\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionAdd(expressionItem)\"\n                        *ngIf=\"\n                            !expressionItem.inAddMode &&\n                            (expressionItem.parent !== currentGroup ||\n                                expressionItem !==\n                                    currentGroup.children[\n                                        currentGroup.children.length - 1\n                                    ])\n                        \"\n                    >\n                    </igx-icon>\n                </span>\n            </div>\n            <div igxButton class=\"igx-filter-tree__details-button\" *ngIf=\"!expressionItem.inEditMode && expressionItem.expression.searchTree\"\n                (click)=\"expanderClick($event, expressionItem)\">\n                <span>{{this.resourceStrings.igx_query_builder_details}}</span>\n                <igx-icon *ngIf=\"!expressionItem.expanded\" family=\"default\" name=\"unfold_less\" role=\"button\"></igx-icon>\n                <igx-icon *ngIf=\"expressionItem.expanded\" family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n            </div>\n\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [(ngModel)]=\"selectedField\"\n                [disabled]=\"!fields\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_column_placeholder}}</label>\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_condition_placeholder}}</label>\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                    context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                \"\n            >\n            </ng-container>\n\n            <ng-template #defaultSearchValueTemplate>\n                <igx-input-group\n                    *ngIf=\"\n                        !selectedField ||\n                        (selectedField.dataType !== 'date' &&\n                            selectedField.dataType !== 'time' &&\n                            selectedField.dataType !== 'dateTime')\n                    \"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_value_placeholder}}</label>\n                    <input\n                        #searchValueInput\n                        igxInput\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary) ||\n                            selectedCondition === 'in' ||\n                            selectedCondition === 'notIn'\n                        \"\n                        [type]=\"\n                            selectedField && selectedField.dataType === 'number'\n                                ? 'number'\n                                : 'text'\n                        \"\n                        [(ngModel)]=\"searchValue.value\"\n                    />\n                </igx-input-group>\n\n                <igx-date-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                    [(value)]=\"searchValue.value\"\n                    (keydown)=\"openPicker($event)\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                    [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                >\n                    <!-- disable default icons -->\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-date-picker>\n\n                <igx-time-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                    [(value)]=\"searchValue.value\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [inputFormat]=\"selectedField.defaultTimeFormat\"\n                >\n                    <!-- disable default icons -->\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_time_placeholder}}</label>\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n\n                <igx-input-group\n                    #inputGroup\n                    type=\"box\"\n                    *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_date_placeholder}}</label>\n                    <input\n                        #input\n                        igxInput\n                        tabindex=\"0\"\n                        [(ngModel)]=\"searchValue.value\"\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary)\n                        \"\n                        [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                    />\n                </igx-input-group>\n            </ng-template>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"(!expressionItem.inEditMode && expressionItem.expression.searchTree) || (expressionItem.inEditMode && (selectedCondition === 'in' || selectedCondition === 'notIn'))\">\n            <igx-query-builder-tree\n                [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                [entities]=\"entities\"\n                [queryBuilder]=\"this.queryBuilder\"\n                [parentExpression]=\"expressionItem\"\n                [expressionTree]=\"expressionItem.expression.searchTree\"\n                (inEditModeChange)=\"onInEditModeChanged($event)\"\n                [searchValueTemplate]=\"searchValueTemplate\">\n            </igx-query-builder-tree>\n        </ng-container>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem?.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem?.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem?.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'\">\n                    <ng-container *ngIf=\"!expressionItem.parent\">\n                        <igx-select #entitySelect\n                            type=\"box\"\n                            (selectionChanging)=\"onEntitySelectChanging($event)\"\n                            [overlaySettings]=\"entitySelectOverlaySettings\"\n                            [ngModel]=\"selectedEntity\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>\n                            <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                                {{entity.name}}\n                            </igx-select-item>\n                        </igx-select>\n\n                        <igx-combo\n                            #selectedReturnFieldsCombo\n                            [itemsMaxHeight]=\"250\"\n                            [data]=\"fields\"\n                            [displayKey]=\"'field'\"\n                            [valueKey]=\"'field'\"\n                            [disabled]=\"!selectedEntity\"\n                            [(ngModel)]=\"selectedReturnFields\"\n                            [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                            searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <ng-template igxComboHeader>\n                                <div\n                                    class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                                    (click)=\"onSelectAllClicked($event)\"\n                                    [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                                >\n                                    <igx-checkbox\n                                            [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                            [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                            [readonly]=\"true\"\n                                            [disableRipple]=\"true\"\n                                            [tabindex]=\"-1\"\n                                            class=\"igx-combo__checkbox\">\n                                    </igx-checkbox>\n                                    <div class=\"igx-drop-down__inner\">\n                                        {{ this.resourceStrings.igx_query_builder_select_all }}\n                                    </div>\n                                </div>\n                            </ng-template>\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>\n                        </igx-combo>\n                    </ng-container>\n                </div>\n\n                <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem && isInEditMode()\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n" }]
+                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <div class=\"igx-query-builder__root\">\n            <div class=\"igx-query-builder__root-actions\">\n                <button type=\"button\"\n                        #addRootAndGroupButton\n                        igxButton=\"outlined\"\n                        (click)=\"addAndGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n                </button>\n\n                <button type=\"button\"\n                        igxButton=\"outlined\"\n                        (click)=\"addOrGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n                </button>\n            </div>\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{ this.resourceStrings.igx_query_builder_initial_text }}\n                </h6>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                [selected]=\"expressionItem.selected && isInEditMode()\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"isInEditMode() ? onChipClick(expressionItem) : null\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                </span>\n                <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span *ngIf=\"!expressionItem.expression.condition.isUnary\">\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                | fieldFormatter\n                                    : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                    : undefined)\n                                : (expressionItem.expression.searchVal\n                                | date\n                                    : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                    : undefined\n                                    : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                {{\n                    expressionItem.expression.searchTree ?\n                        expressionItem.expression.searchTree.returnFields.join(', ') :\n                        expressionItem.expression.condition.isUnary ?\n                            getConditionFriendlyName(expressionItem.expression.condition.name) :\n                            expressionItem.expression.searchVal\n                }}\n            </div>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <span tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"edit\"\n                    >\n                    </igx-icon>\n                </span>\n                <span tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"add\"\n                        *ngIf=\"\n                            !expressionItem.inAddMode &&\n                            (expressionItem.parent !== currentGroup ||\n                                expressionItem !==\n                                    currentGroup.children[\n                                        currentGroup.children.length - 1\n                                    ])\n                        \"\n                    >\n                    </igx-icon>\n                </span>\n            </div>\n            <div *ngIf=\"!expressionItem.inEditMode && expressionItem.expression.searchTree\"\n                igxButton\n                class=\"igx-filter-tree__details-button\"\n                (click)=\"expanderClick($event, expressionItem)\"\n                (keydown)=\"invokeClick($event)\"\n                tabindex=\"0\">\n                <span>{{this.resourceStrings.igx_query_builder_details}}</span>\n                <igx-icon *ngIf=\"expressionItem.expanded\" family=\"default\" name=\"unfold_less\" role=\"button\"></igx-icon>\n                <igx-icon *ngIf=\"!expressionItem.expanded\" family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n            </div>\n\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [(ngModel)]=\"selectedField\"\n                [disabled]=\"!fields\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_column_placeholder}}</label>\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_condition_placeholder}}</label>\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                    context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                \"\n            >\n            </ng-container>\n\n            <ng-template #defaultSearchValueTemplate>\n                <igx-input-group\n                    *ngIf=\"\n                        !selectedField ||\n                        (selectedField.dataType !== 'date' &&\n                            selectedField.dataType !== 'time' &&\n                            selectedField.dataType !== 'dateTime')\n                    \"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_value_placeholder}}</label>\n                    <input\n                        #searchValueInput\n                        igxInput\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary) ||\n                            selectedCondition === 'in' ||\n                            selectedCondition === 'notIn'\n                        \"\n                        [type]=\"\n                            selectedField && selectedField.dataType === 'number'\n                                ? 'number'\n                                : 'text'\n                        \"\n                        [(ngModel)]=\"searchValue.value\"\n                    />\n                </igx-input-group>\n\n                <igx-date-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                    [(value)]=\"searchValue.value\"\n                    (keydown)=\"openPicker($event)\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                    [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_date_placeholder}}</label>\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\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                    [(value)]=\"searchValue.value\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [inputFormat]=\"selectedField.defaultTimeFormat\"\n                >\n                    <!-- disable default icons -->\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_time_placeholder}}</label>\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n\n                <igx-input-group\n                    #inputGroup\n                    type=\"box\"\n                    *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_datetime_placeholder}}</label>\n                    <input\n                        #input\n                        igxInput\n                        tabindex=\"0\"\n                        [(ngModel)]=\"searchValue.value\"\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary)\n                        \"\n                        [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                    />\n                </igx-input-group>\n            </ng-template>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"(!expressionItem.inEditMode && expressionItem.expression.searchTree) || (expressionItem.inEditMode && (selectedCondition === 'in' || selectedCondition === 'notIn'))\">\n            <igx-query-builder-tree\n                [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                [entities]=\"entities\"\n                [queryBuilder]=\"this.queryBuilder\"\n                [parentExpression]=\"expressionItem\"\n                [expressionTree]=\"expressionItem.expression.searchTree\"\n                (inEditModeChange)=\"onInEditModeChanged($event)\"\n                [searchValueTemplate]=\"searchValueTemplate\">\n            </igx-query-builder-tree>\n        </ng-container>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem?.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem?.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem?.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'\">\n                    <ng-container *ngIf=\"!expressionItem.parent\">\n                        <igx-select #entitySelect\n                            type=\"box\"\n                            (selectionChanging)=\"onEntitySelectChanging($event)\"\n                            [overlaySettings]=\"entitySelectOverlaySettings\"\n                            [ngModel]=\"selectedEntity\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>\n                            <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                                {{entity.name}}\n                            </igx-select-item>\n                        </igx-select>\n\n                        <igx-combo\n                            #selectedReturnFieldsCombo\n                            [itemsMaxHeight]=\"250\"\n                            [data]=\"fields\"\n                            [displayKey]=\"'field'\"\n                            [valueKey]=\"'field'\"\n                            [disabled]=\"!selectedEntity\"\n                            [(ngModel)]=\"selectedReturnFields\"\n                            [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                            searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <ng-template igxComboHeader>\n                                <div\n                                    class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                                    (click)=\"onSelectAllClicked($event)\"\n                                    [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                                >\n                                    <igx-checkbox\n                                            [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                            [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                            [readonly]=\"true\"\n                                            [disableRipple]=\"true\"\n                                            [tabindex]=\"-1\"\n                                            class=\"igx-combo__checkbox\">\n                                    </igx-checkbox>\n                                    <div class=\"igx-drop-down__inner\">\n                                        {{ this.resourceStrings.igx_query_builder_select_all }}\n                                    </div>\n                                </div>\n                            </ng-template>\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>\n                        </igx-combo>\n                    </ng-container>\n                </div>\n\n                <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem && isInEditMode()\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }, { type: i0.ElementRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -57119,7 +57132,7 @@ class IgxGridFilteringCellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IgxFilteringService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <ng-container *ngFor=\"let item of expressionsList; let last = last; let index = index;\" >\n            <igx-chip *ngIf=\"isChipVisible(index)\"\n                [removable]=\"true\"\n                [tabIndex]=\"-1\"\n                [style.--ig-size]=\"filteringElementsSize\"\n                (click)=\"onChipClicked(item.expression)\"\n                (remove)=\"onChipRemoved($event, item)\">\n                <igx-icon igxPrefix\n                    family=\"default\"\n                    [name]=\"item.expression.condition.iconName\">\n                </igx-icon>\n                <span #label>\n                    {{filteringService.getChipLabel(item.expression)}}\n                </span>\n            </igx-chip>\n            <span class=\"igx-filtering-chips__connector\" *ngIf=\"!last && isChipVisible(index + 1)\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n        </ng-container>\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <ng-container *ngFor=\"let item of expressionsList; let last = last; let index = index;\" >\n            <igx-chip *ngIf=\"isChipVisible(index)\"\n                [removable]=\"true\"\n                [tabIndex]=\"-1\"\n                [style.--ig-size]=\"filteringElementsSize\"\n                (click)=\"onChipClicked(item.expression)\"\n                (remove)=\"onChipRemoved($event, item)\">\n                <igx-icon igxPrefix\n                    family=\"default\"\n                    [name]=\"item.expression.condition.iconName\">\n                </igx-icon>\n                <span #label>\n                    {{filteringService.getChipLabel(item.expression)}}\n                </span>\n            </igx-chip>\n            <span class=\"igx-filtering-chips__connector\" *ngIf=\"!last && isChipVisible(index + 1)\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n        </ng-container>\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
             type: Component,
@@ -60798,11 +60811,11 @@ class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         this.grid.clearGrouping(name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridGroupByAreaComponent, deps: [{ token: i0.ElementRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridGroupByAreaComponent, isStandalone: true, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridGroupByAreaComponent, isStandalone: true, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridGroupByAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], standalone: true, imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
+            args: [{ selector: 'igx-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], standalone: true, imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PlatformUtil }], propDecorators: { sortingExpressions: [{
                 type: Input
             }], grid: [{
@@ -69758,7 +69771,7 @@ class IgxGridGroupByRowComponent {
         return this.grid.rowSelection !== GridSelectionMode.none && !this.hideGroupRowSelectors;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridGroupByRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxFilteringService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridGroupByRowComponent, isStandalone: true, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()", "click": "onClick($event)" }, properties: { "attr.aria-expanded": "this.expanded", "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n    <ng-container *ngIf=\"rowDraggable\">\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n            <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"showRowSelectors\">\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    </ng-container>\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <span class=\"igx-group-label__text\">{{\n                formatter\n                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n                    : dataType === \"number\"\n                    ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n                    ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)\n                    : dataType === 'currency'\n                    ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : dataType === 'percent'\n                    ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : groupRow.value\n            }}</span>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridGroupByRowComponent, isStandalone: true, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()", "click": "onClick($event)" }, properties: { "attr.aria-expanded": "this.expanded", "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n    <ng-container *ngIf=\"rowDraggable\">\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n            <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"showRowSelectors\">\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    </ng-container>\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <span class=\"igx-group-label__text\">{{\n                formatter\n                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n                    : dataType === \"number\"\n                    ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n                    ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)\n                    : dataType === 'currency'\n                    ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : dataType === 'percent'\n                    ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : groupRow.value\n            }}</span>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
             type: Component,
@@ -73717,7 +73730,7 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         return this.grid.dimensionDataColumns ? this.grid.dimensionDataColumns.find((col) => col.field === dim.memberName) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotHeaderRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "pivotRowContainer", first: true, predicate: ["pivotRowContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionHeaders", predicate: ["rowDimensionHeaders"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                <div #pivotFilterContainer *ngIf=\"grid.pivotUI.showConfiguration\"\n                     class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                     [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                     igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Filter area -->\n                    <igx-chips-area #filterArea droppable='true'>\n                        <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                          *ngIf=\"grid.filterDimensions.length === 0\"\n                          class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                        <ng-container *ngFor=\"let filter of this.filterAreaDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(filterArea)'></span>\n                            <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    igxPrefix\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFilteringIconClick($event, filter)'>\n                                </igx-icon>\n                                {{filter.displayName || filter.memberName}}\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                            {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                    <div class=\"igx-grid__pivot-filter-toggle\" *ngIf=\"isFiltersButton && grid.filterDimensions.length !== 0\">\n                        <igx-icon\n                            family=\"default\"\n                            name=\"filter_list\"\n                            #filterIcon\n                            (pointerdown)='onFilteringIconPointerDown($event)'\n                            (click)='onFiltersAreaDropdownClick($event)'>\n                        </igx-icon>\n                        <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                    </div>\n                </div>\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    <div #pivotRowContainer *ngIf=\"grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders\" [style.width.px]=\"grid.pivotRowWidths - 1\"\n                        class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                        (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                        (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                        <igx-chips-area #rowArea droppable='true'>\n                            <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                *ngIf=\"grid.rowDimensions.length === 0\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            *ngIf=\"row.sortDirection\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    </igx-chip>\n                                <ng-container *ngIf='last'>\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                </ng-container>\n                            </ng-container>\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                <div #pivotColumnContainer *ngIf=\"grid.pivotUI.showConfiguration\" class=\"igx-grid__tr-pivot\"\n                     (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                    <!-- Columns area -->\n                    <igx-chips-area #colArea droppable='true'>\n                    <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                        *ngIf=\"grid.columnDimensions.length === 0\" class='igx-grid__pivot-empty-chip-area'>\n                        {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                        <ng-container *ngFor=\"let col of grid.columnDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(colArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"view_column\"\n                                    igxPrefix>\n                                </igx-icon>\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    igxPrefix\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFilteringIconClick($event, col)'>\n                                </igx-icon>\n                                {{col.displayName || col.memberName}}\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                    *ngIf=\"col.sortDirection\"\n                                    igxSuffix>\n                                </igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                            {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n\n                <div #pivotValueContainer *ngIf=\"grid.pivotUI.showConfiguration\" class=\"igx-grid__tr-pivot\"\n                     (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                     (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                    <!-- Value area -->\n                    <igx-chips-area #valueArea droppable='true'>\n                    <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop *ngIf=\"grid.values.length === 0\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                    <ng-container *ngFor=\"let value of grid.values; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(valueArea)'></span>\n                            <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                    [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                     (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                     (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                    <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                    <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                </div>\n                                <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                            {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <ng-container *ngIf=\"!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0\">\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        <ng-container *ngIf=\"grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0\">\n                            <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                *ngIf=\"grid.rowDimensions.length === 0\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            *ngIf=\"row.sortDirection\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    </igx-chip>\n                                <ng-container *ngIf='last'>\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                </ng-container>\n                            </ng-container>\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        </ng-container>\n                    </igx-chips-area>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0\">\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    <ng-container *ngFor=\"let dim of grid.visibleRowDimensions; index as colIndex;last as isLast\">\n                        <igx-pivot-row-header-group #rowDimensionHeaders *ngIf=\"getRowDimensionColumn(dim) as dimCol\"\n                            [ngClass]=\"dimCol.headerGroupClasses\"\n                            [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                            [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                            [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                            [column]=\"dimCol\"\n                            [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                            [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                            [rowIndex]=\"-1\" >\n                        </igx-pivot-row-header-group>\n                    </ng-container>\n                </div>\n            </ng-container>\n\n            <!-- Pinned columns collection from the start -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight' (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [style.width.px]='grid.unpinnedWidth'>\n                    <ng-template igxGridFor #headerVirtualContainer let-column\n                                 [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]=\"grid.parentVirtDir\"\n                                 [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                                 [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                        <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                               [style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'\n                                               [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                               [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'\n                                               [class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'\n                        >\n                        </igx-grid-header-group>\n                    </ng-template>\n                </div>\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    <igx-drop-down-item *ngFor=\"let item of aggregateList\" [selected]='isSelected(item)' [value]='item'>\n        {{ item.label }}\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                <igx-chip *ngFor=\"let filter of this.filterDropdownDimensions\" [id]=\"filter.memberName\"\n                [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        <igx-chip\n            *ngFor=\"let filter of grid.filterDimensions\"\n            [id]=\"filter.memberName\"\n            [draggable]=\"true\"\n            [removable]=\"true\"\n            (remove)=\"filterRemoved($event)\">\n            <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n            {{filter.displayName || filter.memberName}}\n        </igx-chip>\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "pivotRowContainer", first: true, predicate: ["pivotRowContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionHeaders", predicate: ["rowDimensionHeaders"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                <div #pivotFilterContainer *ngIf=\"grid.pivotUI.showConfiguration\"\n                     class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                     [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                     igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Filter area -->\n                    <igx-chips-area #filterArea droppable='true'>\n                        <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                          *ngIf=\"grid.filterDimensions.length === 0\"\n                          class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                        <ng-container *ngFor=\"let filter of this.filterAreaDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(filterArea)'></span>\n                            <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    igxPrefix\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFilteringIconClick($event, filter)'>\n                                </igx-icon>\n                                {{filter.displayName || filter.memberName}}\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                            {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                    <div class=\"igx-grid__pivot-filter-toggle\" *ngIf=\"isFiltersButton && grid.filterDimensions.length !== 0\">\n                        <igx-icon\n                            family=\"default\"\n                            name=\"filter_list\"\n                            #filterIcon\n                            (pointerdown)='onFilteringIconPointerDown($event)'\n                            (click)='onFiltersAreaDropdownClick($event)'>\n                        </igx-icon>\n                        <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                    </div>\n                </div>\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    <div #pivotRowContainer *ngIf=\"grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders\" [style.width.px]=\"grid.pivotRowWidths - 1\"\n                        class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                        (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                        (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                        <igx-chips-area #rowArea droppable='true'>\n                            <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                *ngIf=\"grid.rowDimensions.length === 0\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            *ngIf=\"row.sortDirection\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    </igx-chip>\n                                <ng-container *ngIf='last'>\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                </ng-container>\n                            </ng-container>\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                <div #pivotColumnContainer *ngIf=\"grid.pivotUI.showConfiguration\" class=\"igx-grid__tr-pivot\"\n                     (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                    <!-- Columns area -->\n                    <igx-chips-area #colArea droppable='true'>\n                    <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                        *ngIf=\"grid.columnDimensions.length === 0\" class='igx-grid__pivot-empty-chip-area'>\n                        {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                        <ng-container *ngFor=\"let col of grid.columnDimensions; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(colArea)'></span>\n                            <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"view_column\"\n                                    igxPrefix>\n                                </igx-icon>\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    igxPrefix\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFilteringIconClick($event, col)'>\n                                </igx-icon>\n                                {{col.displayName || col.memberName}}\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                    *ngIf=\"col.sortDirection\"\n                                    igxSuffix>\n                                </igx-icon>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                            {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n\n                <div #pivotValueContainer *ngIf=\"grid.pivotUI.showConfiguration\" class=\"igx-grid__tr-pivot\"\n                     (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                     (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                    <!-- Value area -->\n                    <igx-chips-area #valueArea droppable='true'>\n                    <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop *ngIf=\"grid.values.length === 0\"\n                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                    <ng-container *ngFor=\"let value of grid.values; let last = last;\">\n                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                              [style.height.px]='getAreaHeight(valueArea)'></span>\n                            <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                    [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                     (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                     (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                    <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                    <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                </div>\n                                <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                            </igx-chip>\n                            <ng-container *ngIf='last'>\n                            <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                            </ng-container>\n                        </ng-container>\n                        <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                            {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                        </igx-chip>\n                    </igx-chips-area>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <ng-container *ngIf=\"!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0\">\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        <ng-container *ngIf=\"grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0\">\n                            <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                *ngIf=\"grid.rowDimensions.length === 0\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            <ng-container *ngFor=\"let row of grid.rowDimensions; let last = last;\">\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            *ngIf=\"row.sortDirection\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    </igx-chip>\n                                <ng-container *ngIf='last'>\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                </ng-container>\n                            </ng-container>\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        </ng-container>\n                    </igx-chips-area>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0\">\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    <ng-container *ngFor=\"let dim of grid.visibleRowDimensions; index as colIndex;last as isLast\">\n                        <igx-pivot-row-header-group #rowDimensionHeaders *ngIf=\"getRowDimensionColumn(dim) as dimCol\"\n                            [ngClass]=\"dimCol.headerGroupClasses\"\n                            [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                            [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                            [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                            [column]=\"dimCol\"\n                            [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                            [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                            [rowIndex]=\"-1\" >\n                        </igx-pivot-row-header-group>\n                    </ng-container>\n                </div>\n            </ng-container>\n\n            <!-- Pinned columns collection from the start -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]='maxContainerHeight' (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' *ngFor='let dimLevelColumns of columnDimensionsByLevel; let i = index' [style.width.px]='grid.unpinnedWidth'>\n                    <ng-template igxGridFor #headerVirtualContainer let-column\n                                 [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]=\"grid.parentVirtDir\"\n                                 [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                                 [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                        <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                               [style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'\n                                               [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                               [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                               [class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'\n                                               [class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'\n                        >\n                        </igx-grid-header-group>\n                    </ng-template>\n                </div>\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n                <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                           [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                           [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                           [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    <igx-drop-down-item *ngFor=\"let item of aggregateList\" [selected]='isSelected(item)' [value]='item'>\n        {{ item.label }}\n    </igx-drop-down-item>\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                <igx-chip *ngFor=\"let filter of this.filterDropdownDimensions\" [id]=\"filter.memberName\"\n                [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        <igx-chip\n            *ngFor=\"let filter of grid.filterDimensions\"\n            [id]=\"filter.memberName\"\n            [draggable]=\"true\"\n            [removable]=\"true\"\n            (remove)=\"filterRemoved($event)\">\n            <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n            {{filter.displayName || filter.memberName}}\n        </igx-chip>\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { 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: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
@@ -80981,11 +80994,11 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ElementRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxTreeGridGroupByAreaComponent, isStandalone: true, selector: "igx-tree-grid-group-by-area", inputs: { hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute] }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxTreeGridGroupByAreaComponent, isStandalone: true, selector: "igx-tree-grid-group-by-area", inputs: { hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute] }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-tree-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], standalone: true, imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
+            args: [{ selector: 'igx-tree-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], standalone: true, imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    <ng-container *ngFor=\"let expression of chipExpressions; let last = last;\">\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    </ng-container>\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i0.ElementRef }, { type: PlatformUtil }], propDecorators: { hideGroupedColumns: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -89315,11 +89328,11 @@ class IgxTabsComponent extends IgxTabsDirective {
         return this.dir.rtl ? this.itemsWrapper.nativeElement.offsetWidth - element.offsetLeft - element.offsetWidth : element.offsetLeft;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxTabsComponent, deps: [{ token: IgxAngularAnimationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: IgxDirectionality }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxTabsComponent, isStandalone: true, selector: "igx-tabs", inputs: { tabAlignment: "tabAlignment" }, host: { properties: { "class.igx-tabs": "this.defaultClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "viewPort", first: true, predicate: ["viewPort"], descendants: true, static: true }, { propertyName: "itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true, static: true }, { propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, static: true }, { propertyName: "selectedIndicator", first: true, predicate: ["selectedIndicator"], descendants: true }, { propertyName: "scrollPrevButton", first: true, predicate: ["scrollPrevButton"], descendants: true }, { propertyName: "scrollNextButton", first: true, predicate: ["scrollNextButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton type=\"button\" igxIconButton=\"flat\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxIconButton=\"flat\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxTabsComponent, isStandalone: true, selector: "igx-tabs", inputs: { tabAlignment: "tabAlignment" }, host: { properties: { "class.igx-tabs": "this.defaultClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "viewPort", first: true, predicate: ["viewPort"], descendants: true, static: true }, { propertyName: "itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true, static: true }, { propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, static: true }, { propertyName: "selectedIndicator", first: true, predicate: ["selectedIndicator"], descendants: true }, { propertyName: "scrollPrevButton", first: true, predicate: ["scrollPrevButton"], descendants: true }, { propertyName: "scrollNextButton", first: true, predicate: ["scrollNextButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton type=\"button\" igxIconButton=\"flat\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxIconButton=\"flat\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-tabs', providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], standalone: true, imports: [IgxRippleDirective, IgxIconComponent, NgClass, NgFor, NgTemplateOutlet, NgIf], template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton type=\"button\" igxIconButton=\"flat\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxIconButton=\"flat\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>\n" }]
+            args: [{ selector: 'igx-tabs', providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], standalone: true, imports: [IgxRippleDirective, IgxIconComponent, NgClass, NgFor, NgTemplateOutlet, NgIf, IgxIconButtonDirective], template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button #scrollPrevButton type=\"button\" igxIconButton=\"flat\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollPrev()\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div #itemsWrapper class=\"igx-tabs__header-wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs__header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div #selectedIndicator *ngIf=\"items.length > 0\" class=\"igx-tabs__header-active-indicator\">\n            </div>\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxIconButton=\"flat\" igxRipple class=\"igx-tabs__header-button\" (click)=\"scrollNext()\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IgxAngularAnimationService]