30002214636

Committed 23 Jul 2026 11:11AM UTC coverage: 90.143% (+0.008%) from 90.135%

Build # 30002214636

Build Type

push

github

Committed by

web-flow

Commit Message

fix(grid): fix zone.onStable patterns broken in zoneless change detection (#17328)

* fix(grid): fix zone.onStable patterns broken in zoneless change detection

* fix(grid): improve zoneless scheduling support

* fix(for-of): recalculate virtual sizes in zoneless mode

* chore(*): remove repeating code

* fix(grid): use afterNextRender for zoneless render scheduling

* fix(grid): improve virtualized keyboard selection handling

* fix(grids): migrate virt & nav to zoneless-compatible scheduling

- Deferred grid work (scroll chunkLoad emit, column autosizing, filter-row
rendering, post-scroll cell activation) relied on NgZone.onStable, which
never emits under provideZonelessChangeDetection. Replace it with a single
runAfterRenderOnce helper built on afterNextRender, and remove the private
ɵNoopNgZone zoneless detection.

- core: add runAfterRenderOnce(injector, cb, phase) central scheduler
- grids: route for_of, grid-base, pivot-grid deferred work through it
- filtering: signal-backed isFilterRowVisible; ResizeObserver-driven chip
  remeasure; explicit notify on column resize
- navigation: notify on any scrolling nav key; subscribe before scroll in
  hierarchical navigation

* fix(grid): refactor navigation callback handling for improved clarity

* fix(grid): remove redundant resize change detection

* fix(grid): remove unnecessary read option from runAfterRenderOnce calls

* fix(grid): simplify summary row index retrieval in tests

* fix(grid): restore navigation callback contract

* fix(grid): remove zoneless scroll detection setup from tests

* fix(grid): waitForChildrenResolved function to include predicate handling

* fix(grid): remove unnecessary 'read' argument from recalcUpdateSizes calls

* test(grid): improve virtualized navigation synchronization

* fix(grid): update wait for grid events methods for improved navigation handling

* test(grids): enable auto detection for deferred render tests

* test(grid): use DOM events in filtering row tests... (continued)

Coverage Stats

14907 of 17373 branches covered (85.81%)

Branch coverage included in aggregate %.

24 of 26 new or added lines in 5 files covered. (92.31%)

6 existing lines in 5 files now uncovered.

29984 of 32427 relevant lines covered (92.47%)

37691.32 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

88.97

/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts

import { AfterViewInit, EventEmitter, LOCALE_ID, Output, TemplateRef, inject, ChangeDetectionStrategy } from '@angular/core';
import { NgTemplateOutlet, NgClass } from '@angular/common';

import {
    Component, Input, ViewChild, ChangeDetectorRef, ViewChildren, QueryList, ElementRef, OnDestroy, HostBinding
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Subject } from 'rxjs';
import { IgxChipComponent } from 'igniteui-angular/chips';
import {
    IQueryBuilderResourceStrings,
    QueryBuilderResourceStringsEN,
    PlatformUtil,
    trackByIdentity,
    GridColumnDataType,
    DataUtil,
    IgxBooleanFilteringOperand,
    IgxDateFilteringOperand,
    IgxDateTimeFilteringOperand,
    IgxNumberFilteringOperand,
    IgxStringFilteringOperand,
    IgxTimeFilteringOperand,
    FilteringLogic,
    IFilteringExpression,
    FilteringExpressionsTree,
    IExpressionTree,
    IFilteringExpressionsTree,
    FieldType,
    EntityType,
    HorizontalAlignment,
    OverlaySettings,
    VerticalAlignment,
    AbsoluteScrollStrategy,
    AutoPositionStrategy,
    ConnectedPositioningStrategy,
    IgxPickerToggleComponent,
    IgxPickerClearComponent,
    getCurrentResourceStrings,
    DEFAULT_LOCALE,
    onResourceChangeHandle,
    IgxDateFormatterPipe,
    isTree
} from 'igniteui-angular/core';
import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';

import {
    IgxButtonDirective,
    IgxDateTimeEditorDirective,
    IgxIconButtonDirective,
    IgxTooltipDirective,
    IgxTooltipTargetDirective,
    IgxDragIgnoreDirective,
    IgxDropDirective
} from 'igniteui-angular/directives';
import { IgxSelectComponent } from 'igniteui-angular/select';
import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
import { IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective } from 'igniteui-angular/input-group';
import { IgxSelectItemComponent } from 'igniteui-angular/select';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IComboSelectionChangingEventArgs, IgxComboComponent, IgxComboHeaderDirective } from 'igniteui-angular/combo';
import { IgxCheckboxComponent, IChangeCheckboxEventArgs } from 'igniteui-angular/checkbox';
import { IgxDialogComponent } from 'igniteui-angular/dialog';
import {
    ISelectionEventArgs,
    IgxDropDownComponent,
    IgxDropDownItemComponent,
    IgxDropDownItemNavigationDirective
} from 'igniteui-angular/drop-down';
import { IgxQueryBuilderComponent } from './query-builder.component';
import { IgxQueryBuilderDragService } from './query-builder-drag.service';
import { ExpressionGroupItem, ExpressionItem, ExpressionOperandItem, IgxFieldFormatterPipe, IgxQueryBuilderSearchValueContext } from './query-builder.common';
import { getCurrentI18n, IResourceChangeEventArgs } from 'igniteui-i18n-core';

const DEFAULT_PIPE_DATE_FORMAT = 'mediumDate';
const DEFAULT_PIPE_TIME_FORMAT = 'mediumTime';
const DEFAULT_PIPE_DATE_TIME_FORMAT = 'medium';
const DEFAULT_PIPE_DIGITS_INFO = '1.0-3';
const DEFAULT_CHIP_FOCUS_DELAY = 50;

