igniteui-angular 19.1.0-beta.3 → 19.1.0-beta.4

package/fesm2022/igniteui-angular.mjs

@@ -48291,7 +48291,9 @@ class IgxTimePickerComponent extends PickerBaseDirective {
             }
             case 'ampmList': {
                 let hour = this._selectedDate.getHours();
-                hour = DateTimeUtil.isAm(item) ? hour - 12 : hour + 12;
+                hour = DateTimeUtil.isAm(item)
+                    ? hour % 12
+                    : (hour % 12) + 12;
                 date.setHours(hour);
                 date = this.validateDropdownValue(date, true);
                 this.setSelectedValue(date);
@@ -48559,7 +48561,7 @@ class IgxTimePickerComponent extends PickerBaseDirective {
     }
     subscribeToToggleDirectiveEvents() {
         if (this.toggleRef) {
-            if (this._inputGroup) {
+            if (this._inputGroup && this.platform.isBrowser) {
                 this.toggleRef.element.style.width = this._inputGroup.element.nativeElement.getBoundingClientRect().width + 'px';
             }
             this.toggleRef.opening.pipe(takeUntil(this._destroy$)).subscribe((e) => {
@@ -48770,6 +48772,7 @@ const IGX_FILTER_TREE = 'igx-filter-tree';
  */
 const QueryBuilderSelectors = {
     DRAG_INDICATOR: 'igx-drag-indicator',
+    CHIP_GHOST: 'igx-chip__ghost',
     DROP_DOWN_LIST_SCROLL: 'igx-drop-down__list-scroll',
     DROP_DOWN_ITEM_DISABLED: 'igx-drop-down__item--disabled',
     FILTER_TREE: IGX_FILTER_TREE,
@@ -48841,10 +48844,6 @@ class IgxQueryBuilderDragService {
         this._ghostChipMousemoveSubscription$?.unsubscribe();
         this._keyboardSubscription$?.unsubscribe();
     }
-    //On entering a drop area of another chip
-    onDivEnter(targetDragElement, targetExpressionItem) {
-        this.onChipEnter(targetDragElement, targetExpressionItem);
-    }
     onChipEnter(targetDragElement, targetExpressionItem) {
         // console.log('Entering:', targetDragElement, targetExpressionItem);
         if (!this.sourceElement || !this.sourceExpressionItem)
@@ -48993,7 +48992,7 @@ class IgxQueryBuilderDragService {
             dragCopy.firstChild.firstChild.classList.add(QueryBuilderSelectors.FILTER_TREE_EXPRESSION_ITEM_GHOST);
         }
         else {
-            dragCopy.firstChild.firstChild.classList.add('igx-chip__ghost');
+            dragCopy.firstChild.firstChild.classList.add(QueryBuilderSelectors.CHIP_GHOST);
         }
         return dragCopy;
     }
@@ -49539,8 +49538,7 @@ class IgxQueryBuilderTreeComponent {
             positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
             scrollStrategy: new CloseScrollStrategy()
         };
-        this.deleteItem = (expressionItem) => {
-            //console.log('deleteItem', expressionItem)
+        this.deleteItem = (expressionItem, skipEmit = false) => {
             if (!expressionItem.parent) {
                 this.rootGroup = null;
                 this.currentGroup = null;
@@ -49557,9 +49555,9 @@ class IgxQueryBuilderTreeComponent {
             const returnFields = this.expressionTree ? this.expressionTree.returnFields : null;
             this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup, entity, returnFields); // TODO: don't recreate if not necessary
             if (!children.length) {
-                this.deleteItem(expressionItem.parent);
+                this.deleteItem(expressionItem.parent, true);
             }
-            if (!this.parentExpression) {
+            if (!this.parentExpression && !skipEmit) {
                 this.expressionTreeChange.emit(this._expressionTree);
             }
         };
@@ -49975,10 +49973,6 @@ class IgxQueryBuilderTreeComponent {
         this.exitEditAddMode();
         this.deleteItem(expressionItem);
     }
-    //Chip can be dragged if its tree is in edit mode and there is no inner query that's been edited
-    canBeDragged() {
-        return this.isInEditMode && (!this.innerQueries || this.innerQueries.length == 0 || !this.innerQueries?.some(q => q.isInEditMode()));
-    }
     /**
      * @hidden @internal
      */
@@ -50323,7 +50317,7 @@ class IgxQueryBuilderTreeComponent {
         }
         return exprTreeCopy;
     }
-    onSelectAllClicked(_event) {
+    onSelectAllClicked() {
         if ((this._selectedReturnFields.length > 0 && this._selectedReturnFields.length < this._selectedEntity.fields.length) ||
             this._selectedReturnFields.length == this._selectedEntity.fields.length) {
             this.returnFieldsCombo.deselectAllItems();
@@ -50545,7 +50539,7 @@ class IgxQueryBuilderTreeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", 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: "17.0.0", version: "19.1.6", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "expressionsChips", predicate: IgxChipComponent, descendants: true, read: IgxChipComponent }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity) { \n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">Select</span>\n            @if(!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"!selectedEntity\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked($event)\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field) {     \n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if(this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"canBeDragged()\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"canBeDragged() ? dragService.onMoveStart(dragRef, expressionItem, false): null\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if(expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if(expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >            \n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onDivOver(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {     \n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n            \n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'in' || this.selectedCondition === 'notIn' ? \n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"entities\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track expr) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n                \n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if(!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "disableFiltering", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "expressionsChips", predicate: IgxChipComponent, descendants: true, read: IgxChipComponent }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity) { \n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">Select</span>\n            @if(!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"!selectedEntity\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field) {     \n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if(this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if(expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if(expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >            \n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {     \n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n            \n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'in' || this.selectedCondition === 'notIn' ? \n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"entities\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track expr) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n                \n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if(!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "disableFiltering", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
             type: Component,
@@ -50581,7 +50575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         IgxTooltipTargetDirective,
                         NgClass,
                         NgTemplateOutlet
-                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity) { \n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">Select</span>\n            @if(!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"!selectedEntity\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked($event)\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field) {     \n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if(this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"canBeDragged()\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"canBeDragged() ? dragService.onMoveStart(dragRef, expressionItem, false): null\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if(expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if(expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >            \n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onDivOver(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {     \n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n            \n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'in' || this.selectedCondition === 'notIn' ? \n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"entities\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track expr) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n                \n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if(!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n" }]
+                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity) { \n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">Select</span>\n            @if(!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"!selectedEntity\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field) {     \n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if(this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if(expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if(expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >            \n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {     \n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n            \n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'in' || this.selectedCondition === 'notIn' ? \n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"entities\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track expr) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n                \n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if(!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }, { type: i0.ElementRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -50890,7 +50884,7 @@ class IgxQueryBuilderComponent {
             this._expressionTree = tree;
         }
         if (this._shouldEmitTreeChange) {
-            this.expressionTreeChange.emit();
+            this.expressionTreeChange.emit(tree);
         }
     }
     registerSVGIcons() {