igniteui-angular 18.2.0-alpha.1 → 18.2.0-alpha.2

package/fesm2022/igniteui-angular.mjs

@@ -20459,7 +20459,8 @@ class IgxFilteringOperand {
                 isUnary: false,
                 iconName: 'in',
                 logic: (target, searchVal) => this.findValueInSet(target, searchVal)
-            }, {
+            },
+            {
                 name: 'notIn',
                 isUnary: false,
                 iconName: 'not-in',
@@ -20470,9 +20471,15 @@ class IgxFilteringOperand {
         return this._instance || (this._instance = new this());
     }
     /**
-     * Returns an array of names of the conditions which are visible in the UI
+     * Returns an array of names of the conditions which are visible in the filtering UI
      */
     conditionList() {
+        return this.extendedConditionList().filter(c => c !== 'in' && c !== 'notIn');
+    }
+    /**
+     * Returns an array of names of the conditions which are visible in the UI, including "In" and "Not In", allowing the creation of sub-queries.
+     */
+    extendedConditionList() {
         return this.operations.filter(f => !f.hidden).map((element) => element.name);
     }
     /**
@@ -20596,6 +20603,9 @@ class IgxBaseDateTimeFilteringOperand extends IgxFilteringOperand {
         }
         return res;
     }
+    /**
+     * @hidden
+     */
     findValueInSet(target, searchVal) {
         if (!target) {
             return false;
@@ -21083,6 +21093,9 @@ class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {
                 }
             }].concat(this.operations);
     }
+    /**
+     * @hidden
+     */
     findValueInSet(target, searchVal) {
         if (!target) {
             return false;
@@ -47446,7 +47459,6 @@ class IgxQueryBuilderTreeComponent {
             this._selectedEntity = null;
             this._selectedReturnFields = [];
         }
-        this.init();
     }
     /**
      * Gets the `locale` of the query builder.
@@ -47606,6 +47618,11 @@ class IgxQueryBuilderTreeComponent {
      * @hidden @internal
      */
     ngAfterViewInit() {
+        this.clearSelection();
+        this.cancelOperandAdd();
+        this.cancelOperandEdit();
+        this.rootGroup = this.createExpressionGroupItem(this.expressionTree);
+        this.currentGroup = this.rootGroup;
         this._overlaySettings.outlet = this.overlayOutlet;
         this.entitySelectOverlaySettings.outlet = this.overlayOutlet;
         this.fieldSelectOverlaySettings.outlet = this.overlayOutlet;
@@ -47658,10 +47675,10 @@ class IgxQueryBuilderTreeComponent {
         }
         this.fields = this._entityNewValue ? this._entityNewValue.fields : [];
         this._selectedReturnFields = this._entityNewValue.fields?.map(f => f.field);
-        if (this.expressionTree) {
-            this.expressionTree.entity = this._selectedEntity.name;
-            this.expressionTree.returnFields = [];
-            this.expressionTree.filteringOperands = [];
+        if (this._expressionTree) {
+            this._expressionTree.entity = this._selectedEntity.name;
+            this._expressionTree.returnFields = [];
+            this._expressionTree.filteringOperands = [];
             this._editedExpression = null;
             this.expressionTreeChange.emit(this._expressionTree);
             this.addAndGroup();
@@ -47780,10 +47797,11 @@ class IgxQueryBuilderTreeComponent {
      * @hidden @internal
      */
     commitOperandEdit() {
+        const actualSearchValue = this.searchValueTemplate ? this._editedExpression.expression.searchVal : this.searchValue;
         if (this._editedExpression) {
             this._editedExpression.expression.field = this.selectedField.field;
             this._editedExpression.expression.condition = this.selectedField.filters.condition(this.selectedCondition);
-            this._editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedField.dataType, this.searchValue); //
+            this._editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedField.dataType, actualSearchValue);
             this._editedExpression.fieldLabel = this.selectedField.label
                 ? this.selectedField.label
                 : this.selectedField.header
@@ -47842,7 +47860,7 @@ class IgxQueryBuilderTreeComponent {
     operandCanBeCommitted() {
         const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
         return this.selectedField && this.selectedCondition &&
-            (((!!this.searchValue || !!this.searchValueTemplate) && !(this.selectedCondition === 'in' || this.selectedCondition === 'notIn')) ||
+            (((!!this.searchValue || (!!this.searchValueTemplate && !!this._editedExpression.expression.searchVal)) && !(this.selectedCondition === 'in' || this.selectedCondition === 'notIn')) ||
                 (innerQuery && !!innerQuery.expressionTree) ||
                 this.selectedField.filters.condition(this.selectedCondition).isUnary);
     }
@@ -48117,11 +48135,12 @@ class IgxQueryBuilderTreeComponent {
      * @hidden @internal
      */
     getConditionList() {
-        let conditionList = this.selectedField ? this.selectedField.filters.conditionList() : [];
+        if (!this.selectedField)
+            return [];
         if (this.entities.length === 1 && !this.entities[0].name) {
-            conditionList = conditionList.filter(c => c !== 'in' && c !== 'notIn');
+            return this.selectedField.filters.conditionList();
         }
-        return conditionList;
+        return this.selectedField.filters.extendedConditionList();
     }
     /**
      * @hidden @internal
@@ -48217,6 +48236,13 @@ class IgxQueryBuilderTreeComponent {
             this.selectedReturnFieldsCombo.selectAllItems();
         }
     }
+    getSearchValueTemplateContext() {
+        const ctx = {
+            $implicit: this.searchValue,
+            expression: this._editedExpression.expression
+        };
+        return ctx;
+    }
     setFormat(field) {
         if (!field.pipeArgs) {
             field.pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO };
@@ -48493,15 +48519,8 @@ class IgxQueryBuilderTreeComponent {
             container.scrollTop = targetOffset + target.offsetHeight + delta - container.clientHeight;
         }
     }
-    init() {
-        this.clearSelection();
-        this.cancelOperandAdd();
-        this.cancelOperandEdit();
-        this.rootGroup = this.createExpressionGroupItem(this.expressionTree);
-        this.currentGroup = this.rootGroup;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PlatformUtil }, { token: i0.ElementRef }, { token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "selectedReturnFieldsCombo", first: true, predicate: ["selectedReturnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <div class=\"igx-query-builder__root\">\n            <div class=\"igx-query-builder__root-actions\">\n                <button type=\"button\"\n                        #addRootAndGroupButton\n                        igxButton=\"outlined\"\n                        (click)=\"addAndGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n                </button>\n\n                <button type=\"button\"\n                        igxButton=\"outlined\"\n                        (click)=\"addOrGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n                </button>\n            </div>\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{ this.resourceStrings.igx_query_builder_initial_text }}\n                </h6>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                [selected]=\"expressionItem.selected && isInEditMode()\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"isInEditMode() ? onChipClick(expressionItem) : null\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.field}}\n                </span>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.field)\n                                ? (expressionItem.expression.searchVal\n                                | fieldFormatter\n                                    : getFormatter(\n                                            expressionItem.expression.field\n                                        )\n                                    : undefined)\n                                : (expressionItem.expression.searchVal\n                                | date\n                                    : getFormat(\n                                            expressionItem.expression.field\n                                        )\n                                    : undefined\n                                    : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                {{\n                    expressionItem.expression.searchTree ?\n                        expressionItem.expression.searchTree.returnFields :\n                        expressionItem.expression.searchVal ?\n                            expressionItem.expression.searchVal :\n                            null\n                }}\n            </div>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    family=\"default\"\n                    name=\"edit\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                </igx-icon>\n                <igx-icon\n                    family=\"default\"\n                    name=\"add\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                </igx-icon>\n            </div>\n            <div igxButton class=\"igx-filter-tree__details-button\" *ngIf=\"!expressionItem.inEditMode && expressionItem.expression.searchTree\"\n                (click)=\"expanderClick($event, expressionItem)\">\n                <span>{{this.resourceStrings.igx_query_builder_details}}</span>\n                <igx-icon *ngIf=\"!expressionItem.expanded\" family=\"default\" name=\"unfold_less\" role=\"button\"></igx-icon>\n                <igx-icon *ngIf=\"expressionItem.expanded\" family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n            </div>\n\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [(ngModel)]=\"selectedField\"\n                [disabled]=\"!fields\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_column_placeholder}}</label>\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_condition_placeholder}}</label>\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <ng-container \n                *ngTemplateOutlet=\"\n                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                    context: { $implicit: searchValue, field: selectedField, condition: selectedCondition }\n                \"\n            >\n            </ng-container>\n\n            <ng-template #defaultSearchValueTemplate>\n                <igx-input-group\n                    *ngIf=\"\n                        !selectedField ||\n                        (selectedField.dataType !== 'date' &&\n                            selectedField.dataType !== 'time' &&\n                            selectedField.dataType !== 'dateTime')\n                    \"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_value_placeholder}}</label>\n                    <input\n                        #searchValueInput\n                        igxInput\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary) ||\n                            selectedCondition === 'in' ||\n                            selectedCondition === 'notIn'\n                        \"\n                        [type]=\"\n                            selectedField && selectedField.dataType === 'number'\n                                ? 'number'\n                                : 'text'\n                        \"\n                        [(ngModel)]=\"searchValue\"\n                    />\n                </igx-input-group>\n    \n                <igx-date-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                    [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                >\n                    <!-- disable default icons -->\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-date-picker>\n    \n                <igx-time-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                    [(value)]=\"searchValue\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [inputFormat]=\"selectedField.defaultTimeFormat\"\n                >\n                    <!-- disable default icons -->\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_time_placeholder}}</label>\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n    \n                <igx-input-group\n                    #inputGroup\n                    type=\"box\"\n                    *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_date_placeholder}}</label>\n                    <input\n                        #input\n                        igxInput\n                        tabindex=\"0\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary)\n                        \"\n                        [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                    />\n                </igx-input-group>\n            </ng-template>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"check\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"(!expressionItem.inEditMode && expressionItem.expression.searchTree) || (expressionItem.inEditMode && (selectedCondition === 'in' || selectedCondition === 'notIn'))\">\n            <igx-query-builder-tree\n                [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                [entities]=\"entities\"\n                [parentExpression]=\"expressionItem\"\n                [expressionTree]=\"expressionItem.expression.searchTree\"\n                (inEditModeChange)=\"onInEditModeChanged($event)\">\n            </igx-query-builder-tree>\n        </ng-container>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem?.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem?.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem?.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'\">\n                    <ng-container *ngIf=\"!expressionItem.parent\">\n                        <igx-select #entitySelect\n                            type=\"box\"\n                            (selectionChanging)=\"onEntitySelectChanging($event)\"\n                            [overlaySettings]=\"entitySelectOverlaySettings\"\n                            [ngModel]=\"selectedEntity\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>\n                            <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                                {{entity.name}}\n                            </igx-select-item>\n                        </igx-select>\n\n                        <igx-combo\n                            #selectedReturnFieldsCombo\n                            [itemsMaxHeight]=\"250\"\n                            [data]=\"fields\"\n                            [displayKey]=\"'field'\"\n                            [valueKey]=\"'field'\"\n                            [disabled]=\"!selectedEntity\"\n                            [(ngModel)]=\"selectedReturnFields\"\n                            [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                            searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <ng-template igxComboHeader>\n                                <div class=\"igx-drop-down__item\">\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                                            (click)=\"onSelectAllClicked($event)\"\n                                            class=\"igx-combo__checkbox\">\n                                        {{ this.resourceStrings.igx_query_builder_select_all }}\n                                    </igx-checkbox>\n                                </div>\n                            </ng-template>\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>\n                        </igx-combo>\n                    </ng-container>\n                </div>\n\n                <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem && isInEditMode()\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"Confirmation\"\n    message=\"By changing the entity, you will lose your current settings. Are you sure you want to do that?\"\n    leftButtonLabel=\"Cancel\"\n    rightButtonLabel=\"Confirm\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "filterable", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxLabelDirective, selector: "[igxLabel]", inputs: ["id"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "selectedReturnFieldsCombo", first: true, predicate: ["selectedReturnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <div class=\"igx-query-builder__root\">\n            <div class=\"igx-query-builder__root-actions\">\n                <button type=\"button\"\n                        #addRootAndGroupButton\n                        igxButton=\"outlined\"\n                        (click)=\"addAndGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n                </button>\n\n                <button type=\"button\"\n                        igxButton=\"outlined\"\n                        (click)=\"addOrGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n                </button>\n            </div>\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{ this.resourceStrings.igx_query_builder_initial_text }}\n                </h6>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                [selected]=\"expressionItem.selected && isInEditMode()\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"isInEditMode() ? onChipClick(expressionItem) : null\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.field}}\n                </span>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.field)\n                                ? (expressionItem.expression.searchVal\n                                | fieldFormatter\n                                    : getFormatter(\n                                            expressionItem.expression.field\n                                        )\n                                    : undefined)\n                                : (expressionItem.expression.searchVal\n                                | date\n                                    : getFormat(\n                                            expressionItem.expression.field\n                                        )\n                                    : undefined\n                                    : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                {{\n                    expressionItem.expression.searchTree ?\n                        expressionItem.expression.searchTree.returnFields :\n                        expressionItem.expression.condition.isUnary ?\n                            getConditionFriendlyName(expressionItem.expression.condition.name) :\n                            expressionItem.expression.searchVal\n                }}\n            </div>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    family=\"default\"\n                    name=\"edit\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                </igx-icon>\n                <igx-icon\n                    family=\"default\"\n                    name=\"add\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                </igx-icon>\n            </div>\n            <div igxButton class=\"igx-filter-tree__details-button\" *ngIf=\"!expressionItem.inEditMode && expressionItem.expression.searchTree\"\n                (click)=\"expanderClick($event, expressionItem)\">\n                <span>{{this.resourceStrings.igx_query_builder_details}}</span>\n                <igx-icon *ngIf=\"!expressionItem.expanded\" family=\"default\" name=\"unfold_less\" role=\"button\"></igx-icon>\n                <igx-icon *ngIf=\"expressionItem.expanded\" family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n            </div>\n\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [(ngModel)]=\"selectedField\"\n                [disabled]=\"!fields\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_column_placeholder}}</label>\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_condition_placeholder}}</label>\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <ng-container \n                *ngTemplateOutlet=\"\n                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                    context: getSearchValueTemplateContext()\n                \"\n            >\n            </ng-container>\n\n            <ng-template #defaultSearchValueTemplate>\n                <igx-input-group\n                    *ngIf=\"\n                        !selectedField ||\n                        (selectedField.dataType !== 'date' &&\n                            selectedField.dataType !== 'time' &&\n                            selectedField.dataType !== 'dateTime')\n                    \"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_value_placeholder}}</label>\n                    <input\n                        #searchValueInput\n                        igxInput\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary) ||\n                            selectedCondition === 'in' ||\n                            selectedCondition === 'notIn'\n                        \"\n                        [type]=\"\n                            selectedField && selectedField.dataType === 'number'\n                                ? 'number'\n                                : 'text'\n                        \"\n                        [(ngModel)]=\"searchValue\"\n                    />\n                </igx-input-group>\n    \n                <igx-date-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                    [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                >\n                    <!-- disable default icons -->\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-date-picker>\n    \n                <igx-time-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                    [(value)]=\"searchValue\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [inputFormat]=\"selectedField.defaultTimeFormat\"\n                >\n                    <!-- disable default icons -->\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_time_placeholder}}</label>\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n    \n                <igx-input-group\n                    #inputGroup\n                    type=\"box\"\n                    *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_date_placeholder}}</label>\n                    <input\n                        #input\n                        igxInput\n                        tabindex=\"0\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary)\n                        \"\n                        [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                    />\n                </igx-input-group>\n            </ng-template>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"check\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"(!expressionItem.inEditMode && expressionItem.expression.searchTree) || (expressionItem.inEditMode && (selectedCondition === 'in' || selectedCondition === 'notIn'))\">\n            <igx-query-builder-tree\n                [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                [entities]=\"entities\"\n                [parentExpression]=\"expressionItem\"\n                [expressionTree]=\"expressionItem.expression.searchTree\"\n                (inEditModeChange)=\"onInEditModeChanged($event)\">\n            </igx-query-builder-tree>\n        </ng-container>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem?.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem?.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem?.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'\">\n                    <ng-container *ngIf=\"!expressionItem.parent\">\n                        <igx-select #entitySelect\n                            type=\"box\"\n                            (selectionChanging)=\"onEntitySelectChanging($event)\"\n                            [overlaySettings]=\"entitySelectOverlaySettings\"\n                            [ngModel]=\"selectedEntity\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>\n                            <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                                {{entity.name}}\n                            </igx-select-item>\n                        </igx-select>\n\n                        <igx-combo\n                            #selectedReturnFieldsCombo\n                            [itemsMaxHeight]=\"250\"\n                            [data]=\"fields\"\n                            [displayKey]=\"'field'\"\n                            [valueKey]=\"'field'\"\n                            [disabled]=\"!selectedEntity\"\n                            [(ngModel)]=\"selectedReturnFields\"\n                            [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                            searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <ng-template igxComboHeader>\n                                <div class=\"igx-drop-down__item\">\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                                            (click)=\"onSelectAllClicked($event)\"\n                                            class=\"igx-combo__checkbox\">\n                                        {{ this.resourceStrings.igx_query_builder_select_all }}\n                                    </igx-checkbox>\n                                </div>\n                            </ng-template>\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>\n                        </igx-combo>\n                    </ng-container>\n                </div>\n\n                <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem && isInEditMode()\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"Confirmation\"\n    message=\"By changing the entity, you will lose your current settings. Are you sure you want to do that?\"\n    leftButtonLabel=\"Cancel\"\n    rightButtonLabel=\"Confirm\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "filterable", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxLabelDirective, selector: "[igxLabel]", inputs: ["id"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
             type: Component,
@@ -48540,7 +48559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IgxDialogComponent,
                         IgxTooltipTargetDirective,
                         IgxTooltipDirective
-                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <div class=\"igx-query-builder__root\">\n            <div class=\"igx-query-builder__root-actions\">\n                <button type=\"button\"\n                        #addRootAndGroupButton\n                        igxButton=\"outlined\"\n                        (click)=\"addAndGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n                </button>\n\n                <button type=\"button\"\n                        igxButton=\"outlined\"\n                        (click)=\"addOrGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n                </button>\n            </div>\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{ this.resourceStrings.igx_query_builder_initial_text }}\n                </h6>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                [selected]=\"expressionItem.selected && isInEditMode()\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"isInEditMode() ? onChipClick(expressionItem) : null\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.field}}\n                </span>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.field)\n                                ? (expressionItem.expression.searchVal\n                                | fieldFormatter\n                                    : getFormatter(\n                                            expressionItem.expression.field\n                                        )\n                                    : undefined)\n                                : (expressionItem.expression.searchVal\n                                | date\n                                    : getFormat(\n                                            expressionItem.expression.field\n                                        )\n                                    : undefined\n                                    : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                {{\n                    expressionItem.expression.searchTree ?\n                        expressionItem.expression.searchTree.returnFields :\n                        expressionItem.expression.searchVal ?\n                            expressionItem.expression.searchVal :\n                            null\n                }}\n            </div>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    family=\"default\"\n                    name=\"edit\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                </igx-icon>\n                <igx-icon\n                    family=\"default\"\n                    name=\"add\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                </igx-icon>\n            </div>\n            <div igxButton class=\"igx-filter-tree__details-button\" *ngIf=\"!expressionItem.inEditMode && expressionItem.expression.searchTree\"\n                (click)=\"expanderClick($event, expressionItem)\">\n                <span>{{this.resourceStrings.igx_query_builder_details}}</span>\n                <igx-icon *ngIf=\"!expressionItem.expanded\" family=\"default\" name=\"unfold_less\" role=\"button\"></igx-icon>\n                <igx-icon *ngIf=\"expressionItem.expanded\" family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n            </div>\n\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [(ngModel)]=\"selectedField\"\n                [disabled]=\"!fields\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_column_placeholder}}</label>\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_condition_placeholder}}</label>\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <ng-container \n                *ngTemplateOutlet=\"\n                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                    context: { $implicit: searchValue, field: selectedField, condition: selectedCondition }\n                \"\n            >\n            </ng-container>\n\n            <ng-template #defaultSearchValueTemplate>\n                <igx-input-group\n                    *ngIf=\"\n                        !selectedField ||\n                        (selectedField.dataType !== 'date' &&\n                            selectedField.dataType !== 'time' &&\n                            selectedField.dataType !== 'dateTime')\n                    \"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_value_placeholder}}</label>\n                    <input\n                        #searchValueInput\n                        igxInput\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary) ||\n                            selectedCondition === 'in' ||\n                            selectedCondition === 'notIn'\n                        \"\n                        [type]=\"\n                            selectedField && selectedField.dataType === 'number'\n                                ? 'number'\n                                : 'text'\n                        \"\n                        [(ngModel)]=\"searchValue\"\n                    />\n                </igx-input-group>\n    \n                <igx-date-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                    [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                >\n                    <!-- disable default icons -->\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-date-picker>\n    \n                <igx-time-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                    [(value)]=\"searchValue\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [inputFormat]=\"selectedField.defaultTimeFormat\"\n                >\n                    <!-- disable default icons -->\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_time_placeholder}}</label>\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n    \n                <igx-input-group\n                    #inputGroup\n                    type=\"box\"\n                    *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_date_placeholder}}</label>\n                    <input\n                        #input\n                        igxInput\n                        tabindex=\"0\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary)\n                        \"\n                        [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                    />\n                </igx-input-group>\n            </ng-template>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"check\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"(!expressionItem.inEditMode && expressionItem.expression.searchTree) || (expressionItem.inEditMode && (selectedCondition === 'in' || selectedCondition === 'notIn'))\">\n            <igx-query-builder-tree\n                [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                [entities]=\"entities\"\n                [parentExpression]=\"expressionItem\"\n                [expressionTree]=\"expressionItem.expression.searchTree\"\n                (inEditModeChange)=\"onInEditModeChanged($event)\">\n            </igx-query-builder-tree>\n        </ng-container>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem?.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem?.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem?.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'\">\n                    <ng-container *ngIf=\"!expressionItem.parent\">\n                        <igx-select #entitySelect\n                            type=\"box\"\n                            (selectionChanging)=\"onEntitySelectChanging($event)\"\n                            [overlaySettings]=\"entitySelectOverlaySettings\"\n                            [ngModel]=\"selectedEntity\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>\n                            <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                                {{entity.name}}\n                            </igx-select-item>\n                        </igx-select>\n\n                        <igx-combo\n                            #selectedReturnFieldsCombo\n                            [itemsMaxHeight]=\"250\"\n                            [data]=\"fields\"\n                            [displayKey]=\"'field'\"\n                            [valueKey]=\"'field'\"\n                            [disabled]=\"!selectedEntity\"\n                            [(ngModel)]=\"selectedReturnFields\"\n                            [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                            searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <ng-template igxComboHeader>\n                                <div class=\"igx-drop-down__item\">\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                                            (click)=\"onSelectAllClicked($event)\"\n                                            class=\"igx-combo__checkbox\">\n                                        {{ this.resourceStrings.igx_query_builder_select_all }}\n                                    </igx-checkbox>\n                                </div>\n                            </ng-template>\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>\n                        </igx-combo>\n                    </ng-container>\n                </div>\n\n                <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem && isInEditMode()\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"Confirmation\"\n    message=\"By changing the entity, you will lose your current settings. Are you sure you want to do that?\"\n    leftButtonLabel=\"Cancel\"\n    rightButtonLabel=\"Confirm\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n</igx-dialog>\n" }]
+                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <div class=\"igx-query-builder__root\">\n            <div class=\"igx-query-builder__root-actions\">\n                <button type=\"button\"\n                        #addRootAndGroupButton\n                        igxButton=\"outlined\"\n                        (click)=\"addAndGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n                </button>\n\n                <button type=\"button\"\n                        igxButton=\"outlined\"\n                        (click)=\"addOrGroup()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                    <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n                </button>\n            </div>\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{ this.resourceStrings.igx_query_builder_initial_text }}\n                </h6>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                [selected]=\"expressionItem.selected && isInEditMode()\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"isInEditMode() ? onChipClick(expressionItem) : null\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.field}}\n                </span>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.field)\n                                ? (expressionItem.expression.searchVal\n                                | fieldFormatter\n                                    : getFormatter(\n                                            expressionItem.expression.field\n                                        )\n                                    : undefined)\n                                : (expressionItem.expression.searchVal\n                                | date\n                                    : getFormat(\n                                            expressionItem.expression.field\n                                        )\n                                    : undefined\n                                    : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                {{\n                    expressionItem.expression.searchTree ?\n                        expressionItem.expression.searchTree.returnFields :\n                        expressionItem.expression.condition.isUnary ?\n                            getConditionFriendlyName(expressionItem.expression.condition.name) :\n                            expressionItem.expression.searchVal\n                }}\n            </div>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    family=\"default\"\n                    name=\"edit\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                </igx-icon>\n                <igx-icon\n                    family=\"default\"\n                    name=\"add\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                </igx-icon>\n            </div>\n            <div igxButton class=\"igx-filter-tree__details-button\" *ngIf=\"!expressionItem.inEditMode && expressionItem.expression.searchTree\"\n                (click)=\"expanderClick($event, expressionItem)\">\n                <span>{{this.resourceStrings.igx_query_builder_details}}</span>\n                <igx-icon *ngIf=\"!expressionItem.expanded\" family=\"default\" name=\"unfold_less\" role=\"button\"></igx-icon>\n                <igx-icon *ngIf=\"expressionItem.expanded\" family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n            </div>\n\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [(ngModel)]=\"selectedField\"\n                [disabled]=\"!fields\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_column_placeholder}}</label>\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <label igxLabel>{{this.resourceStrings.igx_query_builder_condition_placeholder}}</label>\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <ng-container \n                *ngTemplateOutlet=\"\n                    searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                    context: getSearchValueTemplateContext()\n                \"\n            >\n            </ng-container>\n\n            <ng-template #defaultSearchValueTemplate>\n                <igx-input-group\n                    *ngIf=\"\n                        !selectedField ||\n                        (selectedField.dataType !== 'date' &&\n                            selectedField.dataType !== 'time' &&\n                            selectedField.dataType !== 'dateTime')\n                    \"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_value_placeholder}}</label>\n                    <input\n                        #searchValueInput\n                        igxInput\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary) ||\n                            selectedCondition === 'in' ||\n                            selectedCondition === 'notIn'\n                        \"\n                        [type]=\"\n                            selectedField && selectedField.dataType === 'number'\n                                ? 'number'\n                                : 'text'\n                        \"\n                        [(ngModel)]=\"searchValue\"\n                    />\n                </igx-input-group>\n    \n                <igx-date-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                    [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                >\n                    <!-- disable default icons -->\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-date-picker>\n    \n                <igx-time-picker\n                    #picker\n                    *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                    [(value)]=\"searchValue\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [outlet]=\"pickerOutlet\"\n                    [formatter]=\"selectedField.formatter\"\n                    [inputFormat]=\"selectedField.defaultTimeFormat\"\n                >\n                    <!-- disable default icons -->\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_time_placeholder}}</label>\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n    \n                <igx-input-group\n                    #inputGroup\n                    type=\"box\"\n                    *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    type=\"box\"\n                >\n                    <label igxLabel>{{this.resourceStrings.igx_query_builder_date_placeholder}}</label>\n                    <input\n                        #input\n                        igxInput\n                        tabindex=\"0\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"\n                            !selectedField ||\n                            !selectedCondition ||\n                            (selectedField &&\n                                selectedField.filters.condition(selectedCondition)\n                                    .isUnary)\n                        \"\n                        [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                    />\n                </igx-input-group>\n            </ng-template>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"check\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <ng-container *ngIf=\"(!expressionItem.inEditMode && expressionItem.expression.searchTree) || (expressionItem.inEditMode && (selectedCondition === 'in' || selectedCondition === 'notIn'))\">\n            <igx-query-builder-tree\n                [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                [entities]=\"entities\"\n                [parentExpression]=\"expressionItem\"\n                [expressionTree]=\"expressionItem.expression.searchTree\"\n                (inEditModeChange)=\"onInEditModeChanged($event)\">\n            </igx-query-builder-tree>\n        </ng-container>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem?.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem?.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem?.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && this.entities.length > 0 && this.entities[0].name) ? 'flex' : 'none'\">\n                    <ng-container *ngIf=\"!expressionItem.parent\">\n                        <igx-select #entitySelect\n                            type=\"box\"\n                            (selectionChanging)=\"onEntitySelectChanging($event)\"\n                            [overlaySettings]=\"entitySelectOverlaySettings\"\n                            [ngModel]=\"selectedEntity\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_entity }}</label>\n                            <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                                {{entity.name}}\n                            </igx-select-item>\n                        </igx-select>\n\n                        <igx-combo\n                            #selectedReturnFieldsCombo\n                            [itemsMaxHeight]=\"250\"\n                            [data]=\"fields\"\n                            [displayKey]=\"'field'\"\n                            [valueKey]=\"'field'\"\n                            [disabled]=\"!selectedEntity\"\n                            [(ngModel)]=\"selectedReturnFields\"\n                            [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                            searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                            [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                        >\n                            <ng-template igxComboHeader>\n                                <div class=\"igx-drop-down__item\">\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                                            (click)=\"onSelectAllClicked($event)\"\n                                            class=\"igx-combo__checkbox\">\n                                        {{ this.resourceStrings.igx_query_builder_select_all }}\n                                    </igx-checkbox>\n                                </div>\n                            </ng-template>\n                            <label igxLabel>{{ this.resourceStrings.igx_query_builder_select_return_fields }}</label>\n                        </igx-combo>\n                    </ng-container>\n                </div>\n\n                <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem && isInEditMode()\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"Confirmation\"\n    message=\"By changing the entity, you will lose your current settings. Are you sure you want to do that?\"\n    leftButtonLabel=\"Cancel\"\n    rightButtonLabel=\"Confirm\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n</igx-dialog>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }, { type: i0.ElementRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -48630,8 +48649,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
  *
  * @example
  * <igx-query-builder>
- *      <ng-template igxQueryBuilderSearchValue let-searchValue let-field="field" let-condition="condition">
- *          <span>{{field.field}} {{condition}} {{searchValue}}</span>
+ *      <ng-template igxQueryBuilderSearchValue let-expression="expression">
+ *          <input type="text" required [(ngModel)]="expression.searchVal"/>
  *      </ng-template>
  *  </igx-query-builder>
  */
@@ -48662,6 +48681,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
  * ```
  */
 class IgxQueryBuilderComponent {
+    // /**
+    // * Returns the fields.
+    // */
+    // public get fields(): FieldType[] {
+    //     return this._fields;
+    // }
+    // /**
+    //  * Sets the fields.
+    //  */
+    // @Input()
+    // public set fields(fields: FieldType[]) {
+    //     this._fields = fields;
+    //     if (this._fields) {
+    //         this.registerSVGIcons();
+    //         this._fields.forEach(field => {
+    //             this.setFilters(field);
+    //             this.setFormat(field);
+    //         });
+    //     }
+    // }
+    /**
+    * Returns the expression tree.
+    */
+    get expressionTree() {
+        return this._expressionTree;
+    }
+    /**
+     * Sets the expression tree.
+     */
+    set expressionTree(expressionTree) {
+        if (JSON.stringify(expressionTree) !== JSON.stringify(this._expressionTree)) {
+            this._expressionTree = expressionTree;
+        }
+    }
     /**
      * Sets the resource strings.
      * By default it uses EN resources.
@@ -48743,7 +48796,7 @@ class IgxQueryBuilderComponent {
         this.queryTree.setAddButtonFocus();
     }
     onExpressionTreeChange(tree) {
-        this.expressionTree = tree;
+        this._expressionTree = tree;
         this.expressionTreeChange.emit();
     }
     registerSVGIcons() {
@@ -56311,7 +56364,7 @@ class IgxFilteringService {
             newExpressionsTree.filteringOperands = [...filteringState.filteringOperands];
         }
         if (condition) {
-            const newExpression = { field: fieldName, searchVal, condition, conditionName: condition.name, ignoreCase };
+            const newExpression = { field: fieldName, searchVal: searchVal, condition, conditionName: condition.name, ignoreCase };
             expressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName);
             expressionsTree.filteringOperands.push(newExpression);
         }
@@ -92430,7 +92483,7 @@ const IGX_TREE_DIRECTIVES = [
 const IGX_QUERY_BUILDER_DIRECTIVES = [
     IgxQueryBuilderComponent,
     IgxQueryBuilderHeaderComponent,
-    IgxQueryBuilderSearchValueTemplateDirective
+    IgxQueryBuilderSearchValueTemplateDirective,
 ];
 
 /**