/** @hidden */
@Component({
    selector: 'igx-query-builder-tree',
    templateUrl: './query-builder-tree.component.html',
    host: { 'class': 'igx-query-builder-tree' },
    imports: [
        IgxDateFormatterPipe,
        FormsModule,
        IgxButtonDirective,
        IgxCheckboxComponent,
        IgxChipComponent,
        IgxComboComponent,
        IgxComboHeaderDirective,
        IgxDatePickerComponent,
        IgxDateTimeEditorDirective,
        IgxDialogComponent,
        IgxDragIgnoreDirective,
        IgxDropDirective,
        IgxDropDownComponent,
        IgxDropDownItemComponent,
        IgxDropDownItemNavigationDirective,
        IgxFieldFormatterPipe,
        IgxIconButtonDirective,
        IgxIconComponent,
        IgxInputDirective,
        IgxInputGroupComponent,
        IgxPickerClearComponent,
        IgxPickerToggleComponent,
        IgxPrefixDirective,
        IgxSelectComponent,
        IgxSelectItemComponent,
        IgxTimePickerComponent,
        IgxTooltipDirective,
        IgxTooltipTargetDirective,
        NgClass,
        NgTemplateOutlet
    ],
    changeDetection: ChangeDetectionStrategy.Eager,
    providers: [
        IgxQueryBuilderDragService
    ],
})
export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
    public cdr = inject(ChangeDetectorRef);
    public dragService = inject(IgxQueryBuilderDragService);
    protected platform = inject(PlatformUtil);
    private elRef = inject(ElementRef);
    protected _localeId = inject(LOCALE_ID);

    /**
     * @hidden @internal
     */
    public _expressionTree: IExpressionTree;

    /**
     * @hidden @internal
     */
    public _expressionTreeCopy: IExpressionTree;

    /**
     * @hidden @internal
     */
    @HostBinding('class') public get getClass() {
        return `igx-query-builder-tree--level-${this.level}`;
    }

    /**
     * Sets/gets the entities.
     */
    @Input()
    public entities: EntityType[];

    /**
     * Sets/gets the parent query builder component.
     */
    @Input()
    public queryBuilder: IgxQueryBuilderComponent;

    /**
     * Sets/gets the search value template.
     */
    @Input()
    public searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueContext> = null;

    /**
    * Returns the parent expression operand.
    */
    @Input()
    public get parentExpression(): ExpressionOperandItem {
        return this._parentExpression;
    }

    /**
     * Sets the parent expression operand.
     */
    public set parentExpression(value: ExpressionOperandItem) {
        this._parentExpression = value;
    }

    /**
    * Returns the fields.
    */
    public get fields(): FieldType[] {
        if (!this._fields && this.isAdvancedFiltering()) {
            this._fields = this.entities[0].fields;
        }

        return this._fields;
    }

    /**
     * Sets the fields.
     */
    @Input()
    public set fields(fields: FieldType[]) {
        this._fields = fields;

        this._fields = this._fields?.map(f => ({...f, filters: this.getFilters(f), pipeArgs: this.getPipeArgs(f) }));

        if (!this._fields && this.isAdvancedFiltering()) {
            this._fields = this.entities[0].fields;
        }
    }

    /**
    * Returns the expression tree.
    */
    public get expressionTree(): IExpressionTree {
        return this._expressionTree;
    }

    /**
     * Sets the expression tree.
     */
    @Input()
    public set expressionTree(expressionTree: IExpressionTree) {
        this._expressionTree = expressionTree;
        if (!expressionTree) {
            this._selectedEntity = this.isAdvancedFiltering() && this.entities.length === 1 ? this.entities[0] : null;
            this._selectedReturnFields = this._selectedEntity ? this._selectedEntity.fields?.map(f => f.field) : [];
        }

        if (!this._preventInit) {
            this.init();
        }
    }

    /**
     * Gets the `locale` of the query builder.
     * If not set, defaults to application's locale.
     */
    @Input()
    public get locale(): string {
        return this._locale || this._defaultLocale;
    }

    /**
     * Sets the `locale` of the query builder.
     * Expects a valid BCP 47 language tag.
     */
    public set locale(value: string) {
        this._locale = value;
        this._defaultResourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN, false, this._locale);
    }

    /**
     * Sets the resource strings.
     * By default it uses EN resources.
     */
    @Input()
    public set resourceStrings(value: IQueryBuilderResourceStrings) {
        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
    }

    /**
     * Returns the resource strings.
     */
    public get resourceStrings(): IQueryBuilderResourceStrings {
        return this._resourceStrings || this._defaultResourceStrings;
    }

    /**
     * Gets/sets the expected return field.
     */
    @Input() public expectedReturnField: string = null;

    /**
     * Event fired as the expression tree is changed.
     */
    @Output()
    public expressionTreeChange = new EventEmitter<IExpressionTree>();

    /**
     * Event fired if a nested query builder tree is being edited.
     */
    @Output()
    public inEditModeChange = new EventEmitter<ExpressionOperandItem>();

    @ViewChild('entitySelect', { read: IgxSelectComponent })
    protected entitySelect: IgxSelectComponent;

    @ViewChild('editingInputs', { read: ElementRef })
    private editingInputs: ElementRef;

    @ViewChild('returnFieldsCombo', { read: IgxComboComponent })
    private returnFieldsCombo: IgxComboComponent;

    @ViewChild('returnFieldSelect', { read: IgxSelectComponent })
    protected returnFieldSelect: IgxSelectComponent;

    @ViewChild('fieldSelect', { read: IgxSelectComponent })
    private fieldSelect: IgxSelectComponent;

    @ViewChild('conditionSelect', { read: IgxSelectComponent })
    private conditionSelect: IgxSelectComponent;

    @ViewChild('searchValueInput', { read: ElementRef })
    private searchValueInput: ElementRef;

    @ViewChild('picker')
    private picker: IgxDatePickerComponent | IgxTimePickerComponent;

    @ViewChild('addRootAndGroupButton', { read: ElementRef })
    private addRootAndGroupButton: ElementRef;

    @ViewChild('addConditionButton', { read: ElementRef })
    private addConditionButton: ElementRef;

    @ViewChild('entityChangeDialog', { read: IgxDialogComponent })
    private entityChangeDialog: IgxDialogComponent;

    @ViewChild('addOptionsDropDown', { read: IgxDropDownComponent })
    private addExpressionItemDropDown: IgxDropDownComponent;

    @ViewChild('groupContextMenuDropDown', { read: IgxDropDownComponent })
    private groupContextMenuDropDown: IgxDropDownComponent;

    /**
     * @hidden @internal
     */
    @ViewChildren(IgxChipComponent, { read: IgxChipComponent })
    public expressionsChips: QueryList<IgxChipComponent>;

    @ViewChild('editingInputsContainer', { read: ElementRef })
    protected set editingInputsContainer(value: ElementRef) {
        if ((value && !this._editingInputsContainer) ||
            (value && this._editingInputsContainer && this._editingInputsContainer.nativeElement !== value.nativeElement)) {
            requestAnimationFrame(() => {
                this.scrollElementIntoView(value.nativeElement);
            });
        }

        this._editingInputsContainer = value;
    }

    /** @hidden */
    protected get editingInputsContainer(): ElementRef {
        return this._editingInputsContainer;
    }

    @ViewChild('currentGroupButtonsContainer', { read: ElementRef })
    protected set currentGroupButtonsContainer(value: ElementRef) {
        if ((value && !this._currentGroupButtonsContainer) ||
            (value && this._currentGroupButtonsContainer && this._currentGroupButtonsContainer.nativeElement !== value.nativeElement)) {
            requestAnimationFrame(() => {
                this.scrollElementIntoView(value.nativeElement);
            });
        }

        this._currentGroupButtonsContainer = value;
    }

    /** @hidden */
    protected get currentGroupButtonsContainer(): ElementRef {
        return this._currentGroupButtonsContainer;
    }

    @ViewChild('expressionsContainer')
    private expressionsContainer: ElementRef;

    @ViewChildren(IgxQueryBuilderTreeComponent)
    private innerQueries: QueryList<IgxQueryBuilderTreeComponent>;

    /**
     * @hidden @internal
     */
    public innerQueryNewExpressionTree: IExpressionTree;

    /**
     * @hidden @internal
     */
    public rootGroup: ExpressionGroupItem;

    /**
     * @hidden @internal
     */
    public selectedExpressions: ExpressionOperandItem[] = [];

    /**
     * @hidden @internal
     */
    public currentGroup: ExpressionGroupItem;

    /**
     * @hidden @internal
     */
    public contextualGroup: ExpressionGroupItem;

    /**
     * @hidden @internal
     */
    public filteringLogics;

    /**
     * @hidden @internal
     */
    public selectedCondition: string;

    /**
     * @hidden @internal
     */
    public searchValue: { value: any } = { value: null };

    /**
     * @hidden @internal
     */
    public prevFocusedExpression: ExpressionOperandItem;

    /**
     * @hidden @internal
     */
    public initialOperator = 0;

    /**
     * @hidden @internal
     */
    public returnFieldSelectOverlaySettings: OverlaySettings = {
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    /**
     * @hidden @internal
     */
    public entitySelectOverlaySettings: OverlaySettings = {
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    /**
     * @hidden @internal
     */
    public fieldSelectOverlaySettings: OverlaySettings = {
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    /**
     * @hidden @internal
     */
    public conditionSelectOverlaySettings: OverlaySettings = {
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    /**
     * @hidden @internal
     */
    public addExpressionDropDownOverlaySettings: OverlaySettings = {
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    /**
     * @hidden @internal
     */
    public groupContextMenuDropDownOverlaySettings: OverlaySettings = {
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: false,
        closeOnOutsideClick: true
    };

    private destroy$ = new Subject<any>();
    private _timeoutId: any;
    private _lastFocusedChipIndex: number;
    private _focusDelay = DEFAULT_CHIP_FOCUS_DELAY;
    private _parentExpression: ExpressionOperandItem;
    private _selectedEntity: EntityType;
    private _selectedReturnFields: string | string[];
    private _selectedField: FieldType;
    private _editingInputsContainer: ElementRef;
    private _currentGroupButtonsContainer: ElementRef;
    private _addModeExpression: ExpressionOperandItem;
    private _editedExpression: ExpressionOperandItem;
    private _preventInit = false;
    private _prevFocusedContainer: ElementRef;
    private _expandedExpressions: IFilteringExpression[] = [];
    private _fields: FieldType[];
    private _locale;
    private _defaultLocale;
    private _entityNewValue: EntityType;
    private _resourceStrings = null;
    private _defaultResourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN);

    /**
     * Returns if the select entity dropdown at the root level is disabled after the initial selection.
     */
    public get disableEntityChange(): boolean {

        return !this.parentExpression && this.selectedEntity ? this.queryBuilder.disableEntityChange : false;
    }

    /**
     * Returns if the fields combo at the root level is disabled.
     */
    public get disableReturnFieldsChange(): boolean {

        return !this.selectedEntity || this.queryBuilder.disableReturnFieldsChange;
    }

    /**
     * Returns the current level.
     */
    public get level(): number {
        let parent = this.elRef.nativeElement.parentElement;
        let _level = 0;
        while (parent) {
            if (parent.localName === 'igx-query-builder-tree') {
                _level++;
            }
            parent = parent.parentElement;
        }
        return _level;
    }

    /** @hidden */
    protected isAdvancedFiltering(): boolean {
        return (this.entities?.length === 1 && !this.entities[0]?.name) ||
            this.entities?.find(e => e.childEntities?.length > 0) !== undefined ||
            (this.entities?.length > 0 && this.queryBuilder?.entities?.length > 0 && this.entities !== this.queryBuilder?.entities);
    }

    /** @hidden */
    protected isHierarchicalNestedQuery(): boolean {
        return this.queryBuilder.entities !== this.entities
    }

    /** @hidden */
    protected isSearchValueInputDisabled(): boolean {
        return !this.selectedField ||
            !this.selectedCondition ||
            (this.selectedField &&
                (this.selectedField.filters.condition(this.selectedCondition).isUnary ||
                    this.selectedField.filters.condition(this.selectedCondition).isNestedQuery));
    }

    constructor() {
        this.initLocale();
        this.dragService.register(this, this.elRef);
    }

    /**
     * @hidden @internal
     */
    public ngAfterViewInit(): void {
        if (this.isAdvancedFiltering() && this.entities?.length === 1) {
            this.selectedEntity = this.entities[0].name;
            if (this._selectedEntity.fields.find(f => f.field === this.expectedReturnField)) {
                this._selectedReturnFields = [this.expectedReturnField];
            }
        }

        // Trigger additional change detection cycle
        this.cdr.detectChanges();
    }

    /**
     * @hidden @internal
     */
    public ngOnDestroy(): void {
        this.destroy$.next(true);
        this.destroy$.complete();
    }

    /**
     * @hidden @internal
     */
    public set selectedEntity(value: string) {
        this._selectedEntity = this.entities?.find(el => el.name === value);
    }

    /**
     * @hidden @internal
     */
    public get selectedEntity(): EntityType {
        return this._selectedEntity;
    }

    /**
     * @hidden @internal
     */
    public onEntitySelectChanging(event: ISelectionEventArgs) {
        event.cancel = true;
        this._entityNewValue = event.newSelection.value;
        if (event.oldSelection.value && this.queryBuilder.showEntityChangeDialog) {
            this.entityChangeDialog.open();
        } else {
            this.onEntityChangeConfirm();
        }
    }

    /**
     * @hidden
     */
    public onShowEntityChangeDialogChange(eventArgs: IChangeCheckboxEventArgs) {
        this.queryBuilder.showEntityChangeDialog = !eventArgs.checked;
    }

    /**
     * @hidden
     */
    public onEntityChangeCancel() {
        this.entityChangeDialog.close();
        this.entitySelect.close();
        this._entityNewValue = null;
    }

    /**
     * @hidden
     */
    public onEntityChangeConfirm() {
        if (this._parentExpression) {
            this._expressionTree = this.createExpressionTreeFromGroupItem(this.createExpressionGroupItem(this._expressionTree));
        }

        this._selectedEntity = this._entityNewValue;
        if (!this._selectedEntity.fields) {
            this._selectedEntity.fields = [];
        }
        this.fields = this._entityNewValue ? this._entityNewValue.fields : [];

        if (this._selectedEntity.fields.find(f => f.field === this.expectedReturnField)) {
            this._selectedReturnFields = [this.expectedReturnField];
        } else {
            this._selectedReturnFields = this.parentExpression ? [] : this._entityNewValue.fields?.map(f => f.field);
        }

        if (this._expressionTree) {
            this._expressionTree.entity = this._entityNewValue.name;

            const returnFields = Array.isArray(this._selectedReturnFields) ? this._selectedReturnFields : [this._selectedReturnFields];
            this._expressionTree.returnFields = this.fields.length === returnFields.length ? ['*'] : returnFields;

            this._expressionTree.filteringOperands = [];

            this._editedExpression = null;
            if (!this.parentExpression) {
                this.expressionTreeChange.emit(this._expressionTree);
            }

            this.rootGroup = null;
            this.currentGroup = this.rootGroup;
        }

        this._selectedField = null;
        this.selectedCondition = null;
        this.searchValue.value = null;

        this.entityChangeDialog.close();
        this.entitySelect.close();

        this._entityNewValue = null;
        this.innerQueryNewExpressionTree = null;

        this.initExpressionTree(this._selectedEntity.name, this.selectedReturnFields);
    }

    /**
     * @hidden @internal
     */
    public set selectedReturnFields(value: string[]) {
        if (this._selectedReturnFields !== value) {
            this._selectedReturnFields = value;

            if (this._expressionTree && !this.parentExpression) {
                this._expressionTree.returnFields = value.length === this.fields.length ? ['*'] : value;
                this.expressionTreeChange.emit(this._expressionTree);
            }
        }
    }

    /**
     * @hidden @internal
     */
    public get selectedReturnFields(): string[] {
        if (typeof this._selectedReturnFields == 'string') {
            return [this._selectedReturnFields];
        }
        return this._selectedReturnFields;
    }

    /**
     * @hidden @internal
     */
    public set selectedField(value: FieldType) {
        const oldValue = this._selectedField;

        if (this._selectedField !== value) {
            this._selectedField = value;
            if (this._selectedField && !this._selectedField.dataType) {
                this._selectedField.filters = this.getFilters(this._selectedField);
            }

            this.selectDefaultCondition();
            if (oldValue && this._selectedField && this._selectedField.dataType !== oldValue.dataType) {
                this.searchValue.value = null;
                this.cdr.detectChanges();
            }
        }
    }

    /**
     * @hidden @internal
     */
    public get selectedField(): FieldType {
        return this._selectedField;
    }

    /**
     * @hidden @internal
     *
     * used by the grid
     */
    public get isContextMenuVisible(): boolean {
        return !this.groupContextMenuDropDown.collapsed;
    }

    /**
     * @hidden @internal
     */
    public get hasEditedExpression(): boolean {
        return this._editedExpression !== undefined && this._editedExpression !== null;
    }

    /**
     * @hidden @internal
     */
    public addCondition(parent: ExpressionGroupItem, afterExpression?: ExpressionOperandItem, isUIInteraction?: boolean) {
        this.cancelOperandAdd();

        const operandItem = new ExpressionOperandItem({
            fieldName: null,
            condition: null,
            conditionName: null,
            ignoreCase: true,
            searchVal: null
        }, parent);

        const groupItem = new ExpressionGroupItem(this.getOperator(null) ?? FilteringLogic.And, parent);
        this.contextualGroup = groupItem;
        this.initialOperator = null;

        this._lastFocusedChipIndex = this._lastFocusedChipIndex === undefined ? -1 : this._lastFocusedChipIndex;

        if (parent) {
            if (afterExpression) {
                const index = parent.children.indexOf(afterExpression);
                parent.children.splice(index + 1, 0, operandItem);
            } else {
                parent.children.push(operandItem);
            }
            this._lastFocusedChipIndex++;
        } else {
            this.rootGroup = groupItem;
            operandItem.parent = groupItem;
            this.rootGroup.children.push(operandItem);
            this._lastFocusedChipIndex = 0;
        }

        this._focusDelay = 250;

        if (isUIInteraction && !afterExpression) {
            this._lastFocusedChipIndex = this.expressionsChips.length;
            this._focusDelay = DEFAULT_CHIP_FOCUS_DELAY;
        }

        this.enterExpressionEdit(operandItem);
    }

    /**
     * @hidden @internal
     */
    public addReverseGroup(parent?: ExpressionGroupItem, afterExpression?: ExpressionItem) {
        parent = parent ?? this.rootGroup;

        if (parent.operator === FilteringLogic.And) {
            this.addGroup(FilteringLogic.Or, parent, afterExpression);
        } else {
            this.addGroup(FilteringLogic.And, parent, afterExpression);
        }
    }

    /**
     * @hidden @internal
     */
    public endGroup(groupItem: ExpressionGroupItem) {
        this.currentGroup = groupItem.parent;
    }

    /**
     * @hidden @internal
     */
    public commitExpression() {
        this.commitOperandEdit();
        this.focusEditedExpressionChip();
    }

    /**
     * @hidden @internal
     */
    public discardExpression(expressionItem?: ExpressionOperandItem) {
        this.cancelOperandEdit();
        if (expressionItem && expressionItem.expression.fieldName) {
            this.focusEditedExpressionChip();
        }
    }

    /**
     * @hidden @internal
     */
    public commitOperandEdit() {
        const actualSearchValue = this.searchValue.value;
        if (this._editedExpression) {
            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(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();
                this._editedExpression.expression.searchTree = this.getExpressionTreeCopy(innerQuery.expressionTree);
                const returnFields = innerQuery.selectedReturnFields.length > 0 ?
                                        innerQuery.selectedReturnFields :
                                        [innerQuery.fields[0].field];
                this._editedExpression.expression.searchTree.returnFields = returnFields;
            } else {
                this._editedExpression.expression.searchTree = null;
            }
            this.innerQueryNewExpressionTree = null;

            if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary || this.selectedField.filters.condition(this.selectedCondition)?.isNestedQuery) {
                this._editedExpression.expression.searchVal = null;
            }

            this._editedExpression.inEditMode = false;
            this._editedExpression = null;
        }

        if (this.selectedReturnFields.length === 0) {
            this.selectedReturnFields = this.fields.map(f => f.field);
        }

        this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup, this.selectedEntity?.name, this.selectedReturnFields);
        if (!this.parentExpression) {
            this.expressionTreeChange.emit(this._expressionTree);
        }
    }

    /**
     * @hidden @internal
     */
    public cancelOperandAdd() {
        if (this._addModeExpression) {
            this._addModeExpression.inAddMode = false;
            this._addModeExpression = null;
        }
    }

    /**
     * @hidden @internal
     */
    public deleteItem = (expressionItem: ExpressionItem, skipEmit: boolean = false) => {
        if (!expressionItem.parent) {
            this.rootGroup = null;
            this.currentGroup = null;
            //this._expressionTree = null;
            return;
        }

        if (expressionItem === this.currentGroup) {
            this.currentGroup = this.currentGroup.parent;
        }

        const children = expressionItem.parent.children;
        const index = children.indexOf(expressionItem);
        children.splice(index, 1);
        const entity = this.expressionTree ? this.expressionTree.entity : null;
        const returnFields = this.expressionTree ? this.expressionTree.returnFields : null;
        this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup, entity, returnFields); // TODO: don't recreate if not necessary

        if (!children.length) {
            this.deleteItem(expressionItem.parent, true);
        }

        if (!this.parentExpression && !skipEmit) {
            this.expressionTreeChange.emit(this._expressionTree);
        }
    }

    /**
     * @hidden @internal
     */
    public cancelOperandEdit() {
        if (this.innerQueries) {
            const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
            if (innerQuery) {
                if (innerQuery._editedExpression) {
                    innerQuery.cancelOperandEdit();
                }

                innerQuery.expressionTree = this.getExpressionTreeCopy(this._editedExpression.expression.searchTree);
                this.innerQueryNewExpressionTree = null;
            }
        }

        if (this._editedExpression) {
            this._editedExpression.inEditMode = false;

            if (!this._editedExpression.expression.fieldName) {
                this.deleteItem(this._editedExpression);
            }

            this._editedExpression = null;
        }

        if (!this.expressionTree && this.contextualGroup) {
            this.initialOperator = this.contextualGroup.operator;
        }
    }

    /**
     * @hidden @internal
     */
    public operandCanBeCommitted(): boolean {
        const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
        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
            );
    }

    /**
     * @hidden @internal
     */
    public canCommitCurrentState(): boolean {
        const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
        if (innerQuery) {
            return this.selectedReturnFields?.length > 0 && innerQuery.canCommitCurrentState();
        } else {
            return this.selectedReturnFields?.length > 0 &&
                (
                    (!this._editedExpression) || // no edited expr
                    (this._editedExpression && !this.selectedField) || // empty edited expr
                    (this._editedExpression && this.operandCanBeCommitted() === true) // valid edited expr
                );
        }
    }

    /**
     * @hidden @internal
     */
    public commitCurrentState(): void {
        const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
        if (innerQuery) {
            innerQuery.commitCurrentState();
        }

        if (this._editedExpression) {
            if (this.selectedField) {
                this.commitOperandEdit();
            } else {
                this.deleteItem(this._editedExpression);
                this._editedExpression = null;
            }
        }
    }

    /**
     * @hidden @internal
     */
    public exitEditAddMode(shouldPreventInit = false) {
        if (!this._editedExpression) {
            return;
        }

        this.exitOperandEdit();
        this.cancelOperandAdd();

        if (shouldPreventInit) {
            this._preventInit = true;
        }
    }

    /**
     * @hidden @internal
     *
     * used by the grid
     */
    public exitOperandEdit() {
        if (!this._editedExpression) {
            return;
        }

        if (this.operandCanBeCommitted()) {
            this.commitOperandEdit();
        } else {
            this.cancelOperandEdit();
        }
    }

    /**
     * @hidden @internal
     */
    public isExpressionGroup(expression: ExpressionItem): boolean {
        return expression instanceof ExpressionGroupItem;
    }

    /**
     * @hidden @internal
     */
    public onExpressionFocus(expressionItem: ExpressionOperandItem) {
        if (this.prevFocusedExpression) {
            this.prevFocusedExpression.focused = false;
        }
        expressionItem.focused = true;
        this.prevFocusedExpression = expressionItem;
    }

    /**
     * @hidden @internal
     */
    public onExpressionBlur(event, expressionItem: ExpressionOperandItem) {
        if (this._prevFocusedContainer && this._prevFocusedContainer !== event.target.closest('.igx-filter-tree__expression-item')) {
            expressionItem.focused = false;
        }
        this._prevFocusedContainer = event.target.closest('.igx-filter-tree__expression-item');
    }

    /**
     * @hidden @internal
     */
    public onChipRemove(expressionItem: ExpressionItem) {
        this.exitEditAddMode();
        this.deleteItem(expressionItem);
    }

    /**
     * @hidden @internal
     */
    public focusChipAfterDrag = (index: number) => {
        this._lastFocusedChipIndex = index;
        this.focusEditedExpressionChip();
    }
    /**
     * @hidden @internal
     */
    public addExpressionBlur() {
        if (this.prevFocusedExpression) {
            this.prevFocusedExpression.focused = false;
        }
        if (this.addExpressionItemDropDown && !this.addExpressionItemDropDown.collapsed) {
            this.addExpressionItemDropDown.close();
        }
    }

    /**
     * @hidden @internal
     */
    public onChipClick(expressionItem: ExpressionOperandItem, chip: IgxChipComponent) {
        this.enterExpressionEdit(expressionItem, chip);
    }

    /**
     * @hidden @internal
     */
    public enterExpressionEdit(expressionItem: ExpressionOperandItem, chip?: IgxChipComponent) {
        this.exitEditAddMode(true);
        this.cdr.detectChanges();
        this._lastFocusedChipIndex = chip ? this.expressionsChips.toArray().findIndex(expr => expr === chip) : this._lastFocusedChipIndex;
        this.enterEditMode(expressionItem);
    }


    /**
     * @hidden @internal
     */
    public clickExpressionAdd(targetButton: HTMLElement, chip: IgxChipComponent) {
        this.exitEditAddMode(true);
        this.cdr.detectChanges();
        this._lastFocusedChipIndex = this.expressionsChips.toArray().findIndex(expr => expr === chip);
        this.openExpressionAddDialog(targetButton);
    }

    /**
     * @hidden @internal
     */
    public openExpressionAddDialog(targetButton: HTMLElement) {
        this.addExpressionDropDownOverlaySettings.target = targetButton;
        this.addExpressionDropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy({
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Left,
            verticalStartPoint: VerticalAlignment.Bottom
        });

        this.addExpressionItemDropDown.open(this.addExpressionDropDownOverlaySettings);
    }

    /**
     * @hidden @internal
     */
    public enterExpressionAdd(event: ISelectionEventArgs, expressionItem: ExpressionOperandItem) {
        if (this._addModeExpression) {
            this._addModeExpression.inAddMode = false;
        }

        if (this.parentExpression) {
            this.inEditModeChange.emit(this.parentExpression);
        }

        const parent = expressionItem.parent ?? this.rootGroup;
        requestAnimationFrame(() => {
            if (event.newSelection.value === 'addCondition') {
                this.addCondition(parent, expressionItem);
            } else if (event.newSelection.value === 'addGroup') {
                this.addReverseGroup(parent, expressionItem);
            }
            expressionItem.inAddMode = true;
            this._addModeExpression = expressionItem;
        })
    }

    /**
     * @hidden @internal
     */
    public enterEditMode(expressionItem: ExpressionOperandItem) {
        if (this._editedExpression) {
            this._editedExpression.inEditMode = false;
        }

        if (this.parentExpression) {
            this.inEditModeChange.emit(this.parentExpression);
        }

        expressionItem.hovered = false;
        this.fields = this.selectedEntity ? this.selectedEntity.fields : null;
        this.selectedField =
            expressionItem.expression.fieldName ?
                this.fields?.find(field => field.field === expressionItem.expression.fieldName)
                : null;
        this.selectedCondition =
            expressionItem.expression.condition ?
                expressionItem.expression.condition.name :
                null;
        this.searchValue.value = expressionItem.expression.searchVal instanceof Set ?
            Array.from(expressionItem.expression.searchVal) :
            expressionItem.expression.searchVal;

        expressionItem.inEditMode = true;
        this._editedExpression = expressionItem;
        this.cdr.detectChanges();

        this.entitySelectOverlaySettings.target = this.entitySelect.getEditElement();
        this.entitySelectOverlaySettings.excludeFromOutsideClick = [this.entitySelect.getEditElement() as HTMLElement];
        this.entitySelectOverlaySettings.positionStrategy = new AutoPositionStrategy();

        if (this.returnFieldSelect) {
            this.returnFieldSelectOverlaySettings.target = this.returnFieldSelect.getEditElement();
            this.returnFieldSelectOverlaySettings.excludeFromOutsideClick = [this.returnFieldSelect.getEditElement() as HTMLElement];
            this.returnFieldSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
        }
        if (this.fieldSelect) {
            this.fieldSelectOverlaySettings.target = this.fieldSelect.getEditElement();
            this.fieldSelectOverlaySettings.excludeFromOutsideClick = [this.fieldSelect.getEditElement() as HTMLElement];
            this.fieldSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
        }
        if (this.conditionSelect) {
            this.conditionSelectOverlaySettings.target = this.conditionSelect.getEditElement();
            this.conditionSelectOverlaySettings.excludeFromOutsideClick = [this.conditionSelect.getEditElement() as HTMLElement];
            this.conditionSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
        }

        if (!this.selectedField) {
            this.fieldSelect.input.nativeElement.focus();
        } else if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary) {
            this.conditionSelect?.input.nativeElement.focus();
        } else {
            const input = this.searchValueInput?.nativeElement || this.picker?.getEditElement();
            input?.focus();
        }

        (this.editingInputs?.nativeElement.parentElement as HTMLElement)?.scrollIntoView({ block: "nearest", inline: "nearest" });
    }

    /**
     * @hidden @internal
     */
    public onConditionSelectChanging(event: ISelectionEventArgs) {
        event.cancel = true;
        this.selectedCondition = event.newSelection.value;
        this.conditionSelect.close();
        this.cdr.detectChanges();
    }

    /**
     * @hidden @internal
     */
    public onKeyDown(eventArgs: KeyboardEvent) {
        eventArgs.stopPropagation();
    }

    /**
     * @hidden @internal
     */
    public onGroupClick(groupContextMenuDropDown: any, targetButton: HTMLButtonElement, groupItem: ExpressionGroupItem) {
        this.exitEditAddMode();
        this.cdr.detectChanges();

        this.groupContextMenuDropDown = groupContextMenuDropDown;
        this.groupContextMenuDropDownOverlaySettings.target = targetButton;
        this.groupContextMenuDropDownOverlaySettings.positionStrategy = new ConnectedPositioningStrategy({
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Left,
            verticalStartPoint: VerticalAlignment.Bottom
        });

        if (groupContextMenuDropDown.collapsed) {
            this.contextualGroup = groupItem;
            groupContextMenuDropDown.open(this.groupContextMenuDropDownOverlaySettings);
        } else {
            groupContextMenuDropDown.close();
        }
    }

    /**
     * @hidden @internal
     */
    public getOperator(expressionItem: any) {
        // if (!expressionItem && !this.expressionTree && !this.initialOperator) {
        //     this.initialOperator = 0;
        // }

        const operator = expressionItem ?
            expressionItem.operator :
            this.expressionTree ?
                this.expressionTree.operator :
                this.initialOperator;
        return operator;
    }

    /**
     * @hidden @internal
     */
    public getSwitchGroupText(expressionItem: any) {
        const operator = this.getOperator(expressionItem);
        const condition = operator === FilteringLogic.Or ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label
        return this.resourceStrings.igx_query_builder_switch_group.replace('{0}', condition.toUpperCase());
    }

    /**
     * @hidden @internal
     */
    public onGroupContextMenuDropDownSelectionChanging(event: ISelectionEventArgs) {
        event.cancel = true;

        if (event.newSelection.value === 'switchCondition') {
            const newOperator = (!this.expressionTree ? this.initialOperator : (this.contextualGroup ?? this._expressionTree).operator) === 0 ? 1 : 0;
            this.selectFilteringLogic(newOperator);
        } else if (event.newSelection.value === 'ungroup') {
            this.ungroup();
        }

        this.groupContextMenuDropDown.close();
    }

    /**
     * @hidden @internal
     */
    public ungroup() {
        const selectedGroup = this.contextualGroup;
        const parent = selectedGroup.parent;
        if (parent) {
            const index = parent.children.indexOf(selectedGroup);
            parent.children.splice(index, 1, ...selectedGroup.children);

            for (const expr of selectedGroup.children) {
                expr.parent = parent;
            }
        }
        this.commitOperandEdit();
    }

    /**
     * @hidden @internal
     */
    public selectFilteringLogic(index: number) {
        if (!this.expressionTree) {
            this.initialOperator = index;
            return;
        }

        if (this.contextualGroup) {
            this.contextualGroup.operator = index as FilteringLogic;
            this.commitOperandEdit();
        } else if (this.expressionTree) {
            this._expressionTree.operator = index as FilteringLogic;
        }

        this.initialOperator = null;
    }

    /**
     * @hidden @internal
     */
    public getConditionFriendlyName(name: string): string {
        // As we have an 'In' condition already used in ESF to search in a Set, we add the 'Query' suffix to the newly introduced nested query condition names.
        // So instead of in/notIn we end up with 'inQuery'/'notInQuery', hence removing the suffix from the friendly name.
        return this.resourceStrings[`igx_query_builder_filter_${name?.replace('Query', '')}`] || name;
    }

    /**
     * @hidden @internal
     */
    public isDate(value: any) {
        return value instanceof Date;
    }

    /**
     * @hidden @internal
     */
    public invokeClick(eventArgs: KeyboardEvent) {
        if (!this.dragService.dropGhostExpression && this.platform.isActivationKey(eventArgs)) {
            eventArgs.preventDefault();
            (eventArgs.currentTarget as HTMLElement).click();
        }
    }

    /**
     * @hidden @internal
     */
    public openPicker(args: KeyboardEvent) {
        if (this.platform.isActivationKey(args)) {
            args.preventDefault();
            this.picker.open();
        }
    }

    /**
     * @hidden @internal
     */
    public getConditionList(): string[] {
        if (!this.selectedField) return [];

        if (!this.selectedField.filters) {
            this.selectedField.filters = this.getFilters(this.selectedField);
        }

        if ((this.isAdvancedFiltering() && !this.entities[0].childEntities) ||
            (this.isHierarchicalNestedQuery() && this.selectedEntity.name && !this.selectedEntity.childEntities)) {
            return this.selectedField.filters.conditionList();
        }

        return this.selectedField.filters.extendedConditionList();
    }

    /**
     * @hidden @internal
     */
    public getFormatter(field: string) {
        return this.fields?.find(el => el.field === field)?.formatter;
    }

    /**
     * @hidden @internal
     */
    public getFormat(field: string) {
        return this.fields?.find(el => el.field === field).pipeArgs.format;
    }

    /**
     * @hidden @internal
     *
     * used by the grid
     */
    public setAddButtonFocus() {
        if (this.addRootAndGroupButton) {
            this.addRootAndGroupButton.nativeElement.focus();
        } else if (this.addConditionButton) {
            this.addConditionButton.nativeElement.focus();
        }
    }

    /**
     * @hidden @internal
     */
    public context(expression: ExpressionItem, afterExpression?: ExpressionItem) {
        return {
            $implicit: expression,
            afterExpression
        };
    }

    public formatReturnFields(innerTree: IFilteringExpressionsTree) {
        const returnFields = innerTree.returnFields;
        let text = returnFields.join(', ');
        const innerTreeEntity = this.entities?.find(el => el.name === innerTree.entity);
        if (returnFields.length === innerTreeEntity?.fields.length) {
            text = this.resourceStrings.igx_query_builder_all_fields;
        } else {
            text = returnFields.join(', ');
            text = text.length > 25 ? text.substring(0, 25) + ' ...' : text;
        }
        return text;
    }

    public isInEditMode(): boolean {
        return !this.parentExpression || (this.parentExpression && this.parentExpression.inEditMode);
    }

    public onInEditModeChanged(expressionItem: ExpressionOperandItem) {
        if (!expressionItem.inEditMode) {
            this.enterExpressionEdit(expressionItem);
        }
    }

    public getExpressionTreeCopy(expressionTree: IExpressionTree, shouldAssignInnerQueryExprTree?: boolean): IExpressionTree {
        if (!expressionTree) {
            return null;
        }

        const exprTreeCopy = new FilteringExpressionsTree(expressionTree.operator, expressionTree.fieldName, expressionTree.entity, expressionTree.returnFields);
        exprTreeCopy.filteringOperands = [];

        expressionTree.filteringOperands.forEach(o => isTree(o) ? exprTreeCopy.filteringOperands.push(this.getExpressionTreeCopy(o)) : exprTreeCopy.filteringOperands.push(o));

        if (!this.innerQueryNewExpressionTree && shouldAssignInnerQueryExprTree) {
            this.innerQueryNewExpressionTree = exprTreeCopy;
        }

        return exprTreeCopy;
    }

    public onSelectAllClicked() {
        if (
            (this._selectedReturnFields.length > 0 && this._selectedReturnFields.length < this._selectedEntity.fields.length) ||
            this._selectedReturnFields.length == this._selectedEntity.fields.length
        ) {
            this.returnFieldsCombo.deselectAllItems();
        } else {
            this.returnFieldsCombo.selectAllItems();
        }
    }

    public onReturnFieldSelectChanging(event: IComboSelectionChangingEventArgs | ISelectionEventArgs) {
        let newSelection = [];
        if (Array.isArray(event.newSelection)) {
            newSelection = event.newSelection.map(item => item.field)
        } else {
            newSelection.push(event.newSelection.value);
            this._selectedReturnFields = newSelection;
        }

        this.initExpressionTree(this.selectedEntity.name, newSelection);
    }

    public initExpressionTree(selectedEntityName: string, selectedReturnFields: string[]) {
        if (!this._expressionTree) {
            this._expressionTree = this.createExpressionTreeFromGroupItem(new ExpressionGroupItem(FilteringLogic.And, this.rootGroup), selectedEntityName, selectedReturnFields);
        }

        if (!this.parentExpression) {
            this.expressionTreeChange.emit(this._expressionTree);
        }
    }

    public getSearchValueTemplateContext(defaultSearchValueTemplate): IgxQueryBuilderSearchValueContext {
        const ctx = {
            $implicit: this.searchValue,
            selectedField: this.selectedField,
            selectedCondition: this.selectedCondition,
            defaultSearchValueTemplate: defaultSearchValueTemplate
        };
        return ctx;
    }

    private getPipeArgs(field: FieldType) {
        let pipeArgs = {...field.pipeArgs};
        if (!pipeArgs) {
            pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO };
        }

        if (!pipeArgs.format) {
            pipeArgs.format = field.dataType === GridColumnDataType.Time ?
                DEFAULT_PIPE_TIME_FORMAT : field.dataType === GridColumnDataType.DateTime ?
                    DEFAULT_PIPE_DATE_TIME_FORMAT : DEFAULT_PIPE_DATE_FORMAT;
        }

        return pipeArgs;
    }

    private selectDefaultCondition() {
        if (this.selectedField && this.selectedField.filters) {
            this.selectedCondition = this.selectedField.filters.conditionList().indexOf('equals') >= 0 ? 'equals' : this.selectedField.filters.conditionList()[0];
        }
    }

    private getFilters(field: FieldType) {
        if (!field.filters) {
            switch (field.dataType) {
                case GridColumnDataType.Boolean:
                    return IgxBooleanFilteringOperand.instance();
                case GridColumnDataType.Number:
                case GridColumnDataType.Currency:
                case GridColumnDataType.Percent:
                    return IgxNumberFilteringOperand.instance();
                case GridColumnDataType.Date:
                    return IgxDateFilteringOperand.instance();
                case GridColumnDataType.Time:
                    return IgxTimeFilteringOperand.instance();
                case GridColumnDataType.DateTime:
                    return IgxDateTimeFilteringOperand.instance();
                case GridColumnDataType.String:
                default:
                    return IgxStringFilteringOperand.instance();
            }
        } else {
            return field.filters;
        }
    }


    private addGroup(operator: FilteringLogic, parent?: ExpressionGroupItem, afterExpression?: ExpressionItem) {
        this.cancelOperandAdd();

        const groupItem = new ExpressionGroupItem(operator, parent);

        if (parent) {
            if (afterExpression) {
                const index = parent.children.indexOf(afterExpression);
                parent.children.splice(index + 1, 0, groupItem);
            } else {
                parent.children.push(groupItem);
            }
        } else {
            this.rootGroup = groupItem;
        }

        this.addCondition(groupItem);
        this.currentGroup = groupItem;
    }

    private createExpressionGroupItem(expressionTree: IExpressionTree, parent?: ExpressionGroupItem, entityName?: string): ExpressionGroupItem {
        let groupItem: ExpressionGroupItem;
        if (expressionTree) {
            groupItem = new ExpressionGroupItem(expressionTree.operator, parent);
            if (!expressionTree.filteringOperands) {
                return groupItem;
            }

            for (let i = 0; i < expressionTree.filteringOperands.length; i++) {
                const expr = expressionTree.filteringOperands[i];

                if (isTree(expr)) {
                    groupItem.children.push(this.createExpressionGroupItem(expr, groupItem, expressionTree.entity));
                } else {
                    const filteringExpr = expr as IFilteringExpression;
                    const exprCopy: IFilteringExpression = {
                        fieldName: filteringExpr.fieldName,
                        condition: filteringExpr.condition,
                        conditionName: filteringExpr.condition?.name || filteringExpr.conditionName,
                        searchVal: filteringExpr.searchVal,
                        searchTree: filteringExpr.searchTree,
                        ignoreCase: filteringExpr.ignoreCase
                    };
                    const operandItem = new ExpressionOperandItem(exprCopy, groupItem);
                    const field = this.fields?.find(el => el.field === filteringExpr.fieldName);
                    operandItem.fieldLabel = field?.label || field?.header || field?.field;
                    if (this._expandedExpressions.filter(e => e.searchTree == operandItem.expression.searchTree).length > 0) {
                        operandItem.expanded = true;
                    }
                    groupItem.children.push(operandItem);
                }
            }


            if (expressionTree.entity) {
                entityName = expressionTree.entity;
            }
            const entity = this.entities?.find(el => el.name === entityName);
            if (entity) {
                this.fields = entity.fields;
            }

            this._selectedEntity = this.entities?.find(el => el.name === entityName);
            this._selectedReturnFields =
                !expressionTree.returnFields || expressionTree.returnFields.includes('*') || expressionTree.returnFields.includes('All') || expressionTree.returnFields.length === 0
                    ? this.fields?.map(f => f.field)
                    : this.fields?.filter(f => expressionTree.returnFields.indexOf(f.field) >= 0).map(f => f.field);
        }
        return groupItem;
    }

    private createExpressionTreeFromGroupItem(groupItem: ExpressionGroupItem, entity?: string, returnFields?: string[]): FilteringExpressionsTree {
        if (!groupItem) {
            return null;
        }

        const expressionTree = new FilteringExpressionsTree(groupItem.operator, undefined, entity, returnFields);

        for (let i = 0; i < groupItem.children.length; i++) {
            const item = groupItem.children[i];

            if (item instanceof ExpressionGroupItem) {
                const subTree = this.createExpressionTreeFromGroupItem((item as ExpressionGroupItem), entity, returnFields);
                expressionTree.filteringOperands.push(subTree);
            } else {
                expressionTree.filteringOperands.push((item as ExpressionOperandItem).expression);
            }
        }

        return expressionTree;
    }

    private scrollElementIntoView(target: HTMLElement) {
        const container = this.expressionsContainer.nativeElement;
        const targetOffset = target.offsetTop - container.offsetTop;
        const delta = 10;

        if (container.scrollTop + delta > targetOffset) {
            container.scrollTop = targetOffset - delta;
        } else if (container.scrollTop + container.clientHeight < targetOffset + target.offsetHeight + delta) {
            container.scrollTop = targetOffset + target.offsetHeight + delta - container.clientHeight;
        }
    }

    private focusEditedExpressionChip() {
        if (this._timeoutId) {
            clearTimeout(this._timeoutId);
        }

        this._timeoutId = setTimeout(() => {
            if (this._lastFocusedChipIndex != -1) {
                //Sort the expression chip list.
                //If there was a recent drag&drop and the tree hasn't rerendered(child query), they will be unordered
                const sortedChips = this.expressionsChips.toArray().sort(function (a, b) {
                    if (a === b) return 0;
                    if (a.chipArea.nativeElement.compareDocumentPosition(b.chipArea.nativeElement) & 2) {
                        // b comes before a
                        return 1;
                    }
                    return -1;
                });
                const chipElement = sortedChips[this._lastFocusedChipIndex]?.nativeElement;
                if (chipElement) {
                    chipElement.focus();
                }
                this._lastFocusedChipIndex = -1;
                this._focusDelay = DEFAULT_CHIP_FOCUS_DELAY;
            }
        }, this._focusDelay);
    }

    private init() {
        this.cancelOperandAdd();
        this.cancelOperandEdit();

        // Ignore values of certain properties for the comparison
        const propsToIgnore = ['parent', 'hovered', 'ignoreCase', 'inEditMode', 'inAddMode'];
        const propsReplacer = function replacer(key, value) {
            if (propsToIgnore.indexOf(key) >= 0) {
                return undefined;
            } else {
                return value;
            }
        };

        // Skip root being recreated if the same
        const newRootGroup = this.createExpressionGroupItem(this.expressionTree);
        if (JSON.stringify(this.rootGroup, propsReplacer) !== JSON.stringify(newRootGroup, propsReplacer)) {
            this.rootGroup = this.createExpressionGroupItem(this.expressionTree);
            this.currentGroup = this.rootGroup;
        }

        if (this.rootGroup?.children?.length == 0) {
            this.rootGroup = null;
            this.currentGroup = null;
        }
    }

    private initLocale() {
        this._defaultLocale = getCurrentI18n();
        this._locale = this._localeId !== DEFAULT_LOCALE ? this._localeId : this._locale;
        onResourceChangeHandle(this.destroy$, this.onResourceChange, this);
    }

    private onResourceChange(args: CustomEvent<IResourceChangeEventArgs>) {
        this._defaultLocale = args.detail.newLocale;
        if (!this._locale) {
            this._defaultResourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN, false);
        }
    }

    /** rootGroup is recreated after clicking Apply, which sets new expressionTree and calls init()*/
    protected trackExpressionItem = trackByIdentity;
}

IgniteUI / igniteui-angular / 30002214636

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous