igniteui-angular 19.0.6 → 19.1.0-beta.0

package/fesm2022/igniteui-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, Output, HostBinding, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChildren, ContentChild, RendererStyleFlags2, Pipe, ViewChild, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
+import { Injectable, Directive, Input, HostListener, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, Output, HostBinding, Self, Optional, booleanAttribute, SecurityContext, Component, ContentChildren, ContentChild, RendererStyleFlags2, Pipe, ViewChild, DestroyRef, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { NgModel, NgControl, FormControlName, NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, FormGroup, FormsModule, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, takeUntil as takeUntil$1, pipe } from 'rxjs';
+import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, sampleTime, filter as filter$1, tap as tap$1, takeUntil as takeUntil$1, pipe } from 'rxjs';
 import { takeUntil, filter, throttle, throttleTime, first as first$2, startWith, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, DOCUMENT, NgTemplateOutlet, NgIf, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault, NgFor, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
 import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
@@ -789,13 +789,7 @@ function getComponentCssSizeVar(size) {
  * @returns string encoded using the encodeURI function.
  */
 function normalizeURI(path) {
-    return path?.split('/').map(encodeURI).join('/');
-}
-function getComponentTheme(el) {
-    return globalThis.window
-        ?.getComputedStyle(el)
-        .getPropertyValue('--theme')
-        .trim();
+    return path.split('/').map(encodeURI).join('/');
 }
 
 var PagingError;
@@ -1409,14 +1403,13 @@ class ExportUtilities {
         return !ExportUtilities.isSpecialData(dataEntry) ? Array.from(keys) : ['Column 1'];
     }
     static saveBlobToFile(blob, fileName) {
-        const doc = globalThis.document;
-        const a = doc.createElement('a');
+        const a = document.createElement('a');
         const url = window.URL.createObjectURL(blob);
         a.download = fileName;
         a.href = url;
-        doc.body.appendChild(a);
+        document.body.appendChild(a);
         a.click();
-        doc.body.removeChild(a);
+        document.body.removeChild(a);
         window.URL.revokeObjectURL(url);
     }
     static stringToArrayBuffer(s) {
@@ -1514,7 +1507,7 @@ var FilteringExpressionsTreeType;
 /* marshalByValue */
 /* jsonAPIPlainObject */
 class FilteringExpressionsTree {
-    constructor(operator, fieldName) {
+    constructor(operator, fieldName, entity, returnFields) {
         /**
          * Sets/gets the filtering operands.
          * ```typescript
@@ -1537,6 +1530,8 @@ class FilteringExpressionsTree {
          */
         this.filteringOperands = [];
         this.operator = operator;
+        this.entity = entity;
+        this.returnFields = returnFields;
         this.fieldName = fieldName;
     }
     /**
@@ -4539,7 +4534,7 @@ class WorksheetDataDictionary {
     }
     getContext() {
         if (!this._context) {
-            const canvas = globalThis.document?.createElement('canvas');
+            const canvas = document.createElement('canvas');
             this._context = canvas.getContext('2d');
             this._context.font = WorksheetDataDictionary.DEFAULT_FONT;
         }
@@ -7327,41 +7322,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }]
         }] });
 
-class ThemeToken {
-    constructor(t) {
-        this.t = t;
-        this.document = inject(DOCUMENT);
-        const globalTheme = globalThis.window
-            ?.getComputedStyle(this.document.body)
-            .getPropertyValue("--ig-theme")
-            .trim() || 'material';
-        const _theme = t ?? globalTheme;
-        this.subject = new BehaviorSubject(_theme);
-    }
-    onChange(callback) {
-        return this.subject.subscribe(callback);
-    }
-    set(theme) {
-        this.subject.next(theme);
-    }
-    get theme() {
-        return this.subject.getValue();
-    }
-    get preferToken() {
-        return !!this.t;
-    }
-}
-const THEME_TOKEN = new InjectionToken('ThemeToken', {
-    providedIn: 'root',
-    factory: () => new ThemeToken()
-});
-const Theme = /*@__PURE__*/ mkenum({
-    Material: "material",
-    Fluent: "fluent",
-    Bootstrap: "bootstrap",
-    IndigoDesign: "indigo",
-});
-
 // Export services
 
 /** @hidden */
@@ -9742,12 +9702,10 @@ const IndigoIcons = new Map(Object.entries({
  * ```
  */
 class IgxIconService {
-    constructor(_sanitizer, _httpClient, _platformUtil, _themeToken, _destroyRef, document) {
+    constructor(_sanitizer, _httpClient, _platformUtil, document) {
         this._sanitizer = _sanitizer;
         this._httpClient = _httpClient;
         this._platformUtil = _platformUtil;
-        this._themeToken = _themeToken;
-        this._destroyRef = _destroyRef;
         this.document = document;
         this._defaultFamily = {
             name: "material",
@@ -9759,10 +9717,6 @@ class IgxIconService {
         this._iconLoaded = new Subject();
         this.iconLoaded = this._iconLoaded.asObservable();
         this.setFamily(this._defaultFamily.name, this._defaultFamily.meta);
-        const { unsubscribe } = this._themeToken?.onChange((theme) => {
-            this.setRefsByTheme(theme);
-        });
-        this._destroyRef.onDestroy(() => unsubscribe);
         if (this._platformUtil?.isBrowser) {
             this._domParser = new DOMParser();
             for (const [name, svg] of IndigoIcons) {
@@ -9815,13 +9769,12 @@ class IgxIconService {
     }
     /** @hidden @internal */
     setRefsByTheme(theme) {
-        for (const { alias, target } of iconReferences) {
-            const external = this._iconRefs.get(alias.family)?.get(alias.name)?.external;
-            const _ref = this._iconRefs.get('default')?.get(alias.name) ?? {};
-            const _target = target.get(theme) ?? target.get('default');
-            const icon = target.get(theme) ?? target.get('default');
-            const overwrite = !external && !(JSON.stringify(_ref) === JSON.stringify(_target));
-            this._setIconRef(alias.name, alias.family, icon, overwrite);
+        if (this.theme !== theme) {
+            this.theme = theme;
+            for (const { alias, target } of iconReferences) {
+                const icon = target.get(theme) ?? target.get('default');
+                this.addIconRef(alias.name, alias.family, icon);
+            }
         }
     }
     /**
@@ -9847,14 +9800,6 @@ class IgxIconService {
             this.setIconRef(name, family, icon);
         }
     }
-    _setIconRef(name, family, icon, overwrite = false) {
-        if (overwrite) {
-            this.setIconRef(name, family, {
-                ...icon,
-                external: false
-            });
-        }
-    }
     /**
      *  Similar to addIconRef, but always sets the icon reference meta for an icon in a meta family.
      * ```typescript
@@ -9867,9 +9812,8 @@ class IgxIconService {
             familyRef = new Map();
             this._iconRefs.set(family, familyRef);
         }
-        const external = icon.external ?? true;
         const familyType = this.familyType(icon?.family);
-        familyRef.set(name, { ...icon, type: icon.type ?? familyType, external });
+        familyRef.set(name, { ...icon, type: icon.type ?? familyType });
         this._iconLoaded.next({ name, family });
     }
     /**
@@ -10008,7 +9952,7 @@ class IgxIconService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconService, deps: [{ token: i1$1.DomSanitizer, optional: true }, { token: i2.HttpClient, optional: true }, { token: PlatformUtil, optional: true }, { token: THEME_TOKEN, optional: true }, { token: DestroyRef, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconService, deps: [{ token: i1$1.DomSanitizer, optional: true }, { token: i2.HttpClient, optional: true }, { token: PlatformUtil, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconService, decorators: [{
@@ -10022,16 +9966,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     type: Optional
                 }] }, { type: PlatformUtil, decorators: [{
                     type: Optional
-                }] }, { type: ThemeToken, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THEME_TOKEN]
-                }] }, { type: i0.DestroyRef, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DestroyRef]
                 }] }, { type: Document, decorators: [{
                     type: Optional
                 }, {
@@ -10039,6 +9973,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     args: [DOCUMENT]
                 }] }] });
 
+const Theme = /*@__PURE__*/ mkenum({
+    Material: "material",
+    Fluent: "fluent",
+    Bootstrap: "bootstrap",
+    IndigoDesign: "indigo",
+});
+class ThemeService {
+    constructor(document) {
+        this.document = document;
+        this.theme$ = new BehaviorSubject("material");
+        this.theme$.asObservable().subscribe((value) => {
+            this.globalTheme = value;
+        });
+        this.init();
+    }
+    init() {
+        const theme = globalThis.window
+            ?.getComputedStyle(this.document.body)
+            .getPropertyValue("--ig-theme")
+            .trim();
+        if (theme !== "") {
+            this.theme$.next(theme);
+        }
+    }
+    getComponentTheme(el) {
+        return globalThis.window
+            ?.getComputedStyle(el.nativeElement)
+            .getPropertyValue('--theme')
+            .trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ThemeService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
 /**
  * Icon provides a way to include material icons to markup
  *
@@ -10088,13 +10065,28 @@ class IgxIconComponent {
     get getInactive() {
         return !this.active;
     }
-    constructor(el, iconService, ref) {
+    constructor(el, iconService, themeService, ref) {
         this.el = el;
         this.iconService = iconService;
+        this.themeService = themeService;
         this.ref = ref;
         this._destroy$ = new Subject();
         this._userClasses = new Set();
         this._iconClasses = new Set();
+        /**
+         *  This allows you to disable the `aria-hidden` attribute. By default it's applied.
+         *
+         * @example
+         * ```typescript
+         * @ViewChild("MyIcon") public icon: IgxIconComponent;
+         * constructor(private cdRef:ChangeDetectorRef) {}
+         * ngAfterViewInit() {
+         *     this.icon.ariaHidden = false;
+         *     this.cdRef.detectChanges();
+         * }
+         * ```
+         */
+        this.ariaHidden = true;
         /**
          * An @Input property that allows you to disable the `active` property. By default it's applied.
          *
@@ -10105,6 +10097,7 @@ class IgxIconComponent {
          */
         this.active = true;
         this.family = this.iconService.defaultFamily.name;
+        this.iconService.setRefsByTheme(this.themeService.globalTheme);
         this.iconService.iconLoaded
             .pipe(filter((e) => e.name === this.name && e.family === this.family), takeUntil(this._destroy$))
             .subscribe(() => {
@@ -10217,15 +10210,18 @@ class IgxIconComponent {
         }
         this.addIconClass(className);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconComponent, deps: [{ token: i0.ElementRef }, { token: IgxIconService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IgxIconComponent, isStandalone: true, selector: "igx-icon", inputs: { family: "family", name: "name", active: ["active", "active", booleanAttribute] }, host: { properties: { "class": "this.elementClasses", "class.igx-icon--inactive": "this.getInactive" } }, usesOnChanges: true, ngImport: i0, template: "<!-- This is only here for backwards compatibility in case  -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n    <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n    @case (\"liga\") {{{ iconRef.name }}}\n\n    @case (\"svg\") {\n        <div [innerHTML]=\"getSvg\"></div>\n    }\n}\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconComponent, deps: [{ token: i0.ElementRef }, { token: IgxIconService }, { token: ThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IgxIconComponent, isStandalone: true, selector: "igx-icon", inputs: { family: "family", name: "name", active: ["active", "active", booleanAttribute] }, host: { properties: { "class": "this.elementClasses", "attr.aria-hidden": "this.ariaHidden", "class.igx-icon--inactive": "this.getInactive" } }, usesOnChanges: true, ngImport: i0, template: "<!-- This is only here for backwards compatibility in case  -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n    <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n    @case (\"liga\") {{{ iconRef.name }}}\n\n    @case (\"svg\") {\n        <div [innerHTML]=\"getSvg\"></div>\n    }\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconComponent, decorators: [{
             type: Component,
             args: [{ selector: "igx-icon", imports: [NgTemplateOutlet, NgIf], template: "<!-- This is only here for backwards compatibility in case  -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n    <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n    @case (\"liga\") {{{ iconRef.name }}}\n\n    @case (\"svg\") {\n        <div [innerHTML]=\"getSvg\"></div>\n    }\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxIconService }, { type: i0.ChangeDetectorRef }], propDecorators: { elementClasses: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxIconService }, { type: ThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { elementClasses: [{
                 type: HostBinding,
                 args: ["class"]
+            }], ariaHidden: [{
+                type: HostBinding,
+                args: ["attr.aria-hidden"]
             }], getInactive: [{
                 type: HostBinding,
                 args: ["class.igx-icon--inactive"]
@@ -10351,13 +10347,13 @@ class IgxInputGroupComponent {
     get theme() {
         return this._theme;
     }
-    constructor(element, _inputGroupType, document, platform, cdr, themeToken) {
+    constructor(element, _inputGroupType, document, platform, cdr, themeService) {
         this.element = element;
         this._inputGroupType = _inputGroupType;
         this.document = document;
         this.platform = platform;
         this.cdr = cdr;
-        this.themeToken = themeToken;
+        this.themeService = themeService;
         /**
          * Property that enables/disables the auto-generated class of the `IgxInputGroupComponent`.
          * By default applied the class is applied.
@@ -10398,18 +10394,15 @@ class IgxInputGroupComponent {
         this.suppressInputAutofocus = false;
         /** @hidden */
         this.hasWarning = false;
-        this._destroyRef = inject(DestroyRef);
         this._type = null;
         this._filled = false;
+        this._theme$ = new Subject();
         this._resourceStrings = getCurrentResourceStrings(InputResourceStringsEN);
-        this._theme = this.themeToken.theme;
-        const { unsubscribe } = this.themeToken.onChange((theme) => {
-            if (this._theme !== theme) {
-                this._theme = theme;
-                this.cdr.detectChanges();
-            }
+        this._theme = this.themeService.globalTheme;
+        this._subscription = this._theme$.asObservable().subscribe(value => {
+            this._theme = value;
+            this.cdr.detectChanges();
         });
-        this._destroyRef.onDestroy(() => unsubscribe);
     }
     /** @hidden */
     onClick(event) {
@@ -10587,20 +10580,19 @@ class IgxInputGroupComponent {
     set filled(val) {
         this._filled = val;
     }
-    setComponentTheme() {
-        if (!this.themeToken.preferToken) {
-            const theme = getComponentTheme(this.element.nativeElement);
-            if (theme && theme !== this._theme) {
-                this.theme = theme;
-                this.cdr.markForCheck();
-            }
+    /** @hidden @internal */
+    ngAfterViewChecked() {
+        const theme = this.themeService.getComponentTheme(this.element);
+        if (theme) {
+            this._theme$.next(theme);
+            this.cdr.markForCheck();
         }
     }
     /** @hidden @internal */
-    ngAfterViewInit() {
-        this.setComponentTheme();
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxInputGroupComponent, deps: [{ token: i0.ElementRef }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: DOCUMENT }, { token: PlatformUtil }, { token: i0.ChangeDetectorRef }, { token: THEME_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxInputGroupComponent, deps: [{ token: i0.ElementRef }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: DOCUMENT }, { token: PlatformUtil }, { token: i0.ChangeDetectorRef }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxInputGroupComponent, isStandalone: true, selector: "igx-input-group", inputs: { resourceStrings: "resourceStrings", suppressInputAutofocus: ["suppressInputAutofocus", "suppressInputAutofocus", booleanAttribute], type: "type", theme: "theme" }, host: { listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)" }, properties: { "class.igx-input-group": "this.defaultClass", "class.igx-input-group--placeholder": "this.hasPlaceholder", "class.igx-input-group--required": "this.isRequired", "class.igx-input-group--focused": "this.isFocused", "class.igx-input-group--disabled": "this.disabled", "class.igx-input-group--warning": "this.hasWarning", "class.igx-input-group--valid": "this.validClass", "class.igx-input-group--invalid": "this.invalidClass", "class.igx-input-group--filled": "this.isFilled", "class.igx-input-group--textarea-group": "this.textAreaClass", "class.igx-input-group--prefixed": "this.hasPrefixes", "class.igx-input-group--suffixed": "this.hasSuffixes", "class.igx-input-group--box": "this.isTypeBox", "class.igx-input-group--file": "this.isFileType", "class.igx-input-group--border": "this.isTypeBorder", "class.igx-input-group--fluent": "this.isTypeFluent", "class.igx-input-group--bootstrap": "this.isTypeBootstrap", "class.igx-input-group--indigo": "this.isTypeIndigo", "class.igx-input-group--search": "this.isTypeSearch" } }, providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], queries: [{ propertyName: "input", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective, static: true }, { propertyName: "hints", predicate: IgxHintDirective, read: IgxHintDirective }, { propertyName: "_prefixes", predicate: IgxPrefixDirective, descendants: true, read: IgxPrefixDirective }, { propertyName: "_suffixes", predicate: IgxSuffixDirective, descendants: true, read: IgxSuffixDirective }], ngImport: i0, template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-input-group__upload-button\">\n        <button\n            igxButton=\"contained\"\n            type=\"button\"\n            (click)=\"uploadButtonHandler()\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__line\" *ngIf=\"hasBorder\"></div>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__line\" *ngIf=\"hasBorder\"></div>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxInputGroupComponent, decorators: [{
@@ -10614,10 +10606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: PlatformUtil }, { type: i0.ChangeDetectorRef }, { type: ThemeToken, decorators: [{
-                    type: Inject,
-                    args: [THEME_TOKEN]
-                }] }], propDecorators: { resourceStrings: [{
+                }] }, { type: PlatformUtil }, { type: i0.ChangeDetectorRef }, { type: ThemeService }], propDecorators: { resourceStrings: [{
                 type: Input
             }], defaultClass: [{
                 type: HostBinding,
@@ -11379,7 +11368,7 @@ class IgxDragDirective {
     set ghostLeft(pageX) {
         if (this.ghostElement) {
             // We need to take into account marginLeft, since top style does not include margin, but pageX includes the margin.
-            const ghostMarginLeft = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
+            const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
             // If ghost host is defined it needs to be taken into account.
             this.ghostElement.style.left = (pageX - ghostMarginLeft - this._ghostHostX) + 'px';
         }
@@ -11392,7 +11381,7 @@ class IgxDragDirective {
     set ghostTop(pageY) {
         if (this.ghostElement) {
             // We need to take into account marginTop, since top style does not include margin, but pageY includes the margin.
-            const ghostMarginTop = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
+            const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
             // If ghost host is defined it needs to be taken into account.
             this.ghostElement.style.top = (pageY - ghostMarginTop - this._ghostHostY) + 'px';
         }
@@ -11403,16 +11392,16 @@ class IgxDragDirective {
         }
     }
     get windowScrollTop() {
-        return this.document.documentElement.scrollTop || window.scrollY;
+        return document.documentElement.scrollTop || window.scrollY;
     }
     get windowScrollLeft() {
-        return this.document.documentElement.scrollLeft || window.scrollX;
+        return document.documentElement.scrollLeft || window.scrollX;
     }
     get windowScrollHeight() {
-        return this.document.documentElement.scrollHeight;
+        return document.documentElement.scrollHeight;
     }
     get windowScrollWidth() {
-        return this.document.documentElement.scrollWidth;
+        return document.documentElement.scrollWidth;
     }
     /**
      * Sets the offset of the dragged element relative to the mouse in pixels.
@@ -11671,7 +11660,6 @@ class IgxDragDirective {
         this._scrollContainerStepMs = 10;
         this._scrollContainerThreshold = 25;
         this._containerScrollIntervalId = null;
-        this.document = inject(DOCUMENT);
     }
     /**
      * @hidden
@@ -11719,13 +11707,13 @@ class IgxDragDirective {
             });
             // We should bind to document events only once when there are no pointer events.
             if (!this.pointerEventsEnabled && this.touchEventsEnabled) {
-                fromEvent(this.document.defaultView, 'touchmove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));
-                fromEvent(this.document.defaultView, 'touchend').pipe(takeUntil(this._destroy))
+                fromEvent(document.defaultView, 'touchmove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));
+                fromEvent(document.defaultView, 'touchend').pipe(takeUntil(this._destroy))
                     .subscribe((res) => this.onPointerUp(res));
             }
             else if (!this.pointerEventsEnabled) {
-                fromEvent(this.document.defaultView, 'mousemove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));
-                fromEvent(this.document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
+                fromEvent(document.defaultView, 'mousemove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));
+                fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
                     .subscribe((res) => this.onPointerUp(res));
             }
             this.element.nativeElement.addEventListener('transitionend', this.onTransitionEnd.bind(this));
@@ -12084,9 +12072,9 @@ class IgxDragDirective {
                 ghostReattached = true;
                 this.ghostHost.appendChild(this.ghostElement);
             }
-            else if (!this.ghostHost && !Array.from(this.document.body.children).includes(this.ghostElement)) {
+            else if (!this.ghostHost && !Array.from(document.body.children).includes(this.ghostElement)) {
                 ghostReattached = true;
-                this.document.body.appendChild(this.ghostElement);
+                document.body.appendChild(this.ghostElement);
             }
             if (ghostReattached) {
                 this.ghostElement.setPointerCapture(this._pointerDownId);
@@ -12224,10 +12212,10 @@ class IgxDragDirective {
             this.ghostHost.appendChild(this.ghostElement);
         }
         else {
-            this.document.body.appendChild(this.ghostElement);
+            document.body.appendChild(this.ghostElement);
         }
-        const ghostMarginLeft = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
-        const ghostMarginTop = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
+        const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
+        const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
         this.ghostElement.style.left = (this._ghostStartX - ghostMarginLeft + totalMovedX - this._ghostHostX) + 'px';
         this.ghostElement.style.top = (this._ghostStartY - ghostMarginTop + totalMovedY - this._ghostHostY) + 'px';
         if (this.pointerEventsEnabled) {
@@ -12336,14 +12324,14 @@ class IgxDragDirective {
         // using window.pageXOffset for IE9 compatibility
         const viewPortX = pageX - window.pageXOffset;
         const viewPortY = pageY - window.pageYOffset;
-        if (this.document['msElementsFromPoint']) {
+        if (document['msElementsFromPoint']) {
             // Edge and IE special snowflakes
-            const elements = this.document['msElementsFromPoint'](viewPortX, viewPortY);
+            const elements = document['msElementsFromPoint'](viewPortX, viewPortY);
             return elements === null ? [] : elements;
         }
         else {
             // Other browsers like Chrome, Firefox, Opera
-            return this.document.elementsFromPoint(viewPortX, viewPortY);
+            return document.elementsFromPoint(viewPortX, viewPortY);
         }
     }
     /**
@@ -12396,8 +12384,8 @@ class IgxDragDirective {
     getGhostHostBaseOffsetX() {
         if (!this.ghostHost)
             return 0;
-        const ghostPosition = this.document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
-        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === this.document.body) {
+        const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {
             return 0;
         }
         else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {
@@ -12408,8 +12396,8 @@ class IgxDragDirective {
     getGhostHostBaseOffsetY() {
         if (!this.ghostHost)
             return 0;
-        const ghostPosition = this.document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
-        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === this.document.body) {
+        const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {
             return 0;
         }
         else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {
@@ -12453,8 +12441,8 @@ class IgxDragDirective {
             let yDir = scrollDir == DragScrollDirection$1.UP ? -1 : (scrollDir == DragScrollDirection$1.DOWN ? 1 : 0);
             if (!this.scrollContainer) {
                 // Cap scrolling so we don't scroll past the window max scroll position.
-                const maxScrollX = this._originalScrollContainerWidth - this.document.documentElement.clientWidth;
-                const maxScrollY = this._originalScrollContainerHeight - this.document.documentElement.clientHeight;
+                const maxScrollX = this._originalScrollContainerWidth - document.documentElement.clientWidth;
+                const maxScrollY = this._originalScrollContainerHeight - document.documentElement.clientHeight;
                 xDir = (this.windowScrollLeft <= 0 && xDir < 0) || (this.windowScrollLeft >= maxScrollX && xDir > 0) ? 0 : xDir;
                 yDir = (this.windowScrollTop <= 0 && yDir < 0) || (this.windowScrollTop >= maxScrollY && yDir > 0) ? 0 : yDir;
             }
@@ -16754,10 +16742,10 @@ class IgxCheckboxComponent {
             this._onChangeCallback(this._checked);
         }
     }
-    constructor(cdr, renderer, themeToken, ngControl) {
+    constructor(cdr, renderer, themeService, ngControl) {
         this.cdr = cdr;
         this.renderer = renderer;
-        this.themeToken = themeToken;
+        this.themeService = themeService;
         this.ngControl = ngControl;
         /**
          * An event that is emitted after the checkbox state is changed.
@@ -16970,27 +16958,17 @@ class IgxCheckboxComponent {
          */
         this._required = false;
         this.elRef = inject(ElementRef);
+        this._theme$ = new Subject();
         this.destroyRef = inject(DestroyRef);
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
-        this.theme = this.themeToken.theme;
-        const { unsubscribe } = this.themeToken.onChange((theme) => {
-            if (this.theme !== theme) {
-                this.theme = theme;
-                this.cdr.detectChanges();
-            }
+        this.theme = this.themeService.globalTheme;
+        this._subscription = this._theme$.asObservable().subscribe(value => {
+            this.theme = value;
+            this.cdr.detectChanges();
         });
-        this.destroyRef.onDestroy(() => unsubscribe);
-    }
-    setComponentTheme() {
-        if (!this.themeToken.preferToken) {
-            const theme = getComponentTheme(this.elRef.nativeElement);
-            if (theme && theme !== this.theme) {
-                this.theme = theme;
-                this.cdr.markForCheck();
-            }
-        }
+        this.destroyRef.onDestroy(() => this._subscription.unsubscribe());
     }
     /**
      * @hidden
@@ -17004,7 +16982,11 @@ class IgxCheckboxComponent {
                 this.cdr.detectChanges();
             }
         }
-        this.setComponentTheme();
+        const theme = this.themeService.getComponentTheme(this.elRef);
+        if (theme) {
+            this._theme$.next(theme);
+            this.cdr.markForCheck();
+        }
     }
     /** @hidden @internal */
     onKeyUp(event) {
@@ -17125,7 +17107,7 @@ class IgxCheckboxComponent {
             this.invalid = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: THEME_TOKEN }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: ThemeService }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], required: ["required", "required", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id", "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--material": "this.material", "class.igx-checkbox--indigo": "this.indigo", "class.igx-checkbox--bootstrap": "this.bootstrap", "class.igx-checkbox--fluent": "this.fluent", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [{
                 provide: EDITOR_PROVIDER,
                 useExisting: IgxCheckboxComponent,
@@ -17139,10 +17121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                             useExisting: IgxCheckboxComponent,
                             multi: true
                         }], preserveWhitespaces: false, imports: [IgxRippleDirective], template: "<input #checkbox class=\"igx-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"ariaChecked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (change)=\"_onCheckboxChange($event)\"\n    (blur)=\"onBlur()\" />\n\n<div\n    igxRipple\n    igxRippleTarget=\".igx-checkbox__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\"\n    class=\"igx-checkbox__composite-wrapper\"\n>\n    <span #label class=\"igx-checkbox__composite\">\n        @if (theme === 'indigo') {\n            <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <rect width=\"18\" height=\"4\" x=\"2\" y=\"9\" rx=\"1.85\"/>\n                <path d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"/>\n            </svg>\n        } @else {\n            <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path d=\"M4.1,12.7 9,17.6 20.3,6.3\"/>\n            </svg>\n        }\n    </span>\n\n    <div class=\"igx-checkbox__ripple\"></div>\n</div>\n\n<span #placeholderLabel\n    [class]=\"labelClass\"\n    [id]=\"labelId\">\n    <ng-content></ng-content>\n</span>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: ThemeToken, decorators: [{
-                    type: Inject,
-                    args: [THEME_TOKEN]
-                }] }, { type: i4.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: ThemeService }, { type: i4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -21235,18 +21214,31 @@ class IgxFilteringOperand {
             }, {
                 name: 'in',
                 isUnary: false,
-                iconName: 'filter_in',
-                hidden: true,
+                isNestedQuery: true,
+                iconName: 'in',
                 logic: (target, searchVal) => this.findValueInSet(target, searchVal)
+            },
+            {
+                name: 'notIn',
+                isUnary: false,
+                isNestedQuery: true,
+                iconName: 'not-in',
+                logic: (target, searchVal) => !this.findValueInSet(target, searchVal)
             }];
     }
     static instance() {
         return this._instance || (this._instance = new this());
     }
     /**
-     * Returns an array of names of the conditions which are visible in the UI
+     * Returns an array of names of the conditions which are visible in the filtering UI
      */
     conditionList() {
+        return this.operations.filter(f => !f.hidden && !f.isNestedQuery).map((element) => element.name);
+    }
+    /**
+     * Returns an array of names of the conditions which are visible in the UI, including "In" and "Not In", allowing the creation of sub-queries.
+     */
+    extendedConditionList() {
         return this.operations.filter(f => !f.hidden).map((element) => element.name);
     }
     /**
@@ -21281,7 +21273,7 @@ class IgxFilteringOperand {
 class IgxBooleanFilteringOperand extends IgxFilteringOperand {
     constructor() {
         super();
-        this.operations = [{
+        const newOperations = [{
                 name: 'all',
                 isUnary: true,
                 iconName: 'filter_all',
@@ -21306,7 +21298,8 @@ class IgxBooleanFilteringOperand extends IgxFilteringOperand {
                 isUnary: true,
                 iconName: 'filter_not_empty',
                 logic: (target) => target !== null && target !== undefined
-            }].concat(this.operations);
+            }];
+        this.operations = newOperations.concat(this.operations);
     }
 }
 /* blazorCSSuppress */
@@ -21317,7 +21310,7 @@ class IgxBooleanFilteringOperand extends IgxFilteringOperand {
 class IgxBaseDateTimeFilteringOperand extends IgxFilteringOperand {
     constructor() {
         super();
-        this.operations = [{
+        const newOperations = [{
                 name: 'empty',
                 isUnary: true,
                 iconName: 'filter_empty',
@@ -21327,7 +21320,8 @@ class IgxBaseDateTimeFilteringOperand extends IgxFilteringOperand {
                 isUnary: true,
                 iconName: 'filter_not_empty',
                 logic: (target) => target !== null && target !== undefined
-            }].concat(this.operations);
+            }];
+        this.operations = newOperations.concat(this.operations);
     }
     /**
      * Splits a Date object into parts
@@ -21370,6 +21364,9 @@ class IgxBaseDateTimeFilteringOperand extends IgxFilteringOperand {
         }
         return res;
     }
+    /**
+     * @hidden
+     */
     findValueInSet(target, searchVal) {
         if (!target) {
             return false;
@@ -21391,7 +21388,7 @@ class IgxBaseDateTimeFilteringOperand extends IgxFilteringOperand {
 class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand {
     constructor() {
         super();
-        this.operations = [{
+        const newOperations = [{
                 name: 'equals',
                 isUnary: false,
                 iconName: 'filter_equal',
@@ -21569,7 +21566,8 @@ class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand {
                     const now = IgxDateFilteringOperand.getDateParts(new Date(), 'y');
                     return d.year === now.year + 1;
                 }
-            }].concat(this.operations);
+            }];
+        this.operations = newOperations.concat(this.operations);
     }
     findValueInSet(target, searchVal) {
         if (!target) {
@@ -21583,7 +21581,7 @@ class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand {
 class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {
     constructor() {
         super();
-        this.operations = [{
+        const newOperations = [{
                 name: 'equals',
                 isUnary: false,
                 iconName: 'filter_equal',
@@ -21767,14 +21765,15 @@ class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {
                     const now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'y');
                     return d.year === now.year + 1;
                 }
-            }].concat(this.operations);
+            }];
+        this.operations = newOperations.concat(this.operations);
     }
 }
 /* blazorCSSuppress */
 class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {
     constructor() {
         super();
-        this.operations = [{
+        const newOperations = [{
                 name: 'at',
                 isUnary: false,
                 iconName: 'filter_equal',
@@ -21862,8 +21861,12 @@ class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {
                         targetn.hours > search.hours ? true : targetn.hours === search.hours && targetn.minutes > search.minutes ?
                         true : targetn.hours === search.hours && targetn.minutes === search.minutes && targetn.seconds > search.seconds;
                 }
-            }].concat(this.operations);
+            }];
+        this.operations = newOperations.concat(this.operations);
     }
+    /**
+     * @hidden
+     */
     findValueInSet(target, searchVal) {
         if (!target) {
             return false;
@@ -21880,7 +21883,7 @@ class IgxTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {
 class IgxNumberFilteringOperand extends IgxFilteringOperand {
     constructor() {
         super();
-        this.operations = [{
+        const newOperations = [{
                 name: 'equals',
                 isUnary: false,
                 iconName: 'filter_equal',
@@ -21920,7 +21923,8 @@ class IgxNumberFilteringOperand extends IgxFilteringOperand {
                 isUnary: true,
                 iconName: 'filter_not_empty',
                 logic: (target) => target !== null && target !== undefined && !isNaN(target)
-            }].concat(this.operations);
+            }];
+        this.operations = newOperations.concat(this.operations);
     }
 }
 /* blazorCSSuppress */
@@ -21932,7 +21936,7 @@ class IgxNumberFilteringOperand extends IgxFilteringOperand {
 class IgxStringFilteringOperand extends IgxFilteringOperand {
     constructor() {
         super();
-        this.operations = [{
+        const newOperations = [{
                 name: 'contains',
                 isUnary: false,
                 iconName: 'filter_contains',
@@ -21996,7 +22000,8 @@ class IgxStringFilteringOperand extends IgxFilteringOperand {
                 isUnary: true,
                 iconName: 'filter_not_empty',
                 logic: (target) => target !== null && target !== undefined && target.length > 0
-            }].concat(this.operations);
+            }];
+        this.operations = newOperations.concat(this.operations);
     }
     /**
      * Applies case sensitivity on strings if provided
@@ -22443,11 +22448,11 @@ class IgxExpansionPanelHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExpansionPanelHeaderComponent, deps: [{ token: IGX_EXPANSION_PANEL_COMPONENT, host: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxExpansionPanelHeaderComponent, isStandalone: true, selector: "igx-expansion-panel-header", inputs: { lv: "lv", role: "role", iconPosition: "iconPosition", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { interaction: "interaction" }, host: { listeners: { "keydown.Enter": "onAction($event)", "keydown.Space": "onAction($event)", "keydown.Spacebar": "onAction($event)", "click": "onAction($event)", "keydown.Alt.ArrowDown": "openPanel($event)", "keydown.Alt.ArrowUp": "closePanel($event)" }, properties: { "attr.aria-level": "this.lv", "attr.role": "this.role", "class.igx-expansion-panel__header": "this.cssClass", "class.igx-expansion-panel__header--expanded": "this.isExpanded", "class.igx-expansion-panel--disabled": "this.disabled" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true }, { propertyName: "customIconRef", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "defaultIconRef", first: true, predicate: IgxIconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n    <div class=\"igx-expansion-panel__title-wrapper\">\n        <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n        <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <div [class]=\"iconPositionClass\">\n        <ng-content *ngIf=\"iconTemplate\" select=\"igx-expansion-panel-icon\"></ng-content>\n        <igx-icon\n            *ngIf=\"!iconTemplate\"\n            family=\"default\"\n            [name]=\"panel.collapsed ? 'expand' : 'collapse'\"\n            [attr.aria-hidden]=\"true\">\n        </igx-icon>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxExpansionPanelHeaderComponent, isStandalone: true, selector: "igx-expansion-panel-header", inputs: { lv: "lv", role: "role", iconPosition: "iconPosition", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { interaction: "interaction" }, host: { listeners: { "keydown.Enter": "onAction($event)", "keydown.Space": "onAction($event)", "keydown.Spacebar": "onAction($event)", "click": "onAction($event)", "keydown.Alt.ArrowDown": "openPanel($event)", "keydown.Alt.ArrowUp": "closePanel($event)" }, properties: { "attr.aria-level": "this.lv", "attr.role": "this.role", "class.igx-expansion-panel__header": "this.cssClass", "class.igx-expansion-panel__header--expanded": "this.isExpanded", "class.igx-expansion-panel--disabled": "this.disabled" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true }, { propertyName: "customIconRef", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "defaultIconRef", first: true, predicate: IgxIconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n    <div class=\"igx-expansion-panel__title-wrapper\">\n        <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n        <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <div [class]=\"iconPositionClass\">\n        <ng-content *ngIf=\"iconTemplate\" select=\"igx-expansion-panel-icon\"></ng-content>\n        <igx-icon\n            *ngIf=\"!iconTemplate\"\n            family=\"default\"\n            [name]=\"panel.collapsed ? 'expand' : 'collapse'\">\n        </igx-icon>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExpansionPanelHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-expansion-panel-header', imports: [NgIf, IgxIconComponent], template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n    <div class=\"igx-expansion-panel__title-wrapper\">\n        <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n        <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <div [class]=\"iconPositionClass\">\n        <ng-content *ngIf=\"iconTemplate\" select=\"igx-expansion-panel-icon\"></ng-content>\n        <igx-icon\n            *ngIf=\"!iconTemplate\"\n            family=\"default\"\n            [name]=\"panel.collapsed ? 'expand' : 'collapse'\"\n            [attr.aria-hidden]=\"true\">\n        </igx-icon>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'igx-expansion-panel-header', imports: [NgIf, IgxIconComponent], template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n    <div class=\"igx-expansion-panel__title-wrapper\">\n        <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n        <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <div [class]=\"iconPositionClass\">\n        <ng-content *ngIf=\"iconTemplate\" select=\"igx-expansion-panel-icon\"></ng-content>\n        <igx-icon\n            *ngIf=\"!iconTemplate\"\n            family=\"default\"\n            [name]=\"panel.collapsed ? 'expand' : 'collapse'\">\n        </igx-icon>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Host
                 }, {
@@ -26423,7 +26428,7 @@ class IgxGridSelectionService {
         this._ranges = new Set();
         this.pointerOriginHandler = (event) => {
             this.pointerEventInGridBody = false;
-            this.grid.document.body.removeEventListener('pointerup', this.pointerOriginHandler);
+            document.body.removeEventListener('pointerup', this.pointerOriginHandler);
             const targetTagName = event.target.tagName.toLowerCase();
             if (targetTagName !== 'igx-grid-cell' && targetTagName !== 'igx-tree-grid-cell') {
                 this.pointerUp(this._lastSelectedNode, this.grid.rangeSelected, true);
@@ -26582,7 +26587,7 @@ class IgxGridSelectionService {
         this.pointerState.ctrl = ctrl;
         this.pointerState.shift = shift;
         this.pointerEventInGridBody = true;
-        this.grid.document.body.addEventListener('pointerup', this.pointerOriginHandler);
+        document.body.addEventListener('pointerup', this.pointerOriginHandler);
         // No ctrl key pressed - no multiple selection
         if (!ctrl) {
             this.clear();
@@ -26705,7 +26710,7 @@ class IgxGridSelectionService {
     restoreTextSelection() {
         const selection = window.getSelection();
         if (!selection.rangeCount) {
-            selection.addRange(this._selectionRange || this.grid.document.createRange());
+            selection.addRange(this._selectionRange || document.createRange());
         }
     }
     getSelectedRowsData() {
@@ -28528,7 +28533,7 @@ class IgxAvatarComponent {
      * @internal
      */
     getSrcUrl() {
-        return `url("${this.src}")`;
+        return `url(${this.src})`;
     }
     /** @hidden @internal */
     ngOnInit() {
@@ -34168,8 +34173,16 @@ const CarouselAnimationType = /*@__PURE__*/ mkenum({
     fade: 'fade'
 });
 const CarouselIndicatorsOrientation = /*@__PURE__*/ mkenum({
+    /**
+     * @deprecated in version 19.1.0. Use `end` instead.
+     */
     bottom: 'bottom',
-    top: 'top'
+    /**
+     * @deprecated in version 19.1.0. Use `start` instead.
+     */
+    top: 'top',
+    start: 'start',
+    end: 'end'
 });
 
 var Direction;
@@ -34179,8 +34192,6 @@ var Direction;
     Direction[Direction["PREV"] = 2] = "PREV";
 })(Direction || (Direction = {}));
 /** @hidden */
-const IGX_CAROUSEL_COMPONENT = /*@__PURE__*/ new InjectionToken('IgxCarouselToken');
-/** @hidden */
 let IgxCarouselComponentBase = class IgxCarouselComponentBase {
     constructor(animationService, cdr) {
         this.animationService = animationService;
@@ -34459,15 +34470,15 @@ class IgxSlideComponent {
         this._destroy$.next(true);
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }, { token: IGX_CAROUSEL_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSlideComponent, deps: [{ token: i0.ElementRef }, { token: IgxCarouselComponent }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxSlideComponent, isStandalone: true, selector: "igx-slide", inputs: { index: "index", direction: "direction", total: "total", active: ["active", "active", booleanAttribute], previous: ["previous", "previous", booleanAttribute] }, outputs: { activeChange: "activeChange" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.id": "this.id", "attr.role": "this.tab", "attr.aria-labelledby": "this.ariaLabelledBy", "class.igx-slide": "this.cssClass", "class.igx-slide--current": "this.active", "class.igx-slide--previous": "this.previous" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSlideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-slide', standalone: true, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxCarouselComponent, decorators: [{
                     type: Inject,
-                    args: [IGX_CAROUSEL_COMPONENT]
+                    args: [IgxCarouselComponent]
                 }] }], propDecorators: { index: [{
                 type: Input
             }], direction: [{
@@ -34748,7 +34759,7 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
     get indicatorsClass() {
         return {
             ['igx-carousel-indicators--focused']: this._hasKeyboardFocusOnIndicators,
-            [`igx-carousel-indicators--${this.indicatorsOrientation}`]: true
+            [`igx-carousel-indicators--${this.getIndicatorsClass()}`]: true
         };
     }
     /** @hidden */
@@ -34842,13 +34853,12 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
         this._interval = +value;
         this.restartInterval();
     }
-    constructor(cdr, element, iterableDiffers, animationService, platformUtil, dir, document) {
+    constructor(cdr, element, iterableDiffers, animationService, platformUtil, dir) {
         super(animationService, cdr);
         this.element = element;
         this.iterableDiffers = iterableDiffers;
         this.platformUtil = platformUtil;
         this.dir = dir;
-        this.document = document;
         /**
          * Sets the `id` of the carousel.
          * If not set, the `id` of the first carousel component will be `"igx-carousel-0"`.
@@ -34952,34 +34962,34 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
         this.gesturesSupport = true;
         /**
          * Controls the maximum indexes that can be shown.
-         * Default value is `5`.
+         * Default value is `10`.
          * ```html
-         * <igx-carousel [maximumIndicatorsCount]="10"></igx-carousel>
+         * <igx-carousel [maximumIndicatorsCount]="5"></igx-carousel>
          * ```
          *
          * @memberOf IgxCarouselComponent
          */
-        this.maximumIndicatorsCount = 5;
+        this.maximumIndicatorsCount = 10;
         /**
-         * Gets/sets the display mode of carousel indicators. It can be top or bottom.
-         * Default value is `bottom`.
+         * Gets/sets the display mode of carousel indicators. It can be `start` or `end`.
+         * Default value is `end`.
          * ```html
-         * <igx-carousel indicatorsOrientation='top'>
+         * <igx-carousel indicatorsOrientation="start">
          * <igx-carousel>
          * ```
          *
-         * @memberOf IgxSlideComponent
+         * @memberOf IgxCarouselComponent
          */
-        this.indicatorsOrientation = CarouselIndicatorsOrientation.bottom;
+        this.indicatorsOrientation = CarouselIndicatorsOrientation.end;
         /**
          * Gets/sets the animation type of carousel.
          * Default value is `slide`.
          * ```html
-         * <igx-carousel animationType='none'>
+         * <igx-carousel animationType="none">
          * <igx-carousel>
          * ```
          *
-         * @memberOf IgxSlideComponent
+         * @memberOf IgxCarouselComponent
          */
         this.animationType = CarouselAnimationType.slide;
         /**
@@ -35457,7 +35467,7 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
         return this._indicators.toArray();
     }
     focusElement() {
-        const focusedElement = this.document.activeElement;
+        const focusedElement = document.activeElement;
         if (focusedElement.classList.contains('igx-carousel-indicators__indicator')) {
             this.indicatorsElements[this.current].nativeElement.focus();
         }
@@ -35465,6 +35475,16 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
             this.focusSlideElement();
         }
     }
+    getIndicatorsClass() {
+        switch (this.indicatorsOrientation) {
+            case CarouselIndicatorsOrientation.top:
+                return CarouselIndicatorsOrientation.start;
+            case CarouselIndicatorsOrientation.bottom:
+                return CarouselIndicatorsOrientation.end;
+            default:
+                return this.indicatorsOrientation;
+        }
+    }
     getNextIndex() {
         return (this.current + 1) % this.total;
     }
@@ -35607,13 +35627,12 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
             requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: IgxAngularAnimationService }, { token: PlatformUtil }, { token: IgxDirectionality }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: IgxAngularAnimationService }, { token: PlatformUtil }, { token: IgxDirectionality }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxCarouselComponent, isStandalone: true, selector: "igx-carousel", inputs: { id: "id", loop: ["loop", "loop", booleanAttribute], pause: ["pause", "pause", booleanAttribute], navigation: ["navigation", "navigation", booleanAttribute], indicators: ["indicators", "indicators", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], keyboardSupport: ["keyboardSupport", "keyboardSupport", booleanAttribute], gesturesSupport: ["gesturesSupport", "gesturesSupport", booleanAttribute], maximumIndicatorsCount: "maximumIndicatorsCount", indicatorsOrientation: "indicatorsOrientation", animationType: "animationType", resourceStrings: "resourceStrings", interval: "interval" }, outputs: { slideChanged: "slideChanged", slideAdded: "slideAdded", slideRemoved: "slideRemoved", carouselPaused: "carouselPaused", carouselPlaying: "carouselPlaying" }, host: { listeners: { "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "tap": "onTap($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "panleft": "onPanLeft($event)", "panright": "onPanRight($event)", "panup": "onPanUp($event)", "pandown": "onPanDown($event)", "panend": "onPanEnd($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.aria-roledescription": "this.roleDescription", "attr.aria-labelledby": "this.labelId", "class.igx-carousel--vertical": "this.isVertical", "class.igx-carousel": "this.cssClass", "style.touch-action": "this.touchAction" } }, providers: [
             {
                 provide: HAMMER_GESTURE_CONFIG,
                 useClass: CarouselHammerConfig
-            },
-            { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
+            }
         ], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: IgxCarouselIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "nextButtonTemplate", first: true, predicate: IgxCarouselNextButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "prevButtonTemplate", first: true, predicate: IgxCarouselPrevButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "slides", predicate: IgxSlideComponent }], viewQueries: [{ propertyName: "defaultIndicator", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultNextButton", first: true, predicate: ["defaultNextButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPrevButton", first: true, predicate: ["defaultPrevButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_indicators", predicate: ["indicators"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultIndicator let-slide>\n    <div class=\"igx-nav-dot\"\n        [class.igx-nav-dot--active]=\"slide.active\">\n    </div>\n</ng-template>\n\n<ng-template #defaultNextButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_next\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultPrevButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_prev\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--prev\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_previous_slide\"\n    [disabled]=\"prevButtonDisabled\"\n    (click)=\"prev()\"\n    (keydown)=\"handleKeydownPrev($event)\">\n    <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n</button>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--next\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_next_slide\"\n    [disabled]=\"nextButtonDisabled\"\n    (click)=\"next()\"\n    (keydown)=\"handleKeydownNext($event)\">\n    <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n</button>\n\n<div *ngIf=\"showIndicators\" [ngClass]=\"indicatorsClass\" [attr.role]=\"'tablist'\" (keyup)=\"handleKeyUp($event)\" (focusout)=\"handleFocusOut($event)\" (click)=\"handleClick()\" (keydown)=\"handleKeydown($event)\">\n    <div #indicators *ngFor=\"let slide of slides\"\n        class=\"igx-carousel-indicators__indicator\"\n        (click)=\"select(slide)\"\n        [id]=\"'tab-'+ slide.index + '-' + total\"\n        [attr.role]=\"'tab'\"\n        [attr.tabindex]=\"slide.active ? 0 : -1\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total\"\n        [attr.aria-controls]=\"'panel-' + slide.index\"\n        [attr.aria-selected]=\"slide.active\">\n        <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n    </div>\n</div>\n\n<div *ngIf=\"showIndicatorsLabel\" [ngClass]=\"indicatorsClass\" class=\"igx-carousel-label-indicator\">\n    <span [id]=\"labelId\" class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n</div>\n\n<div class=\"igx-carousel__inner\" [attr.aria-live]=\"!interval || stoppedByInteraction ? 'polite' : 'off'\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;outline-style:none}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCarouselComponent, decorators: [{
@@ -35622,16 +35641,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         {
                             provide: HAMMER_GESTURE_CONFIG,
                             useClass: CarouselHammerConfig
-                        },
-                        { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
+                        }
                     ], selector: 'igx-carousel', imports: [IgxButtonDirective, IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet], template: "<ng-template #defaultIndicator let-slide>\n    <div class=\"igx-nav-dot\"\n        [class.igx-nav-dot--active]=\"slide.active\">\n    </div>\n</ng-template>\n\n<ng-template #defaultNextButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_next\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultPrevButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_prev\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--prev\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_previous_slide\"\n    [disabled]=\"prevButtonDisabled\"\n    (click)=\"prev()\"\n    (keydown)=\"handleKeydownPrev($event)\">\n    <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n</button>\n\n<button *ngIf=\"navigation && slides.length\"\n    igxButton\n    class=\"igx-carousel__arrow--next\"\n    [attr.aria-label]=\"resourceStrings.igx_carousel_next_slide\"\n    [disabled]=\"nextButtonDisabled\"\n    (click)=\"next()\"\n    (keydown)=\"handleKeydownNext($event)\">\n    <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n</button>\n\n<div *ngIf=\"showIndicators\" [ngClass]=\"indicatorsClass\" [attr.role]=\"'tablist'\" (keyup)=\"handleKeyUp($event)\" (focusout)=\"handleFocusOut($event)\" (click)=\"handleClick()\" (keydown)=\"handleKeydown($event)\">\n    <div #indicators *ngFor=\"let slide of slides\"\n        class=\"igx-carousel-indicators__indicator\"\n        (click)=\"select(slide)\"\n        [id]=\"'tab-'+ slide.index + '-' + total\"\n        [attr.role]=\"'tab'\"\n        [attr.tabindex]=\"slide.active ? 0 : -1\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total\"\n        [attr.aria-controls]=\"'panel-' + slide.index\"\n        [attr.aria-selected]=\"slide.active\">\n        <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n    </div>\n</div>\n\n<div *ngIf=\"showIndicatorsLabel\" [ngClass]=\"indicatorsClass\" class=\"igx-carousel-label-indicator\">\n    <span [id]=\"labelId\" class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n</div>\n\n<div class=\"igx-carousel__inner\" [attr.aria-live]=\"!interval || stoppedByInteraction ? 'polite' : 'off'\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;outline-style:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IgxAngularAnimationService]
-                }] }, { type: PlatformUtil }, { type: IgxDirectionality }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { id: [{
+                }] }, { type: PlatformUtil }, { type: IgxDirectionality }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
             }, {
@@ -42773,8 +42788,8 @@ class IgxGridCell {
 }
 
 const DEFAULT_DATE_FORMAT = 'mediumDate';
-const DEFAULT_TIME_FORMAT$1 = 'mediumTime';
-const DEFAULT_DATE_TIME_FORMAT$1 = 'medium';
+const DEFAULT_TIME_FORMAT = 'mediumTime';
+const DEFAULT_DATE_TIME_FORMAT = 'medium';
 const DEFAULT_DIGITS_INFO = '1.0-3';
 /* blazorElement */
 /* contentParent: ColumnGroup */
@@ -44123,8 +44138,8 @@ class IgxColumnComponent {
         }
         if (!this._columnPipeArgs.format) {
             this._columnPipeArgs.format = this.dataType === GridColumnDataType.Time ?
-                DEFAULT_TIME_FORMAT$1 : this.dataType === GridColumnDataType.DateTime ?
-                DEFAULT_DATE_TIME_FORMAT$1 : DEFAULT_DATE_FORMAT;
+                DEFAULT_TIME_FORMAT : this.dataType === GridColumnDataType.DateTime ?
+                DEFAULT_DATE_TIME_FORMAT : DEFAULT_DATE_FORMAT;
         }
         if (!this.summaries) {
             switch (this.dataType) {
@@ -44206,7 +44221,7 @@ class IgxColumnComponent {
                 columnSizes[col.colStart - 1] = {
                     ref: col,
                     width: col.width === 'fit-content' ? col.autoSize :
-                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
+                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
                     colSpan: col.gridColumnSpan,
                     colEnd: col.colStart + col.gridColumnSpan,
                     widthSetByUser: col.widthSetByUser
@@ -44235,7 +44250,7 @@ class IgxColumnComponent {
                 columnSizes[col.colStart - 1] = {
                     ref: col,
                     width: col.width === 'fit-content' ? col.autoSize :
-                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
+                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
                     colSpan: col.gridColumnSpan,
                     colEnd: col.colStart + col.gridColumnSpan,
                     widthSetByUser: col.widthSetByUser
@@ -44250,7 +44265,7 @@ class IgxColumnComponent {
                         columnSizes[i] = {
                             ref: col,
                             width: col.width === 'fit-content' ? col.autoSize :
-                                col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
+                                col.widthSetByUser || this.grid.columnWidthSetByUser ? parseInt(col.calcWidth, 10) : null,
                             colSpan: col.gridColumnSpan,
                             colEnd: col.colStart + col.gridColumnSpan,
                             widthSetByUser: col.widthSetByUser
@@ -44310,7 +44325,7 @@ class IgxColumnComponent {
                 result.push(size.width + 'px');
             }
             else {
-                result.push(parseFloat(this.grid.getPossibleColumnWidth()) + 'px');
+                result.push(parseInt(this.grid.getPossibleColumnWidth(), 10) + 'px');
             }
         }
         return result;
@@ -44715,11 +44730,8 @@ class IgxColumnComponent {
         const colWidth = this.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         const isAutoWidth = colWidth && typeof colWidth === 'string' && colWidth === 'fit-content';
-        if (isPercentageWidth && this.grid.isColumnWidthSum) {
-            this._calcWidth = this.grid.minColumnWidth;
-        }
-        else if (isPercentageWidth) {
-            this._calcWidth = parseFloat(colWidth) / 100 * this.grid.calcWidth;
+        if (isPercentageWidth) {
+            this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
         }
         else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
@@ -44728,7 +44740,7 @@ class IgxColumnComponent {
         else {
             this._calcWidth = this.width;
         }
-        this.calcPixelWidth = parseFloat(this._calcWidth);
+        this.calcPixelWidth = parseInt(this._calcWidth, 10);
     }
     /**
      * @hidden
@@ -45427,7 +45439,7 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
             if (val.hidden) {
                 return acc;
             }
-            return acc + parseFloat(val.calcWidth);
+            return acc + parseInt(val.calcWidth, 10);
         }, 0)}`;
         return width + 'px';
     }
@@ -45533,7 +45545,7 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
      * @memberof IgxColumnGroupComponent
      */
     get width() {
-        const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseFloat(val), 0);
+        const width = this.getFilledChildColumnSizes(this.children).reduce((acc, val) => acc + parseInt(val, 10), 0);
         return width;
     }
     /* blazorSuppress */
@@ -45548,7 +45560,7 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
         let borderWidth = 0;
         if (this.headerGroup && this.headerGroup.hasLastPinnedChildColumn) {
             const headerStyles = this.grid.document.defaultView.getComputedStyle(this.headerGroup.nativeElement.children[0]);
-            borderWidth = parseFloat(headerStyles.borderRightWidth);
+            borderWidth = parseInt(headerStyles.borderRightWidth, 10);
         }
         return super.getCalcWidth() + borderWidth;
     }
@@ -45714,8 +45726,9 @@ const IGX_GRID_VALIDATION_DIRECTIVES = [
 // ] as const;
 
 const QueryBuilderResourceStringsEN = {
-    igx_query_builder_date_placeholder: 'Pick up date',
-    igx_query_builder_time_placeholder: 'Pick up time',
+    igx_query_builder_date_placeholder: 'Select date',
+    igx_query_builder_time_placeholder: 'Select time',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'And',
     igx_query_builder_filter_operator_or: 'Or',
     igx_query_builder_filter_contains: 'Contains',
@@ -45728,6 +45741,8 @@ const QueryBuilderResourceStringsEN = {
     igx_query_builder_filter_notEmpty: 'Not Empty',
     igx_query_builder_filter_null: 'Null',
     igx_query_builder_filter_notNull: 'Not Null',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Before',
     igx_query_builder_filter_after: 'After',
     igx_query_builder_filter_at: 'At',
@@ -45750,14 +45765,19 @@ const QueryBuilderResourceStringsEN = {
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'All',
     igx_query_builder_title: 'Query Builder',
+    igx_query_builder_from_label: 'From',
+    igx_query_builder_select_label: 'Select',
+    igx_query_builder_where_label: 'Where',
     igx_query_builder_and_group: '"And" Group',
     igx_query_builder_or_group: '"Or" Group',
     igx_query_builder_end_group: 'End Group',
     igx_query_builder_and_label: 'and',
     igx_query_builder_or_label: 'or',
-    igx_query_builder_add_condition: 'Condition',
-    igx_query_builder_create_and_group: 'Create "And" Group',
-    igx_query_builder_create_or_group: 'Create "Or" Group',
+    igx_query_builder_switch_group: 'Switch to {0}',
+    igx_query_builder_add_condition: 'Add condition',
+    igx_query_builder_add_group: 'Add group',
+    igx_query_builder_add_condition_root: 'Condition',
+    igx_query_builder_add_group_root: 'Group',
     igx_query_builder_ungroup: 'Ungroup',
     igx_query_builder_delete: 'Delete',
     igx_query_builder_delete_filters: 'Delete filters',
@@ -45765,8 +45785,49 @@ const QueryBuilderResourceStringsEN = {
     igx_query_builder_column_placeholder: 'Select column',
     igx_query_builder_condition_placeholder: 'Select filter',
     igx_query_builder_value_placeholder: 'Value',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_field_single: 'Select return field',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
+class IgxQueryBuilderHeaderComponent {
+    constructor() {
+        this._resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN);
+    }
+    /**
+     * Sets the resource strings.
+     * By default it uses EN resources.
+     */
+    set resourceStrings(value) {
+        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+    }
+    /**
+     * Returns the resource strings.
+     */
+    get resourceStrings() {
+        return this._resourceStrings;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxQueryBuilderHeaderComponent, isStandalone: true, selector: "igx-query-builder-header", inputs: { title: "title", resourceStrings: "resourceStrings" }, ngImport: i0, template: "<div class=\"igx-query-builder__header\">\n    <div class=\"igx-query-builder__title\">\n        {{ title || this.resourceStrings.igx_query_builder_title }}\n        <ng-content></ng-content>\n    </div>\n</div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igx-query-builder-header', imports: [NgIf], template: "<div class=\"igx-query-builder__header\">\n    <div class=\"igx-query-builder__title\">\n        {{ title || this.resourceStrings.igx_query_builder_title }}\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], resourceStrings: [{
+                type: Input
+            }] } });
+
 class IgxSelectItemComponent extends IgxDropDownItemComponent {
     /**
      * Gets/Sets the item's text to be displayed in the select component's input when the item is selected.
@@ -46581,14 +46642,14 @@ class IgxSelectComponent extends IgxDropDownComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxSelectComponent, isStandalone: true, selector: "igx-select", inputs: { placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], overlaySettings: "overlaySettings", value: "value", type: "type" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "style.maxHeight": "this.maxHeight" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },
             { provide: IGX_DROPDOWN_BASE, useExisting: IgxSelectComponent }
-        ], queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxSelectToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxSelectHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxSelectFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "hintElement", first: true, predicate: IgxHintDirective, descendants: true, read: ElementRef }, { propertyName: "children", predicate: i0.forwardRef(() => IgxSelectItemComponent), descendants: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"this.label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-select__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\" [attr.aria-hidden]=\"true\"></igx-icon>\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down__list\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    <div *ngIf=\"headerTemplate\" class=\"igx-drop-down__select-header\">\n        <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n    </div>\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    <div *ngIf=\"footerTemplate\" class=\"igx-drop-down__select-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSelectItemNavigationDirective, selector: "[igxSelectItemNavigation]", inputs: ["igxSelectItemNavigation"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] }); }
+        ], queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxSelectToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxSelectHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxSelectFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "hintElement", first: true, predicate: IgxHintDirective, descendants: true, read: ElementRef }, { propertyName: "children", predicate: i0.forwardRef(() => IgxSelectItemComponent), descendants: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"this.label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-select__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down__list\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    <div *ngIf=\"headerTemplate\" class=\"igx-drop-down__select-header\">\n        <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n    </div>\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    <div *ngIf=\"footerTemplate\" class=\"igx-drop-down__select-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSelectItemNavigationDirective, selector: "[igxSelectItemNavigation]", inputs: ["igxSelectItemNavigation"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-select', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },
                         { provide: IGX_DROPDOWN_BASE, useExisting: IgxSelectComponent }
-                    ], imports: [IgxInputGroupComponent, IgxInputDirective, IgxSelectItemNavigationDirective, IgxSuffixDirective, NgIf, NgTemplateOutlet, IgxIconComponent, IgxToggleDirective], template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"this.label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-select__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\" [attr.aria-hidden]=\"true\"></igx-icon>\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down__list\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    <div *ngIf=\"headerTemplate\" class=\"igx-drop-down__select-header\">\n        <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n    </div>\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    <div *ngIf=\"footerTemplate\" class=\"igx-drop-down__select-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], imports: [IgxInputGroupComponent, IgxInputDirective, IgxSelectItemNavigationDirective, IgxSuffixDirective, NgIf, NgTemplateOutlet, IgxIconComponent, IgxToggleDirective], template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"this.label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-select__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down__list\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    <div *ngIf=\"headerTemplate\" class=\"igx-drop-down__select-header\">\n        <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n    </div>\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    <div *ngIf=\"footerTemplate\" class=\"igx-drop-down__select-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -48323,53 +48384,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-class IgxQueryBuilderHeaderComponent {
-    constructor() {
-        this._resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN);
-        /**
-         * Show/hide the legend.
-         *
-         * @example
-         * ```html
-         * <igx-query-builder-header [showLegend]="false"></igx-query-builder-header>
-         * ```
-         */
-        this.showLegend = true;
-    }
-    /**
-     * Sets the resource strings.
-     * By default it uses EN resources.
-     */
-    set resourceStrings(value) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
-    }
-    /**
-     * Returns the resource strings.
-     */
-    get resourceStrings() {
-        return this._resourceStrings;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxQueryBuilderHeaderComponent, isStandalone: true, selector: "igx-query-builder-header", inputs: { title: "title", showLegend: ["showLegend", "showLegend", booleanAttribute], resourceStrings: "resourceStrings" }, ngImport: i0, template: "<div class=\"igx-query-builder__header\">\n    <div class=\"ig-typography__h6\" style=\"pointer-events: none;\">\n        {{ title || this.resourceStrings.igx_query_builder_title }}\n        <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showLegend\" class=\"igx-builder-legend\" >\n        <div class=\"igx-builder-legend__item--and\">\n            <span>{{this.resourceStrings.igx_query_builder_and_label}}</span>\n        </div>\n        <div class=\"igx-builder-legend__item--or\">\n            <span>{{this.resourceStrings.igx_query_builder_or_label}}</span>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igx-query-builder-header', imports: [NgIf], template: "<div class=\"igx-query-builder__header\">\n    <div class=\"ig-typography__h6\" style=\"pointer-events: none;\">\n        {{ title || this.resourceStrings.igx_query_builder_title }}\n        <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showLegend\" class=\"igx-builder-legend\" >\n        <div class=\"igx-builder-legend__item--and\">\n            <span>{{this.resourceStrings.igx_query_builder_and_label}}</span>\n        </div>\n        <div class=\"igx-builder-legend__item--or\">\n            <span>{{this.resourceStrings.igx_query_builder_or_label}}</span>\n        </div>\n    </div>\n</div>\n" }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], showLegend: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], resourceStrings: [{
-                type: Input
-            }] } });
-
 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_DATE_TIME_FORMAT = 'dd/MM/yyyy HH:mm:ss a';
-const DEFAULT_TIME_FORMAT = 'hh:mm:ss a';
+const DEFAULT_CHIP_FOCUS_DELAY = 50;
 class IgxFieldFormatterPipe {
     transform(value, formatter, rowData, fieldData) {
         return formatter(value, rowData, fieldData);
@@ -48417,22 +48436,33 @@ class ExpressionOperandItem extends ExpressionItem {
         this.expression = expression;
     }
 }
-/**
- * A component used for operating with complex filters by creating or editing conditions
- * and grouping them using AND/OR logic.
- * It is used internally in the Advanced Filtering of the Grid.
- *
- * @example
- * ```html
- * <igx-query-builder [fields]="this.fields">
- * </igx-query-builder>
- * ```
- */
-class IgxQueryBuilderComponent {
+/** @hidden */
+class IgxQueryBuilderTreeComponent {
+    /**
+     * @hidden @internal
+     */
+    get getClass() {
+        return `igx-query-builder-tree--level-${this.level}`;
+    }
+    /**
+    * Returns the parent expression operand.
+    */
+    get parentExpression() {
+        return this._parentExpression;
+    }
+    /**
+     * Sets the parent expression operand.
+     */
+    set parentExpression(value) {
+        this._parentExpression = value;
+    }
     /**
     * Returns the fields.
     */
     get fields() {
+        if (!this._fields && this.isAdvancedFiltering()) {
+            this._fields = this.entities[0].fields;
+        }
         return this._fields;
     }
     /**
@@ -48440,8 +48470,10 @@ class IgxQueryBuilderComponent {
      */
     set fields(fields) {
         this._fields = fields;
+        if (!this._fields && this.isAdvancedFiltering()) {
+            this._fields = this.entities[0].fields;
+        }
         if (this._fields) {
-            this.registerSVGIcons();
             this._fields.forEach(field => {
                 this.setFilters(field);
                 this.setFormat(field);
@@ -48459,7 +48491,13 @@ class IgxQueryBuilderComponent {
      */
     set expressionTree(expressionTree) {
         this._expressionTree = expressionTree;
-        this.init();
+        if (!expressionTree) {
+            this._selectedEntity = null;
+            this._selectedReturnFields = [];
+        }
+        if (!this._preventInit) {
+            this.init();
+        }
     }
     /**
      * Gets the `locale` of the query builder.
@@ -48478,7 +48516,7 @@ class IgxQueryBuilderComponent {
         try {
             getLocaleFirstDayOfWeek(this._locale);
         }
-        catch (e) {
+        catch {
             this._locale = this._localeId;
         }
     }
@@ -48508,19 +48546,6 @@ class IgxQueryBuilderComponent {
     get editingInputsContainer() {
         return this._editingInputsContainer;
     }
-    set addModeContainer(value) {
-        if ((value && !this._addModeContainer) ||
-            (value && this._addModeContainer && this._addModeContainer.nativeElement !== value.nativeElement)) {
-            requestAnimationFrame(() => {
-                this.scrollElementIntoView(value.nativeElement);
-            });
-        }
-        this._addModeContainer = value;
-    }
-    /** @hidden */
-    get addModeContainer() {
-        return this._addModeContainer;
-    }
     set currentGroupButtonsContainer(value) {
         if ((value && !this._currentGroupButtonsContainer) ||
             (value && this._currentGroupButtonsContainer && this._currentGroupButtonsContainer.nativeElement !== value.nativeElement)) {
@@ -48534,39 +48559,88 @@ class IgxQueryBuilderComponent {
     get currentGroupButtonsContainer() {
         return this._currentGroupButtonsContainer;
     }
-    constructor(cdr, iconService, platform, el, _localeId) {
+    /**
+     * Disables the select entity dropdown at the root level after the initial selection.
+     */
+    get disableEntityChange() {
+        return !this.parentExpression && this.selectedEntity ? this.queryBuilder.disableEntityChange : false;
+    }
+    get level() {
+        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 */
+    isAdvancedFiltering() {
+        return this.entities?.length === 1 && !this.entities[0]?.name;
+    }
+    /** @hidden */
+    isSearchValueInputDisabled() {
+        return !this.selectedField ||
+            !this.selectedCondition ||
+            (this.selectedField &&
+                (this.selectedField.filters.condition(this.selectedCondition).isUnary ||
+                    this.selectedField.filters.condition(this.selectedCondition).isNestedQuery));
+    }
+    constructor(cdr, platform, el, elRef, _localeId) {
         this.cdr = cdr;
-        this.iconService = iconService;
         this.platform = platform;
         this.el = el;
+        this.elRef = elRef;
         this._localeId = _localeId;
+        /**
+         * Sets/gets the search value template.
+         */
+        this.searchValueTemplate = null;
+        /**
+         * Event fired as the expression tree is changed.
+         */
+        this.expressionTreeChange = new EventEmitter();
+        /**
+         * Event fired if a nested query builder tree is being edited.
+         */
+        this.inEditModeChange = new EventEmitter();
         /**
          * @hidden @internal
          */
-        this.cssClass = 'igx-query-builder';
+        this.selectedExpressions = [];
         /**
          * @hidden @internal
          */
-        this.display = 'block';
+        this.searchValue = { value: null };
         /**
-         * Event fired as the expression tree is changed.
-         *
-         * ```html
-         *  <igx-query-builder (expressionTreeChange)='onExpressionTreeChange()'></igx-query-builder>
-         * ```
+         * @hidden @internal
          */
-        this.expressionTreeChange = new EventEmitter();
+        this.initialOperator = 0;
         /**
          * @hidden @internal
          */
-        this.selectedExpressions = [];
+        this.returnFieldSelectOverlaySettings = {
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            modal: false,
+            closeOnOutsideClick: true
+        };
+        /**
+         * @hidden @internal
+         */
+        this.entitySelectOverlaySettings = {
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            modal: false,
+            closeOnOutsideClick: true
+        };
         /**
          * @hidden @internal
          */
         this.fieldSelectOverlaySettings = {
             scrollStrategy: new AbsoluteScrollStrategy(),
             modal: false,
-            closeOnOutsideClick: false
+            closeOnOutsideClick: true
         };
         /**
          * @hidden @internal
@@ -48574,12 +48648,28 @@ class IgxQueryBuilderComponent {
         this.conditionSelectOverlaySettings = {
             scrollStrategy: new AbsoluteScrollStrategy(),
             modal: false,
-            closeOnOutsideClick: false
+            closeOnOutsideClick: true
+        };
+        /**
+         * @hidden @internal
+         */
+        this.addExpressionDropDownOverlaySettings = {
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            modal: false,
+            closeOnOutsideClick: true
+        };
+        /**
+         * @hidden @internal
+         */
+        this.groupContextMenuDropDownOverlaySettings = {
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            modal: false,
+            closeOnOutsideClick: true
         };
         this.destroy$ = new Subject();
-        this._dblClickDelay = 200;
-        this._preventChipClick = false;
-        this._selectedGroups = [];
+        this._focusDelay = DEFAULT_CHIP_FOCUS_DELAY;
+        this._preventInit = false;
+        this._expandedExpressions = [];
         this._resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN);
         this._positionSettings = {
             horizontalStartPoint: HorizontalAlignment.Right,
@@ -48591,6 +48681,9 @@ class IgxQueryBuilderComponent {
             positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
             scrollStrategy: new CloseScrollStrategy()
         };
+        this.keyDragOffsetIndex = 0;
+        this.keyDragFirstMove = true;
+        this.dropGhostClass = 'igx-filter-tree__expression-item-drop-ghost';
         this.locale = this.locale || this._localeId;
     }
     /**
@@ -48598,8 +48691,14 @@ class IgxQueryBuilderComponent {
      */
     ngAfterViewInit() {
         this._overlaySettings.outlet = this.overlayOutlet;
+        this.entitySelectOverlaySettings.outlet = this.overlayOutlet;
         this.fieldSelectOverlaySettings.outlet = this.overlayOutlet;
         this.conditionSelectOverlaySettings.outlet = this.overlayOutlet;
+        this.returnFieldSelectOverlaySettings.outlet = this.overlayOutlet;
+        this.addExpressionDropDownOverlaySettings.outlet = this.overlayOutlet;
+        this.groupContextMenuDropDownOverlaySettings.outlet = this.overlayOutlet;
+        // Trigger additional change detection cycle
+        this.cdr.detectChanges();
     }
     /**
      * @hidden @internal
@@ -48608,6 +48707,99 @@ class IgxQueryBuilderComponent {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
+    /**
+     * @hidden @internal
+     */
+    set selectedEntity(value) {
+        this._selectedEntity = this.entities?.find(el => el.name === value);
+    }
+    /**
+     * @hidden @internal
+     */
+    get selectedEntity() {
+        return this._selectedEntity;
+    }
+    /**
+     * @hidden @internal
+     */
+    onEntitySelectChanging(event) {
+        event.cancel = true;
+        this._entityNewValue = event.newSelection.value;
+        if (event.oldSelection.value && this.queryBuilder.showEntityChangeDialog) {
+            this.entityChangeDialog.open();
+        }
+        else {
+            this.onEntityChangeConfirm();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onShowEntityChangeDialogChange(eventArgs) {
+        this.queryBuilder.showEntityChangeDialog = !eventArgs.checked;
+    }
+    /**
+     * @hidden
+     */
+    onEntityChangeCancel() {
+        this.entityChangeDialog.close();
+        this.entitySelect.close();
+        this._entityNewValue = null;
+    }
+    /**
+     * @hidden
+     */
+    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 : [];
+        this._selectedReturnFields = this.parentExpression ? [] : this._entityNewValue.fields?.map(f => f.field);
+        if (this._expressionTree) {
+            this._expressionTree.entity = this._entityNewValue.name;
+            this._expressionTree.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
+     */
+    set selectedReturnFields(value) {
+        if (this._selectedReturnFields !== value) {
+            this._selectedReturnFields = value;
+            if (this._expressionTree && !this.parentExpression) {
+                this._expressionTree.returnFields = value;
+                this.expressionTreeChange.emit(this._expressionTree);
+            }
+        }
+    }
+    /**
+     * @hidden @internal
+     */
+    get selectedReturnFields() {
+        if (typeof this._selectedReturnFields == 'string') {
+            return [this._selectedReturnFields];
+        }
+        return this._selectedReturnFields;
+    }
     /**
      * @hidden @internal
      */
@@ -48617,7 +48809,7 @@ class IgxQueryBuilderComponent {
             this._selectedField = value;
             if (oldValue && this._selectedField && this._selectedField.dataType !== oldValue.dataType) {
                 this.selectedCondition = null;
-                this.searchValue = null;
+                this.searchValue.value = null;
                 this.cdr.detectChanges();
             }
         }
@@ -48642,7 +48834,7 @@ class IgxQueryBuilderComponent {
      * used by the grid
      */
     get isContextMenuVisible() {
-        return !this.contextMenuToggle.collapsed;
+        return !this.groupContextMenuDropDown.collapsed;
     }
     /**
      * @hidden @internal
@@ -48653,59 +48845,111 @@ class IgxQueryBuilderComponent {
     /**
      * @hidden @internal
      */
-    addCondition(parent, afterExpression) {
+    addCondition(parent, afterExpression, isUIInteraction) {
         this.cancelOperandAdd();
         const operandItem = new ExpressionOperandItem({
             fieldName: null,
             condition: null,
+            conditionName: null,
             ignoreCase: true,
             searchVal: null
         }, parent);
-        if (afterExpression) {
-            const index = parent.children.indexOf(afterExpression);
-            parent.children.splice(index + 1, 0, operandItem);
+        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 {
-            parent.children.push(operandItem);
+            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
      */
-    addAndGroup(parent, afterExpression) {
-        this.addGroup(FilteringLogic.And, parent, afterExpression);
+    addReverseGroup(parent, afterExpression) {
+        parent = parent ?? this.rootGroup;
+        if (parent.operator === FilteringLogic.And) {
+            this.addGroup(FilteringLogic.Or, parent, afterExpression);
+        }
+        else {
+            this.addGroup(FilteringLogic.And, parent, afterExpression);
+        }
     }
     /**
      * @hidden @internal
      */
-    addOrGroup(parent, afterExpression) {
-        this.addGroup(FilteringLogic.Or, parent, afterExpression);
+    endGroup(groupItem) {
+        this.currentGroup = groupItem.parent;
     }
     /**
      * @hidden @internal
      */
-    endGroup(groupItem) {
-        this.currentGroup = groupItem.parent;
+    commitExpression() {
+        this.commitOperandEdit();
+        this.focusEditedExpressionChip();
+    }
+    /**
+     * @hidden @internal
+     */
+    discardExpression(expressionItem) {
+        this.cancelOperandEdit();
+        if (expressionItem && expressionItem.expression.fieldName) {
+            this.focusEditedExpressionChip();
+        }
     }
     /**
      * @hidden @internal
      */
     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.searchVal = DataUtil.parseValue(this.selectedField.dataType, this.searchValue);
+            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);
+                this._editedExpression.expression.searchTree.returnFields = innerQuery.selectedReturnFields;
+            }
+            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;
         }
-        this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup);
-        this.expressionTreeChange.emit();
+        this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup, this.selectedEntity?.name, this.selectedReturnFields);
+        if (!this.parentExpression) {
+            this.expressionTreeChange.emit(this._expressionTree);
+        }
     }
     /**
      * @hidden @internal
@@ -48720,6 +48964,16 @@ class IgxQueryBuilderComponent {
      * @hidden @internal
      */
     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) {
@@ -48727,13 +48981,67 @@ class IgxQueryBuilderComponent {
             }
             this._editedExpression = null;
         }
+        if (!this.expressionTree && this.contextualGroup) {
+            this.initialOperator = this.contextualGroup.operator;
+        }
     }
     /**
      * @hidden @internal
      */
     operandCanBeCommitted() {
+        const innerQuery = this.innerQueries.filter(q => q.isInEditMode())[0];
         return this.selectedField && this.selectedCondition &&
-            (!!this.searchValue || this.selectedField.filters.condition(this.selectedCondition).isUnary);
+            ((((!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
+     */
+    canCommitCurrentState() {
+        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
+     */
+    commitCurrentState() {
+        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
+     */
+    exitEditAddMode(shouldPreventInit = false) {
+        if (!this._editedExpression) {
+            return;
+        }
+        this.exitOperandEdit();
+        this.cancelOperandAdd();
+        if (shouldPreventInit) {
+            this._preventInit = true;
+        }
     }
     /**
      * @hidden @internal
@@ -48757,138 +49065,673 @@ class IgxQueryBuilderComponent {
     isExpressionGroup(expression) {
         return expression instanceof ExpressionGroupItem;
     }
+    /**
+     * @hidden @internal
+     */
+    onExpressionFocus(expressionItem) {
+        if (this.prevFocusedExpression) {
+            this.prevFocusedExpression.focused = false;
+        }
+        expressionItem.focused = true;
+        this.prevFocusedExpression = expressionItem;
+    }
+    /**
+     * @hidden @internal
+     */
+    onExpressionBlur(event, expressionItem) {
+        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
      */
     onChipRemove(expressionItem) {
+        this.exitEditAddMode();
         this.deleteItem(expressionItem);
     }
+    //Get the dragged ghost as a HTMLElement
+    get dragGhostElement() {
+        return document.querySelector('.igx-chip__ghost[ghostclass="igx-chip__ghost"]');
+    }
+    //Get the drop ghost as a HTMLElement
+    get dropGhostElement() {
+        return document.querySelector(`.${this.dropGhostClass}`);
+    }
+    get mainExpressionTree() {
+        return this.el.nativeElement.querySelector('.igx-filter-tree');
+    }
+    //Chip can be dragged if it's tree is in edit mode and there is no inner query that's been edited
+    canBeDragged() {
+        return this.isInEditMode && (!this.innerQueries || this.innerQueries.length == 0 || !this.innerQueries?.some(q => q.isInEditMode()));
+    }
+    //When we pick up a chip
+    onMoveStart(sourceDragElement, sourceExpressionItem, isKeyboardDrag) {
+        //console.log('Picked up:', event, sourceDragElement);
+        this.resetDragAndDrop(true);
+        this.isKeyboardDrag = isKeyboardDrag;
+        this.sourceExpressionItem = sourceExpressionItem;
+        this.sourceElement = sourceDragElement;
+        this.listenToKeyboard();
+        if (!this.isKeyboardDrag) {
+            this.sourceElement.style.display = 'none';
+        }
+    }
+    //When we let go a chip outside a proper drop zone
+    onMoveEnd() {
+        // console.log('Let go:');
+        if (!this.sourceElement || !this.sourceExpressionItem)
+            return;
+        if (this.dropGhostChipNode) {
+            //If there is a ghost chip presented to the user, execute drop
+            this.onChipDropped();
+        }
+        else {
+            this.resetDragAndDrop(true);
+        }
+        this.ghostChipMousemoveSubscription$?.unsubscribe();
+        this.keyboardSubscription$?.unsubscribe();
+    }
+    //On entering a drop area of another chip
+    onDivEnter(targetDragElement, targetExpressionItem) {
+        this.onChipEnter(targetDragElement, targetExpressionItem, true);
+    }
+    //TODO remove fromDiv: boolean -> targetDragElement is always the div
+    onChipEnter(targetDragElement, targetExpressionItem, fromDiv) {
+        // console.log('Entering:', targetDragElement, targetExpressionItem, 'from div:', fromDiv);
+        if (!this.sourceElement || !this.sourceExpressionItem)
+            return;
+        //If entering the one that's been picked up
+        if (targetDragElement == this.sourceElement)
+            return;
+        //Simulate leaving the last entered chip in case of no Leave event triggered due to the artificial drop zone of a north positioned ghost chip
+        if (this.targetElement) {
+            this.resetDragAndDrop(false);
+        }
+        this.targetElement = targetDragElement;
+        this.targetExpressionItem = targetExpressionItem;
+        //Determine the middle point of the chip. (fromDiv - get the div's chip)
+        const appendUnder = fromDiv ? this.ghostInLowerPart(targetDragElement.children[0]) : this.ghostInLowerPart(targetDragElement);
+        this.renderDropGhostChip(targetDragElement, appendUnder);
+    }
+    //On moving the dragged chip in a drop area
+    onDivOver(targetDragElement, targetExpressionItem) {
+        if (this.targetExpressionItem === targetExpressionItem) {
+            this.onChipOver(targetDragElement, true);
+        }
+        else {
+            this.onChipEnter(targetDragElement, targetExpressionItem, true);
+        }
+    }
+    //TODO remove fromDiv: boolean -> targetDragElement is always the div
+    onChipOver(targetDragElement, fromDiv) {
+        //console.log('Over:', targetDragElement, 'type: ', typeof event);
+        if (!this.sourceElement || !this.sourceExpressionItem)
+            return;
+        //Determine the middle point of the chip. (fromDiv - get the div's chip)
+        const appendUnder = fromDiv ? this.ghostInLowerPart(targetDragElement.children[0]) : this.ghostInLowerPart(targetDragElement);
+        this.renderDropGhostChip(targetDragElement, appendUnder);
+    }
+    onChipLeave() {
+        if (!this.sourceElement || !this.sourceExpressionItem || !this.targetElement)
+            return;
+        //console.log('Leaving:', targetDragElement.textContent.trim());
+        //if the drag ghost is on the drop ghost row don't trigger leave
+        if (this.dragGhostIsOnDropGhostRow(this.dragGhostElement, this.dropGhostChipNode?.firstChild)) {
+            return;
+        }
+        if (this.targetElement) {
+            this.resetDragAndDrop(false);
+        }
+    }
+    //On dropped in a drop area of another chip
+    onDivDropped(targetExpressionItem) {
+        if (targetExpressionItem != this.sourceExpressionItem) {
+            this.onChipDropped();
+        }
+    }
+    onChipDropped() {
+        if (!this.sourceElement || !this.sourceExpressionItem || !this.targetElement)
+            return;
+        //console.log('Move: [', this.sourceElement.children[0].textContent.trim(), (this.dropUnder ? '] under: [' : '] over:'), this.targetExpressionItem)
+        this.moveDraggedChipToNewLocation(this.targetExpressionItem);
+        this.resetDragAndDrop(true);
+        this.exitEditAddMode();
+    }
+    onGroupRootOver(targetDragElement, targetExpressionItem) {
+        //console.log('Entering:', targetDragElement, targetExpressionItem);
+        if (!this.sourceElement || !this.sourceExpressionItem)
+            return;
+        let newTargetElement, newTargetExpressionItem;
+        if (this.ghostInLowerPart(targetDragElement) || !targetExpressionItem.parent) {
+            //if ghost in lower part of the AND/OR (or it's the main group) => drop before the group starts
+            newTargetElement = targetDragElement.nextElementSibling.firstElementChild;
+            newTargetElement = (newTargetElement.className.indexOf(this.dropGhostClass) !== -1) ? newTargetElement.nextElementSibling : newTargetElement;
+            newTargetExpressionItem = targetExpressionItem.children[0];
+        }
+        else {
+            //if ghost in upper part or it's the root group => drop as first child of that group
+            newTargetElement = targetDragElement.parentElement.parentElement;
+            newTargetExpressionItem = targetExpressionItem;
+        }
+        if (newTargetElement && (this.targetElement !== newTargetElement || this.targetExpressionItem !== newTargetExpressionItem)) {
+            this.resetDragAndDrop(false);
+            this.targetElement = newTargetElement;
+            this.targetExpressionItem = newTargetExpressionItem;
+            this.renderDropGhostChip(this.targetElement, false);
+        }
+    }
+    onAddConditionEnter(addConditionElement, rootGroup) {
+        //console.log('onAddConditionEnter', addConditionElement);
+        if (!this.sourceElement || !this.sourceExpressionItem)
+            return;
+        const lastElement = addConditionElement.parentElement.previousElementSibling.lastElementChild;
+        if (lastElement == this.dropGhostChipNode)
+            return;
+        //simulate entering in the lower part of the last chip/group
+        this.onChipEnter(lastElement, rootGroup.children[rootGroup.children.length - 1], false);
+    }
+    onAddConditionLeave() {
+        this.onChipLeave();
+    }
+    //Checks if the dragged ghost is horizontally on the same line with the drop ghost
+    dragGhostIsOnDropGhostRow(dragGhost, dropGhost) {
+        const dragGhostBounds = dragGhost.getBoundingClientRect();
+        const dropGhostBounds = dropGhost.getBoundingClientRect();
+        if (!dragGhostBounds || !dropGhostBounds)
+            return false;
+        const ghostHeight = dragGhostBounds.bottom - dragGhostBounds.top;
+        return !(dragGhostBounds.bottom < dropGhostBounds.top - ghostHeight || dragGhostBounds.top > dropGhostBounds.bottom + ghostHeight);
+    }
+    //Checks if the dragged ghost is north or south of a target element's center
+    ghostInLowerPart(ofElement) {
+        //if (event == null) return true;
+        const ghostBounds = this.dragGhostElement.getBoundingClientRect();
+        const targetBounds = ofElement.getBoundingClientRect();
+        return ((ghostBounds.top + ghostBounds.bottom) / 2) >= ((targetBounds.top + targetBounds.bottom) / 2);
+    }
+    //Create the drop ghost node based on the base chip that's been dragged
+    //TODO refactor this using angular and css?
+    createDropGhost(keyboardMode) {
+        const dragCopy = this.sourceElement.cloneNode(true);
+        dragCopy.classList.add(this.dropGhostClass);
+        dragCopy.style.display = '';
+        dragCopy.firstChild.style.visibility = 'visible';
+        dragCopy.removeChild(dragCopy.childNodes[3]);
+        if (!keyboardMode) {
+            var span = document.createElement('span');
+            //TODO Localize string
+            span.innerHTML = "Drop here to insert";
+            dragCopy.firstChild.firstChild.removeChild(dragCopy.firstChild.firstChild.childNodes[1]);
+            dragCopy.firstChild.firstChild.removeChild(dragCopy.firstChild.firstChild.childNodes[1]);
+            dragCopy.firstChild.firstChild.firstChild.replaceChildren(span);
+            dragCopy.firstChild.firstChild.classList.add('igx-filter-tree__expression-item-ghost');
+        }
+        return dragCopy;
+    }
+    //Make a copy of the drag chip and place it in the DOM north or south of the drop chip
+    renderDropGhostChip(appendToElement, appendUnder, keyboardMode) {
+        const dragCopy = this.createDropGhost(keyboardMode);
+        //Append the ghost
+        if ((!appendUnder && this.dropUnder !== false) || //mouse mode
+            (keyboardMode && !appendUnder)) {
+            //over
+            this.dropGhostChipNode?.remove();
+            this.dropGhostChipNode = dragCopy;
+            this.dropUnder = false;
+            appendToElement.parentNode.insertBefore(this.dropGhostChipNode, appendToElement);
+        }
+        else if ((appendUnder && this.dropUnder !== true) || //mouse mode
+            (keyboardMode && appendUnder)) {
+            //under
+            this.dropGhostChipNode?.remove();
+            this.dropGhostChipNode = dragCopy;
+            this.dropUnder = true;
+            appendToElement.parentNode.insertBefore(this.dropGhostChipNode, appendToElement.nextElementSibling);
+        }
+        //Put focus on the drag icon of the ghost while performing keyboard drag
+        if (this.isKeyboardDrag) {
+            this.dropGhostChipNode.querySelector('.igx-drag-indicator').focus();
+        }
+        //Attach a mousemove event listener (if not already in place) to the dragged ghost (if present)
+        if (this.dragGhostElement && (!this.ghostChipMousemoveSubscription$ || this.ghostChipMousemoveSubscription$?.closed === true)) {
+            const mouseMoves = fromEvent(this.dragGhostElement, 'mousemove');
+            this.ghostChipMousemoveSubscription$ = mouseMoves.pipe(sampleTime(100)).subscribe(() => {
+                this.onChipLeave();
+            });
+        }
+        this.setDragCursor('grab');
+    }
+    //Set the cursor when dragging a ghost
+    setDragCursor(cursor) {
+        if (this.dragGhostElement) {
+            this.dragGhostElement.style.cursor = cursor;
+        }
+    }
+    //Execute the drop
+    moveDraggedChipToNewLocation(appendToExpressionItem, fromAddConditionBtn) {
+        //Copy dragged chip
+        const dragCopy = { ...this.sourceExpressionItem };
+        dragCopy.parent = appendToExpressionItem.parent;
+        //Paste on new place
+        const index = appendToExpressionItem.parent.children.indexOf(appendToExpressionItem);
+        appendToExpressionItem.parent.children.splice(index + (fromAddConditionBtn || this.dropUnder ? 1 : 0), 0, dragCopy);
+        //Delete from old place
+        this.deleteItem(this.sourceExpressionItem);
+    }
+    //Reset Drag&Drop vars. Optionally the drag source vars too
+    resetDragAndDrop(clearDragged) {
+        this.targetExpressionItem = null;
+        this.targetElement = null;
+        this.dropUnder = null;
+        this.dropGhostChipNode?.remove();
+        this.dropGhostChipNode = null;
+        this.keyDragOffsetIndex = 0;
+        this.keyDragFirstMove = true;
+        this.setDragCursor('no-drop');
+        if ((clearDragged || this.isKeyboardDrag) && this.sourceElement) {
+            this.sourceElement.style.display = '';
+        }
+        if (clearDragged) {
+            this.sourceExpressionItem = null;
+            this.sourceElement = null;
+            this.dropZonesList = null;
+            this.expressionsList = null;
+        }
+    }
+    listenToKeyboard() {
+        this.keyboardSubscription$?.unsubscribe();
+        this.keyboardSubscription$ = fromEvent(this.mainExpressionTree, 'keydown')
+            .pipe(filter$1(key => ['ArrowUp', 'ArrowDown', 'Enter', 'Space', 'Escape', 'Tab'].includes(key.code)))
+            .pipe(tap$1(e => {
+            //Inhibit Tabs if keyboard drag is underway
+            if (e.key !== 'Tab' || this.dropGhostElement)
+                e.preventDefault();
+        }))
+            .pipe(filter$1(event => !event.repeat))
+            .subscribe(key => {
+            if (key.code == 'Escape') {
+                //TODO cancel mouse drag
+                this.resetDragAndDrop(false);
+                //Regain focus on the drag icon after keyboard drag cancel
+                if (this.isKeyboardDrag) {
+                    this.sourceElement.firstElementChild.firstElementChild.firstElementChild.firstElementChild.focus();
+                }
+            }
+            else if (key.code == 'ArrowUp' || key.code == 'ArrowDown') {
+                this.arrowDrag(key);
+            }
+            else if (key.code == 'Enter' || key.code == 'Space') {
+                //this.platform.isActivationKey(eventArgs) Maybe use this rather that Enter/Space?
+                this.onChipDropped();
+                this.keyboardSubscription$.unsubscribe();
+            }
+        });
+    }
+    //Perform up/down movement of drop ghost along the expression tree
+    arrowDrag(key) {
+        if (!this.sourceElement || !this.sourceExpressionItem)
+            return;
+        if (this.keyDragFirstMove) {
+            this.expressionsList = this.getListedExpressions(this.rootGroup);
+            this.dropZonesList = this.getListedDropZones();
+            this.sourceElement.style.display = 'none';
+        }
+        //const index = this.expressionsList.indexOf(this.sourceExpressionItem);
+        const index = this.dropZonesList.indexOf(this.sourceElement);
+        if (index === -1)
+            console.error("Dragged expression not found");
+        let newKeyIndexOffset = 0;
+        if (key.code == 'ArrowUp') {
+            //decrease index offset capped at top of tree
+            newKeyIndexOffset = this.keyDragOffsetIndex - 1 >= index * -2 - 1 ? this.keyDragOffsetIndex - 1 : this.keyDragOffsetIndex;
+        }
+        else if (key.code == 'ArrowDown') {
+            //increase index offset capped at bottom of tree
+            newKeyIndexOffset = this.keyDragOffsetIndex + 1 <= (this.dropZonesList.length - 2 - index) * 2 + 2 ? this.keyDragOffsetIndex + 1 : this.keyDragOffsetIndex;
+        }
+        else {
+            console.error('wrong key');
+            return;
+        }
+        //if up/down limits not reached
+        if (newKeyIndexOffset != this.keyDragOffsetIndex) {
+            this.keyDragOffsetIndex = newKeyIndexOffset;
+            const indexOffset = ~~(this.keyDragOffsetIndex / 2);
+            if (index + indexOffset <= this.expressionsList.length - 1) {
+                let under = this.keyDragOffsetIndex < 0 ? this.keyDragOffsetIndex % 2 == 0 ? true : false : this.keyDragOffsetIndex % 2 == 0 ? false : true;
+                if (this.dropZonesList[index + indexOffset].className.indexOf('igx-filter-tree__expression-context-menu') === -1) {
+                    this.targetElement = this.dropZonesList[index + indexOffset];
+                    this.targetExpressionItem = this.expressionsList[index + indexOffset];
+                }
+                else {
+                    //if the current drop zone is a group root (AND/OR)
+                    if (index + indexOffset === 0) {
+                        //If the root group's AND/OR
+                        this.targetElement = this.dropZonesList[0];
+                        this.targetExpressionItem = this.rootGroup.children[0];
+                        under = true;
+                    }
+                    else if (under) {
+                        //If under AND/OR
+                        this.targetElement = this.dropZonesList[index + indexOffset];
+                        this.targetExpressionItem = this.expressionsList[index + indexOffset + 1];
+                    }
+                    else {
+                        //if over AND/OR
+                        this.targetElement = this.dropZonesList[index + indexOffset].parentElement.parentElement;
+                        this.targetExpressionItem = this.expressionsList[index + indexOffset];
+                    }
+                    //If should drop under AND/OR => drop over first chip in that AND/OR's group
+                    if (under) {
+                        this.targetElement = this.targetElement.nextElementSibling.firstElementChild;
+                        if (this.targetElement === this.dropGhostChipNode)
+                            this.targetElement = this.targetElement.nextElementSibling;
+                        under = false;
+                    }
+                }
+                const before = this.getPreviousChip(this.dropGhostElement);
+                const after = this.getNextChip(this.dropGhostElement);
+                this.renderDropGhostChip(this.targetElement, under, true);
+                //If it's the first arrow hit OR drop ghost is not displayed OR hasn't actually moved, move one more step in the same direction
+                if (this.keyDragFirstMove ||
+                    !this.dropGhostElement ||
+                    (this.getPreviousChip(this.dropGhostElement) === before && this.getNextChip(this.dropGhostElement) === after)) {
+                    this.keyDragFirstMove = false;
+                    this.arrowDrag(key);
+                }
+            }
+            else {
+                //Dropping on '+ Condition button' => drop as last condition in the root group
+                let lastElement = this.dropZonesList[this.dropZonesList.length - 1].parentElement.previousElementSibling;
+                if (lastElement.className.indexOf("igx-filter-tree__expression-section") !== -1)
+                    lastElement = lastElement.lastElementChild;
+                if (lastElement.className.indexOf("igx-filter-tree__subquery") !== -1)
+                    lastElement = lastElement.previousElementSibling;
+                if (lastElement === this.dropGhostChipNode)
+                    lastElement = lastElement.previousElementSibling;
+                const getParentExpression = (expression) => {
+                    return expression.parent ? getParentExpression(expression.parent) : expression;
+                };
+                const rootGroup = getParentExpression(this.expressionsList[this.expressionsList.length - 1]);
+                this.targetElement = lastElement;
+                this.targetExpressionItem = rootGroup.children[rootGroup.children.length - 1];
+                this.renderDropGhostChip(lastElement, true, true);
+            }
+        }
+        return;
+    }
+    //Get previous chip area taking into account a possible hidden sub-tree or collapsed base chip
+    getPreviousChip(chipSubject) {
+        let prevElement = chipSubject;
+        do {
+            prevElement = prevElement?.previousElementSibling;
+        } while (prevElement && getComputedStyle(prevElement).display === 'none');
+        return prevElement;
+    }
+    //Get next chip area taking into account a possible hidden sub-tree or collapsed base chip
+    getNextChip(chipSubject) {
+        let nextElement = chipSubject;
+        do {
+            nextElement = nextElement?.nextElementSibling;
+        } while (nextElement && getComputedStyle(nextElement).display === 'none');
+        return nextElement;
+    }
+    //Get all expressions from the tree flatten out as a list, including the expression groups
+    getListedExpressions(group) {
+        const expressions = [];
+        expressions.push(group);
+        group.children.forEach(child => {
+            if (child instanceof ExpressionGroupItem) {
+                expressions.push(...this.getListedExpressions(child));
+            }
+            else {
+                expressions.push(child);
+            }
+        });
+        return expressions;
+    }
+    //Gets all chip elements owned by this tree (discard child trees), AND/OR group roots and '+condition' button, flatten out as a list of HTML elements
+    getListedDropZones() {
+        const viableDropAreaSelector = `.igx-filter-tree__expression-item[igxDrop]:not(.${this.dropGhostClass}),` + /*Condition chip*/ //TODO :not(.${this.dropGhostClass}) might be redundant now
+            `.igx-filter-tree__subquery:has([igxDrop]),` + /*Chip in edit*/
+            `.igx-filter-tree__buttons > .igx-button[igxDrop]:first-of-type,` + /*Add Condition Button*/
+            `.igx-filter-tree__expression-context-menu[igxDrop]`; /*AND/OR group root*/
+        const expressionElementList = this.el.nativeElement.querySelectorAll(viableDropAreaSelector);
+        const ownChipElements = [];
+        const isNotFromThisTree = (qb, parent) => {
+            if (parent == qb)
+                return false;
+            else if (parent?.style?.display === "none" || parent.classList.contains('igx-query-builder-tree'))
+                return true;
+            else if (parent.parentElement)
+                return isNotFromThisTree(qb, parent.parentElement);
+            else
+                return false;
+        };
+        expressionElementList.forEach(element => {
+            if (!isNotFromThisTree(this.el.nativeElement, element) && getComputedStyle(element).display !== 'none')
+                ownChipElements.push(element);
+        });
+        return ownChipElements;
+    }
+    onChipDragIndicatorFocus(sourceDragElement, sourceExpressionItem) {
+        sourceDragElement.querySelector('.igx-drag-indicator').setAttribute('aria-hidden', 'false'); //Temp solution for aria-hidden bug #35759
+        this.onMoveStart(sourceDragElement, sourceExpressionItem, true);
+    }
+    onChipDragIndicatorFocusOut() {
+        if (this.sourceElement?.style?.display !== 'none') {
+            this.resetDragAndDrop(true);
+            this.keyboardSubscription$?.unsubscribe();
+        }
+    }
+    //Upon blurring the tree, if Keyboard drag is underway and the next active item is not the drop ghost's drag indicator icon, cancel the drag&drop procedure
+    onDragFocusOut() {
+        if (this.isKeyboardDrag && this.dropGhostElement) {
+            //have to wait a tick because upon blur, the next activeElement is always body, right before the next element gains focus
+            setTimeout(() => {
+                if (document.activeElement.className.indexOf("igx-drag-indicator") === -1) {
+                    this.resetDragAndDrop(true);
+                    this.keyboardSubscription$?.unsubscribe();
+                }
+            }, 0);
+        }
+    }
+    /* DRAG AND DROP END*/
     /**
      * @hidden @internal
      */
-    onChipClick(expressionItem) {
-        this._clickTimer = setTimeout(() => {
-            if (!this._preventChipClick) {
-                this.onToggleExpression(expressionItem);
-            }
-            this._preventChipClick = false;
-        }, this._dblClickDelay);
+    addExpressionBlur() {
+        if (this.prevFocusedExpression) {
+            this.prevFocusedExpression.focused = false;
+        }
+        if (this.addExpressionItemDropDown && !this.addExpressionItemDropDown.collapsed) {
+            this.addExpressionItemDropDown.close();
+        }
     }
     /**
      * @hidden @internal
      */
-    onChipDblClick(expressionItem) {
-        clearTimeout(this._clickTimer);
-        this._preventChipClick = true;
-        this.enterExpressionEdit(expressionItem);
+    onChipClick(expressionItem, chip) {
+        this.enterExpressionEdit(expressionItem, chip);
     }
     /**
      * @hidden @internal
      */
-    enterExpressionEdit(expressionItem) {
-        this.clearSelection();
-        this.exitOperandEdit();
-        this.cancelOperandAdd();
+    enterExpressionEdit(expressionItem, chip) {
+        this.exitEditAddMode(true);
+        this.cdr.detectChanges();
+        this._lastFocusedChipIndex = chip ? this.expressionsChips.toArray().findIndex(expr => expr === chip) : this._lastFocusedChipIndex;
+        this.enterEditMode(expressionItem);
+    }
+    /**
+     * @hidden @internal
+     */
+    clickExpressionAdd(targetButton, chip) {
+        this.exitEditAddMode(true);
+        this.cdr.detectChanges();
+        this._lastFocusedChipIndex = this.expressionsChips.toArray().findIndex(expr => expr === chip);
+        this.openExpressionAddDialog(targetButton);
+    }
+    /**
+     * @hidden @internal
+     */
+    openExpressionAddDialog(targetButton) {
+        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
+     */
+    enterExpressionAdd(event, expressionItem) {
+        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
+     */
+    enterEditMode(expressionItem) {
         if (this._editedExpression) {
             this._editedExpression.inEditMode = false;
         }
+        if (this.parentExpression) {
+            this.inEditModeChange.emit(this.parentExpression);
+        }
         expressionItem.hovered = false;
-        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 = expressionItem.expression.searchVal;
+        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;
         expressionItem.inEditMode = true;
         this._editedExpression = expressionItem;
         this.cdr.detectChanges();
-        this.fieldSelectOverlaySettings.target = this.fieldSelect.element;
-        this.fieldSelectOverlaySettings.excludeFromOutsideClick = [this.fieldSelect.element];
-        this.fieldSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
-        this.conditionSelectOverlaySettings.target = this.conditionSelect.element;
-        this.conditionSelectOverlaySettings.excludeFromOutsideClick = [this.conditionSelect.element];
-        this.conditionSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
+        this.entitySelectOverlaySettings.target = this.entitySelect.element;
+        this.entitySelectOverlaySettings.excludeFromOutsideClick = [this.entitySelect.element];
+        this.entitySelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
+        if (this.returnFieldSelect) {
+            this.returnFieldSelectOverlaySettings.target = this.returnFieldSelect.element;
+            this.returnFieldSelectOverlaySettings.excludeFromOutsideClick = [this.returnFieldSelect.element];
+            this.returnFieldSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
+        }
+        if (this.fieldSelect) {
+            this.fieldSelectOverlaySettings.target = this.fieldSelect.element;
+            this.fieldSelectOverlaySettings.excludeFromOutsideClick = [this.fieldSelect.element];
+            this.fieldSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
+        }
+        if (this.conditionSelect) {
+            this.conditionSelectOverlaySettings.target = this.conditionSelect.element;
+            this.conditionSelectOverlaySettings.excludeFromOutsideClick = [this.conditionSelect.element];
+            this.conditionSelectOverlaySettings.positionStrategy = new AutoPositionStrategy();
+        }
         if (!this.selectedField) {
             this.fieldSelect.input.nativeElement.focus();
         }
-        else if (this.selectedField.filters.condition(this.selectedCondition).isUnary) {
+        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();
+            input?.focus();
         }
     }
     /**
      * @hidden @internal
      */
-    clearSelection() {
-        for (const group of this._selectedGroups) {
-            group.selected = false;
-        }
-        this._selectedGroups = [];
-        for (const expr of this.selectedExpressions) {
-            expr.selected = false;
-        }
-        this.selectedExpressions = [];
-        this.toggleContextMenu();
-    }
-    /**
-     * @hidden @internal
-     */
-    enterExpressionAdd(expressionItem) {
-        this.clearSelection();
-        this.exitOperandEdit();
-        if (this._addModeExpression) {
-            this._addModeExpression.inAddMode = false;
-        }
-        expressionItem.inAddMode = true;
-        this._addModeExpression = expressionItem;
-        if (expressionItem.selected) {
-            this.toggleExpression(expressionItem);
-        }
-    }
-    /**
-     * @hidden @internal
-     */
-    contextMenuClosed() {
-        this.contextualGroup = null;
+    onConditionSelectChanging(event) {
+        event.cancel = true;
+        this.selectedCondition = event.newSelection.value;
+        this.conditionSelect.close();
+        this.cdr.detectChanges();
     }
     /**
      * @hidden @internal
      */
     onKeyDown(eventArgs) {
         eventArgs.stopPropagation();
-        const key = eventArgs.key;
-        if (!this.contextMenuToggle.collapsed && (key === this.platform.KEYMAP.ESCAPE)) {
-            this.clearSelection();
-        }
     }
     /**
      * @hidden @internal
      */
-    createAndGroup() {
-        this.createGroup(FilteringLogic.And);
+    onGroupClick(groupContextMenuDropDown, targetButton, groupItem) {
+        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
      */
-    createOrGroup() {
-        this.createGroup(FilteringLogic.Or);
+    getOperator(expressionItem) {
+        // 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
      */
-    deleteFilters() {
-        for (const expr of this.selectedExpressions) {
-            this.deleteItem(expr);
-        }
-        this.clearSelection();
+    getSwitchGroupText(expressionItem) {
+        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
      */
-    onGroupClick(groupItem) {
-        this.toggleGroup(groupItem);
+    onGroupContextMenuDropDownSelectionChanging(event) {
+        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
@@ -48903,36 +49746,24 @@ class IgxQueryBuilderComponent {
                 expr.parent = parent;
             }
         }
-        this.clearSelection();
         this.commitOperandEdit();
     }
     /**
      * @hidden @internal
      */
-    deleteGroup() {
-        let selectedGroup = this.contextualGroup;
-        let parent = selectedGroup.parent;
-        if (!parent) {
-            this.rootGroup = null;
+    selectFilteringLogic(index) {
+        if (!this.expressionTree) {
+            this.initialOperator = index;
+            return;
         }
-        while (parent) {
-            let index = parent.children.indexOf(selectedGroup);
-            parent.children.splice(index, 1);
-            selectedGroup = parent;
-            parent = parent.children.length === 0 ? parent.parent : null;
+        if (this.contextualGroup) {
+            this.contextualGroup.operator = index;
+            this.commitOperandEdit();
         }
-        if (this.rootGroup?.children.length === 0) {
-            this.rootGroup = null;
+        else if (this.expressionTree) {
+            this._expressionTree.operator = index;
         }
-        this.clearSelection();
-        this.commitOperandEdit();
-    }
-    /**
-     * @hidden @internal
-     */
-    selectFilteringLogic(event) {
-        this.contextualGroup.operator = event.index;
-        this.commitOperandEdit();
+        this.initialOperator = null;
     }
     /**
      * @hidden @internal
@@ -48946,20 +49777,11 @@ class IgxQueryBuilderComponent {
     isDate(value) {
         return value instanceof Date;
     }
-    /**
-     * @hidden @internal
-     */
-    onExpressionsScrolled() {
-        if (!this.contextMenuToggle.collapsed) {
-            this.calculateContextMenuTarget();
-            this.contextMenuToggle.reposition();
-        }
-    }
     /**
      * @hidden @internal
      */
     invokeClick(eventArgs) {
-        if (this.platform.isActivationKey(eventArgs)) {
+        if (!this.dropGhostChipNode && this.platform.isActivationKey(eventArgs)) {
             eventArgs.preventDefault();
             eventArgs.currentTarget.click();
         }
@@ -48984,19 +49806,24 @@ class IgxQueryBuilderComponent {
      * @hidden @internal
      */
     getConditionList() {
-        return this.selectedField ? this.selectedField.filters.conditionList() : [];
+        if (!this.selectedField)
+            return [];
+        if (this.entities?.length === 1 && !this.entities[0].name) {
+            return this.selectedField.filters.conditionList();
+        }
+        return this.selectedField.filters.extendedConditionList();
     }
     /**
      * @hidden @internal
      */
     getFormatter(field) {
-        return this.fields.find(el => el.field === field).formatter;
+        return this.fields?.find(el => el.field === field)?.formatter;
     }
     /**
      * @hidden @internal
      */
     getFormat(field) {
-        return this.fields.find(el => el.field === field).pipeArgs.format;
+        return this.fields?.find(el => el.field === field).pipeArgs.format;
     }
     /**
      * @hidden @internal
@@ -49020,22 +49847,76 @@ class IgxQueryBuilderComponent {
             afterExpression
         };
     }
-    /**
-     * @hidden @internal
-     */
-    onChipSelectionEnd() {
-        const contextualGroup = this.findSingleSelectedGroup();
-        if (contextualGroup || this.selectedExpressions.length > 1) {
-            this.contextualGroup = contextualGroup;
-            this.calculateContextMenuTarget();
-            if (this.contextMenuToggle.collapsed) {
-                this.contextMenuToggle.open(this._overlaySettings);
-            }
-            else {
-                this.contextMenuToggle.reposition();
-            }
+    formatReturnFields(innerTree) {
+        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;
+    }
+    isInEditMode() {
+        return !this.parentExpression || (this.parentExpression && this.parentExpression.inEditMode);
+    }
+    onInEditModeChanged(expressionItem) {
+        if (!expressionItem.inEditMode) {
+            this.enterExpressionEdit(expressionItem);
+        }
+    }
+    getExpressionTreeCopy(expressionTree, shouldAssignInnerQueryExprTree) {
+        if (!expressionTree) {
+            return null;
+        }
+        const exprTreeCopy = new FilteringExpressionsTree(expressionTree.operator, expressionTree.fieldName, expressionTree.entity, expressionTree.returnFields);
+        exprTreeCopy.filteringOperands = [];
+        expressionTree.filteringOperands.forEach(o => o instanceof FilteringExpressionsTree ? exprTreeCopy.filteringOperands.push(this.getExpressionTreeCopy(o)) : exprTreeCopy.filteringOperands.push(o));
+        if (!this.innerQueryNewExpressionTree && shouldAssignInnerQueryExprTree) {
+            this.innerQueryNewExpressionTree = exprTreeCopy;
+        }
+        return exprTreeCopy;
+    }
+    onSelectAllClicked(_event) {
+        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();
+        }
+    }
+    onReturnFieldSelectChanging(event) {
+        let newSelection = [];
+        if (event.newSelection instanceof Array) {
+            newSelection = event.newSelection.map(item => item.field);
+        }
+        else {
+            newSelection.push(event.newSelection.value);
+            this._selectedReturnFields = newSelection;
+        }
+        this.initExpressionTree(this.selectedEntity.name, newSelection);
+    }
+    initExpressionTree(selectedEntityName, selectedReturnFields) {
+        if (!this._expressionTree) {
+            this._expressionTree = this.createExpressionTreeFromGroupItem(new ExpressionGroupItem(FilteringLogic.And, this.rootGroup), selectedEntityName, selectedReturnFields);
+        }
+        if (!this.parentExpression) {
+            this.expressionTreeChange.emit(this._expressionTree);
         }
     }
+    getSearchValueTemplateContext(defaultSearchValueTemplate) {
+        const ctx = {
+            $implicit: this.searchValue,
+            selectedField: this.selectedField,
+            selectedCondition: this.selectedCondition,
+            defaultSearchValueTemplate: defaultSearchValueTemplate
+        };
+        return ctx;
+    }
     setFormat(field) {
         if (!field.pipeArgs) {
             field.pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO };
@@ -49073,22 +49954,6 @@ class IgxQueryBuilderComponent {
             }
         }
     }
-    onToggleExpression(expressionItem) {
-        this.exitOperandEdit();
-        this.toggleExpression(expressionItem);
-        this.toggleContextMenu();
-    }
-    toggleExpression(expressionItem) {
-        expressionItem.selected = !expressionItem.selected;
-        if (expressionItem.selected) {
-            this.selectedExpressions.push(expressionItem);
-        }
-        else {
-            const index = this.selectedExpressions.indexOf(expressionItem);
-            this.selectedExpressions.splice(index, 1);
-            this.deselectParentRecursive(expressionItem);
-        }
-    }
     addGroup(operator, parent, afterExpression) {
         this.cancelOperandAdd();
         const groupItem = new ExpressionGroupItem(operator, parent);
@@ -49107,39 +49972,59 @@ class IgxQueryBuilderComponent {
         this.addCondition(groupItem);
         this.currentGroup = groupItem;
     }
-    createExpressionGroupItem(expressionTree, parent) {
-        if (!expressionTree) {
-            return null;
-        }
-        const groupItem = new ExpressionGroupItem(expressionTree.operator, parent);
-        for (const expr of expressionTree.filteringOperands) {
-            if (expr instanceof FilteringExpressionsTree) {
-                const childGroup = this.createExpressionGroupItem(expr, groupItem);
-                if (childGroup) {
-                    groupItem.children.push(childGroup);
-                }
+    createExpressionGroupItem(expressionTree, parent, entityName) {
+        let groupItem;
+        if (expressionTree) {
+            groupItem = new ExpressionGroupItem(expressionTree.operator, parent);
+            if (!expressionTree.filteringOperands) {
+                return groupItem;
             }
-            else {
-                const filteringExpr = expr;
-                const field = this.fields.find(el => el.field === filteringExpr.fieldName);
-                if (field) {
-                    const exprCopy = { ...filteringExpr };
+            for (const expr of expressionTree.filteringOperands) {
+                if (expr instanceof FilteringExpressionsTree) {
+                    groupItem.children.push(this.createExpressionGroupItem(expr, groupItem, expressionTree.entity));
+                }
+                else {
+                    const filteringExpr = expr;
+                    const exprCopy = {
+                        fieldName: filteringExpr.fieldName,
+                        condition: filteringExpr.condition,
+                        conditionName: filteringExpr.condition.name,
+                        searchVal: filteringExpr.searchVal,
+                        searchTree: filteringExpr.searchTree,
+                        ignoreCase: filteringExpr.ignoreCase
+                    };
                     const operandItem = new ExpressionOperandItem(exprCopy, groupItem);
-                    operandItem.fieldLabel = field.label || field.header || field.field;
+                    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.children.length > 0 ? groupItem : null;
+        return groupItem;
     }
-    createExpressionTreeFromGroupItem(groupItem) {
+    createExpressionTreeFromGroupItem(groupItem, entity, returnFields) {
         if (!groupItem) {
             return null;
         }
-        const expressionTree = new FilteringExpressionsTree(groupItem.operator);
+        const expressionTree = new FilteringExpressionsTree(groupItem.operator, undefined, entity, returnFields);
         for (const item of groupItem.children) {
             if (item instanceof ExpressionGroupItem) {
-                const subTree = this.createExpressionTreeFromGroupItem(item);
+                const subTree = this.createExpressionTreeFromGroupItem(item, entity, returnFields);
                 expressionTree.filteringOperands.push(subTree);
             }
             else {
@@ -49148,50 +50033,12 @@ class IgxQueryBuilderComponent {
         }
         return expressionTree;
     }
-    toggleContextMenu() {
-        const contextualGroup = this.findSingleSelectedGroup();
-        if (contextualGroup || this.selectedExpressions.length > 1) {
-            this.contextualGroup = contextualGroup;
-            if (contextualGroup) {
-                this.filteringLogics = [
-                    {
-                        label: this.resourceStrings.igx_query_builder_filter_operator_and,
-                        selected: contextualGroup.operator === FilteringLogic.And
-                    },
-                    {
-                        label: this.resourceStrings.igx_query_builder_filter_operator_or,
-                        selected: contextualGroup.operator === FilteringLogic.Or
-                    }
-                ];
-            }
-        }
-        else if (this.contextMenuToggle) {
-            this.contextMenuToggle.close();
-        }
-    }
-    findSingleSelectedGroup() {
-        for (const group of this._selectedGroups) {
-            const containsAllSelectedExpressions = this.selectedExpressions.every(op => this.isInsideGroup(op, group));
-            if (containsAllSelectedExpressions) {
-                return group;
-            }
-        }
-        return null;
-    }
-    isInsideGroup(item, group) {
-        if (!item) {
-            return false;
-        }
-        if (item.parent === group) {
-            return true;
-        }
-        return this.isInsideGroup(item.parent, group);
-    }
     deleteItem(expressionItem) {
+        //console.log('deleteItem', expressionItem)
         if (!expressionItem.parent) {
             this.rootGroup = null;
             this.currentGroup = null;
-            this._expressionTree = null;
+            //this._expressionTree = null;
             return;
         }
         if (expressionItem === this.currentGroup) {
@@ -49200,82 +50047,16 @@ class IgxQueryBuilderComponent {
         const children = expressionItem.parent.children;
         const index = children.indexOf(expressionItem);
         children.splice(index, 1);
-        this._expressionTree = this.createExpressionTreeFromGroupItem(this.rootGroup);
+        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);
         }
-        this.expressionTreeChange.emit();
-    }
-    createGroup(operator) {
-        const chips = this.chips.toArray();
-        const minIndex = this.selectedExpressions.reduce((i, e) => Math.min(i, chips.findIndex(c => c.data === e)), Number.MAX_VALUE);
-        const firstExpression = chips[minIndex].data;
-        const parent = firstExpression.parent;
-        const groupItem = new ExpressionGroupItem(operator, parent);
-        const index = parent.children.indexOf(firstExpression);
-        parent.children.splice(index, 0, groupItem);
-        for (const expr of this.selectedExpressions) {
-            groupItem.children.push(expr);
-            this.deleteItem(expr);
-            expr.parent = groupItem;
-        }
-        this.clearSelection();
-    }
-    toggleGroup(groupItem) {
-        this.exitOperandEdit();
-        if (groupItem.children && groupItem.children.length) {
-            this.toggleGroupRecursive(groupItem, !groupItem.selected);
-            if (!groupItem.selected) {
-                this.deselectParentRecursive(groupItem);
-            }
-            this.toggleContextMenu();
-        }
-    }
-    toggleGroupRecursive(groupItem, selected) {
-        if (groupItem.selected !== selected) {
-            groupItem.selected = selected;
-            if (groupItem.selected) {
-                this._selectedGroups.push(groupItem);
-            }
-            else {
-                const index = this._selectedGroups.indexOf(groupItem);
-                this._selectedGroups.splice(index, 1);
-            }
-        }
-        for (const expr of groupItem.children) {
-            if (expr instanceof ExpressionGroupItem) {
-                this.toggleGroupRecursive(expr, selected);
-            }
-            else {
-                const operandExpression = expr;
-                if (operandExpression.selected !== selected) {
-                    this.toggleExpression(operandExpression);
-                }
-            }
-        }
-    }
-    deselectParentRecursive(expressionItem) {
-        const parent = expressionItem.parent;
-        if (parent) {
-            if (parent.selected) {
-                parent.selected = false;
-                const index = this._selectedGroups.indexOf(parent);
-                this._selectedGroups.splice(index, 1);
-            }
-            this.deselectParentRecursive(parent);
+        if (!this.parentExpression) {
+            this.expressionTreeChange.emit(this._expressionTree);
         }
     }
-    calculateContextMenuTarget() {
-        const containerRect = this.expressionsContainer.nativeElement.getBoundingClientRect();
-        const chips = this.chips.filter(c => this.selectedExpressions.indexOf(c.data) !== -1);
-        let minTop = chips.reduce((t, c) => Math.min(t, c.nativeElement.getBoundingClientRect().top), Number.MAX_VALUE);
-        minTop = Math.max(containerRect.top, minTop);
-        minTop = Math.min(containerRect.bottom, minTop);
-        let maxRight = chips.reduce((r, c) => Math.max(r, c.nativeElement.getBoundingClientRect().right), 0);
-        maxRight = Math.max(maxRight, containerRect.left);
-        maxRight = Math.min(maxRight, containerRect.right);
-        this._overlaySettings.target = new Point(maxRight, minTop);
-    }
     scrollElementIntoView(target) {
         const container = this.expressionsContainer.nativeElement;
         const targetOffset = target.offsetTop - container.offsetTop;
@@ -49287,34 +50068,106 @@ class IgxQueryBuilderComponent {
             container.scrollTop = targetOffset + target.offsetHeight + delta - container.clientHeight;
         }
     }
+    focusEditedExpressionChip() {
+        if (this._timeoutId) {
+            clearTimeout(this._timeoutId);
+        }
+        this._timeoutId = setTimeout(() => {
+            if (this._lastFocusedChipIndex != -1) {
+                const chipElement = this.expressionsChips.toArray()[this._lastFocusedChipIndex].nativeElement;
+                chipElement.focus();
+                this._lastFocusedChipIndex = -1;
+                this._focusDelay = DEFAULT_CHIP_FOCUS_DELAY;
+            }
+        }, this._focusDelay);
+    }
     init() {
-        this.clearSelection();
         this.cancelOperandAdd();
         this.cancelOperandEdit();
-        this.rootGroup = this.createExpressionGroupItem(this.expressionTree);
-        this.currentGroup = this.rootGroup;
-    }
-    registerSVGIcons() {
-        const editorIcons = editor;
-        editorIcons.forEach((icon) => {
-            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
-        });
+        // 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;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IgxIconService }, { token: PlatformUtil }, { token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ 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: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], 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<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [resourceStrings]=\"this.resourceStrings\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            (click)=\"addAndGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            (click)=\"addOrGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"edit-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    <igx-icon id=\"edit-expression\" [attr.aria-hidden]=\"true\">edit</igx-icon>\n                </button>\n\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"add-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    <igx-icon id=\"add-expression\">add</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n            >\n                <input\n                    #input\n                    #searchValueInput\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\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            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PlatformUtil }, { token: i0.ElementRef }, { token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "expressionsChips", predicate: IgxChipComponent, descendants: true, read: IgxChipComponent }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                    {{entity.name}}\n                </igx-select-item>\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">Select</span>\n            @if(!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"!selectedEntity\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked($event)\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <igx-select-item *ngFor=\"let field of fields\" [value]=\"field.field\">\n                        {{ field.field }}\n                    </igx-select-item>\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if(this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            #dragRef\n            igxDrop\n            (enter)=\"onChipEnter(dragRef, expressionItem, true)\"\n            (over)=\"onDivOver(dragRef, expressionItem)\"\n            (leave)=\"onChipLeave()\"\n            (dropped)=\"onDivDropped(expressionItem)\"\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n            (focusin)=\"onExpressionFocus(expressionItem)\"\n            (focusout)=\"onExpressionBlur($event, expressionItem)\"\n        >\n            <igx-chip\n                #expressionChip\n                [draggable]=\"canBeDragged()\"\n                [hideBaseOnDrag] = \"false\"\n                [animateOnRelease] = \"false\"\n                (moveStart)=\"canBeDragged() ? onMoveStart(dragRef, expressionItem, false): null\"\n                (moveEnd)=\"onMoveEnd()\"\n                (dragEnter)=\"onChipEnter(dragRef, expressionItem, false)\"\n                (dragOver)=\"onChipOver(dragRef, false)\"\n                (dragLeave)=\"onChipLeave()\"\n                (dragDrop)=\"onChipDropped()\"\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem, expressionChip)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n\n            >\n                <igx-icon igxPrefix\n                    class=\"igx-drag-indicator\"\n                    tabindex=\"0\"\n                    (focus)=\"onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                    (focusout)=\"onChipDragIndicatorFocusOut()\"\n                >\n                    drag_indicator\n                </igx-icon>\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                </span>\n                <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition?.name\n                        )\n                    }}\n                </span>\n                <span *ngIf=\"!expressionItem.expression.condition?.isUnary\">\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                        @if(isDate(expressionItem.expression.searchVal)) {\n                            @if(getFormatter(expressionItem.expression.fieldName)) {\n                               {{\n                                    expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                        : getFormatter(\n                                                expressionItem.expression.fieldName\n                                            )\n                                        : undefined\n                               }}\n                            } @else {\n                                {{\n                                    expressionItem.expression.searchVal\n                                    | date\n                                        : getFormat(\n                                                expressionItem.expression.fieldName\n                                            )\n                                        : undefined\n                                        : this.locale\n                                }}\n                            }\n                        } @else {\n                            @if(getFormatter(expressionItem.expression.fieldName)) {\n                                {{\n                                    expressionItem.expression.searchVal\n                                        | fieldFormatter\n                                        : getFormatter(expressionItem.expression.fieldName)\n                                        : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                }}\n                            } @else {\n                                {{ expressionItem.expression.searchVal }}\n                            }\n                        }\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                @if(expressionItem.expression.searchTree){\n                    {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                } @else if (expressionItem.expression.condition?.isUnary) {\n                    {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                } @else {\n                    @if(getFormatter(expressionItem.expression.fieldName)) {\n                        {{\n                            expressionItem.expression.searchVal\n                                | fieldFormatter\n                                : getFormatter(expressionItem.expression.fieldName)\n                                : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                        }}\n                    } @else {\n                        {{ expressionItem.expression.searchVal }}\n                    }\n                }\n            </div>\n\n            @if((expressionItem.focused || expressionItem.hovered) && !expressionItem.inAddMode) {\n                <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                    <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                    aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                        (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                        (blur)=\"addExpressionBlur()\">\n                        <igx-icon id=\"add-expression\">add</igx-icon>\n                    </button>\n                    <igx-drop-down #addOptionsDropDown\n                        (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                        <igx-drop-down-item [value]=\"'addCondition'\">\n                            <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'addGroup'\">\n                            <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n            }\n        </div>\n\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            <div\n                igxDrop\n                (enter)=\"onChipEnter(editingInputsContainer, expressionItem, true)\"\n                (over)=\"onDivOver(editingInputsContainer, expressionItem)\"\n                (leave)=\"onChipLeave()\"\n                (dropped)=\"onDivDropped(expressionItem)\"\n                *ngIf=\"expressionItem.inEditMode\"\n                class=\"igx-filter-tree__inputs\"\n            >\n                <igx-select\n                    #fieldSelect\n                    type=\"box\"\n                    [overlaySettings]=\"fieldSelectOverlaySettings\"\n                    [(ngModel)]=\"selectedField\"\n                    [disabled]=\"!fields\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                >\n\n                    <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                        {{ field.label || field.header || field.field }}\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-select\n                    #conditionSelect\n                    type=\"box\"\n                    [overlaySettings]=\"conditionSelectOverlaySettings\"\n                    [(ngModel)]=\"selectedCondition\"\n                    (selectionChanging)=\"onConditionSelectChanging($event)\"\n                    [disabled]=\"!selectedField\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                >\n                    <igx-prefix\n                        *ngIf=\"\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        \"\n                    >\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(\n                                    conditionSelect.value\n                                ).iconName\n                            \"\n                        >\n                        </igx-icon>\n                    </igx-prefix>\n\n                    <igx-select-item\n                        *ngFor=\"let condition of getConditionList()\"\n                        [value]=\"condition\"\n                        [text]=\"getConditionFriendlyName(condition)\"\n                    >\n                            <div class=\"igx-grid__filtering-dropdown-items\">\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(condition)\n                                            .iconName\n                                    \"\n                                >\n                                </igx-icon>\n                                <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                    getConditionFriendlyName(condition)\n                                }}</span>\n                            </div>\n                    </igx-select-item>\n                </igx-select>\n\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                        context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                    \"\n                >\n                </ng-container>\n\n                <ng-template #defaultSearchValueTemplate>\n                    <igx-input-group\n                        *ngIf=\"\n                            !selectedField ||\n                            (selectedField.dataType !== 'date' &&\n                                selectedField.dataType !== 'time' &&\n                                selectedField.dataType !== 'dateTime')\n                        \"\n                                type=\"box\"\n                        >\n\n                            <input\n                                #searchValueInput\n                                igxInput\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_value_placeholder\"\n                                [type]=\"\n                                selectedField && selectedField.dataType === 'number'\n                                    ? 'number'\n                                    : 'text'\n                            \"\n                            [(ngModel)]=\"searchValue.value\"\n                        />\n                    </igx-input-group>\n\n                    <igx-date-picker\n                        #picker\n                        *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                        [(value)]=\"searchValue.value\"\n                        (keydown)=\"openPicker($event)\"\n                        (click)=\"picker.open()\"\n                        type=\"box\"\n                        [readOnly]=\"true\"\n                        [disabled]=\"isSearchValueInputDisabled()\"\n                        [locale]=\"this.locale\"\n                        [outlet]=\"pickerOutlet\"\n                        [formatter]=\"selectedField.formatter\"\n                        [displayFormat]=\"selectedField.pipeArgs.format\"\n                        [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                    >\n                        <!-- disable default icons -->\n                        <igx-picker-toggle></igx-picker-toggle>\n                        <igx-picker-clear></igx-picker-clear>\n                    </igx-date-picker>\n\n                    <igx-time-picker\n                        #picker\n                        *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                        [(value)]=\"searchValue.value\"\n                        (click)=\"picker.open()\"\n                        (keydown)=\"openPicker($event)\"\n                        type=\"box\"\n                        [readOnly]=\"true\"\n                        [disabled]=\"isSearchValueInputDisabled()\"\n                        [locale]=\"this.locale\"\n                        [outlet]=\"pickerOutlet\"\n                        [formatter]=\"selectedField.formatter\"\n                        [displayFormat]=\"selectedField.pipeArgs.format\"\n                        [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                    >\n                        <!-- disable default icons -->\n                        <igx-picker-toggle></igx-picker-toggle>\n                        <igx-picker-clear></igx-picker-clear>\n                    </igx-time-picker>\n\n                    <igx-input-group\n                        #inputGroup\n                        type=\"box\"\n                        *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    >\n                        <input\n                            #input\n                            igxInput\n                            tabindex=\"0\"\n                            [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                            [(ngModel)]=\"searchValue.value\"\n                            [disabled]=\"isSearchValueInputDisabled()\"\n                            [locale]=\"this.locale\"\n                            [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                            [defaultFormatType]=\"selectedField.dataType\"\n                            [displayFormat]=\"selectedField.pipeArgs.format\"\n                        />\n                    </igx-input-group>\n                </ng-template>\n\n                <div class=\"igx-filter-tree__inputs-actions\">\n                    <button type=\"button\"\n                        igxIconButton=\"outlined\"\n                        [disabled]=\"!operandCanBeCommitted()\"\n                        (click)=\"commitExpression()\"\n                    >\n                        <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                    </button>\n                    <button type=\"button\"\n                        igxIconButton=\"outlined\"\n                        (click)=\"discardExpression(expressionItem)\"\n                    >\n                        <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                    </button>\n                </div>\n            </div>\n\n            <ng-container *ngIf=\"\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\">\n                <igx-query-builder-tree\n                    [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                    [entities]=\"entities\"\n                    [queryBuilder]=\"this.queryBuilder\"\n                    [parentExpression]=\"expressionItem\"\n                    [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                    (inEditModeChange)=\"onInEditModeChanged($event)\"\n                    [searchValueTemplate]=\"searchValueTemplate\">\n                </igx-query-builder-tree>\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                        >\n                        </ng-container>\n                    </ng-container>\n                </div>\n                <div\n                        *ngIf=\"expressionItem === rootGroup && !hasEditedExpression\"\n                        #currentGroupButtonsContainer\n                        class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                            *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <div class=\"igx-filter-tree__section\" *ngIf=\"rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))\">\n        @if(!this.isAdvancedFiltering()) {\n            <span class=\"igx-query-builder__label\">Where</span>\n        }\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "disableFiltering", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-query-builder', imports: [NgIf, IgxQueryBuilderHeaderComponent, IgxButtonDirective, IgxIconComponent, IgxChipComponent, IgxPrefixDirective, IgxSuffixDirective, IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, NgClass, IgxToggleDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, DatePipe, IgxFieldFormatterPipe, IgxIconButtonDirective], 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<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [resourceStrings]=\"this.resourceStrings\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            (click)=\"addAndGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            (click)=\"addOrGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"edit-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    <igx-icon id=\"edit-expression\" [attr.aria-hidden]=\"true\">edit</igx-icon>\n                </button>\n\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"add-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    <igx-icon id=\"add-expression\">add</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n            >\n                <input\n                    #input\n                    #searchValueInput\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\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            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: IgxIconService }, { type: PlatformUtil }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+            args: [{ selector: 'igx-query-builder-tree', host: { 'class': 'igx-query-builder-tree' }, standalone: true, imports: [
+                        NgIf,
+                        IgxQueryBuilderHeaderComponent,
+                        IgxButtonDirective,
+                        IgxIconComponent,
+                        IgxChipComponent,
+                        IgxPrefixDirective,
+                        IgxSuffixDirective,
+                        IgxSelectComponent,
+                        FormsModule,
+                        NgFor,
+                        IgxSelectItemComponent,
+                        IgxInputGroupComponent,
+                        IgxInputDirective,
+                        IgxDatePickerComponent,
+                        IgxPickerToggleComponent,
+                        IgxPickerClearComponent,
+                        IgxTimePickerComponent,
+                        IgxDateTimeEditorDirective,
+                        NgTemplateOutlet,
+                        NgClass,
+                        IgxToggleDirective,
+                        IgxButtonGroupComponent,
+                        IgxOverlayOutletDirective,
+                        DatePipe,
+                        IgxFieldFormatterPipe,
+                        IgxIconButtonDirective,
+                        IgxToggleActionDirective,
+                        IgxComboComponent,
+                        IgxLabelDirective,
+                        IgxComboHeaderDirective,
+                        IgxCheckboxComponent,
+                        IgxDialogComponent,
+                        IgxTooltipTargetDirective,
+                        IgxTooltipDirective,
+                        IgxChipsAreaComponent,
+                        IgxDragDirective,
+                        IgxDragIgnoreDirective,
+                        IgxDragHandleDirective,
+                        IgxDropDirective,
+                        IgxDropDownComponent,
+                        IgxDropDownItemComponent,
+                        IgxDropDownItemNavigationDirective
+                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && !this.isAdvancedFiltering()) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">From</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                <igx-select-item *ngFor=\"let entity of entities\" [value]=\"entity\">\n                    {{entity.name}}\n                </igx-select-item>\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">Select</span>\n            @if(!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"!selectedEntity\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked($event)\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <igx-select-item *ngFor=\"let field of fields\" [value]=\"field.field\">\n                        {{ field.field }}\n                    </igx-select-item>\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if(this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        <div\n            #dragRef\n            igxDrop\n            (enter)=\"onChipEnter(dragRef, expressionItem, true)\"\n            (over)=\"onDivOver(dragRef, expressionItem)\"\n            (leave)=\"onChipLeave()\"\n            (dropped)=\"onDivDropped(expressionItem)\"\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n            (focusin)=\"onExpressionFocus(expressionItem)\"\n            (focusout)=\"onExpressionBlur($event, expressionItem)\"\n        >\n            <igx-chip\n                #expressionChip\n                [draggable]=\"canBeDragged()\"\n                [hideBaseOnDrag] = \"false\"\n                [animateOnRelease] = \"false\"\n                (moveStart)=\"canBeDragged() ? onMoveStart(dragRef, expressionItem, false): null\"\n                (moveEnd)=\"onMoveEnd()\"\n                (dragEnter)=\"onChipEnter(dragRef, expressionItem, false)\"\n                (dragOver)=\"onChipOver(dragRef, false)\"\n                (dragLeave)=\"onChipLeave()\"\n                (dragDrop)=\"onChipDropped()\"\n                #target=\"tooltipTarget\"\n                [igxTooltipTarget]=\"tooltipRef\"\n                [data]=\"expressionItem\"\n                [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem, expressionChip)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n\n            >\n                <igx-icon igxPrefix\n                    class=\"igx-drag-indicator\"\n                    tabindex=\"0\"\n                    (focus)=\"onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                    (focusout)=\"onChipDragIndicatorFocusOut()\"\n                >\n                    drag_indicator\n                </igx-icon>\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                    {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                </span>\n                <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition?.name\n                        )\n                    }}\n                </span>\n                <span *ngIf=\"!expressionItem.expression.condition?.isUnary\">\n                    <ng-container *ngIf=\"expressionItem.expression.searchTree\">\n                        <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                    </ng-container>\n\n                    <ng-container *ngIf=\"!expressionItem.expression.searchTree\">\n                        @if(isDate(expressionItem.expression.searchVal)) {\n                            @if(getFormatter(expressionItem.expression.fieldName)) {\n                               {{\n                                    expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                        : getFormatter(\n                                                expressionItem.expression.fieldName\n                                            )\n                                        : undefined\n                               }}\n                            } @else {\n                                {{\n                                    expressionItem.expression.searchVal\n                                    | date\n                                        : getFormat(\n                                                expressionItem.expression.fieldName\n                                            )\n                                        : undefined\n                                        : this.locale\n                                }}\n                            }\n                        } @else {\n                            @if(getFormatter(expressionItem.expression.fieldName)) {\n                                {{\n                                    expressionItem.expression.searchVal\n                                        | fieldFormatter\n                                        : getFormatter(expressionItem.expression.fieldName)\n                                        : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                }}\n                            } @else {\n                                {{ expressionItem.expression.searchVal }}\n                            }\n                        }\n                    </ng-container>\n                </span>\n            </igx-chip>\n            <div #tooltipRef=\"tooltip\" igxTooltip>\n                @if(expressionItem.expression.searchTree){\n                    {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                } @else if (expressionItem.expression.condition?.isUnary) {\n                    {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                } @else {\n                    @if(getFormatter(expressionItem.expression.fieldName)) {\n                        {{\n                            expressionItem.expression.searchVal\n                                | fieldFormatter\n                                : getFormatter(expressionItem.expression.fieldName)\n                                : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                        }}\n                    } @else {\n                        {{ expressionItem.expression.searchVal }}\n                    }\n                }\n            </div>\n\n            @if((expressionItem.focused || expressionItem.hovered) && !expressionItem.inAddMode) {\n                <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                    <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                    aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                        (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                        (blur)=\"addExpressionBlur()\">\n                        <igx-icon id=\"add-expression\">add</igx-icon>\n                    </button>\n                    <igx-drop-down #addOptionsDropDown\n                        (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                        <igx-drop-down-item [value]=\"'addCondition'\">\n                            <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'addGroup'\">\n                            <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n            }\n        </div>\n\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            <div\n                igxDrop\n                (enter)=\"onChipEnter(editingInputsContainer, expressionItem, true)\"\n                (over)=\"onDivOver(editingInputsContainer, expressionItem)\"\n                (leave)=\"onChipLeave()\"\n                (dropped)=\"onDivDropped(expressionItem)\"\n                *ngIf=\"expressionItem.inEditMode\"\n                class=\"igx-filter-tree__inputs\"\n            >\n                <igx-select\n                    #fieldSelect\n                    type=\"box\"\n                    [overlaySettings]=\"fieldSelectOverlaySettings\"\n                    [(ngModel)]=\"selectedField\"\n                    [disabled]=\"!fields\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                >\n\n                    <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                        {{ field.label || field.header || field.field }}\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-select\n                    #conditionSelect\n                    type=\"box\"\n                    [overlaySettings]=\"conditionSelectOverlaySettings\"\n                    [(ngModel)]=\"selectedCondition\"\n                    (selectionChanging)=\"onConditionSelectChanging($event)\"\n                    [disabled]=\"!selectedField\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                >\n                    <igx-prefix\n                        *ngIf=\"\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        \"\n                    >\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(\n                                    conditionSelect.value\n                                ).iconName\n                            \"\n                        >\n                        </igx-icon>\n                    </igx-prefix>\n\n                    <igx-select-item\n                        *ngFor=\"let condition of getConditionList()\"\n                        [value]=\"condition\"\n                        [text]=\"getConditionFriendlyName(condition)\"\n                    >\n                            <div class=\"igx-grid__filtering-dropdown-items\">\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(condition)\n                                            .iconName\n                                    \"\n                                >\n                                </igx-icon>\n                                <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                    getConditionFriendlyName(condition)\n                                }}</span>\n                            </div>\n                    </igx-select-item>\n                </igx-select>\n\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                        context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                    \"\n                >\n                </ng-container>\n\n                <ng-template #defaultSearchValueTemplate>\n                    <igx-input-group\n                        *ngIf=\"\n                            !selectedField ||\n                            (selectedField.dataType !== 'date' &&\n                                selectedField.dataType !== 'time' &&\n                                selectedField.dataType !== 'dateTime')\n                        \"\n                                type=\"box\"\n                        >\n\n                            <input\n                                #searchValueInput\n                                igxInput\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_value_placeholder\"\n                                [type]=\"\n                                selectedField && selectedField.dataType === 'number'\n                                    ? 'number'\n                                    : 'text'\n                            \"\n                            [(ngModel)]=\"searchValue.value\"\n                        />\n                    </igx-input-group>\n\n                    <igx-date-picker\n                        #picker\n                        *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                        [(value)]=\"searchValue.value\"\n                        (keydown)=\"openPicker($event)\"\n                        (click)=\"picker.open()\"\n                        type=\"box\"\n                        [readOnly]=\"true\"\n                        [disabled]=\"isSearchValueInputDisabled()\"\n                        [locale]=\"this.locale\"\n                        [outlet]=\"pickerOutlet\"\n                        [formatter]=\"selectedField.formatter\"\n                        [displayFormat]=\"selectedField.pipeArgs.format\"\n                        [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                    >\n                        <!-- disable default icons -->\n                        <igx-picker-toggle></igx-picker-toggle>\n                        <igx-picker-clear></igx-picker-clear>\n                    </igx-date-picker>\n\n                    <igx-time-picker\n                        #picker\n                        *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                        [(value)]=\"searchValue.value\"\n                        (click)=\"picker.open()\"\n                        (keydown)=\"openPicker($event)\"\n                        type=\"box\"\n                        [readOnly]=\"true\"\n                        [disabled]=\"isSearchValueInputDisabled()\"\n                        [locale]=\"this.locale\"\n                        [outlet]=\"pickerOutlet\"\n                        [formatter]=\"selectedField.formatter\"\n                        [displayFormat]=\"selectedField.pipeArgs.format\"\n                        [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                    >\n                        <!-- disable default icons -->\n                        <igx-picker-toggle></igx-picker-toggle>\n                        <igx-picker-clear></igx-picker-clear>\n                    </igx-time-picker>\n\n                    <igx-input-group\n                        #inputGroup\n                        type=\"box\"\n                        *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                    >\n                        <input\n                            #input\n                            igxInput\n                            tabindex=\"0\"\n                            [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                            [(ngModel)]=\"searchValue.value\"\n                            [disabled]=\"isSearchValueInputDisabled()\"\n                            [locale]=\"this.locale\"\n                            [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                            [defaultFormatType]=\"selectedField.dataType\"\n                            [displayFormat]=\"selectedField.pipeArgs.format\"\n                        />\n                    </igx-input-group>\n                </ng-template>\n\n                <div class=\"igx-filter-tree__inputs-actions\">\n                    <button type=\"button\"\n                        igxIconButton=\"outlined\"\n                        [disabled]=\"!operandCanBeCommitted()\"\n                        (click)=\"commitExpression()\"\n                    >\n                        <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                    </button>\n                    <button type=\"button\"\n                        igxIconButton=\"outlined\"\n                        (click)=\"discardExpression(expressionItem)\"\n                    >\n                        <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                    </button>\n                </div>\n            </div>\n\n            <ng-container *ngIf=\"\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\">\n                <igx-query-builder-tree\n                    [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                    [entities]=\"entities\"\n                    [queryBuilder]=\"this.queryBuilder\"\n                    [parentExpression]=\"expressionItem\"\n                    [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                    (inEditModeChange)=\"onInEditModeChanged($event)\"\n                    [searchValueTemplate]=\"searchValueTemplate\">\n                </igx-query-builder-tree>\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    <ng-container *ngFor=\"let expr of expressionItem?.children\">\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionGroupTemplate\n                                : operandTemplate;\n                            context: context(expr)\n                        \"\n                        >\n                        </ng-container>\n                    </ng-container>\n                </div>\n                <div\n                        *ngIf=\"expressionItem === rootGroup && !hasEditedExpression\"\n                        #currentGroupButtonsContainer\n                        class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                            *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <div class=\"igx-filter-tree__section\" *ngIf=\"rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))\">\n        @if(!this.isAdvancedFiltering()) {\n            <span class=\"igx-query-builder__label\">Where</span>\n        }\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionGroupTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </div>\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }, { type: i0.ElementRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
-                }] }], propDecorators: { cssClass: [{
+                }] }], propDecorators: { getClass: [{
                 type: HostBinding,
-                args: ['class.igx-query-builder']
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
+                args: ['class']
+            }], entities: [{
+                type: Input
+            }], queryBuilder: [{
+                type: Input
+            }], searchValueTemplate: [{
+                type: Input
+            }], parentExpression: [{
+                type: Input
             }], fields: [{
                 type: Input
             }], expressionTree: [{
@@ -49325,6 +50178,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 type: Input
             }], expressionTreeChange: [{
                 type: Output
+            }], inEditModeChange: [{
+                type: Output
+            }], entitySelect: [{
+                type: ViewChild,
+                args: ['entitySelect', { read: IgxSelectComponent }]
+            }], returnFieldsCombo: [{
+                type: ViewChild,
+                args: ['returnFieldsCombo', { read: IgxComboComponent }]
+            }], returnFieldSelect: [{
+                type: ViewChild,
+                args: ['returnFieldSelect', { read: IgxSelectComponent }]
             }], fieldSelect: [{
                 type: ViewChild,
                 args: ['fieldSelect', { read: IgxSelectComponent }]
@@ -49343,30 +50207,320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             }], addConditionButton: [{
                 type: ViewChild,
                 args: ['addConditionButton', { read: ElementRef }]
+            }], entityChangeDialog: [{
+                type: ViewChild,
+                args: ['entityChangeDialog', { read: IgxDialogComponent }]
+            }], addExpressionItemDropDown: [{
+                type: ViewChild,
+                args: ['addOptionsDropDown', { read: IgxDropDownComponent }]
+            }], groupContextMenuDropDown: [{
+                type: ViewChild,
+                args: ['groupContextMenuDropDown', { read: IgxDropDownComponent }]
+            }], expressionsChips: [{
+                type: ViewChildren,
+                args: [IgxChipComponent, { read: IgxChipComponent }]
             }], headerContent: [{
                 type: ContentChild,
                 args: [IgxQueryBuilderHeaderComponent]
             }], editingInputsContainer: [{
                 type: ViewChild,
                 args: ['editingInputsContainer', { read: ElementRef }]
-            }], addModeContainer: [{
-                type: ViewChild,
-                args: ['addModeContainer', { read: ElementRef }]
             }], currentGroupButtonsContainer: [{
                 type: ViewChild,
                 args: ['currentGroupButtonsContainer', { read: ElementRef }]
-            }], contextMenuToggle: [{
-                type: ViewChild,
-                args: [IgxToggleDirective]
-            }], chips: [{
-                type: ViewChildren,
-                args: [IgxChipComponent]
             }], expressionsContainer: [{
                 type: ViewChild,
                 args: ['expressionsContainer']
             }], overlayOutlet: [{
                 type: ViewChild,
                 args: ['overlayOutlet', { read: IgxOverlayOutletDirective, static: true }]
+            }], innerQueries: [{
+                type: ViewChildren,
+                args: [IgxQueryBuilderTreeComponent]
+            }] } });
+
+/**
+ * Defines the custom template that will be used for the search value input of condition in edit mode
+ *
+ * @igxModule IgxQueryBuilderModule
+ * @igxKeywords query builder, query builder search value
+ * @igxGroup Data entry and display
+ *
+ * @example
+ * <igx-query-builder>
+ *      <ng-template igxQueryBuilderSearchValue let-expression="expression">
+ *          <input type="text" required [(ngModel)]="expression.searchVal"/>
+ *      </ng-template>
+ *  </igx-query-builder>
+ */
+class IgxQueryBuilderSearchValueTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: IgxQueryBuilderSearchValueTemplateDirective, isStandalone: true, selector: "[igxQueryBuilderSearchValue]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[igxQueryBuilderSearchValue]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+/**
+ * A component used for operating with complex filters by creating or editing conditions
+ * and grouping them using AND/OR logic.
+ * It is used internally in the Advanced Filtering of the Grid.
+ *
+ * @example
+ * ```html
+ * <igx-query-builder [entities]="this.entities">
+ * </igx-query-builder>
+ * ```
+ */
+class IgxQueryBuilderComponent {
+    /**
+     * Returns the fields.
+     * @hidden
+     * @deprecated in version 19.1.0. Use the `entities` property instead.
+     */
+    get fields() {
+        return this._fields;
+    }
+    /**
+     * Sets the fields.
+     * @hidden
+     * @deprecated in version 19.1.0. Use the `entities` property instead.
+     */
+    set fields(fields) {
+        if (fields) {
+            this._fields = fields;
+            this.entities = [
+                {
+                    name: null,
+                    fields: fields
+                }
+            ];
+        }
+    }
+    /**
+    * Returns the expression tree.
+    */
+    get expressionTree() {
+        return this._expressionTree;
+    }
+    /**
+     * Sets the expression tree.
+     */
+    set expressionTree(expressionTree) {
+        if (JSON.stringify(expressionTree) !== JSON.stringify(this._expressionTree)) {
+            this._expressionTree = expressionTree;
+        }
+    }
+    /**
+     * Sets the resource strings.
+     * By default it uses EN resources.
+     */
+    set resourceStrings(value) {
+        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+    }
+    /**
+     * Returns the resource strings.
+     */
+    get resourceStrings() {
+        return this._resourceStrings;
+    }
+    constructor(iconService) {
+        this.iconService = iconService;
+        /**
+         * @hidden @internal
+         */
+        this.cssClass = 'igx-query-builder';
+        /**
+         * @hidden @internal
+         */
+        this.display = 'block';
+        /**
+         * Gets/sets whether the confirmation dialog should be shown when changing entity.
+         * Default value is `true`.
+         */
+        this.showEntityChangeDialog = true;
+        /**
+         * Disables subsequent entity changes at the root level after the initial selection.
+         */
+        this.disableEntityChange = false;
+        /**
+         * Event fired as the expression tree is changed.
+         *
+         * ```html
+         *  <igx-query-builder (expressionTreeChange)='onExpressionTreeChange()'></igx-query-builder>
+         * ```
+         */
+        this.expressionTreeChange = new EventEmitter();
+        this.destroy$ = new Subject();
+        this._resourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN);
+        this._shouldEmitTreeChange = true;
+        this.registerSVGIcons();
+    }
+    /**
+     * Returns whether the expression tree can be committed in the current state.
+     */
+    canCommit() {
+        return this.queryTree?.canCommitCurrentState() === true;
+    }
+    /**
+     * Commits the expression tree in the current state if it is valid. If not throws an exception.
+     */
+    commit() {
+        if (this.canCommit()) {
+            this._shouldEmitTreeChange = false;
+            this.queryTree.commitCurrentState();
+            this._shouldEmitTreeChange = true;
+        }
+        else {
+            throw new Error('Expression tree can\'t be committed in the current state. Use `canCommit` method to check if the current state is valid.');
+        }
+    }
+    /**
+     * Discards all unsaved changes to the expression tree.
+     */
+    discard() {
+        this.queryTree.cancelOperandEdit();
+    }
+    /**
+     * @hidden @internal
+     */
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    /**
+     * @hidden @internal
+     *
+     * used by the grid
+     */
+    setPickerOutlet(outlet) {
+        this.queryTree.setPickerOutlet(outlet);
+    }
+    /**
+     * @hidden @internal
+     *
+     * used by the grid
+     */
+    get isContextMenuVisible() {
+        return this.queryTree.isContextMenuVisible;
+    }
+    /**
+     * @hidden @internal
+     *
+     * used by the grid
+     */
+    exitOperandEdit() {
+        this.queryTree.exitOperandEdit();
+    }
+    /**
+     * @hidden @internal
+     *
+     * used by the grid
+     */
+    setAddButtonFocus() {
+        this.queryTree.setAddButtonFocus();
+    }
+    onExpressionTreeChange(tree) {
+        this._expressionTree = tree;
+        if (this._shouldEmitTreeChange) {
+            this.expressionTreeChange.emit();
+        }
+    }
+    registerSVGIcons() {
+        const editorIcons = editor;
+        editorIcons.forEach((icon) => {
+            this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
+            this.iconService.addIconRef(icon.name, 'default', {
+                name: icon.name,
+                family: 'imx-icons'
+            });
+        });
+        const inIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M560-280H120v-400h720v120h-80v-40H200v240h360v80Zm-360-80v-240 240Zm560 200v-120H640v-80h120v-120h80v120h120v80H840v120h-80Z"/></svg>';
+        this.iconService.addSvgIconFromText('in', inIcon, 'imx-icons');
+        this.iconService.addIconRef('in', 'default', {
+            name: 'in',
+            family: 'imx-icons'
+        });
+        const notInIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M560-280H120v-400h720v120h-80v-40H200v240h360v80Zm-360-80v-240 240Zm440 104 84-84-84-84 56-56 84 84 84-84 56 56-83 84 83 84-56 56-84-83-84 83-56-56Z"/></svg>';
+        this.iconService.addSvgIconFromText('not-in', notInIcon, 'imx-icons');
+        this.iconService.addIconRef('not-in', 'default', {
+            name: 'not-in',
+            family: 'imx-icons'
+        });
+        this.iconService.addIconRef('add', 'default', {
+            name: 'add',
+            family: 'material',
+        });
+        this.iconService.addIconRef('close', 'default', {
+            name: 'close',
+            family: 'material',
+        });
+        this.iconService.addIconRef('check', 'default', {
+            name: 'check',
+            family: 'material',
+        });
+        this.iconService.addIconRef('delete', 'default', {
+            name: 'delete',
+            family: 'material',
+        });
+        this.iconService.addIconRef('edit', 'default', {
+            name: 'edit',
+            family: 'material',
+        });
+        this.iconService.addIconRef('unfold_less', 'default', {
+            name: 'unfold_less',
+            family: 'material',
+        });
+        this.iconService.addIconRef('unfold_more', 'default', {
+            name: 'unfold_more',
+            family: 'material',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderComponent, deps: [{ token: IgxIconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { showEntityChangeDialog: ["showEntityChangeDialog", "showEntityChangeDialog", booleanAttribute], entities: "entities", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", disableEntityChange: "disableEntityChange" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }, { propertyName: "searchValueTemplate", first: true, predicate: IgxQueryBuilderSearchValueTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "queryTree", first: true, predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [resourceStrings]=\"this.resourceStrings\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n    [entities]=\"this.entities\"\n    [expressionTree]=\"this.expressionTree\"\n    [locale]=\"this.locale\"\n    [resourceStrings]=\"this.resourceStrings\"\n    [queryBuilder]=\"this\"\n    (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n    [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "resourceStrings"] }, { kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange", "inEditModeChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igx-query-builder', standalone: true, imports: [NgIf, IgxQueryBuilderHeaderComponent, IgxQueryBuilderTreeComponent, NgTemplateOutlet, IgxQueryBuilderSearchValueTemplateDirective], template: "<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [resourceStrings]=\"this.resourceStrings\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n    [entities]=\"this.entities\"\n    [expressionTree]=\"this.expressionTree\"\n    [locale]=\"this.locale\"\n    [resourceStrings]=\"this.resourceStrings\"\n    [queryBuilder]=\"this\"\n    (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n    [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n" }]
+        }], ctorParameters: () => [{ type: IgxIconService }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class.igx-query-builder']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], showEntityChangeDialog: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], entities: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], expressionTree: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], resourceStrings: [{
+                type: Input
+            }], disableEntityChange: [{
+                type: Input
+            }], expressionTreeChange: [{
+                type: Output
+            }], headerContent: [{
+                type: ContentChild,
+                args: [IgxQueryBuilderHeaderComponent]
+            }], searchValueTemplate: [{
+                type: ContentChild,
+                args: [IgxQueryBuilderSearchValueTemplateDirective, { read: TemplateRef }]
+            }], queryTree: [{
+                type: ViewChild,
+                args: [IgxQueryBuilderTreeComponent]
             }] } });
 
 const GridResourceStringsEN = {
@@ -49438,8 +50592,8 @@ const GridResourceStringsEN = {
     igx_grid_excel_custom_dialog_add: 'add filter',
     igx_grid_excel_custom_dialog_clear: 'Clear filter',
     igx_grid_excel_custom_dialog_header: 'Custom auto-filter on column: ',
-    igx_grid_excel_cancel: 'Cancel',
-    igx_grid_excel_apply: 'Apply',
+    igx_grid_excel_cancel: 'cancel',
+    igx_grid_excel_apply: 'apply',
     igx_grid_excel_search_placeholder: 'Search',
     igx_grid_excel_select_all: 'Select All',
     igx_grid_excel_select_all_search_results: 'Select all search results',
@@ -49626,7 +50780,6 @@ class IgxAdvancedFilteringDialogComponent {
         eventArgs.stopPropagation();
         const key = eventArgs.key;
         if (this.queryBuilder.isContextMenuVisible && (key === this.platform.KEYMAP.ESCAPE)) {
-            this.queryBuilder.clearSelection();
         }
         else if (key === this.platform.KEYMAP.ESCAPE) {
             this.closeDialog();
@@ -49681,6 +50834,18 @@ class IgxAdvancedFilteringDialogComponent {
         this.applyChanges(event);
         this.closeDialog();
     }
+    /**
+     * @hidden @internal
+     */
+    generateEntity() {
+        const entities = [
+            {
+                name: null,
+                fields: this.filterableFields
+            }
+        ];
+        return entities;
+    }
     assignResourceStrings() {
         // If grid has custom resource strings set for the advanced filtering,
         // they are passed to the query builder resource strings.
@@ -49705,11 +50870,11 @@ class IgxAdvancedFilteringDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxAdvancedFilteringDialogComponent, isStandalone: true, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: ["queryBuilder"], descendants: true, read: IgxQueryBuilderComponent }], ngImport: i0, template: "<article *ngIf=\"grid\" class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter': true,\n        'igx-advanced-filter--inline': inline\n    }\">\n    <igx-query-builder #queryBuilder [locale]=\"grid.locale\"\n        [fields]=\"this.filterableFields\"\n        [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n        <igx-query-builder-header\n            [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n            igxDragHandle>\n        </igx-query-builder-header>\n    </igx-query-builder>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button igxButton=\"flat\" type=\"button\"\n                (click)=\"onClearButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button igxButton=\"flat\" type=\"button\" (click)=\"cancelChanges()\">\n                {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button igxButton=\"contained\" type=\"button\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: ["fields", "expressionTree", "locale", "resourceStrings"], outputs: ["expressionTreeChange"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxAdvancedFilteringDialogComponent, isStandalone: true, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: ["queryBuilder"], descendants: true, read: IgxQueryBuilderComponent }], ngImport: i0, template: "<article *ngIf=\"grid\" class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter': true,\n        'igx-advanced-filter--inline': inline\n    }\">\n    <igx-query-builder #queryBuilder\n        [locale]=\"grid.locale\"\n        [entities]=\"generateEntity()\"\n        [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n        <igx-query-builder-header\n            [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n            igxDragHandle>\n        </igx-query-builder-header>\n    </igx-query-builder>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button igxButton=\"flat\" type=\"button\"\n                (click)=\"onClearButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button igxButton=\"contained\" type=\"button\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: ["showEntityChangeDialog", "entities", "fields", "expressionTree", "locale", "resourceStrings", "disableEntityChange"], outputs: ["expressionTreeChange"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "resourceStrings"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-advanced-filtering-dialog', imports: [NgIf, IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective], template: "<article *ngIf=\"grid\" class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter': true,\n        'igx-advanced-filter--inline': inline\n    }\">\n    <igx-query-builder #queryBuilder [locale]=\"grid.locale\"\n        [fields]=\"this.filterableFields\"\n        [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n        <igx-query-builder-header\n            [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n            igxDragHandle>\n        </igx-query-builder-header>\n    </igx-query-builder>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button igxButton=\"flat\" type=\"button\"\n                (click)=\"onClearButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button igxButton=\"flat\" type=\"button\" (click)=\"cancelChanges()\">\n                {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button igxButton=\"contained\" type=\"button\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
+            args: [{ selector: 'igx-advanced-filtering-dialog', imports: [NgIf, IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective], template: "<article *ngIf=\"grid\" class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter': true,\n        'igx-advanced-filter--inline': inline\n    }\">\n    <igx-query-builder #queryBuilder\n        [locale]=\"grid.locale\"\n        [entities]=\"generateEntity()\"\n        [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n        <igx-query-builder-header\n            [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n            igxDragHandle>\n        </igx-query-builder-header>\n    </igx-query-builder>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button igxButton=\"flat\" type=\"button\"\n                (click)=\"onClearButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button igxButton=\"contained\" type=\"button\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }], propDecorators: { queryBuilder: [{
                 type: ViewChild,
                 args: ['queryBuilder', { read: IgxQueryBuilderComponent }]
@@ -49928,6 +51093,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * @hidden
  */
 class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressionComponent {
+    get searchVal() {
+        return this.expressionUI.expression.searchVal;
+    }
+    set searchVal(value) {
+        this.expressionUI.expression.searchVal = value ? new Date(Date.parse(value.toString())) : null;
+    }
     get inputValuesElement() {
         return this.picker?.getEditElement() || this.input?.nativeElement;
     }
@@ -49941,17 +51112,19 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
         return getLocaleFirstDayOfWeek(this.grid.locale);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\" family=\"default\" name=\"filter_list\"></igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [locale]=\"column.grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" *ngIf=\"!isSingle\" >\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\" family=\"default\" name=\"filter_list\"></igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [locale]=\"column.grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [(ngModel)]=\"searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" *ngIf=\"!isSingle\" >\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-date-expression', imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\" family=\"default\" name=\"filter_list\"></igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [locale]=\"column.grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" *ngIf=\"!isSingle\" >\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
+            args: [{ selector: 'igx-excel-style-date-expression', imports: [IgxSelectComponent, IgxPrefixDirective, NgIf, IgxIconComponent, NgFor, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\" family=\"default\" name=\"filter_list\"></igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [locale]=\"column.grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [(ngModel)]=\"searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" *ngIf=\"!isSingle\" >\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span igxButton\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { read: IgxInputDirective, static: false }]
             }], picker: [{
                 type: ViewChild,
                 args: ['picker']
+            }], searchVal: [{
+                type: Input
             }] } });
 
 /**
@@ -50013,11 +51186,10 @@ function generateExpressionsListRecursive(expressions, operator, expressionsUIs)
  * @hidden
  */
 class IgxExcelStyleCustomDialogComponent {
-    constructor(overlayService, cdr, platform, esf) {
+    constructor(overlayService, cdr, platform) {
         this.overlayService = overlayService;
         this.cdr = cdr;
         this.platform = platform;
-        this.esf = esf;
         this.expressionsList = new Array();
         this._customDialogPositionSettings = {
             verticalDirection: VerticalAlignment.Middle,
@@ -50064,7 +51236,6 @@ class IgxExcelStyleCustomDialogComponent {
     }
     onClearButtonClick() {
         this.filteringService.clearFilter(this.column.field);
-        this.selectedOperator = null;
         this.createInitialExpressionUIElement();
         this.cdr.detectChanges();
     }
@@ -50077,10 +51248,6 @@ class IgxExcelStyleCustomDialogComponent {
             this.toggle.close();
         }
     }
-    cancelDialog() {
-        this.esf.cancel();
-        this.closeDialog();
-    }
     onApplyButtonClick() {
         this.expressionsList = this.expressionsList.filter(element => element.expression.condition &&
             (element.expression.searchVal || element.expression.searchVal === 0 || element.expression.condition.isUnary));
@@ -50095,6 +51262,7 @@ class IgxExcelStyleCustomDialogComponent {
         const exprUI = new ExpressionUI();
         exprUI.expression = {
             condition: null,
+            conditionName: null,
             fieldName: this.column.field,
             ignoreCase: this.column.filteringIgnoreCase,
             searchVal: null
@@ -50167,8 +51335,10 @@ class IgxExcelStyleCustomDialogComponent {
         }
         else {
             this.expressionsList = [];
+            const cond = this.createCondition(this.selectedOperator);
             firstExprUI.expression = {
-                condition: this.createCondition(this.selectedOperator),
+                condition: cond,
+                conditionName: cond.name,
                 fieldName: this.column.field,
                 ignoreCase: this.column.filteringIgnoreCase,
                 searchVal: null
@@ -50179,6 +51349,7 @@ class IgxExcelStyleCustomDialogComponent {
         const secondExprUI = new ExpressionUI();
         secondExprUI.expression = {
             condition: null,
+            conditionName: null,
             fieldName: this.column.field,
             ignoreCase: this.column.filteringIgnoreCase,
             searchVal: null
@@ -50191,13 +51362,13 @@ class IgxExcelStyleCustomDialogComponent {
             this.expressionsContainer.nativeElement.scrollTop = this.expressionsContainer.nativeElement.scrollHeight;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }, { token: BaseFilteringComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression" }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, deps: [{ token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxExcelStyleCustomDialogComponent, isStandalone: true, selector: "igx-excel-style-custom-dialog", inputs: { expressionsList: "expressionsList", column: "column", selectedOperator: "selectedOperator", filteringService: "filteringService", overlayComponentId: "overlayComponentId" }, viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "defaultExpressionTemplate", first: true, predicate: ["defaultExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "dateExpressionTemplate", first: true, predicate: ["dateExpressionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true, static: true }, { propertyName: "expressionComponents", predicate: IgxExcelStyleDefaultExpressionComponent, descendants: true }, { propertyName: "expressionDateComponents", predicate: IgxExcelStyleDateExpressionComponent, descendants: true }], ngImport: i0, template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxExcelStyleDateExpressionComponent, selector: "igx-excel-style-date-expression", inputs: ["searchVal"] }, { kind: "component", type: IgxExcelStyleDefaultExpressionComponent, selector: "igx-excel-style-default-expression", inputs: ["column", "expressionUI", "expressionsList", "grid"], outputs: ["expressionRemoved", "logicOperatorChanged"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExcelStyleCustomDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-custom-dialog', imports: [IgxToggleDirective, NgClass, NgIf, NgFor, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent], template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"cancelDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
-        }], ctorParameters: () => [{ type: IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }, { type: BaseFilteringComponent }], propDecorators: { expressionsList: [{
+            args: [{ selector: 'igx-excel-style-custom-dialog', imports: [IgxToggleDirective, NgClass, NgIf, NgFor, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent], template: "<article #toggle igxToggle\n    class=\"igx-excel-filter__secondary\"\n    [ngClass]=\"{\n        'igx-excel-filter__secondary--cosy': grid.gridSize === '2',\n        'igx-excel-filter__secondary--compact': grid.gridSize === '1'\n    }\"\n    (keydown)=\"onKeyDown($event)\"\n    (opening)=\"onCustomDialogOpening()\"\n    (opened)=\"onCustomDialogOpened()\">\n    <header class=\"igx-excel-filter__secondary-header\">\n        <h4 class=\"ig-typography__h6\">\n            {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}\n        </h4>\n    </header>\n\n    <article #expressionsContainer class=\"igx-excel-filter__secondary-main\">\n        <ng-container *ngIf=\"column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time'\">\n            <igx-excel-style-date-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-date-expression>\n        </ng-container>\n\n        <ng-container *ngIf=\"column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time'\">\n            <igx-excel-style-default-expression *ngFor=\"let expression of expressionsList;\"\n                class=\"igx-excel-filter__condition\"\n                [expressionUI]=\"expression\"\n                [column]=\"column\"\n                [grid]=\"grid\"\n                [expressionsList]=\"expressionsList\"\n                (expressionRemoved)=\"onExpressionRemoved($event)\"\n                (logicOperatorChanged)=\"onLogicOperatorChanged($event)\">\n            </igx-excel-style-default-expression>\n        </ng-container>\n\n        <button type=\"button\" igxButton\n            class=\"igx-excel-filter__add-filter\"\n            (click)=\"onAddButtonClick()\">\n            <igx-icon family=\"default\" name=\"add\"></igx-icon>\n            <span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>\n        </button>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"onClearButtonClick()\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button type=\"button\"\n                igxButton=\"flat\"\n                (click)=\"closeDialog()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button type=\"button\"\n                igxButton=\"contained\"\n                (click)=\"onApplyButtonClick()\"\n                (keydown)=\"onApplyButtonKeyDown($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n" }]
+        }], ctorParameters: () => [{ type: IgxOverlayService }, { type: i0.ChangeDetectorRef }, { type: PlatformUtil }], propDecorators: { expressionsList: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -50232,7 +51403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  */
 class IgxExcelStyleConditionalFilterComponent {
     get filterNumber() {
-        return this.esf.expressionsList.filter(e => e.expression.condition).length;
+        return this.esf.expressionsList.length;
     }
     constructor(esf, platform) {
         this.esf = esf;
@@ -50324,9 +51495,6 @@ class IgxExcelStyleConditionalFilterComponent {
             this.esf.expressionsList[0].expression.condition.name !== 'in') {
             this.customDialog.expressionsList = this.esf.expressionsList;
         }
-        else {
-            this.customDialog.expressionsList = this.customDialog.expressionsList.filter(e => e.expression.fieldName === this.esf.column.field && e.expression.condition);
-        }
         this.customDialog.selectedOperator = eventArgs.newSelection.value;
         eventArgs.cancel = true;
         if (this.esf.overlayComponentId) {
@@ -54335,6 +55503,7 @@ class IgxExcelStyleSearchComponent {
                     }
                     filterTree.filteringOperands.push({
                         condition,
+                        conditionName: condition.name,
                         fieldName: this.esf.column.field,
                         ignoreCase: this.esf.column.filteringIgnoreCase,
                         searchVal: element.value
@@ -54350,6 +55519,7 @@ class IgxExcelStyleSearchComponent {
                 }
                 filterTree.filteringOperands.push({
                     condition: this.createCondition('in'),
+                    conditionName: 'in',
                     fieldName: this.esf.column.field,
                     ignoreCase: this.esf.column.filteringIgnoreCase,
                     searchVal: new Set(this.esf.column.dataType === GridColumnDataType.Date ?
@@ -54363,6 +55533,7 @@ class IgxExcelStyleSearchComponent {
                 if (blanksItem) {
                     filterTree.filteringOperands.push({
                         condition: this.createCondition('empty'),
+                        conditionName: 'empty',
                         fieldName: this.esf.column.field,
                         ignoreCase: this.esf.column.filteringIgnoreCase,
                         searchVal: blanksItem.value
@@ -55056,8 +56227,7 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         this.filterValues = this.generateFilterValues();
         this.generateListData();
         this.expressionsList.forEach(expr => {
-            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase &&
-                expr.expression.searchVal && expr.expression.searchVal instanceof Set) {
+            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
                 this.modifyExpression(expr);
             }
         });
@@ -55466,8 +56636,8 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
         this.ghostElement.style.flexBasis = null;
         this.ghostElement.style.position = null;
         this.ghostElement.classList.remove(this.columnSelectedClass);
-        const icon = this.column?.grid.document.createElement('i');
-        const text = this.column?.grid.document.createTextNode('block');
+        const icon = document.createElement('i');
+        const text = document.createTextNode('block');
         icon.appendChild(text);
         icon.classList.add('material-icons');
         this.cms.icon = icon;
@@ -55907,7 +57077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class IgxHeaderGroupWidthPipe {
     transform(width, minWidth, hasLayout) {
         const isFitContent = width === 'fit-content';
-        return hasLayout ? '' : isFitContent ? width : `${Math.max(parseFloat(width), minWidth)}px`;
+        return hasLayout ? '' : isFitContent ? width : `${Math.max(parseInt(width), minWidth)}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxHeaderGroupWidthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: IgxHeaderGroupWidthPipe, isStandalone: true, name: "igxHeaderGroupWidth" }); }
@@ -55962,7 +57132,7 @@ class IgxColumnResizingService {
      * @hidden
      */
     getColumnHeaderRenderedWidth() {
-        return parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width);
+        return this.column.headerCell.nativeElement.getBoundingClientRect().width;
     }
     /**
      * @hidden
@@ -56018,9 +57188,9 @@ class IgxColumnResizingService {
     /**
      * Resizes the column regaridng to the column minWidth and maxWidth.
      */
-    resizeColumn(event, ratio = 1) {
+    resizeColumn(event) {
         this.showResizer = false;
-        const diff = (event.clientX - this.startResizePos) / ratio;
+        const diff = event.clientX - this.startResizePos;
         const colWidth = this.column.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         let currentColWidth = parseFloat(colWidth);
@@ -56852,7 +58022,7 @@ class IgxFilteringService {
             newExpressionsTree.filteringOperands = [...filteringState.filteringOperands];
         }
         if (condition) {
-            const newExpression = { fieldName, searchVal, condition, ignoreCase };
+            const newExpression = { fieldName: fieldName, searchVal, condition, conditionName: condition.name, ignoreCase };
             expressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName);
             expressionsTree.filteringOperands.push(newExpression);
         }
@@ -57040,7 +58210,7 @@ class IgxGridFilteringCellComponent {
             const chipsAreaElements = this.chipsArea.element.nativeElement.children;
             let visibleChipsCount = 0;
             const moreIconWidth = this.moreIcon.nativeElement.offsetWidth -
-                parseInt(this.column?.grid.document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
+                parseInt(document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
             for (let index = 0; index < chipsAreaElements.length - 1; index++) {
                 if (viewWidth + chipsAreaElements[index].offsetWidth < areaWidth) {
                     viewWidth += chipsAreaElements[index].offsetWidth;
@@ -57048,8 +58218,8 @@ class IgxGridFilteringCellComponent {
                         visibleChipsCount++;
                     }
                     else {
-                        viewWidth += parseInt(this.column?.grid.document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-left'], 10);
-                        viewWidth += parseInt(this.column?.grid.document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-right'], 10);
+                        viewWidth += parseInt(document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-left'], 10);
+                        viewWidth += parseInt(document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-right'], 10);
                     }
                 }
                 else {
@@ -58034,7 +59204,7 @@ class IgxGridFilteringRowComponent {
             return;
         }
         requestAnimationFrame(() => {
-            const focusedElement = this.column?.grid.document.activeElement;
+            const focusedElement = document.activeElement;
             if (focusedElement.classList.contains('igx-chip__remove')) {
                 return;
             }
@@ -58116,7 +59286,7 @@ class IgxGridFilteringRowComponent {
         requestAnimationFrame(() => this.focusEditElement());
     }
     onChipPointerdown(args, chip) {
-        const activeElement = this.column?.grid.document.activeElement;
+        const activeElement = document.activeElement;
         this._cancelChipClick = chip.selected
             && activeElement && this.editorFocused(activeElement);
     }
@@ -58269,6 +59439,7 @@ class IgxGridFilteringRowComponent {
         this.expression = {
             fieldName: this.column.field,
             condition: null,
+            conditionName: null,
             searchVal: null,
             ignoreCase: this.column.filteringIgnoreCase
         };
@@ -60335,9 +61506,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * @internal
  */
 class IgxColumnResizerDirective {
-    get ratio() {
-        return this._ratio;
-    }
     constructor(element, document, zone) {
         this.element = element;
         this.document = document;
@@ -60348,10 +61516,9 @@ class IgxColumnResizerDirective {
         this.resizeStart = new Subject();
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.resize = new Subject();
-        this._ratio = 1;
         this._destroy = new Subject();
         this.resizeStart.pipe(takeUntil(this._destroy), map((event) => event.clientX), switchMap((offset) => this.resize
-            .pipe(takeUntil(this._destroy), takeUntil(this.resizeEnd), map((event) => (event.clientX - offset) / (this._ratio)))))
+            .pipe(takeUntil(this._destroy), takeUntil(this.resizeEnd), map((event) => event.clientX - offset))))
             .subscribe((pos) => {
             const left = this._left + pos;
             const min = this._left - this.restrictHResizeMin;
@@ -60394,12 +61561,7 @@ class IgxColumnResizerDirective {
     onMousedown(event) {
         event.preventDefault();
         const parent = this.element.nativeElement.parentElement.parentElement;
-        const parentRectWidth = parent.getBoundingClientRect().width;
-        const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width);
-        if (Math.abs(parentRectWidth - parentComputedWidth) > 1) {
-            this._ratio = parentRectWidth / parentComputedWidth;
-        }
-        this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;
+        this.left = this._left = event.clientX - parent.getBoundingClientRect().left;
         this.top = event.target.getBoundingClientRect().top - parent.getBoundingClientRect().top;
         this.resizeStart.next(event);
     }
@@ -60438,11 +61600,11 @@ class IgxGridColumnResizerComponent {
         this.colResizingService = colResizingService;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridColumnResizerComponent, deps: [{ token: IgxColumnResizingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxGridColumnResizerComponent, isStandalone: true, selector: "igx-grid-column-resizer", inputs: { restrictResizerTop: "restrictResizerTop" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: IgxColumnResizerDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxGridColumnResizerComponent, isStandalone: true, selector: "igx-grid-column-resizer", inputs: { restrictResizerTop: "restrictResizerTop" }, viewQueries: [{ propertyName: "resizer", first: true, predicate: IgxColumnResizerDirective, descendants: true, static: true }], ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxGridColumnResizerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-column-resizer', imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-column-resizer', imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event)\">\n</div>\n" }]
         }], ctorParameters: () => [{ type: IgxColumnResizingService }], propDecorators: { restrictResizerTop: [{
                 type: Input
             }], resizer: [{
@@ -64172,10 +65334,6 @@ class IgxGridBaseDirective {
          * @hidden @internal
          */
         this.filteringPipeTrigger = 0;
-        /**
-         * @hidden @internal
-         */
-        this.isColumnWidthSum = false;
         /**
          * @hidden @internal
          */
@@ -64304,6 +65462,7 @@ class IgxGridBaseDirective {
         this._rowSelectionMode = GridSelectionMode.none;
         this._selectRowOnClick = true;
         this._columnSelectionMode = GridSelectionMode.none;
+        this.isColumnWidthSum = false;
         this.rowEditPositioningStrategy = new RowEditPositionStrategy({
             horizontalDirection: HorizontalAlignment.Right,
             verticalDirection: VerticalAlignment.Bottom,
@@ -65348,7 +66507,7 @@ class IgxGridBaseDirective {
         let totalWidth = 0;
         let i = 0;
         for (i; i < cols.length; i++) {
-            totalWidth += parseFloat(cols[i].calcWidth) || 0;
+            totalWidth += parseInt(cols[i].calcWidth, 10) || 0;
         }
         this._totalWidth = totalWidth;
         return totalWidth;
@@ -66113,7 +67272,7 @@ class IgxGridBaseDirective {
         }
         else {
             computedWidth = this.calcWidth ||
-                parseFloat(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'));
+                parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
         }
         const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup);
         // Column layouts related
@@ -66132,7 +67291,7 @@ class IgxGridBaseDirective {
         const sumExistingWidths = columnsWithSetWidths
             .reduce((prev, curr) => {
             const colWidth = curr.width;
-            let widthValue = parseFloat(colWidth);
+            let widthValue = parseInt(colWidth, 10);
             if (isNaN(widthValue)) {
                 widthValue = MINIMUM_COLUMN_WIDTH$1;
             }
@@ -66146,9 +67305,9 @@ class IgxGridBaseDirective {
             return '0px';
         }
         computedWidth -= this.featureColumnsWidth();
-        const columnWidth = !Number.isFinite(sumExistingWidths) ?
+        const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
             Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
-            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth);
+            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth));
         return columnWidth + 'px';
     }
     /**
@@ -67117,11 +68276,8 @@ class IgxGridBaseDirective {
             width = this.nativeElement.offsetWidth;
         }
         if (this.width === null || !width) {
-            this.isColumnWidthSum = true;
             width = this.getColumnWidthSum();
-        }
-        else {
-            this.isColumnWidthSum = false;
+            this.isColumnWidthSum = true;
         }
         if (this.hasVerticalScroll() && this.width !== null) {
             width -= this.scrollSize;
@@ -67140,8 +68296,8 @@ class IgxGridBaseDirective {
             this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + 'px';
         }
         this._columns.forEach((column) => {
-            if (this.hasColumnLayouts && parseFloat(this._columnWidth)) {
-                const columnWidthCombined = parseFloat(this._columnWidth) * (column.colEnd ? column.colEnd - column.colStart : 1);
+            if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
+                const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
             }
             else {
@@ -68067,7 +69223,7 @@ class IgxGridBaseDirective {
     get renderedActualRowHeight() {
         let border = 1;
         if (this.rowList.toArray().length > 0) {
-            const rowStyles = this.document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
+            const rowStyles = document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
             border = rowStyles.borderBottomWidth ? Math.ceil(parseFloat(rowStyles.borderBottomWidth)) : border;
         }
         return this.rowHeight + border;
@@ -74660,11 +75816,11 @@ class IgxPivotGridColumnResizerComponent extends IgxGridColumnResizerComponent {
         this.colResizingService = colResizingService;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotGridColumnResizerComponent, deps: [{ token: IgxPivotColumnResizingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxPivotGridColumnResizerComponent, isStandalone: true, selector: "igx-pivot-grid-column-resizer", usesInheritance: true, ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxPivotGridColumnResizerComponent, isStandalone: true, selector: "igx-pivot-grid-column-resizer", usesInheritance: true, ngImport: i0, template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event)\">\n</div>\n", dependencies: [{ kind: "directive", type: IgxColumnResizerDirective, selector: "[igxResizer]", inputs: ["restrictHResizeMin", "restrictHResizeMax", "restrictResizerTop"], outputs: ["resizeEnd", "resizeStart", "resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxPivotGridColumnResizerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-grid-column-resizer', imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event, resizer.ratio)\">\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-grid-column-resizer', imports: [IgxColumnResizerDirective], template: "<div class=\"igx-grid-th__resize-line\"\n    [style.left.px]=\"-99999\" igxResizer\n    [style.height.px]=\"colResizingService.resizerHeight\"\n    [restrictHResizeMax]=\"colResizingService.restrictResizeMax\"\n    [restrictHResizeMin]=\"colResizingService.restrictResizeMin\"\n    [restrictResizerTop]=\"restrictResizerTop\"\n    (resizeEnd)=\"colResizingService.resizeColumn($event)\">\n</div>\n" }]
         }], ctorParameters: () => [{ type: IgxPivotColumnResizingService }] });
 
 class DefaultPivotGridRecordSortingStrategy extends DefaultSortingStrategy {
@@ -78432,7 +79588,7 @@ class IgxGridStateBaseDirective {
                     expr.searchVal = new Set(expr.searchVal);
                 }
                 else {
-                    expr.searchVal = expr.searchVal && (dataType === 'date' || dataType === 'dateTime') ? new Date(Date.parse(expr.searchVal)) : expr.searchVal;
+                    expr.searchVal = expr.searchVal && (dataType === 'date' || dataType === 'dateTime') ? new Date(Date.parse(expr.searchVal.toString())) : expr.searchVal;
                 }
                 const condition = this.generateFilteringCondition(dataType, expr.condition.name) ||
                     this.currGrid.columns.find(c => c.field === expr.fieldName).filters.condition(expr.condition.name);
@@ -83455,7 +84611,6 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
         const columns = [];
         const topLevelCols = cols.filter(c => c.level === 0);
         topLevelCols.forEach((col) => {
-            col.grid = this;
             const ref = this._createColumn(col);
             ref.changeDetectorRef.detectChanges();
             columns.push(ref.instance);
@@ -83750,7 +84905,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
     set expandChildren(value) {
         this._defaultExpandState = value;
         this.rowIslandAPI.getChildGrids().forEach((grid) => {
-            if (this.document.body.contains(grid.nativeElement)) {
+            if (document.body.contains(grid.nativeElement)) {
                 // Detect changes right away if the grid is visible
                 grid.expandChildren = value;
                 grid.cdr.detectChanges();
@@ -83995,7 +85150,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         this.updateColumns(this._childColumns);
         this.rowIslandAPI.getChildGrids().forEach((grid) => {
             grid.createColumnsList(this._childColumns);
-            if (!this.document.body.contains(grid.nativeElement)) {
+            if (!document.body.contains(grid.nativeElement)) {
                 grid.updateOnRender = true;
             }
         });
@@ -93084,7 +94239,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxDateRangePickerComponent, isStandalone: true, selector: "igx-date-range-picker", inputs: { displayMonthsCount: "displayMonthsCount", hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], formatter: "formatter", doneButtonText: "doneButtonText", overlaySettings: "overlaySettings", displayFormat: "displayFormat", inputFormat: "inputFormat", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", placeholder: "placeholder", outlet: "outlet", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], locale: "locale", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.igx-date-range-picker": "this.cssClass" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateRangePickerComponent, multi: true },
             { provide: NG_VALIDATORS, useExisting: IgxDateRangePickerComponent, multi: true }
-        ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }] }); }
+        ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxDateRangePickerComponent, decorators: [{
             type: Component,
@@ -93099,7 +94254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         IgxInputDirective,
                         IgxPrefixDirective,
                         DateRangePickerFormatPipe
-                    ], template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n" }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -93195,7 +94350,8 @@ const IGX_TREE_DIRECTIVES = [
 /* NOTE: Query builder directives collection for ease-of-use import in standalone components scenario */
 const IGX_QUERY_BUILDER_DIRECTIVES = [
     IgxQueryBuilderComponent,
-    IgxQueryBuilderHeaderComponent
+    IgxQueryBuilderHeaderComponent,
+    IgxQueryBuilderSearchValueTemplateDirective,
 ];
 
 /**
@@ -94090,7 +95246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  */
 class IgxQueryBuilderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent], exports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective], exports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderModule, decorators: [{
@@ -94373,5 +95529,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, ActionStripResourceStringsEN, AutoPositionStrategy, BannerResourceStringsEN, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, CachedDataCloneStrategy, Calendar, CalendarResourceStringsEN, CalendarSelection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CarouselResourceStringsEN, ChipResourceStringsEN, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ComboResourceStringsEN, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DatePickerResourceStringsEN, DateRangePickerFormatPipe, DateRangePickerResourceStringsEN, DateRangeType, DefaultDataCloneStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DimensionValuesFilteringStrategy, Direction, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, ExpressionsTreeUtil, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, FormattedValuesSortingStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridColumnDataType, GridPagingMode, GridResourceStringsEN, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CALENDAR_VIEW_ITEM, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_RADIO_GROUP_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollPageDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarViewBaseDirective, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconButtonDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotNumericAggregate, IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextHighlightService, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, IndigoIcons, InputResourceStringsEN, LabelPosition, ListResourceStringsEN, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PaginatorResourceStringsEN, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, Point, QueryBuilderResourceStringsEN, RadioGroupAlignment, RelativePosition, RelativePositionStrategy, RowPinningPosition, ScrollStrategy, Size, SliderHandle, SortingDirection, SplitterType, THEME_TOKEN, ThemeToken, TickLabelsOrientation, TicksOrientation, TimePickerResourceStringsEN, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, TreeResourceStringsEN, VerticalAlignment, VerticalAnimationType, WEEKDAYS, changei18n, comboIgnoreDiacriticsFilter, igxI18N, isLeap, monthRange, range, weekDay };
+export { AbsolutePosition, AbsoluteScrollStrategy, ActionStripResourceStringsEN, AutoPositionStrategy, BannerResourceStringsEN, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, CachedDataCloneStrategy, Calendar, CalendarResourceStringsEN, CalendarSelection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CarouselResourceStringsEN, ChipResourceStringsEN, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ComboResourceStringsEN, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DatePickerResourceStringsEN, DateRangePickerFormatPipe, DateRangePickerResourceStringsEN, DateRangeType, DefaultDataCloneStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DimensionValuesFilteringStrategy, Direction, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, ExpressionsTreeUtil, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, FormattedValuesSortingStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridColumnDataType, GridPagingMode, GridResourceStringsEN, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CALENDAR_VIEW_ITEM, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_RADIO_GROUP_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollPageDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarViewBaseDirective, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconButtonDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotNumericAggregate, IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxQueryBuilderSearchValueTemplateDirective, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextHighlightService, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, IndigoIcons, InputResourceStringsEN, LabelPosition, ListResourceStringsEN, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PaginatorResourceStringsEN, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, Point, QueryBuilderResourceStringsEN, RadioGroupAlignment, RelativePosition, RelativePositionStrategy, RowPinningPosition, ScrollStrategy, Size, SliderHandle, SortingDirection, SplitterType, TickLabelsOrientation, TicksOrientation, TimePickerResourceStringsEN, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, TreeResourceStringsEN, VerticalAlignment, VerticalAnimationType, WEEKDAYS, changei18n, comboIgnoreDiacriticsFilter, igxI18N, isLeap, monthRange, range, weekDay };
 //# sourceMappingURL=igniteui-angular.mjs.map