igniteui-angular 22.1.0-beta.5 → 22.1.0-beta.7

package/fesm2022/igniteui-angular-query-builder.mjs

@@ -749,7 +749,7 @@ class IgxQueryBuilderTreeComponent {
     isAdvancedFiltering() {
         return (this.entities?.length === 1 && !this.entities[0]?.name) ||
             this.entities?.find(e => e.childEntities?.length > 0) !== undefined ||
-            ((this.entities?.length ?? 0) > 0 && (this.queryBuilder?.entities?.length ?? 0) > 0 && this.entities !== this.queryBuilder?.entities);
+            (this.entities?.length > 0 && this.queryBuilder?.entities?.length > 0 && this.entities !== this.queryBuilder?.entities);
     }
     /** @hidden */
     isHierarchicalNestedQuery() {
@@ -773,6 +773,10 @@ class IgxQueryBuilderTreeComponent {
          * Sets/gets the search value template.
          */
         this.searchValueTemplate = null;
+        /**
+         * Gets/sets the expected return field.
+         */
+        this.expectedReturnField = null;
         /**
          * Event fired as the expression tree is changed.
          */
@@ -843,9 +847,7 @@ class IgxQueryBuilderTreeComponent {
         };
         this.destroy$ = new Subject();
         this._focusDelay = DEFAULT_CHIP_FOCUS_DELAY;
-        this._selectedField = null;
         this._preventInit = false;
-        this._prevFocusedContainer = null;
         this._expandedExpressions = [];
         this._resourceStrings = null;
         this._defaultResourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN);
@@ -1122,17 +1124,15 @@ class IgxQueryBuilderTreeComponent {
     commitOperandEdit() {
         const actualSearchValue = this.searchValue.value;
         if (this._editedExpression) {
-            // An expression can only be committed while a field is selected.
-            const selectedField = this.selectedField;
-            this._editedExpression.expression.fieldName = selectedField.field;
-            this._editedExpression.expression.condition = selectedField.filters.condition(this.selectedCondition);
+            this._editedExpression.expression.fieldName = this.selectedField.field;
+            this._editedExpression.expression.condition = this.selectedField.filters.condition(this.selectedCondition);
             this._editedExpression.expression.conditionName = this.selectedCondition;
-            this._editedExpression.expression.searchVal = DataUtil.parseValue(selectedField.dataType, actualSearchValue) || actualSearchValue;
-            this._editedExpression.fieldLabel = selectedField.label
-                ? selectedField.label
-                : selectedField.header
-                    ? selectedField.header
-                    : selectedField.field;
+            this._editedExpression.expression.searchVal = DataUtil.parseValue(this.selectedField.dataType, actualSearchValue) || actualSearchValue;
+            this._editedExpression.fieldLabel = this.selectedField.label
+                ? this.selectedField.label
+                : this.selectedField.header
+                    ? this.selectedField.header
+                    : this.selectedField.field;
             const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
             if (innerQuery && this.selectedField?.filters?.condition(this.selectedCondition)?.isNestedQuery) {
                 innerQuery.exitEditAddMode();
@@ -1146,7 +1146,7 @@ class IgxQueryBuilderTreeComponent {
                 this._editedExpression.expression.searchTree = null;
             }
             this.innerQueryNewExpressionTree = null;
-            if (selectedField.filters.condition(this.selectedCondition)?.isUnary || selectedField.filters.condition(this.selectedCondition)?.isNestedQuery) {
+            if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary || this.selectedField.filters.condition(this.selectedCondition)?.isNestedQuery) {
                 this._editedExpression.expression.searchVal = null;
             }
             this._editedExpression.inEditMode = false;
@@ -1199,11 +1199,11 @@ class IgxQueryBuilderTreeComponent {
      */
     operandCanBeCommitted() {
         const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
-        return !!(this.selectedField && this.selectedCondition &&
+        return this.selectedField && this.selectedCondition &&
             ((((!Array.isArray(this.searchValue.value) && !!this.searchValue.value) || (Array.isArray(this.searchValue.value) && this.searchValue.value.length !== 0)) &&
                 !(this.selectedField?.filters?.condition(this.selectedCondition)?.isNestedQuery)) ||
                 (this.selectedField?.filters?.condition(this.selectedCondition)?.isNestedQuery && innerQuery && !!innerQuery.expressionTree && innerQuery.selectedReturnFields?.length > 0) ||
-                this.selectedField.filters.condition(this.selectedCondition)?.isUnary));
+                this.selectedField.filters.condition(this.selectedCondition)?.isUnary);
     }
     /**
      * @hidden @internal
@@ -1674,7 +1674,6 @@ class IgxQueryBuilderTreeComponent {
     getSearchValueTemplateContext(defaultSearchValueTemplate) {
         const ctx = {
             $implicit: this.searchValue,
-            // The search value editor is only rendered while a field is selected.
             selectedField: this.selectedField,
             selectedCondition: this.selectedCondition,
             defaultSearchValueTemplate: defaultSearchValueTemplate
@@ -1878,7 +1877,7 @@ class IgxQueryBuilderTreeComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", expectedReturnField: "expectedReturnField" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, providers: [
             IgxQueryBuilderDragService
-        ], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "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\n    class=\"igx-filter-tree__inputs\"\n    [style.display]=\"\n      isInEditMode() &&\n      (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())\n        ? 'flex'\n        : 'none'\n    \"\n  >\n    <div class=\"igx-filter-tree__inputs-field\">\n      <span class=\"igx-query-builder__label\">{{\n        this.resourceStrings.igx_query_builder_from_label\n      }}</span>\n      <igx-select\n        #entitySelect\n        type=\"box\"\n        (selectionChanging)=\"onEntitySelectChanging($event)\"\n        (opening)=\"exitEditAddMode(true)\"\n        [overlaySettings]=\"entitySelectOverlaySettings\"\n        [ngModel]=\"selectedEntity\"\n        [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n        [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity!\"\n        [disabled]=\"disableEntityChange\"\n      >\n        @for (entity of entities; track entity.name) {\n          <igx-select-item [value]=\"entity\">\n            {{ entity.name }}\n          </igx-select-item>\n        }\n      </igx-select>\n    </div>\n\n    <div class=\"igx-filter-tree__inputs-field\">\n      @if (!this.isHierarchicalNestedQuery()) {\n        <span class=\"igx-query-builder__label\">{{\n          this.resourceStrings.igx_query_builder_select_label\n        }}</span>\n      }\n      @if (!parentExpression) {\n        <igx-combo\n          #returnFieldsCombo\n          [itemsMaxHeight]=\"250\"\n          [data]=\"fields\"\n          [displayKey]=\"'field'\"\n          [valueKey]=\"'field'\"\n          [disabled]=\"disableReturnFieldsChange\"\n          [(ngModel)]=\"selectedReturnFields\"\n          [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n          [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields!\"\n          [searchPlaceholder]=\"this.resourceStrings.igx_query_builder_search!\"\n          [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n          (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n          (opening)=\"exitEditAddMode()\"\n        >\n          <ng-template igxComboHeader>\n            <div\n              class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n              (click)=\"onSelectAllClicked()\"\n              [ngClass]=\"{\n                'igx-drop-down__item--selected':\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedEntity.fields.length ===\n                    this.selectedReturnFields.length,\n              }\"\n            >\n              <igx-checkbox\n                [checked]=\"\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedEntity.fields.length ===\n                    this.selectedReturnFields.length\n                \"\n                [indeterminate]=\"\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedReturnFields.length > 0 &&\n                  this.selectedReturnFields.length < this.selectedEntity.fields.length\n                \"\n                [readonly]=\"true\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\"\n                class=\"igx-combo__checkbox\"\n              >\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      } @else {\n        <igx-select\n          #returnFieldSelect\n          type=\"box\"\n          (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n          [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n          [disabled]=\"!selectedEntity\"\n          [ngModel]=\"selectedReturnFields ? selectedReturnFields[0] : null\"\n          [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single!\"\n          [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n          (opening)=\"exitEditAddMode()\"\n        >\n          @for (field of fields; track field.field) {\n            <igx-select-item [value]=\"field.field\">\n              {{ field.field }}\n            </igx-select-item>\n          }\n        </igx-select>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<div #expressionsContainer class=\"igx-query-builder__main\">\n  <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n  <ng-template\n    #addExpressionsTemplate\n    let-expressionItem\n    let-afterExpression=\"afterExpression\"\n  >\n    <button\n      type=\"button\"\n      #addConditionButton\n      igxButton=\"flat\"\n      [disabled]=\"hasEditedExpression\"\n      (click)=\"addCondition(expressionItem, afterExpression, true)\"\n      igxDrop\n      (enter)=\"\n        dragService.onAddConditionEnter(addConditionButton, expressionItem)\n      \"\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\n        type=\"button\"\n        igxButton=\"flat\"\n        [disabled]=\"hasEditedExpression\"\n        (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n      >\n        <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n        <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n      </button>\n    }\n  </ng-template>\n\n  <ng-template #operandTemplate let-expressionItem>\n    @if (!expressionItem.inEditMode) {\n      @if (\n        dragService.dropGhostExpression &&\n        expressionItem === dragService.dropGhostExpression &&\n        dragService.isKeyboardDrag === false\n      ) {\n        <div\n          class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\"\n        >\n          <igx-chip [data]=\"expressionItem\">\n            {{ this.resourceStrings.igx_query_builder_drop_ghost_text }}\n          </igx-chip>\n        </div>\n      } @else {\n        <div\n          #dragRef\n          igxDrop\n          (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n          (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n          (leave)=\"dragService.onChipLeave()\"\n          (dropped)=\"dragService.onDivDropped(expressionItem)\"\n          [ngClass]=\"{\n            'igx-filter-tree__expression-item': true,\n            'igx-filter-tree__expression-item-keyboard-ghost':\n              expressionItem === dragService.dropGhostExpression,\n          }\"\n          (mouseenter)=\"expressionItem.hovered = true\"\n          (mouseleave)=\"expressionItem.hovered = false\"\n          (focusin)=\"onExpressionFocus(expressionItem)\"\n          (focusout)=\"onExpressionBlur($event, expressionItem)\"\n        >\n          <igx-chip\n            #expressionChip\n            [draggable]=\"true\"\n            [hideBaseOnDrag]=\"false\"\n            [animateOnRelease]=\"false\"\n            (moveStart)=\"\n              dragService.onMoveStart(dragRef, expressionItem, false)\n            \"\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            <igx-icon\n              igxPrefix\n              class=\"igx-drag-indicator\"\n              tabindex=\"0\"\n              (focus)=\"\n                dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\n              \"\n              (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n              family=\"default\"\n              name=\"drag_indicator\"\n            >\n            </igx-icon>\n            <span igxPrefix class=\"igx-filter-tree__expression-column\">\n              {{\n                expressionItem.fieldLabel || expressionItem.expression.fieldName\n              }}\n            </span>\n            <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n              {{\n                getConditionFriendlyName(\n                  $safeNavigationMigration(\n                    expressionItem.expression.condition?.name\n                  )\n                )\n              }}\n            </span>\n            @if (!expressionItem.expression.condition?.isUnary) {\n              <span>\n                @if (expressionItem.expression.searchTree) {\n                  <ng-container>\n                    <strong>{{\n                      expressionItem.expression.searchTree.entity\n                    }}</strong\n                    >&nbsp;/\n                    {{\n                      formatReturnFields(expressionItem.expression.searchTree)\n                    }}\n                  </ng-container>\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                              : $any(getFormatter(\n                                  expressionItem.expression.fieldName\n                                ))\n                              : undefined\n                        }}\n                      } @else {\n                        {{\n                          expressionItem.expression.searchVal\n                            | date\n                              : getFormat(expressionItem.expression.fieldName)\n                              : undefined\n                              : this.locale\n                        }}\n                      }\n                    } @else {\n                      @if (getFormatter(expressionItem.expression.fieldName)) {\n                        {{\n                          expressionItem.expression.searchVal\n                            | fieldFormatter\n                              : $any(getFormatter(\n                                  expressionItem.expression.fieldName\n                                ))\n                              : expressionItem.expression.conditionName ||\n                                  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              {{\n                getConditionFriendlyName(\n                  $safeNavigationMigration(\n                    expressionItem.expression.condition?.name\n                  )\n                )\n              }}\n            } @else {\n              @if (getFormatter(expressionItem.expression.fieldName)) {\n                {{\n                  expressionItem.expression.searchVal\n                    | fieldFormatter\n                      : $any(getFormatter(expressionItem.expression.fieldName))\n                      : expressionItem.expression.conditionName ||\n                          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\n                #addExpressionButton\n                igxDragIgnore\n                igxIconButton=\"outlined\"\n                [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                aria-labelledby=\"add-expression\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"\n                  clickExpressionAdd(addExpressionButton, expressionChip)\n                \"\n                (blur)=\"addExpressionBlur()\"\n              >\n                <igx-icon\n                  id=\"add-expression\"\n                  family=\"default\"\n                  name=\"add\"\n                ></igx-icon>\n              </button>\n              <igx-drop-down\n                #addOptionsDropDown\n                (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\"\n              >\n                <igx-drop-down-item [value]=\"'addCondition'\">\n                  <span>{{\n                    this.resourceStrings.igx_query_builder_add_condition\n                  }}</span>\n                </igx-drop-down-item>\n                <igx-drop-down-item [value]=\"'addGroup'\">\n                  <span>{{\n                    this.resourceStrings.igx_query_builder_add_group\n                  }}</span>\n                </igx-drop-down-item>\n              </igx-drop-down>\n            </div>\n          }\n        </div>\n      }\n    }\n    <div #editingInputsContainer class=\"igx-filter-tree__subquery\">\n      @if (expressionItem.inEditMode) {\n        <div\n          #editingInputs\n          igxDrop\n          (enter)=\"\n            dragService.onChipEnter(editingInputsContainer, expressionItem)\n          \"\n          (over)=\"\n            dragService.onChipEnter(editingInputsContainer, expressionItem)\n          \"\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            @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(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]=\"selectedField!.filters!.condition(condition).iconName\"\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\n                ? searchValueTemplate\n                : defaultSearchValueTemplate;\n              context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n            \"\n          >\n          </ng-container>\n\n          <ng-template #defaultSearchValueTemplate>\n            @if (\n              !selectedField ||\n              (selectedField.dataType !== 'date' &&\n                selectedField.dataType !== 'time' &&\n                selectedField.dataType !== 'dateTime')\n            ) {\n              <igx-input-group type=\"box\">\n                <input\n                  #searchValueInput\n                  igxInput\n                  [disabled]=\"isSearchValueInputDisabled()\"\n                  [placeholder]=\"\n                    this.selectedCondition === 'inQuery' ||\n                    this.selectedCondition === 'notInQuery'\n                      ? this.resourceStrings\n                          .igx_query_builder_query_value_placeholder\n                      : this.resourceStrings.igx_query_builder_value_placeholder\n                  \"\n                  [type]=\"\n                    selectedField && selectedField.dataType === 'number'\n                      ? 'number'\n                      : 'text'\n                  \"\n                  [(ngModel)]=\"searchValue.value\"\n                />\n              </igx-input-group>\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                [disabled]=\"isSearchValueInputDisabled()\"\n                [locale]=\"this.locale\"\n                [formatter]=\"selectedField.formatter!\"\n                [displayFormat]=\"selectedField.pipeArgs!.format!\"\n                [weekStart]=\"selectedField.pipeArgs!.weekStart!\"\n                [placeholder]=\"\n                  this.resourceStrings.igx_query_builder_date_placeholder\n                !\"\n              >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n              </igx-date-picker>\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                [disabled]=\"isSearchValueInputDisabled()\"\n                [locale]=\"this.locale\"\n                [formatter]=\"selectedField.formatter!\"\n                [displayFormat]=\"selectedField.pipeArgs!.format!\"\n                [inputFormat]=\"selectedField.editorOptions!.dateTimeFormat!\"\n                [placeholder]=\"\n                  this.resourceStrings.igx_query_builder_time_placeholder\n                !\"\n              >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n              </igx-time-picker>\n            } @else if (\n              selectedField && selectedField.dataType === 'dateTime'\n            ) {\n              <igx-input-group #inputGroup type=\"box\">\n                <input\n                  #input\n                  igxInput\n                  tabindex=\"0\"\n                  [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_datetime_placeholder\n                  \"\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\n              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\n              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 &&\n          expressionItem.expression.searchTree &&\n          expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n        (expressionItem.inEditMode &&\n          selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n      ) {\n        <ng-container>\n          <igx-query-builder-tree\n            [style.display]=\"\n              expressionItem.inEditMode || expressionItem.expanded\n                ? 'block'\n                : 'none'\n            \"\n            [entities]=\"\n              (this.selectedEntity\n                ? this.selectedEntity.childEntities\n                : entities?.[0]?.childEntities) ??\n              entities ?? []\n            \"\n            [queryBuilder]=\"this.queryBuilder\"\n            [parentExpression]=\"expressionItem\"\n            [expectedReturnField]=\"this.selectedField?.field\"\n            [expressionTree]=\"\n              expressionItem.inEditMode\n                ? (innerQueryNewExpressionTree ||\n                  getExpressionTreeCopy(\n                    expressionItem.expression.searchTree,\n                    true\n                  ))\n                : expressionItem.expression.searchTree\n            \"\n            (inEditModeChange)=\"onInEditModeChanged($event)\"\n            [searchValueTemplate]=\"searchValueTemplate\"\n            [resourceStrings]=\"resourceStrings\"\n          >\n          </igx-query-builder-tree>\n        </ng-container>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #expressionGroupTemplate let-expressionItem>\n    <div\n      class=\"igx-filter-tree\"\n      (focusout)=\"parentExpression ? null : dragService.onDragFocusOut()\"\n    >\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\n          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\n            #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)=\"\n              onGroupClick(\n                groupContextMenuDropDown,\n                changeGroupButton,\n                expressionItem\n              )\n            \"\n          >\n            <span\n              igxDrop\n              (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n              (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n              (leave)=\"dragService.onChipLeave()\"\n            >\n              {{\n                getOperator(expressionItem) === 0\n                  ? this.resourceStrings.igx_query_builder_and_label\n                  : this.resourceStrings.igx_query_builder_or_label\n              }}\n            </span>\n            <igx-icon\n              family=\"default\"\n              name=\"arrow_drop_down\"\n              role=\"button\"\n            ></igx-icon>\n          </button>\n          <igx-drop-down\n            #groupContextMenuDropDown\n            (selectionChanging)=\"\n              onGroupContextMenuDropDownSelectionChanging($event)\n            \"\n            [width]=\"'fit-content'\"\n          >\n            <igx-drop-down-item [value]=\"'switchCondition'\">\n              {{ getSwitchGroupText(expressionItem) }}\n            </igx-drop-down-item>\n            <igx-drop-down-item\n              [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 (\n            expr of expressionItem?.children;\n            track trackExpressionItem(expr)\n          ) {\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 #currentGroupButtonsContainer class=\"igx-filter-tree__buttons\">\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 (\n    rootGroup ||\n    (!rootGroup &&\n      (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))\n  ) {\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=\"expressionGroupTemplate; context: context(rootGroup)\"\n      ></ng-container>\n    </div>\n  }\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>\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    >\n      {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n    </igx-checkbox>\n  </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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", "searchPlaceholder"], outputs: ["selectionChanging", "selectionChanged"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "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", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "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: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { 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", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "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"] }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], 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: "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\n    class=\"igx-filter-tree__inputs\"\n    [style.display]=\"\n      isInEditMode() &&\n      (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())\n        ? 'flex'\n        : 'none'\n    \"\n  >\n    <div class=\"igx-filter-tree__inputs-field\">\n      <span class=\"igx-query-builder__label\">{{\n        this.resourceStrings.igx_query_builder_from_label\n      }}</span>\n      <igx-select\n        #entitySelect\n        type=\"box\"\n        (selectionChanging)=\"onEntitySelectChanging($event)\"\n        (opening)=\"exitEditAddMode(true)\"\n        [overlaySettings]=\"entitySelectOverlaySettings\"\n        [ngModel]=\"selectedEntity\"\n        [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n        [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n        [disabled]=\"disableEntityChange\"\n      >\n        @for (entity of entities; track entity.name) {\n          <igx-select-item [value]=\"entity\">\n            {{ entity.name }}\n          </igx-select-item>\n        }\n      </igx-select>\n    </div>\n\n    <div class=\"igx-filter-tree__inputs-field\">\n      @if (!this.isHierarchicalNestedQuery()) {\n        <span class=\"igx-query-builder__label\">{{\n          this.resourceStrings.igx_query_builder_select_label\n        }}</span>\n      }\n      @if (!parentExpression) {\n        <igx-combo\n          #returnFieldsCombo\n          [itemsMaxHeight]=\"250\"\n          [data]=\"fields\"\n          [displayKey]=\"'field'\"\n          [valueKey]=\"'field'\"\n          [disabled]=\"disableReturnFieldsChange\"\n          [(ngModel)]=\"selectedReturnFields\"\n          [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n          [placeholder]=\"\n            this.resourceStrings.igx_query_builder_select_return_fields\n          \"\n          searchPlaceholder=\"{{\n            this.resourceStrings.igx_query_builder_search\n          }}\"\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]=\"{\n                'igx-drop-down__item--selected':\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedEntity.fields.length ===\n                    this.selectedReturnFields.length,\n              }\"\n            >\n              <igx-checkbox\n                [checked]=\"\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedEntity.fields.length ===\n                    this.selectedReturnFields.length\n                \"\n                [indeterminate]=\"\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedReturnFields.length > 0 &&\n                  this.selectedReturnFields.length <\n                    this.selectedEntity.fields?.length\n                \"\n                [readonly]=\"true\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\"\n                class=\"igx-combo__checkbox\"\n              >\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      } @else {\n        <igx-select\n          #returnFieldSelect\n          type=\"box\"\n          (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n          [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n          [disabled]=\"!selectedEntity\"\n          [ngModel]=\"selectedReturnFields ? selectedReturnFields[0] : null\"\n          [placeholder]=\"\n            this.resourceStrings.igx_query_builder_select_return_field_single\n          \"\n          [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n          (opening)=\"exitEditAddMode()\"\n        >\n          @for (field of fields; track field.field) {\n            <igx-select-item [value]=\"field.field\">\n              {{ field.field }}\n            </igx-select-item>\n          }\n        </igx-select>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<div #expressionsContainer class=\"igx-query-builder__main\">\n  <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n  <ng-template\n    #addExpressionsTemplate\n    let-expressionItem\n    let-afterExpression=\"afterExpression\"\n  >\n    <button\n      type=\"button\"\n      #addConditionButton\n      igxButton=\"flat\"\n      [disabled]=\"hasEditedExpression\"\n      (click)=\"addCondition(expressionItem, afterExpression, true)\"\n      igxDrop\n      (enter)=\"\n        dragService.onAddConditionEnter(addConditionButton, expressionItem)\n      \"\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\n        type=\"button\"\n        igxButton=\"flat\"\n        [disabled]=\"hasEditedExpression\"\n        (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n      >\n        <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n        <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n      </button>\n    }\n  </ng-template>\n\n  <ng-template #operandTemplate let-expressionItem>\n    @if (!expressionItem.inEditMode) {\n      @if (\n        dragService.dropGhostExpression &&\n        expressionItem === dragService.dropGhostExpression &&\n        dragService.isKeyboardDrag === false\n      ) {\n        <div\n          class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\"\n        >\n          <igx-chip [data]=\"expressionItem\">\n            {{ this.resourceStrings.igx_query_builder_drop_ghost_text }}\n          </igx-chip>\n        </div>\n      } @else {\n        <div\n          #dragRef\n          igxDrop\n          (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n          (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n          (leave)=\"dragService.onChipLeave()\"\n          (dropped)=\"dragService.onDivDropped(expressionItem)\"\n          [ngClass]=\"{\n            'igx-filter-tree__expression-item': true,\n            'igx-filter-tree__expression-item-keyboard-ghost':\n              expressionItem === dragService.dropGhostExpression,\n          }\"\n          (mouseenter)=\"expressionItem.hovered = true\"\n          (mouseleave)=\"expressionItem.hovered = false\"\n          (focusin)=\"onExpressionFocus(expressionItem)\"\n          (focusout)=\"onExpressionBlur($event, expressionItem)\"\n        >\n          <igx-chip\n            #expressionChip\n            [draggable]=\"true\"\n            [hideBaseOnDrag]=\"false\"\n            [animateOnRelease]=\"false\"\n            (moveStart)=\"\n              dragService.onMoveStart(dragRef, expressionItem, false)\n            \"\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            <igx-icon\n              igxPrefix\n              class=\"igx-drag-indicator\"\n              tabindex=\"0\"\n              (focus)=\"\n                dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\n              \"\n              (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n              family=\"default\"\n              name=\"drag_indicator\"\n            >\n            </igx-icon>\n            <span igxPrefix class=\"igx-filter-tree__expression-column\">\n              {{\n                expressionItem.fieldLabel || expressionItem.expression.fieldName\n              }}\n            </span>\n            <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n              {{\n                getConditionFriendlyName(\n                  $safeNavigationMigration(\n                    expressionItem.expression.condition?.name\n                  )\n                )\n              }}\n            </span>\n            @if (!expressionItem.expression.condition?.isUnary) {\n              <span>\n                @if (expressionItem.expression.searchTree) {\n                  <ng-container>\n                    <strong>{{\n                      expressionItem.expression.searchTree.entity\n                    }}</strong\n                    >&nbsp;/\n                    {{\n                      formatReturnFields(expressionItem.expression.searchTree)\n                    }}\n                  </ng-container>\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(expressionItem.expression.fieldName)\n                              : undefined\n                              : this.locale\n                        }}\n                      }\n                    } @else {\n                      @if (getFormatter(expressionItem.expression.fieldName)) {\n                        {{\n                          expressionItem.expression.searchVal\n                            | fieldFormatter\n                              : getFormatter(\n                                  expressionItem.expression.fieldName\n                                )\n                              : expressionItem.expression.conditionName ||\n                                  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              {{\n                getConditionFriendlyName(\n                  $safeNavigationMigration(\n                    expressionItem.expression.condition?.name\n                  )\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 ||\n                          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\n                #addExpressionButton\n                igxDragIgnore\n                igxIconButton=\"outlined\"\n                [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                aria-labelledby=\"add-expression\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"\n                  clickExpressionAdd(addExpressionButton, expressionChip)\n                \"\n                (blur)=\"addExpressionBlur()\"\n              >\n                <igx-icon\n                  id=\"add-expression\"\n                  family=\"default\"\n                  name=\"add\"\n                ></igx-icon>\n              </button>\n              <igx-drop-down\n                #addOptionsDropDown\n                (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\"\n              >\n                <igx-drop-down-item [value]=\"'addCondition'\">\n                  <span>{{\n                    this.resourceStrings.igx_query_builder_add_condition\n                  }}</span>\n                </igx-drop-down-item>\n                <igx-drop-down-item [value]=\"'addGroup'\">\n                  <span>{{\n                    this.resourceStrings.igx_query_builder_add_group\n                  }}</span>\n                </igx-drop-down-item>\n              </igx-drop-down>\n            </div>\n          }\n        </div>\n      }\n    }\n    <div #editingInputsContainer class=\"igx-filter-tree__subquery\">\n      @if (expressionItem.inEditMode) {\n        <div\n          #editingInputs\n          igxDrop\n          (enter)=\"\n            dragService.onChipEnter(editingInputsContainer, expressionItem)\n          \"\n          (over)=\"\n            dragService.onChipEnter(editingInputsContainer, expressionItem)\n          \"\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]=\"\n              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]=\"\n              this.resourceStrings.igx_query_builder_condition_placeholder\n            \"\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(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]=\"selectedField.filters.condition(condition).iconName\"\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\n                ? searchValueTemplate\n                : defaultSearchValueTemplate;\n              context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n            \"\n          >\n          </ng-container>\n\n          <ng-template #defaultSearchValueTemplate>\n            @if (\n              !selectedField ||\n              (selectedField.dataType !== 'date' &&\n                selectedField.dataType !== 'time' &&\n                selectedField.dataType !== 'dateTime')\n            ) {\n              <igx-input-group type=\"box\">\n                <input\n                  #searchValueInput\n                  igxInput\n                  [disabled]=\"isSearchValueInputDisabled()\"\n                  [placeholder]=\"\n                    this.selectedCondition === 'inQuery' ||\n                    this.selectedCondition === 'notInQuery'\n                      ? this.resourceStrings\n                          .igx_query_builder_query_value_placeholder\n                      : this.resourceStrings.igx_query_builder_value_placeholder\n                  \"\n                  [type]=\"\n                    selectedField && selectedField.dataType === 'number'\n                      ? 'number'\n                      : 'text'\n                  \"\n                  [(ngModel)]=\"searchValue.value\"\n                />\n              </igx-input-group>\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                [disabled]=\"isSearchValueInputDisabled()\"\n                [locale]=\"this.locale\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                [placeholder]=\"\n                  this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n              >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n              </igx-date-picker>\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                [disabled]=\"isSearchValueInputDisabled()\"\n                [locale]=\"this.locale\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [inputFormat]=\"\n                  $safeNavigationMigration(\n                    selectedField.editorOptions?.dateTimeFormat\n                  )\n                \"\n                [placeholder]=\"\n                  this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n              >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n              </igx-time-picker>\n            } @else if (\n              selectedField && selectedField.dataType === 'dateTime'\n            ) {\n              <igx-input-group #inputGroup type=\"box\">\n                <input\n                  #input\n                  igxInput\n                  tabindex=\"0\"\n                  [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_datetime_placeholder\n                  \"\n                  [(ngModel)]=\"searchValue.value\"\n                  [disabled]=\"isSearchValueInputDisabled()\"\n                  [locale]=\"this.locale\"\n                  [igxDateTimeEditor]=\"\n                    $safeNavigationMigration(\n                      selectedField.editorOptions?.dateTimeFormat\n                    )\n                  \"\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\n              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\n              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 &&\n          expressionItem.expression.searchTree &&\n          expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n        (expressionItem.inEditMode &&\n          selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n      ) {\n        <ng-container>\n          <igx-query-builder-tree\n            [style.display]=\"\n              expressionItem.inEditMode || expressionItem.expanded\n                ? 'block'\n                : 'none'\n            \"\n            [entities]=\"\n              (this.selectedEntity\n                ? this.selectedEntity.childEntities\n                : entities?.[0]?.childEntities) ??\n              entities ?? []\n            \"\n            [queryBuilder]=\"this.queryBuilder\"\n            [parentExpression]=\"expressionItem\"\n            [expectedReturnField]=\"\n              $safeNavigationMigration(this.selectedField?.field)\n            \"\n            [expressionTree]=\"\n              expressionItem.inEditMode\n                ? (innerQueryNewExpressionTree ??\n                  getExpressionTreeCopy(\n                    expressionItem.expression.searchTree,\n                    true\n                  ))\n                : expressionItem.expression.searchTree\n            \"\n            (inEditModeChange)=\"onInEditModeChanged($event)\"\n            [searchValueTemplate]=\"searchValueTemplate\"\n            [resourceStrings]=\"resourceStrings\"\n          >\n          </igx-query-builder-tree>\n        </ng-container>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #expressionGroupTemplate let-expressionItem>\n    <div\n      class=\"igx-filter-tree\"\n      (focusout)=\"parentExpression ? null : dragService.onDragFocusOut()\"\n    >\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\n          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\n            #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)=\"\n              onGroupClick(\n                groupContextMenuDropDown,\n                changeGroupButton,\n                expressionItem\n              )\n            \"\n          >\n            <span\n              igxDrop\n              (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n              (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n              (leave)=\"dragService.onChipLeave()\"\n            >\n              {{\n                getOperator(expressionItem) === 0\n                  ? this.resourceStrings.igx_query_builder_and_label\n                  : this.resourceStrings.igx_query_builder_or_label\n              }}\n            </span>\n            <igx-icon\n              family=\"default\"\n              name=\"arrow_drop_down\"\n              role=\"button\"\n            ></igx-icon>\n          </button>\n          <igx-drop-down\n            #groupContextMenuDropDown\n            (selectionChanging)=\"\n              onGroupContextMenuDropDownSelectionChanging($event)\n            \"\n            [width]=\"'fit-content'\"\n          >\n            <igx-drop-down-item [value]=\"'switchCondition'\">\n              {{ getSwitchGroupText(expressionItem) }}\n            </igx-drop-down-item>\n            <igx-drop-down-item\n              [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 (\n            expr of expressionItem?.children;\n            track trackExpressionItem(expr)\n          ) {\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 #currentGroupButtonsContainer class=\"igx-filter-tree__buttons\">\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 (\n    rootGroup ||\n    (!rootGroup &&\n      (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))\n  ) {\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=\"expressionGroupTemplate; context: context(rootGroup)\"\n      ></ng-container>\n    </div>\n  }\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>\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    >\n      {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n    </igx-checkbox>\n  </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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", "searchPlaceholder"], outputs: ["selectionChanging", "selectionChanged"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "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", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "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: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { 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", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "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"] }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
             type: Component,
@@ -1915,7 +1914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         NgTemplateOutlet
                     ], changeDetection: ChangeDetectionStrategy.Eager, providers: [
                         IgxQueryBuilderDragService
-                    ], template: "<ng-template #addIcon>\n  <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n  <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n  <div\n    class=\"igx-filter-tree__inputs\"\n    [style.display]=\"\n      isInEditMode() &&\n      (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())\n        ? 'flex'\n        : 'none'\n    \"\n  >\n    <div class=\"igx-filter-tree__inputs-field\">\n      <span class=\"igx-query-builder__label\">{{\n        this.resourceStrings.igx_query_builder_from_label\n      }}</span>\n      <igx-select\n        #entitySelect\n        type=\"box\"\n        (selectionChanging)=\"onEntitySelectChanging($event)\"\n        (opening)=\"exitEditAddMode(true)\"\n        [overlaySettings]=\"entitySelectOverlaySettings\"\n        [ngModel]=\"selectedEntity\"\n        [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n        [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity!\"\n        [disabled]=\"disableEntityChange\"\n      >\n        @for (entity of entities; track entity.name) {\n          <igx-select-item [value]=\"entity\">\n            {{ entity.name }}\n          </igx-select-item>\n        }\n      </igx-select>\n    </div>\n\n    <div class=\"igx-filter-tree__inputs-field\">\n      @if (!this.isHierarchicalNestedQuery()) {\n        <span class=\"igx-query-builder__label\">{{\n          this.resourceStrings.igx_query_builder_select_label\n        }}</span>\n      }\n      @if (!parentExpression) {\n        <igx-combo\n          #returnFieldsCombo\n          [itemsMaxHeight]=\"250\"\n          [data]=\"fields\"\n          [displayKey]=\"'field'\"\n          [valueKey]=\"'field'\"\n          [disabled]=\"disableReturnFieldsChange\"\n          [(ngModel)]=\"selectedReturnFields\"\n          [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n          [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields!\"\n          [searchPlaceholder]=\"this.resourceStrings.igx_query_builder_search!\"\n          [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n          (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n          (opening)=\"exitEditAddMode()\"\n        >\n          <ng-template igxComboHeader>\n            <div\n              class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n              (click)=\"onSelectAllClicked()\"\n              [ngClass]=\"{\n                'igx-drop-down__item--selected':\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedEntity.fields.length ===\n                    this.selectedReturnFields.length,\n              }\"\n            >\n              <igx-checkbox\n                [checked]=\"\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedEntity.fields.length ===\n                    this.selectedReturnFields.length\n                \"\n                [indeterminate]=\"\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedReturnFields.length > 0 &&\n                  this.selectedReturnFields.length < this.selectedEntity.fields.length\n                \"\n                [readonly]=\"true\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\"\n                class=\"igx-combo__checkbox\"\n              >\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      } @else {\n        <igx-select\n          #returnFieldSelect\n          type=\"box\"\n          (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n          [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n          [disabled]=\"!selectedEntity\"\n          [ngModel]=\"selectedReturnFields ? selectedReturnFields[0] : null\"\n          [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single!\"\n          [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n          (opening)=\"exitEditAddMode()\"\n        >\n          @for (field of fields; track field.field) {\n            <igx-select-item [value]=\"field.field\">\n              {{ field.field }}\n            </igx-select-item>\n          }\n        </igx-select>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<div #expressionsContainer class=\"igx-query-builder__main\">\n  <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n  <ng-template\n    #addExpressionsTemplate\n    let-expressionItem\n    let-afterExpression=\"afterExpression\"\n  >\n    <button\n      type=\"button\"\n      #addConditionButton\n      igxButton=\"flat\"\n      [disabled]=\"hasEditedExpression\"\n      (click)=\"addCondition(expressionItem, afterExpression, true)\"\n      igxDrop\n      (enter)=\"\n        dragService.onAddConditionEnter(addConditionButton, expressionItem)\n      \"\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\n        type=\"button\"\n        igxButton=\"flat\"\n        [disabled]=\"hasEditedExpression\"\n        (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n      >\n        <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n        <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n      </button>\n    }\n  </ng-template>\n\n  <ng-template #operandTemplate let-expressionItem>\n    @if (!expressionItem.inEditMode) {\n      @if (\n        dragService.dropGhostExpression &&\n        expressionItem === dragService.dropGhostExpression &&\n        dragService.isKeyboardDrag === false\n      ) {\n        <div\n          class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\"\n        >\n          <igx-chip [data]=\"expressionItem\">\n            {{ this.resourceStrings.igx_query_builder_drop_ghost_text }}\n          </igx-chip>\n        </div>\n      } @else {\n        <div\n          #dragRef\n          igxDrop\n          (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n          (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n          (leave)=\"dragService.onChipLeave()\"\n          (dropped)=\"dragService.onDivDropped(expressionItem)\"\n          [ngClass]=\"{\n            'igx-filter-tree__expression-item': true,\n            'igx-filter-tree__expression-item-keyboard-ghost':\n              expressionItem === dragService.dropGhostExpression,\n          }\"\n          (mouseenter)=\"expressionItem.hovered = true\"\n          (mouseleave)=\"expressionItem.hovered = false\"\n          (focusin)=\"onExpressionFocus(expressionItem)\"\n          (focusout)=\"onExpressionBlur($event, expressionItem)\"\n        >\n          <igx-chip\n            #expressionChip\n            [draggable]=\"true\"\n            [hideBaseOnDrag]=\"false\"\n            [animateOnRelease]=\"false\"\n            (moveStart)=\"\n              dragService.onMoveStart(dragRef, expressionItem, false)\n            \"\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            <igx-icon\n              igxPrefix\n              class=\"igx-drag-indicator\"\n              tabindex=\"0\"\n              (focus)=\"\n                dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\n              \"\n              (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n              family=\"default\"\n              name=\"drag_indicator\"\n            >\n            </igx-icon>\n            <span igxPrefix class=\"igx-filter-tree__expression-column\">\n              {{\n                expressionItem.fieldLabel || expressionItem.expression.fieldName\n              }}\n            </span>\n            <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n              {{\n                getConditionFriendlyName(\n                  $safeNavigationMigration(\n                    expressionItem.expression.condition?.name\n                  )\n                )\n              }}\n            </span>\n            @if (!expressionItem.expression.condition?.isUnary) {\n              <span>\n                @if (expressionItem.expression.searchTree) {\n                  <ng-container>\n                    <strong>{{\n                      expressionItem.expression.searchTree.entity\n                    }}</strong\n                    >&nbsp;/\n                    {{\n                      formatReturnFields(expressionItem.expression.searchTree)\n                    }}\n                  </ng-container>\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                              : $any(getFormatter(\n                                  expressionItem.expression.fieldName\n                                ))\n                              : undefined\n                        }}\n                      } @else {\n                        {{\n                          expressionItem.expression.searchVal\n                            | date\n                              : getFormat(expressionItem.expression.fieldName)\n                              : undefined\n                              : this.locale\n                        }}\n                      }\n                    } @else {\n                      @if (getFormatter(expressionItem.expression.fieldName)) {\n                        {{\n                          expressionItem.expression.searchVal\n                            | fieldFormatter\n                              : $any(getFormatter(\n                                  expressionItem.expression.fieldName\n                                ))\n                              : expressionItem.expression.conditionName ||\n                                  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              {{\n                getConditionFriendlyName(\n                  $safeNavigationMigration(\n                    expressionItem.expression.condition?.name\n                  )\n                )\n              }}\n            } @else {\n              @if (getFormatter(expressionItem.expression.fieldName)) {\n                {{\n                  expressionItem.expression.searchVal\n                    | fieldFormatter\n                      : $any(getFormatter(expressionItem.expression.fieldName))\n                      : expressionItem.expression.conditionName ||\n                          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\n                #addExpressionButton\n                igxDragIgnore\n                igxIconButton=\"outlined\"\n                [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                aria-labelledby=\"add-expression\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"\n                  clickExpressionAdd(addExpressionButton, expressionChip)\n                \"\n                (blur)=\"addExpressionBlur()\"\n              >\n                <igx-icon\n                  id=\"add-expression\"\n                  family=\"default\"\n                  name=\"add\"\n                ></igx-icon>\n              </button>\n              <igx-drop-down\n                #addOptionsDropDown\n                (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\"\n              >\n                <igx-drop-down-item [value]=\"'addCondition'\">\n                  <span>{{\n                    this.resourceStrings.igx_query_builder_add_condition\n                  }}</span>\n                </igx-drop-down-item>\n                <igx-drop-down-item [value]=\"'addGroup'\">\n                  <span>{{\n                    this.resourceStrings.igx_query_builder_add_group\n                  }}</span>\n                </igx-drop-down-item>\n              </igx-drop-down>\n            </div>\n          }\n        </div>\n      }\n    }\n    <div #editingInputsContainer class=\"igx-filter-tree__subquery\">\n      @if (expressionItem.inEditMode) {\n        <div\n          #editingInputs\n          igxDrop\n          (enter)=\"\n            dragService.onChipEnter(editingInputsContainer, expressionItem)\n          \"\n          (over)=\"\n            dragService.onChipEnter(editingInputsContainer, expressionItem)\n          \"\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            @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(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]=\"selectedField!.filters!.condition(condition).iconName\"\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\n                ? searchValueTemplate\n                : defaultSearchValueTemplate;\n              context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n            \"\n          >\n          </ng-container>\n\n          <ng-template #defaultSearchValueTemplate>\n            @if (\n              !selectedField ||\n              (selectedField.dataType !== 'date' &&\n                selectedField.dataType !== 'time' &&\n                selectedField.dataType !== 'dateTime')\n            ) {\n              <igx-input-group type=\"box\">\n                <input\n                  #searchValueInput\n                  igxInput\n                  [disabled]=\"isSearchValueInputDisabled()\"\n                  [placeholder]=\"\n                    this.selectedCondition === 'inQuery' ||\n                    this.selectedCondition === 'notInQuery'\n                      ? this.resourceStrings\n                          .igx_query_builder_query_value_placeholder\n                      : this.resourceStrings.igx_query_builder_value_placeholder\n                  \"\n                  [type]=\"\n                    selectedField && selectedField.dataType === 'number'\n                      ? 'number'\n                      : 'text'\n                  \"\n                  [(ngModel)]=\"searchValue.value\"\n                />\n              </igx-input-group>\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                [disabled]=\"isSearchValueInputDisabled()\"\n                [locale]=\"this.locale\"\n                [formatter]=\"selectedField.formatter!\"\n                [displayFormat]=\"selectedField.pipeArgs!.format!\"\n                [weekStart]=\"selectedField.pipeArgs!.weekStart!\"\n                [placeholder]=\"\n                  this.resourceStrings.igx_query_builder_date_placeholder\n                !\"\n              >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n              </igx-date-picker>\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                [disabled]=\"isSearchValueInputDisabled()\"\n                [locale]=\"this.locale\"\n                [formatter]=\"selectedField.formatter!\"\n                [displayFormat]=\"selectedField.pipeArgs!.format!\"\n                [inputFormat]=\"selectedField.editorOptions!.dateTimeFormat!\"\n                [placeholder]=\"\n                  this.resourceStrings.igx_query_builder_time_placeholder\n                !\"\n              >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n              </igx-time-picker>\n            } @else if (\n              selectedField && selectedField.dataType === 'dateTime'\n            ) {\n              <igx-input-group #inputGroup type=\"box\">\n                <input\n                  #input\n                  igxInput\n                  tabindex=\"0\"\n                  [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_datetime_placeholder\n                  \"\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\n              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\n              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 &&\n          expressionItem.expression.searchTree &&\n          expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n        (expressionItem.inEditMode &&\n          selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n      ) {\n        <ng-container>\n          <igx-query-builder-tree\n            [style.display]=\"\n              expressionItem.inEditMode || expressionItem.expanded\n                ? 'block'\n                : 'none'\n            \"\n            [entities]=\"\n              (this.selectedEntity\n                ? this.selectedEntity.childEntities\n                : entities?.[0]?.childEntities) ??\n              entities ?? []\n            \"\n            [queryBuilder]=\"this.queryBuilder\"\n            [parentExpression]=\"expressionItem\"\n            [expectedReturnField]=\"this.selectedField?.field\"\n            [expressionTree]=\"\n              expressionItem.inEditMode\n                ? (innerQueryNewExpressionTree ||\n                  getExpressionTreeCopy(\n                    expressionItem.expression.searchTree,\n                    true\n                  ))\n                : expressionItem.expression.searchTree\n            \"\n            (inEditModeChange)=\"onInEditModeChanged($event)\"\n            [searchValueTemplate]=\"searchValueTemplate\"\n            [resourceStrings]=\"resourceStrings\"\n          >\n          </igx-query-builder-tree>\n        </ng-container>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #expressionGroupTemplate let-expressionItem>\n    <div\n      class=\"igx-filter-tree\"\n      (focusout)=\"parentExpression ? null : dragService.onDragFocusOut()\"\n    >\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\n          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\n            #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)=\"\n              onGroupClick(\n                groupContextMenuDropDown,\n                changeGroupButton,\n                expressionItem\n              )\n            \"\n          >\n            <span\n              igxDrop\n              (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n              (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n              (leave)=\"dragService.onChipLeave()\"\n            >\n              {{\n                getOperator(expressionItem) === 0\n                  ? this.resourceStrings.igx_query_builder_and_label\n                  : this.resourceStrings.igx_query_builder_or_label\n              }}\n            </span>\n            <igx-icon\n              family=\"default\"\n              name=\"arrow_drop_down\"\n              role=\"button\"\n            ></igx-icon>\n          </button>\n          <igx-drop-down\n            #groupContextMenuDropDown\n            (selectionChanging)=\"\n              onGroupContextMenuDropDownSelectionChanging($event)\n            \"\n            [width]=\"'fit-content'\"\n          >\n            <igx-drop-down-item [value]=\"'switchCondition'\">\n              {{ getSwitchGroupText(expressionItem) }}\n            </igx-drop-down-item>\n            <igx-drop-down-item\n              [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 (\n            expr of expressionItem?.children;\n            track trackExpressionItem(expr)\n          ) {\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 #currentGroupButtonsContainer class=\"igx-filter-tree__buttons\">\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 (\n    rootGroup ||\n    (!rootGroup &&\n      (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))\n  ) {\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=\"expressionGroupTemplate; context: context(rootGroup)\"\n      ></ng-container>\n    </div>\n  }\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>\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    >\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\n    class=\"igx-filter-tree__inputs\"\n    [style.display]=\"\n      isInEditMode() &&\n      (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())\n        ? 'flex'\n        : 'none'\n    \"\n  >\n    <div class=\"igx-filter-tree__inputs-field\">\n      <span class=\"igx-query-builder__label\">{{\n        this.resourceStrings.igx_query_builder_from_label\n      }}</span>\n      <igx-select\n        #entitySelect\n        type=\"box\"\n        (selectionChanging)=\"onEntitySelectChanging($event)\"\n        (opening)=\"exitEditAddMode(true)\"\n        [overlaySettings]=\"entitySelectOverlaySettings\"\n        [ngModel]=\"selectedEntity\"\n        [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n        [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n        [disabled]=\"disableEntityChange\"\n      >\n        @for (entity of entities; track entity.name) {\n          <igx-select-item [value]=\"entity\">\n            {{ entity.name }}\n          </igx-select-item>\n        }\n      </igx-select>\n    </div>\n\n    <div class=\"igx-filter-tree__inputs-field\">\n      @if (!this.isHierarchicalNestedQuery()) {\n        <span class=\"igx-query-builder__label\">{{\n          this.resourceStrings.igx_query_builder_select_label\n        }}</span>\n      }\n      @if (!parentExpression) {\n        <igx-combo\n          #returnFieldsCombo\n          [itemsMaxHeight]=\"250\"\n          [data]=\"fields\"\n          [displayKey]=\"'field'\"\n          [valueKey]=\"'field'\"\n          [disabled]=\"disableReturnFieldsChange\"\n          [(ngModel)]=\"selectedReturnFields\"\n          [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n          [placeholder]=\"\n            this.resourceStrings.igx_query_builder_select_return_fields\n          \"\n          searchPlaceholder=\"{{\n            this.resourceStrings.igx_query_builder_search\n          }}\"\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]=\"{\n                'igx-drop-down__item--selected':\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedEntity.fields.length ===\n                    this.selectedReturnFields.length,\n              }\"\n            >\n              <igx-checkbox\n                [checked]=\"\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedEntity.fields.length ===\n                    this.selectedReturnFields.length\n                \"\n                [indeterminate]=\"\n                  this.selectedEntity &&\n                  this.selectedReturnFields &&\n                  this.selectedReturnFields.length > 0 &&\n                  this.selectedReturnFields.length <\n                    this.selectedEntity.fields?.length\n                \"\n                [readonly]=\"true\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\"\n                class=\"igx-combo__checkbox\"\n              >\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      } @else {\n        <igx-select\n          #returnFieldSelect\n          type=\"box\"\n          (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n          [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n          [disabled]=\"!selectedEntity\"\n          [ngModel]=\"selectedReturnFields ? selectedReturnFields[0] : null\"\n          [placeholder]=\"\n            this.resourceStrings.igx_query_builder_select_return_field_single\n          \"\n          [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n          (opening)=\"exitEditAddMode()\"\n        >\n          @for (field of fields; track field.field) {\n            <igx-select-item [value]=\"field.field\">\n              {{ field.field }}\n            </igx-select-item>\n          }\n        </igx-select>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<div #expressionsContainer class=\"igx-query-builder__main\">\n  <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n  <ng-template\n    #addExpressionsTemplate\n    let-expressionItem\n    let-afterExpression=\"afterExpression\"\n  >\n    <button\n      type=\"button\"\n      #addConditionButton\n      igxButton=\"flat\"\n      [disabled]=\"hasEditedExpression\"\n      (click)=\"addCondition(expressionItem, afterExpression, true)\"\n      igxDrop\n      (enter)=\"\n        dragService.onAddConditionEnter(addConditionButton, expressionItem)\n      \"\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\n        type=\"button\"\n        igxButton=\"flat\"\n        [disabled]=\"hasEditedExpression\"\n        (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n      >\n        <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n        <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n      </button>\n    }\n  </ng-template>\n\n  <ng-template #operandTemplate let-expressionItem>\n    @if (!expressionItem.inEditMode) {\n      @if (\n        dragService.dropGhostExpression &&\n        expressionItem === dragService.dropGhostExpression &&\n        dragService.isKeyboardDrag === false\n      ) {\n        <div\n          class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\"\n        >\n          <igx-chip [data]=\"expressionItem\">\n            {{ this.resourceStrings.igx_query_builder_drop_ghost_text }}\n          </igx-chip>\n        </div>\n      } @else {\n        <div\n          #dragRef\n          igxDrop\n          (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n          (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n          (leave)=\"dragService.onChipLeave()\"\n          (dropped)=\"dragService.onDivDropped(expressionItem)\"\n          [ngClass]=\"{\n            'igx-filter-tree__expression-item': true,\n            'igx-filter-tree__expression-item-keyboard-ghost':\n              expressionItem === dragService.dropGhostExpression,\n          }\"\n          (mouseenter)=\"expressionItem.hovered = true\"\n          (mouseleave)=\"expressionItem.hovered = false\"\n          (focusin)=\"onExpressionFocus(expressionItem)\"\n          (focusout)=\"onExpressionBlur($event, expressionItem)\"\n        >\n          <igx-chip\n            #expressionChip\n            [draggable]=\"true\"\n            [hideBaseOnDrag]=\"false\"\n            [animateOnRelease]=\"false\"\n            (moveStart)=\"\n              dragService.onMoveStart(dragRef, expressionItem, false)\n            \"\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            <igx-icon\n              igxPrefix\n              class=\"igx-drag-indicator\"\n              tabindex=\"0\"\n              (focus)=\"\n                dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\n              \"\n              (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n              family=\"default\"\n              name=\"drag_indicator\"\n            >\n            </igx-icon>\n            <span igxPrefix class=\"igx-filter-tree__expression-column\">\n              {{\n                expressionItem.fieldLabel || expressionItem.expression.fieldName\n              }}\n            </span>\n            <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n              {{\n                getConditionFriendlyName(\n                  $safeNavigationMigration(\n                    expressionItem.expression.condition?.name\n                  )\n                )\n              }}\n            </span>\n            @if (!expressionItem.expression.condition?.isUnary) {\n              <span>\n                @if (expressionItem.expression.searchTree) {\n                  <ng-container>\n                    <strong>{{\n                      expressionItem.expression.searchTree.entity\n                    }}</strong\n                    >&nbsp;/\n                    {{\n                      formatReturnFields(expressionItem.expression.searchTree)\n                    }}\n                  </ng-container>\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(expressionItem.expression.fieldName)\n                              : undefined\n                              : this.locale\n                        }}\n                      }\n                    } @else {\n                      @if (getFormatter(expressionItem.expression.fieldName)) {\n                        {{\n                          expressionItem.expression.searchVal\n                            | fieldFormatter\n                              : getFormatter(\n                                  expressionItem.expression.fieldName\n                                )\n                              : expressionItem.expression.conditionName ||\n                                  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              {{\n                getConditionFriendlyName(\n                  $safeNavigationMigration(\n                    expressionItem.expression.condition?.name\n                  )\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 ||\n                          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\n                #addExpressionButton\n                igxDragIgnore\n                igxIconButton=\"outlined\"\n                [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                aria-labelledby=\"add-expression\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"\n                  clickExpressionAdd(addExpressionButton, expressionChip)\n                \"\n                (blur)=\"addExpressionBlur()\"\n              >\n                <igx-icon\n                  id=\"add-expression\"\n                  family=\"default\"\n                  name=\"add\"\n                ></igx-icon>\n              </button>\n              <igx-drop-down\n                #addOptionsDropDown\n                (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\"\n              >\n                <igx-drop-down-item [value]=\"'addCondition'\">\n                  <span>{{\n                    this.resourceStrings.igx_query_builder_add_condition\n                  }}</span>\n                </igx-drop-down-item>\n                <igx-drop-down-item [value]=\"'addGroup'\">\n                  <span>{{\n                    this.resourceStrings.igx_query_builder_add_group\n                  }}</span>\n                </igx-drop-down-item>\n              </igx-drop-down>\n            </div>\n          }\n        </div>\n      }\n    }\n    <div #editingInputsContainer class=\"igx-filter-tree__subquery\">\n      @if (expressionItem.inEditMode) {\n        <div\n          #editingInputs\n          igxDrop\n          (enter)=\"\n            dragService.onChipEnter(editingInputsContainer, expressionItem)\n          \"\n          (over)=\"\n            dragService.onChipEnter(editingInputsContainer, expressionItem)\n          \"\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]=\"\n              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]=\"\n              this.resourceStrings.igx_query_builder_condition_placeholder\n            \"\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(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]=\"selectedField.filters.condition(condition).iconName\"\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\n                ? searchValueTemplate\n                : defaultSearchValueTemplate;\n              context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n            \"\n          >\n          </ng-container>\n\n          <ng-template #defaultSearchValueTemplate>\n            @if (\n              !selectedField ||\n              (selectedField.dataType !== 'date' &&\n                selectedField.dataType !== 'time' &&\n                selectedField.dataType !== 'dateTime')\n            ) {\n              <igx-input-group type=\"box\">\n                <input\n                  #searchValueInput\n                  igxInput\n                  [disabled]=\"isSearchValueInputDisabled()\"\n                  [placeholder]=\"\n                    this.selectedCondition === 'inQuery' ||\n                    this.selectedCondition === 'notInQuery'\n                      ? this.resourceStrings\n                          .igx_query_builder_query_value_placeholder\n                      : this.resourceStrings.igx_query_builder_value_placeholder\n                  \"\n                  [type]=\"\n                    selectedField && selectedField.dataType === 'number'\n                      ? 'number'\n                      : 'text'\n                  \"\n                  [(ngModel)]=\"searchValue.value\"\n                />\n              </igx-input-group>\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                [disabled]=\"isSearchValueInputDisabled()\"\n                [locale]=\"this.locale\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                [placeholder]=\"\n                  this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n              >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n              </igx-date-picker>\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                [disabled]=\"isSearchValueInputDisabled()\"\n                [locale]=\"this.locale\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [inputFormat]=\"\n                  $safeNavigationMigration(\n                    selectedField.editorOptions?.dateTimeFormat\n                  )\n                \"\n                [placeholder]=\"\n                  this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n              >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n              </igx-time-picker>\n            } @else if (\n              selectedField && selectedField.dataType === 'dateTime'\n            ) {\n              <igx-input-group #inputGroup type=\"box\">\n                <input\n                  #input\n                  igxInput\n                  tabindex=\"0\"\n                  [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_datetime_placeholder\n                  \"\n                  [(ngModel)]=\"searchValue.value\"\n                  [disabled]=\"isSearchValueInputDisabled()\"\n                  [locale]=\"this.locale\"\n                  [igxDateTimeEditor]=\"\n                    $safeNavigationMigration(\n                      selectedField.editorOptions?.dateTimeFormat\n                    )\n                  \"\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\n              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\n              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 &&\n          expressionItem.expression.searchTree &&\n          expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n        (expressionItem.inEditMode &&\n          selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n      ) {\n        <ng-container>\n          <igx-query-builder-tree\n            [style.display]=\"\n              expressionItem.inEditMode || expressionItem.expanded\n                ? 'block'\n                : 'none'\n            \"\n            [entities]=\"\n              (this.selectedEntity\n                ? this.selectedEntity.childEntities\n                : entities?.[0]?.childEntities) ??\n              entities ?? []\n            \"\n            [queryBuilder]=\"this.queryBuilder\"\n            [parentExpression]=\"expressionItem\"\n            [expectedReturnField]=\"\n              $safeNavigationMigration(this.selectedField?.field)\n            \"\n            [expressionTree]=\"\n              expressionItem.inEditMode\n                ? (innerQueryNewExpressionTree ??\n                  getExpressionTreeCopy(\n                    expressionItem.expression.searchTree,\n                    true\n                  ))\n                : expressionItem.expression.searchTree\n            \"\n            (inEditModeChange)=\"onInEditModeChanged($event)\"\n            [searchValueTemplate]=\"searchValueTemplate\"\n            [resourceStrings]=\"resourceStrings\"\n          >\n          </igx-query-builder-tree>\n        </ng-container>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template #expressionGroupTemplate let-expressionItem>\n    <div\n      class=\"igx-filter-tree\"\n      (focusout)=\"parentExpression ? null : dragService.onDragFocusOut()\"\n    >\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\n          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\n            #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)=\"\n              onGroupClick(\n                groupContextMenuDropDown,\n                changeGroupButton,\n                expressionItem\n              )\n            \"\n          >\n            <span\n              igxDrop\n              (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n              (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n              (leave)=\"dragService.onChipLeave()\"\n            >\n              {{\n                getOperator(expressionItem) === 0\n                  ? this.resourceStrings.igx_query_builder_and_label\n                  : this.resourceStrings.igx_query_builder_or_label\n              }}\n            </span>\n            <igx-icon\n              family=\"default\"\n              name=\"arrow_drop_down\"\n              role=\"button\"\n            ></igx-icon>\n          </button>\n          <igx-drop-down\n            #groupContextMenuDropDown\n            (selectionChanging)=\"\n              onGroupContextMenuDropDownSelectionChanging($event)\n            \"\n            [width]=\"'fit-content'\"\n          >\n            <igx-drop-down-item [value]=\"'switchCondition'\">\n              {{ getSwitchGroupText(expressionItem) }}\n            </igx-drop-down-item>\n            <igx-drop-down-item\n              [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 (\n            expr of expressionItem?.children;\n            track trackExpressionItem(expr)\n          ) {\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 #currentGroupButtonsContainer class=\"igx-filter-tree__buttons\">\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 (\n    rootGroup ||\n    (!rootGroup &&\n      (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))\n  ) {\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=\"expressionGroupTemplate; context: context(rootGroup)\"\n      ></ng-container>\n    </div>\n  }\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>\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    >\n      {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n    </igx-checkbox>\n  </section>\n</igx-dialog>\n" }]
         }], ctorParameters: () => [], propDecorators: { getClass: [{
                 type: HostBinding,
                 args: ['class']