igniteui-angular 19.2.0-beta.0 → 19.2.0

package/fesm2022/igniteui-angular.mjs

@@ -3208,8 +3208,10 @@ function isTree(entry) {
  * @param entities An array of entities to use for recreating the tree.
  * @returns The recreated expression tree.
  */
-function recreateTree(tree, entities) {
-    const entity = entities.find(e => e.name === tree.entity);
+function recreateTree(tree, entities, isRoot = false) {
+    const entity = isRoot ? entities[0] : entities.find(e => e.name === tree.entity);
+    if (!entity)
+        return tree;
     for (let i = 0; i < tree.filteringOperands.length; i++) {
         const operand = tree.filteringOperands[i];
         if (isTree(operand)) {
@@ -3217,7 +3219,7 @@ function recreateTree(tree, entities) {
         }
         else {
             if (operand.searchTree) {
-                operand.searchTree = recreateTree(operand.searchTree, entities);
+                operand.searchTree = recreateTree(operand.searchTree, entities[0].childEntities ?? entities);
             }
             tree.filteringOperands[i] = recreateExpression(operand, entity?.fields);
         }
@@ -3341,13 +3343,31 @@ class FilterUtil {
 class BaseFilteringStrategy {
     // protected
     findMatchByExpression(rec, expr, isDate, isTime, grid) {
+        if (expr.searchTree) {
+            const records = rec[expr.searchTree.entity];
+            const shouldMatchRecords = expr.conditionName === 'inQuery';
+            if (!records) { // child grid is not yet created
+                return true;
+            }
+            else if (records.length === 0) { // child grid is empty
+                return false;
+            }
+            for (let index = 0; index < records.length; index++) {
+                const record = records[index];
+                if ((shouldMatchRecords && this.matchRecord(record, expr.searchTree, grid, expr.searchTree.entity)) ||
+                    (!shouldMatchRecords && !this.matchRecord(record, expr.searchTree, grid, expr.searchTree.entity))) {
+                    return true;
+                }
+            }
+            return false;
+        }
         const val = this.getFieldValue(rec, expr.fieldName, isDate, isTime, grid);
         if (expr.condition?.logic) {
             return expr.condition.logic(val, expr.searchVal, expr.ignoreCase);
         }
     }
     // protected
-    matchRecord(rec, expressions, grid) {
+    matchRecord(rec, expressions, grid, entity) {
         if (expressions) {
             if (isTree(expressions)) {
                 const expressionsTree = expressions;
@@ -3355,7 +3375,7 @@ class BaseFilteringStrategy {
                 let matchOperand;
                 if (expressionsTree.filteringOperands && expressionsTree.filteringOperands.length) {
                     for (const operand of expressionsTree.filteringOperands) {
-                        matchOperand = this.matchRecord(rec, operand, grid);
+                        matchOperand = this.matchRecord(rec, operand, grid, entity);
                         // Return false if at least one operand does not match and the filtering logic is And
                         if (!matchOperand && operator === FilteringLogic.And) {
                             return false;
@@ -3371,14 +3391,37 @@ class BaseFilteringStrategy {
             }
             else {
                 const expression = expressions;
-                const column = grid && grid.getColumnByName(expression.fieldName);
-                const isDate = column ? column.dataType === DateType || column.dataType === DateTimeType : false;
-                const isTime = column ? column.dataType === TimeType : false;
+                let dataType = null;
+                if (!entity) {
+                    const column = grid && grid.getColumnByName(expression.fieldName);
+                    dataType = column?.dataType;
+                }
+                else if (grid.type === 'hierarchical') {
+                    const schema = grid.schema;
+                    const entityMatch = this.findEntityByName(schema, entity);
+                    dataType = entityMatch?.fields.find(f => f.field === expression.fieldName)?.dataType;
+                }
+                const isDate = dataType ? dataType === DateType || dataType === DateTimeType : false;
+                const isTime = dataType ? dataType === TimeType : false;
                 return this.findMatchByExpression(rec, expression, isDate, isTime, grid);
             }
         }
         return true;
     }
+    findEntityByName(schema, name) {
+        for (const entity of schema) {
+            if (entity.name === name) {
+                return entity;
+            }
+            if (entity.childEntities && entity.childEntities.length > 0) {
+                const found = this.findEntityByName(entity.childEntities, name);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
     getFilterItems(column, tree) {
         let data = column.grid.gridAPI.filterDataByExpressions(tree);
         data = column.grid.gridAPI.sortDataByExpressions(data, [{ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase }]);
@@ -3715,17 +3758,15 @@ var RowPinningPosition;
     RowPinningPosition[RowPinningPosition["Top"] = 0] = "Top";
     RowPinningPosition[RowPinningPosition["Bottom"] = 1] = "Bottom";
 })(RowPinningPosition || (RowPinningPosition = {}));
-/* mustCoerceToInt */
 /**
  * Enumeration representing different paging modes for the grid.
  * - Local: The grid will use local data to extract pages during paging.
  * - Remote: The grid will expect pages to be delivered from a remote location and will only raise events during paging interactions.
  */
-var GridPagingMode;
-(function (GridPagingMode) {
-    GridPagingMode[GridPagingMode["Local"] = 0] = "Local";
-    GridPagingMode[GridPagingMode["Remote"] = 1] = "Remote";
-})(GridPagingMode || (GridPagingMode = {}));
+const GridPagingMode = /*@__PURE__*/ mkenum({
+    Local: 'local',
+    Remote: 'remote'
+});
 /**
  * @hidden @internal
  *
@@ -43797,7 +43838,8 @@ class IgxColumnComponent {
         return this.grid.dataView
             .map((rec, index) => {
             if (!this.grid.isGroupByRecord(rec) && !this.grid.isSummaryRow(rec)) {
-                this.grid.pagingMode === 1 && this.grid.page !== 0 ? index = index + this.grid.perPage * this.grid.page : index = this.grid.dataRowList.first.index + index;
+                this.grid.pagingMode === 'remote' && this.grid.page !== 0 ?
+                    index = index + this.grid.perPage * this.grid.page : index = this.grid.dataRowList.first.index + index;
                 const cell = new IgxGridCell(this.grid, index, this);
                 return cell;
             }
@@ -49257,8 +49299,8 @@ class IgxQueryBuilderTreeComponent {
     set expressionTree(expressionTree) {
         this._expressionTree = expressionTree;
         if (!expressionTree) {
-            this._selectedEntity = null;
-            this._selectedReturnFields = [];
+            this._selectedEntity = this.isAdvancedFiltering() && this.entities.length === 1 ? this.entities[0] : null;
+            this._selectedReturnFields = this._selectedEntity ? this._selectedEntity.fields?.map(f => f.field) : [];
         }
         if (!this._preventInit) {
             this.init();
@@ -49352,7 +49394,13 @@ class IgxQueryBuilderTreeComponent {
     }
     /** @hidden */
     isAdvancedFiltering() {
-        return this.entities?.length === 1 && !this.entities[0]?.name;
+        return (this.entities?.length === 1 && !this.entities[0]?.name) ||
+            this.entities?.find(e => e.childEntities?.length > 0) !== undefined ||
+            this.entities !== this.queryBuilder?.entities;
+    }
+    /** @hidden */
+    isHierarchicalNestedQuery() {
+        return this.queryBuilder.entities !== this.entities;
     }
     /** @hidden */
     isSearchValueInputDisabled() {
@@ -49372,6 +49420,10 @@ class IgxQueryBuilderTreeComponent {
          * Sets/gets the search value template.
          */
         this.searchValueTemplate = null;
+        /**
+         * Gets/sets the expected return field.
+         */
+        this.expectedReturnField = null;
         /**
          * Event fired as the expression tree is changed.
          */
@@ -49504,6 +49556,12 @@ class IgxQueryBuilderTreeComponent {
         this.returnFieldSelectOverlaySettings.outlet = this.overlayOutlet;
         this.addExpressionDropDownOverlaySettings.outlet = this.overlayOutlet;
         this.groupContextMenuDropDownOverlaySettings.outlet = this.overlayOutlet;
+        if (this.isAdvancedFiltering() && this.entities?.length === 1) {
+            this.selectedEntity = this.entities[0].name;
+            if (this._selectedEntity.fields.find(f => f.field === this.expectedReturnField)) {
+                this._selectedReturnFields = [this.expectedReturnField];
+            }
+        }
         // Trigger additional change detection cycle
         this.cdr.detectChanges();
     }
@@ -49565,7 +49623,12 @@ class IgxQueryBuilderTreeComponent {
             this._selectedEntity.fields = [];
         }
         this.fields = this._entityNewValue ? this._entityNewValue.fields : [];
-        this._selectedReturnFields = this.parentExpression ? [] : this._entityNewValue.fields?.map(f => f.field);
+        if (this._selectedEntity.fields.find(f => f.field === this.expectedReturnField)) {
+            this._selectedReturnFields = [this.expectedReturnField];
+        }
+        else {
+            this._selectedReturnFields = this.parentExpression ? [] : this._entityNewValue.fields?.map(f => f.field);
+        }
         if (this._expressionTree) {
             this._expressionTree.entity = this._entityNewValue.name;
             this._expressionTree.returnFields = this.fields.length === this._selectedReturnFields.length ? ['*'] : this._selectedReturnFields;
@@ -49614,6 +49677,9 @@ class IgxQueryBuilderTreeComponent {
         const oldValue = this._selectedField;
         if (this._selectedField !== value) {
             this._selectedField = value;
+            if (this._selectedField && !this._selectedField.dataType) {
+                this._selectedField.filters = this.getFilters(this._selectedField);
+            }
             this.selectDefaultCondition();
             if (oldValue && this._selectedField && this._selectedField.dataType !== oldValue.dataType) {
                 this.searchValue.value = null;
@@ -49741,7 +49807,10 @@ class IgxQueryBuilderTreeComponent {
             if (innerQuery && this.selectedField?.filters?.condition(this.selectedCondition)?.isNestedQuery) {
                 innerQuery.exitEditAddMode();
                 this._editedExpression.expression.searchTree = this.getExpressionTreeCopy(innerQuery.expressionTree);
-                this._editedExpression.expression.searchTree.returnFields = innerQuery.selectedReturnFields;
+                const returnFields = innerQuery.selectedReturnFields.length > 0 ?
+                    innerQuery.selectedReturnFields :
+                    [innerQuery.fields[0].field];
+                this._editedExpression.expression.searchTree.returnFields = returnFields;
             }
             else {
                 this._editedExpression.expression.searchTree = null;
@@ -49753,6 +49822,9 @@ class IgxQueryBuilderTreeComponent {
             this._editedExpression.inEditMode = false;
             this._editedExpression = null;
         }
+        if (this.selectedReturnFields.length === 0) {
+            this.selectedReturnFields = this.fields.map(f => f.field);
+        }
         this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup, this.selectedEntity?.name, this.selectedReturnFields);
         if (!this.parentExpression) {
             this.expressionTreeChange.emit(this._expressionTree);
@@ -50172,7 +50244,11 @@ class IgxQueryBuilderTreeComponent {
     getConditionList() {
         if (!this.selectedField)
             return [];
-        if (this.entities?.length === 1 && !this.entities[0].name) {
+        if (!this.selectedField.filters) {
+            this.selectedField.filters = this.getFilters(this.selectedField);
+        }
+        if ((this.isAdvancedFiltering() && !this.entities[0].childEntities) ||
+            (this.isHierarchicalNestedQuery() && this.selectedEntity.name && !this.selectedEntity.childEntities)) {
             return this.selectedField.filters.conditionList();
         }
         return this.selectedField.filters.extendedConditionList();
@@ -50318,6 +50394,9 @@ class IgxQueryBuilderTreeComponent {
                     return IgxStringFilteringOperand.instance();
             }
         }
+        else {
+            return field.filters;
+        }
     }
     addGroup(operator, parent, afterExpression) {
         this.cancelOperandAdd();
@@ -50462,9 +50541,9 @@ class IgxQueryBuilderTreeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IgxQueryBuilderDragService }, { token: PlatformUtil }, { token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", 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" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", 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", expectedReturnField: "expectedReturnField" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, providers: [
             IgxQueryBuilderDragService
-        ], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { 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: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "expressionsChips", predicate: IgxChipComponent, descendants: true, read: IgxChipComponent }, { 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<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">Select</span>\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\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                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\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                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\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                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\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\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\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                        }\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                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\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                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\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.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\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                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\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                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\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: "pipe", type: DatePipe, name: "date" }, { 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: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { 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: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "disableFiltering", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { 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: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { 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: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { 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: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { 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: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+        ], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { 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: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "expressionsChips", predicate: IgxChipComponent, descendants: true, read: IgxChipComponent }, { 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<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            @if (!this.isHierarchicalNestedQuery()) {\n                <span class=\"igx-query-builder__label\">Select</span>\n            }\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\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                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\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                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\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                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\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\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\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                        }\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                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\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                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"(this.selectedEntity ? this.selectedEntity.childEntities : entities[0].childEntities) ?? entities\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expectedReturnField]=\"this.selectedField?.field\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\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                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\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                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\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", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { 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: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { 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: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "disableFiltering", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { 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: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { 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: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { 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: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { 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: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
             type: Component,
@@ -50502,7 +50581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         NgTemplateOutlet
                     ], providers: [
                         IgxQueryBuilderDragService
-                    ], 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<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">Select</span>\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\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                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\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                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\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                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\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\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\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                        }\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                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\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                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\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.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\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                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\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                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\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<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            @if (!this.isHierarchicalNestedQuery()) {\n                <span class=\"igx-query-builder__label\">Select</span>\n            }\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\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                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\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                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\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                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\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\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\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                        }\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                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\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                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"(this.selectedEntity ? this.selectedEntity.childEntities : entities[0].childEntities) ?? entities\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expectedReturnField]=\"this.selectedField?.field\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\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                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\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                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\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: IgxQueryBuilderDragService }, { type: PlatformUtil }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -50525,6 +50604,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 type: Input
             }], resourceStrings: [{
                 type: Input
+            }], expectedReturnField: [{
+                type: Input
             }], expressionTreeChange: [{
                 type: Output
             }], inEditModeChange: [{
@@ -50858,7 +50939,7 @@ class IgxQueryBuilderComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IgxQueryBuilderComponent, deps: [{ token: IgxIconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.3", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { showEntityChangeDialog: ["showEntityChangeDialog", "showEntityChangeDialog", booleanAttribute], entities: "entities", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", disableEntityChange: "disableEntityChange", disableReturnFieldsChange: "disableReturnFieldsChange" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "searchValueTemplate", first: true, predicate: IgxQueryBuilderSearchValueTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "queryTree", first: true, predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n    [entities]=\"this.entities\"\n    [expressionTree]=\"this.expressionTree\"\n    [locale]=\"this.locale\"\n    [resourceStrings]=\"this.resourceStrings\"\n    [queryBuilder]=\"this\"\n    (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n    [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.3", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { showEntityChangeDialog: ["showEntityChangeDialog", "showEntityChangeDialog", booleanAttribute], entities: "entities", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", disableEntityChange: "disableEntityChange", disableReturnFieldsChange: "disableReturnFieldsChange" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "searchValueTemplate", first: true, predicate: IgxQueryBuilderSearchValueTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "queryTree", first: true, predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n    [entities]=\"this.entities\"\n    [expressionTree]=\"this.expressionTree\"\n    [locale]=\"this.locale\"\n    [resourceStrings]=\"this.resourceStrings\"\n    [queryBuilder]=\"this\"\n    (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n    [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
             type: Component,
@@ -51261,13 +51342,31 @@ class IgxAdvancedFilteringDialogComponent {
      * @hidden @internal
      */
     generateEntity() {
-        const entities = [
-            {
-                name: null,
-                fields: this.filterableFields
-            }
-        ];
-        return entities;
+        if (this.queryBuilder?.entities) {
+            return this.queryBuilder?.entities;
+        }
+        else if (this.grid.type === 'hierarchical') {
+            return this.grid.schema;
+        }
+        else {
+            const entities = [
+                {
+                    name: null,
+                    fields: this.filterableFields.map(f => ({
+                        field: f.field,
+                        dataType: f.dataType,
+                        //  label: f.label,
+                        //  header: f.header,
+                        editorOptions: f.editorOptions,
+                        filters: f.filters,
+                        pipeArgs: f.pipeArgs,
+                        defaultTimeFormat: f.defaultTimeFormat,
+                        defaultDateTimeFormat: f.defaultDateTimeFormat
+                    }))
+                }
+            ];
+            return entities;
+        }
     }
     assignResourceStrings() {
         // If grid has custom resource strings set for the advanced filtering,
@@ -64081,7 +64180,7 @@ class IgxGridBaseDirective {
             }
             value.type = FilteringExpressionsTreeType.Regular;
             if (value && this._columns?.length > 0) {
-                this._filteringExpressionsTree = recreateTreeFromFields(value, this._columns);
+                this._filteringExpressionsTree = this.getRecreatedTree(value);
             }
             else {
                 this._filteringExpressionsTree = value;
@@ -64123,7 +64222,7 @@ class IgxGridBaseDirective {
         if (value && isTree(value)) {
             value.type = FilteringExpressionsTreeType.Advanced;
             if (this._columns && this._columns.length > 0) {
-                this._advancedFilteringExpressionsTree = recreateTreeFromFields(value, this._columns);
+                this._advancedFilteringExpressionsTree = this.getRecreatedTree(value);
             }
             else {
                 this._advancedFilteringExpressionsTree = value;
@@ -65928,7 +66027,7 @@ class IgxGridBaseDirective {
         /**
          * @hidden
          */
-        this._pagingMode = GridPagingMode.Local;
+        this._pagingMode = 'local';
         /**
          * @hidden
          */
@@ -67135,7 +67234,7 @@ class IgxGridBaseDirective {
      */
     _getDataViewIndex(index) {
         let newIndex = index;
-        if ((index < 0 || index >= this.dataView.length) && this.pagingMode === 1 && this.page !== 0) {
+        if ((index < 0 || index >= this.dataView.length) && this.pagingMode === 'remote' && this.page !== 0) {
             newIndex = index - this.perPage * this.page;
         }
         else if (this.gridAPI.grid.verticalScrollContainer.isRemote) {
@@ -68957,10 +69056,10 @@ class IgxGridBaseDirective {
         this._unpinnedColumns = newColumns.filter((c) => !c.pinned);
         this._columns = newColumns;
         if (this._columns && this._columns.length && this._filteringExpressionsTree) {
-            this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this.columns);
+            this._filteringExpressionsTree = this.getRecreatedTree(this._filteringExpressionsTree);
         }
         if (this._columns && this._columns.length && this._advancedFilteringExpressionsTree) {
-            this._advancedFilteringExpressionsTree = recreateTreeFromFields(this._advancedFilteringExpressionsTree, this.columns);
+            this._advancedFilteringExpressionsTree = this.getRecreatedTree(this._advancedFilteringExpressionsTree);
         }
         this.resetCaches();
     }
@@ -69021,10 +69120,10 @@ class IgxGridBaseDirective {
             this._columns = this.getColumnList();
         }
         if (this._columns && this._columns.length && this._filteringExpressionsTree) {
-            this._filteringExpressionsTree = recreateTreeFromFields(this._filteringExpressionsTree, this._columns);
+            this._filteringExpressionsTree = this.getRecreatedTree(this._filteringExpressionsTree);
         }
         if (this._columns && this._columns.length && this._advancedFilteringExpressionsTree) {
-            this._advancedFilteringExpressionsTree = recreateTreeFromFields(this._advancedFilteringExpressionsTree, this._columns);
+            this._advancedFilteringExpressionsTree = this.getRecreatedTree(this._advancedFilteringExpressionsTree);
         }
         this.initColumns(this._columns, (col) => this.columnInit.emit(col));
         this.columnListDiffer.diff(this.columnList);
@@ -69535,7 +69634,7 @@ class IgxGridBaseDirective {
         }
         // eslint-disable-next-line prefer-const
         for (let [row, set] of selectionMap) {
-            row = this.paginator && (this.pagingMode === GridPagingMode.Local && source === this.filteredSortedData) ? row + (this.perPage * this.page) : row;
+            row = this.paginator && (this.pagingMode === 'local' && source === this.filteredSortedData) ? row + (this.perPage * this.page) : row;
             row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;
@@ -70139,6 +70238,14 @@ class IgxGridBaseDirective {
         this.navigation.activeNode = {};
         this.notifyChanges();
     }
+    getRecreatedTree(value) {
+        if (this._hGridSchema) {
+            return recreateTree(value, this._hGridSchema, true);
+        }
+        else {
+            return recreateTreeFromFields(value, this._columns);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IgxGridBaseDirective, deps: [{ token: IgxGridValidationService }, { token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: IgxGridNavigationService }, { token: IgxFilteringService }, { token: IgxTextHighlightService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.3", type: IgxGridBaseDirective, isStandalone: true, inputs: { snackbarDisplayTime: "snackbarDisplayTime", autoGenerate: ["autoGenerate", "autoGenerate", booleanAttribute], autoGenerateExclude: "autoGenerateExclude", moving: ["moving", "moving", booleanAttribute], emptyGridTemplate: "emptyGridTemplate", addRowEmptyTemplate: "addRowEmptyTemplate", loadingGridTemplate: "loadingGridTemplate", summaryRowHeight: "summaryRowHeight", dataCloneStrategy: "dataCloneStrategy", clipboardOptions: "clipboardOptions", rowClasses: "rowClasses", rowStyles: "rowStyles", primaryKey: "primaryKey", uniqueColumnValuesStrategy: "uniqueColumnValuesStrategy", dragGhostCustomTemplate: "dragGhostCustomTemplate", rowEditTextTemplate: "rowEditTextTemplate", rowAddTextTemplate: "rowAddTextTemplate", rowEditActionsTemplate: "rowEditActionsTemplate", rowExpandedIndicatorTemplate: "rowExpandedIndicatorTemplate", rowCollapsedIndicatorTemplate: "rowCollapsedIndicatorTemplate", headerExpandedIndicatorTemplate: "headerExpandedIndicatorTemplate", headerCollapsedIndicatorTemplate: "headerCollapsedIndicatorTemplate", excelStyleHeaderIconTemplate: "excelStyleHeaderIconTemplate", sortAscendingHeaderIconTemplate: "sortAscendingHeaderIconTemplate", sortDescendingHeaderIconTemplate: "sortDescendingHeaderIconTemplate", sortHeaderIconTemplate: "sortHeaderIconTemplate", resourceStrings: "resourceStrings", filteringLogic: "filteringLogic", filteringExpressionsTree: "filteringExpressionsTree", advancedFilteringExpressionsTree: "advancedFilteringExpressionsTree", locale: "locale", pagingMode: "pagingMode", hideRowSelectors: ["hideRowSelectors", "hideRowSelectors", booleanAttribute], rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], validationTrigger: "validationTrigger", rowEditable: ["rowEditable", "rowEditable", booleanAttribute], height: "height", width: "width", rowHeight: "rowHeight", columnWidth: "columnWidth", emptyGridMessage: "emptyGridMessage", isLoading: ["isLoading", "isLoading", booleanAttribute], emptyFilteredGridMessage: "emptyFilteredGridMessage", pinning: "pinning", allowFiltering: ["allowFiltering", "allowFiltering", booleanAttribute], allowAdvancedFiltering: ["allowAdvancedFiltering", "allowAdvancedFiltering", booleanAttribute], filterMode: "filterMode", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: ["showSummaryOnCollapse", "showSummaryOnCollapse", booleanAttribute], filterStrategy: "filterStrategy", sortStrategy: "sortStrategy", sortingOptions: "sortingOptions", selectedRows: "selectedRows", headSelectorTemplate: "headSelectorTemplate", rowSelectorTemplate: "rowSelectorTemplate", dragIndicatorIconTemplate: "dragIndicatorIconTemplate", sortingExpressions: "sortingExpressions", batchEditing: ["batchEditing", "batchEditing", booleanAttribute], cellSelection: "cellSelection", rowSelection: "rowSelection", columnSelection: "columnSelection", expansionStates: "expansionStates", outlet: "outlet", totalRecords: "totalRecords", selectRowOnClick: ["selectRowOnClick", "selectRowOnClick", booleanAttribute] }, outputs: { filteringExpressionsTreeChange: "filteringExpressionsTreeChange", advancedFilteringExpressionsTreeChange: "advancedFilteringExpressionsTreeChange", gridScroll: "gridScroll", cellClick: "cellClick", rowClick: "rowClick", formGroupCreated: "formGroupCreated", validationStatusChange: "validationStatusChange", selected: "selected", rowSelectionChanging: "rowSelectionChanging", columnSelectionChanging: "columnSelectionChanging", columnPin: "columnPin", columnPinned: "columnPinned", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", cellEdit: "cellEdit", cellEditDone: "cellEditDone", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", columnInit: "columnInit", columnsAutogenerated: "columnsAutogenerated", sorting: "sorting", sortingDone: "sortingDone", filtering: "filtering", filteringDone: "filteringDone", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowAdd: "rowAdd", columnResized: "columnResized", contextMenu: "contextMenu", doubleClick: "doubleClick", columnVisibilityChanging: "columnVisibilityChanging", columnVisibilityChanged: "columnVisibilityChanged", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", gridKeydown: "gridKeydown", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", gridCopy: "gridCopy", expansionStatesChange: "expansionStatesChange", selectedRowsChange: "selectedRowsChange", rowToggle: "rowToggle", rowPinning: "rowPinning", rowPinned: "rowPinned", activeNodeChange: "activeNodeChange", sortingExpressionsChange: "sortingExpressionsChange", toolbarExporting: "toolbarExporting", rangeSelected: "rangeSelected", rendered: "rendered", localeChange: "localeChange", dataChanging: "dataChanging", dataChanged: "dataChanged" }, host: { listeners: { "mouseleave": "hideActionStrip()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.hostRole", "class.igx-grid": "this.baseClass", "style.height": "this.height", "style.width": "this.hostWidth", "style.display": "this.displayStyle", "style.grid-template-rows": "this.templateRows" } }, queries: [{ propertyName: "excelStyleLoadingValuesTemplateDirective", first: true, predicate: IgxExcelStyleLoadingValuesTemplateDirective, descendants: true, read: IgxExcelStyleLoadingValuesTemplateDirective, static: true }, { propertyName: "rowAddText", first: true, predicate: IgxRowAddTextDirective, descendants: true, read: TemplateRef }, { propertyName: "rowExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxRowExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxRowCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleHeaderIconDirectiveTemplate", first: true, predicate: IgxExcelStyleHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortAscendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortAscendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortDescendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortDescendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortHeaderIconDirectiveTemplate", first: true, predicate: IgxSortHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "columnList", predicate: IgxColumnComponent, descendants: true, read: IgxColumnComponent }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken }, { propertyName: "headSelectorsTemplates", predicate: IgxHeadSelectorDirective, read: TemplateRef }, { propertyName: "rowSelectorsTemplates", predicate: IgxRowSelectorDirective, read: TemplateRef }, { propertyName: "dragGhostCustomTemplates", predicate: IgxRowDragGhostDirective, read: TemplateRef }, { propertyName: "rowEditCustomDirectives", predicate: IgxRowEditTemplateDirective, read: TemplateRef }, { propertyName: "rowEditTextDirectives", predicate: IgxRowEditTextDirective, read: TemplateRef }, { propertyName: "rowEditActionsDirectives", predicate: IgxRowEditActionsDirective, read: TemplateRef }, { propertyName: "dragIndicatorIconTemplates", predicate: IgxDragIndicatorIconDirective, read: TemplateRef }, { propertyName: "rowEditTabsCUSTOM", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "toolbar", predicate: IgxToolbarToken }, { propertyName: "paginationComponents", predicate: IgxPaginatorToken }], viewQueries: [{ propertyName: "addRowSnackbar", first: true, predicate: IgxSnackbarComponent, descendants: true }, { propertyName: "resizeLine", first: true, predicate: IgxGridColumnResizerComponent, descendants: true }, { propertyName: "loadingOverlay", first: true, predicate: ["loadingOverlay"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "loadingOutlet", first: true, predicate: ["igxLoadingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "emptyFilteredGridTemplate", first: true, predicate: ["emptyFilteredGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyGridDefaultTemplate", first: true, predicate: ["defaultEmptyGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "loadingGridDefaultTemplate", first: true, predicate: ["defaultLoadingGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "parentVirtDir", first: true, predicate: ["scrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScrollContainer", first: true, predicate: ["verticalScrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScroll", first: true, predicate: ["verticalScrollHolder"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "scr", first: true, predicate: ["scr"], descendants: true, read: ElementRef, static: true }, { propertyName: "headerSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, read: ElementRef }, { propertyName: "theadRow", first: true, predicate: IgxGridHeaderRowComponent, descendants: true, static: true }, { propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, static: true }, { propertyName: "tbodyContainer", first: true, predicate: IgxGridBodyDirective, descendants: true, read: ElementRef, static: true }, { propertyName: "pinContainer", first: true, predicate: ["pinContainer"], descendants: true, read: ElementRef }, { propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, static: true }, { propertyName: "rowEditingOutletDirective", first: true, predicate: ["igxRowEditingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "rowEditingOverlay", first: true, predicate: ["rowEditingOverlay"], descendants: true, read: IgxToggleDirective }, { propertyName: "_outletDirective", first: true, predicate: ["igxFilteringOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "anchor", first: true, predicate: ["sink"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultRowEditTemplate", first: true, predicate: ["defaultRowEditTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tmpOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "rowEditTabsDEFAULT", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "_summaryRowList", predicate: ["summaryRow"], descendants: true, read: IgxSummaryRowComponent }, { propertyName: "_rowList", predicate: ["row"], descendants: true }, { propertyName: "_pinnedRowList", predicate: ["pinnedRow"], descendants: true }, { propertyName: "_dataRowList", predicate: IgxRowDirective, descendants: true, read: IgxRowDirective }], ngImport: i0 }); }
 }
@@ -72184,7 +72291,7 @@ class IgxGridPagingPipe {
         this.grid = grid;
     }
     transform(collection, enabled, page = 0, perPage = 15, _) {
-        if (!enabled || this.grid.pagingMode !== GridPagingMode.Local) {
+        if (!enabled || this.grid.pagingMode !== 'local') {
             return collection;
         }
         const state = {
@@ -74430,7 +74537,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
                 row = this.createRow(index);
             }
         }
-        if (this.pagingMode === 1 && this.page !== 0) {
+        if (this.pagingMode === 'remote' && this.page !== 0) {
             row.index = index + this.perPage * this.page;
         }
         return row;
@@ -74461,7 +74568,8 @@ class IgxGridComponent extends IgxGridBaseDirective {
      */
     allRows() {
         return this.dataView.map((rec, index) => {
-            this.pagingMode === 1 && this.page !== 0 ? index = index + this.perPage * this.page : index = this.dataRowList.first.index + index;
+            this.pagingMode === 'remote' && this.page !== 0 ?
+                index = index + this.perPage * this.page : index = this.dataRowList.first.index + index;
             return this.createRow(index);
         });
     }
@@ -74499,7 +74607,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         const row = this.getRowByIndex(rowIndex);
         const column = this._columns.find((col) => col.field === columnField);
         if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) {
-            if (this.pagingMode === 1 && this.page !== 0) {
+            if (this.pagingMode === 'remote' && this.page !== 0) {
                 row.index = rowIndex + this.perPage * this.page;
             }
             return new IgxGridCell(this, row.index, column);
@@ -83125,7 +83233,7 @@ class IgxTreeGridPagingPipe {
         this.grid = grid;
     }
     transform(collection, enabled, page = 0, perPage = 15, _) {
-        if (!enabled || this.grid.pagingMode !== GridPagingMode.Local) {
+        if (!enabled || this.grid.pagingMode !== 'local') {
             return collection;
         }
         const len = this.grid._totalRecords >= 0 ? this.grid._totalRecords : collection.length;
@@ -85931,7 +86039,7 @@ class IgxGridHierarchicalPagingPipe {
         this.grid = grid;
     }
     transform(collection, enabled, page = 0, perPage = 15, _id, _pipeTrigger) {
-        if (!enabled || this.grid.pagingMode !== GridPagingMode.Local) {
+        if (!enabled || this.grid.pagingMode !== 'local') {
             return collection;
         }
         const state = {
@@ -86390,6 +86498,15 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
     get actionStrip() {
         return this.parentIsland ? this.parentIsland.actionStrip : super.actionStrip;
     }
+    get advancedFilteringExpressionsTree() {
+        return super.advancedFilteringExpressionsTree;
+    }
+    set advancedFilteringExpressionsTree(value) {
+        if (!this._hGridSchema) {
+            this._hGridSchema = this.generateSchema();
+        }
+        super.advancedFilteringExpressionsTree = value;
+    }
     /**
      * Gets/Sets the value of the `id` attribute.
      *
@@ -86484,6 +86601,28 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
     get expandChildren() {
         return this._defaultExpandState;
     }
+    /**
+     * Gets/Sets the schema for the hierarchical grid.
+     * This schema defines the structure and properties of the data displayed in the grid.
+     * @Input()
+     * @param {EntityType[]} entities - An array of EntityType objects representing the grid's schema.
+     * @remarks
+     * This property is required in remote data filtering scenarios.
+     * @example
+     * ```typescript
+     * const schema = this.grid.schema;
+     * this.grid.schema = [{ name: 'Products', fields: [...], childEntities: [...] }];
+     * ```
+     */
+    set schema(entities) {
+        this._hGridSchema = entities;
+    }
+    get schema() {
+        if (!this._hGridSchema) {
+            this._hGridSchema = this.generateSchema();
+        }
+        return this._hGridSchema;
+    }
     /**
      * Gets the unique identifier of the parent row. It may be a `string` or `number` if `primaryKey` of the
      * parent grid is set or an object reference of the parent record otherwise.
@@ -87059,8 +87198,69 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             grid.cdr.markForCheck();
         });
     }
+    generateSchema() {
+        const filterableFields = this.columns.filter((column) => !column.columnGroup && column.filterable);
+        let entities;
+        if (filterableFields.length !== 0) {
+            entities = [
+                {
+                    name: null,
+                    fields: filterableFields.map(f => ({
+                        field: f.field,
+                        dataType: f.dataType,
+                        //  label: f.label,
+                        //  header: f.header,
+                        editorOptions: f.editorOptions,
+                        filters: f.filters,
+                        pipeArgs: f.pipeArgs,
+                        defaultTimeFormat: f.defaultTimeFormat,
+                        defaultDateTimeFormat: f.defaultDateTimeFormat
+                    }))
+                }
+            ];
+            entities[0].childEntities = this.childLayoutList.reduce((acc, rowIsland) => {
+                return acc.concat(this.generateChildEntity(rowIsland, this.data[0][rowIsland.key][0]));
+            }, []);
+        }
+        return entities;
+    }
+    generateChildEntity(rowIsland, firstRowData) {
+        const entityName = rowIsland.key;
+        let fields = [];
+        let childEntities;
+        if (!rowIsland.autoGenerate) {
+            fields = flatten$1(rowIsland.childColumns.toArray()).filter(col => col.field)
+                .map(f => ({ field: f.field, dataType: f.dataType }));
+        }
+        else if (firstRowData) {
+            const rowIslandFields = Object.keys(firstRowData).map(key => {
+                if (firstRowData[key] instanceof Array) {
+                    return null;
+                }
+                return {
+                    field: key,
+                    dataType: this.resolveDataTypes(firstRowData[key])
+                };
+            });
+            fields = rowIslandFields.filter(f => f !== null);
+        }
+        const rowIslandChildEntities = rowIsland.childLayoutList.reduce((acc, childRowIsland) => {
+            if (!firstRowData) {
+                return null;
+            }
+            return acc.concat(this.generateChildEntity(childRowIsland, firstRowData[childRowIsland.key][0]));
+        }, []);
+        if (rowIslandChildEntities?.length > 0) {
+            childEntities = rowIslandChildEntities;
+        }
+        return {
+            name: entityName,
+            fields: fields,
+            childEntities: childEntities
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: IgxHierarchicalGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: IgxHierarchicalGridComponent, isStandalone: true, selector: "igx-hierarchical-grid", inputs: { id: "id", data: "data", totalItemCount: "totalItemCount", expandChildren: ["expandChildren", "expandChildren", booleanAttribute] }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: IgxHierarchicalGridComponent, isStandalone: true, selector: "igx-hierarchical-grid", inputs: { id: "id", data: "data", totalItemCount: "totalItemCount", expandChildren: ["expandChildren", "expandChildren", booleanAttribute], schema: "schema" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
             IgxGridCRUDService,
             IgxGridValidationService,
             IgxGridSelectionService,
@@ -87170,6 +87370,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
             }], expandChildren: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], schema: [{
+                type: Input
             }] } });
 
 /* NOTE: Hierarchical grid directives collection for ease-of-use import in standalone components scenario */
@@ -92026,7 +92228,15 @@ class IgxSplitterComponent {
         this.resizing.emit(args);
     }
     onMoveEnd(delta) {
-        const [paneSize, siblingSize] = this.calcNewSizes(delta);
+        let [paneSize, siblingSize] = this.calcNewSizes(delta);
+        if (paneSize + siblingSize > this.getTotalSize() && delta < 0) {
+            paneSize = this.getTotalSize();
+            siblingSize = 0;
+        }
+        else if (paneSize + siblingSize > this.getTotalSize() && delta > 0) {
+            paneSize = 0;
+            siblingSize = this.getTotalSize();
+        }
         if (this.pane.isPercentageSize) {
             // handle % resizes
             const totalSize = this.getTotalSize();