igniteui-angular 20.0.4 → 20.0.6

package/fesm2022/igniteui-angular.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, HostListener, Input, Directive, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, DOCUMENT, HostBinding, Output, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, contentChildren, QueryList, signal, effect, LOCALE_ID, forwardRef, Host, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, ChangeDetectorRef, NgZone, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
+import { Injectable, HostListener, Input, Directive, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, DOCUMENT, HostBinding, Output, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, Renderer2, NgZone, signal, QueryList, effect, LOCALE_ID, forwardRef, Host, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, ChangeDetectorRef, 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, takeUntil as takeUntil$1, merge, Subscription, timer, sampleTime, filter as filter$1, pipe, take as take$1 } from 'rxjs';
 import { takeUntil, filter, throttle, throttleTime, first as first$2, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
-import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateTimeFormat, NgTemplateOutlet, NgClass, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
+import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateTimeFormat, NgTemplateOutlet, NgClass, DOCUMENT as DOCUMENT$1, 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';
 import { strToU8, zip } from 'fflate';
 import { scaleOutVerTop, scaleInVerTop, AnimationUtil, fadeOut, fadeIn, slideOutTop, slideInTop, slideOutBottom, slideInBottom, scaleOutHorRight, scaleInHorRight, scaleOutHorLeft, scaleInHorLeft, scaleOutVerBottom, scaleInVerBottom, scaleInCenter, growVerOut, growVerIn, slideInLeft } from 'igniteui-angular/animations';
@@ -15585,6 +15585,9 @@ class VirtualHelperBaseDirective {
         this.destroy$ = new Subject();
         this._afterViewInit = false;
         this._detached = false;
+        this.renderer = inject(Renderer2);
+        this.platformId = inject(PLATFORM_ID);
+        this.ngZone = inject(NgZone);
         this._scrollNativeSize = this.calculateScrollNativeSize();
     }
     onScroll(event) {
@@ -15640,6 +15643,30 @@ class VirtualHelperBaseDirective {
     get isAttachedToDom() {
         return this.document.body.contains(this.nativeElement);
     }
+    toggleClass(element, className, shouldHaveClass) {
+        if (shouldHaveClass) {
+            this.renderer.addClass(element, className);
+        }
+        else {
+            this.renderer.removeClass(element, className);
+        }
+    }
+    updateScrollbarClass() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+                const el = this.nativeElement;
+                const hasScrollbar = el.scrollHeight > el.clientHeight;
+                const prevSibling = el.previousElementSibling;
+                const scrollbarClass = 'igx-display-container--scrollbar';
+                if (prevSibling?.tagName.toLowerCase() === 'igx-display-container') {
+                    this.toggleClass(prevSibling, scrollbarClass, hasScrollbar);
+                }
+            });
+        });
+    }
     handleMutations(event) {
         const hasSize = !(event[0].contentRect.height === 0 && event[0].contentRect.width === 0);
         if (!hasSize && !this.isAttachedToDom) {
@@ -15650,9 +15677,10 @@ class VirtualHelperBaseDirective {
             // attached back now.
             this.restoreScroll();
         }
+        this.updateScrollbarClass();
     }
     restoreScroll() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT$1 }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: VirtualHelperBaseDirective, isStandalone: true, selector: "[igxVirtualHelperBase]", host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperBaseDirective, decorators: [{
@@ -15663,7 +15691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [DOCUMENT]
+                    args: [DOCUMENT$1]
                 }] }, { type: PlatformUtil }], propDecorators: { onScroll: [{
                 type: HostListener,
                 args: ['scroll', ['$event']]
@@ -15680,7 +15708,7 @@ class HVirtualHelperComponent extends VirtualHelperBaseDirective {
     restoreScroll() {
         this.nativeElement.scrollLeft = this.scrollAmount;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HVirtualHelperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HVirtualHelperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT$1 }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: HVirtualHelperComponent, isStandalone: true, selector: "igx-horizontal-virtual-helper", inputs: { width: "width" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["horizontal_container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<div #horizontal_container class="igx-vhelper__placeholder-content" [style.width.px]="size"></div>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HVirtualHelperComponent, decorators: [{
@@ -15692,7 +15720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [DOCUMENT]
+                    args: [DOCUMENT$1]
                 }] }, { type: PlatformUtil }], propDecorators: { _vcr: [{
                 type: ViewChild,
                 args: ['horizontal_container', { read: ViewContainerRef, static: true }]
@@ -15715,7 +15743,7 @@ class VirtualHelperComponent extends VirtualHelperBaseDirective {
     restoreScroll() {
         this.nativeElement.scrollTop = this.scrollAmount;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT$1 }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: VirtualHelperComponent, isStandalone: true, selector: "igx-virtual-helper", inputs: { itemsLength: "itemsLength" }, host: { properties: { "scrollTop": "this.scrollTop", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<div #container class="igx-vhelper__placeholder-content" [style.height.px]="size"></div>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperComponent, decorators: [{
@@ -15727,7 +15755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [DOCUMENT]
+                    args: [DOCUMENT$1]
                 }] }, { type: PlatformUtil }], propDecorators: { scrollTop: [{
                 type: HostBinding,
                 args: ['scrollTop']
@@ -18881,212 +18909,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 args: ['blur']
             }] } });
 
-/**
- * **Ignite UI for Angular Radio Button** -
- * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)
- *
- * The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side.
- *
- * Example:
- * ```html
- * <igx-radio>
- *   Simple radio button
- * </igx-radio>
- * ```
- */
-class IgxRadioComponent extends CheckboxBaseDirective {
-    constructor() {
-        super(...arguments);
-        /** @hidden @internal */
-        this.blurRadio = new EventEmitter();
-        /**
-         * Returns the class of the radio component.
-         * ```typescript
-         * let radioClass = this.radio.cssClass;
-         * ```
-         *
-         * @memberof IgxRadioComponent
-         */
-        this.cssClass = 'igx-radio';
-        /**
-         * Sets/gets  the `disabled` attribute.
-         * Default value is `false`.
-         * ```html
-         * <igx-radio disabled></igx-radio>
-         * ```
-         * ```typescript
-         * let isDisabled =  this.radio.disabled;
-         * ```
-         *
-         * @memberof IgxRadioComponent
-         */
-        this.disabled = false;
-        /**
-         * Sets/gets whether the radio button is invalid.
-         * Default value is `false`.
-         * ```html
-         * <igx-radio invalid></igx-radio>
-         * ```
-         * ```typescript
-         * let isInvalid =  this.radio.invalid;
-         * ```
-         *
-         * @memberof IgxRadioComponent
-         */
-        this.invalid = false;
-        /**
-         * Sets/gets whether the radio component is on focus.
-         * Default value is `false`.
-         * ```typescript
-         * this.radio.focus = true;
-         * ```
-         * ```typescript
-         * let isFocused =  this.radio.focused;
-         * ```
-         *
-         * @memberof IgxRadioComponent
-         */
-        this.focused = false;
-    }
-    /**
-     * Sets/gets  the `checked` attribute.
-     * Default value is `false`.
-     * ```html
-     * <igx-radio [checked]="true"></igx-radio>
-     * ```
-     * ```typescript
-     * let isChecked =  this.radio.checked;
-     * ```
-     *
-     * @memberof IgxRadioComponent
-     */
-    set checked(value) {
-        this._checked = value;
-    }
-    get checked() {
-        return this._checked;
-    }
-    /**
-     * @hidden
-     * @internal
-     */
-    _changed(event) {
-        if (event instanceof Event) {
-            event.preventDefault();
-        }
-    }
-    /**
-     * @hidden
-     */
-    _onCheckboxClick() {
-        this.select();
-    }
-    /**
-     * Selects the current radio button.
-     * ```typescript
-     * this.radio.select();
-     * ```
-     *
-     * @memberof IgxRadioComponent
-     */
-    select() {
-        if (!this.checked) {
-            this.checked = true;
-            this.change.emit({
-                value: this.value,
-                owner: this,
-                checked: this.checked,
-            });
-            this._onChangeCallback(this.value);
-        }
-    }
-    /**
-     * Deselects the current radio button.
-     * ```typescript
-     * this.radio.deselect();
-     * ```
-     *
-     * @memberof IgxRadioComponent
-     */
-    deselect() {
-        this.checked = false;
-        this.focused = false;
-        this.cdr.markForCheck();
-    }
-    /**
-     * Checks whether the provided value is consistent to the current radio button.
-     * If it is, the checked attribute will have value `true`;
-     * ```typescript
-     * this.radio.writeValue('radioButtonValue');
-     * ```
-     */
-    writeValue(value) {
-        this.value = this.value ?? value;
-        if (value === this.value) {
-            if (!this.checked) {
-                this.checked = true;
-            }
-        }
-        else {
-            this.deselect();
-        }
-    }
-    /**
-     * @hidden
-     */
-    onBlur() {
-        super.onBlur();
-        this.blurRadio.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.0", type: IgxRadioComponent, isStandalone: true, selector: "igx-radio", inputs: { checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute] }, host: { listeners: { "change": "_changed($event)", "click": "_onCheckboxClick()", "blur": "onBlur()" }, properties: { "class.igx-radio": "this.cssClass", "class.igx-radio--checked": "this.checked", "class.igx-radio--disabled": "this.disabled", "class.igx-radio--invalid": "this.invalid", "class.igx-radio--focused": "this.focused" } }, providers: [{
-                provide: EDITOR_PROVIDER,
-                useExisting: IgxRadioComponent,
-                multi: true
-            }], usesInheritance: true, ngImport: i0, template: "<input #checkbox class=\"igx-radio__input\" type=\"radio\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-radio__composite\" igxRipple\n    igxRippleTarget=\".igx-radio__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\">\n    <div class=\"igx-radio__ripple\"></div>\n</span>\n\n<span #placeholderLabel\n    [id]=\"labelId\"\n    [class]=\"labelClass\">\n    <ng-content></ng-content>\n</span>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxRadioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igx-radio', providers: [{
-                            provide: EDITOR_PROVIDER,
-                            useExisting: IgxRadioComponent,
-                            multi: true
-                        }], imports: [IgxRippleDirective], template: "<input #checkbox class=\"igx-radio__input\" type=\"radio\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-radio__composite\" igxRipple\n    igxRippleTarget=\".igx-radio__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\">\n    <div class=\"igx-radio__ripple\"></div>\n</span>\n\n<span #placeholderLabel\n    [id]=\"labelId\"\n    [class]=\"labelClass\">\n    <ng-content></ng-content>\n</span>\n" }]
-        }], propDecorators: { cssClass: [{
-                type: HostBinding,
-                args: ['class.igx-radio']
-            }], checked: [{
-                type: HostBinding,
-                args: ['class.igx-radio--checked']
-            }, {
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: HostBinding,
-                args: ['class.igx-radio--disabled']
-            }, {
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], invalid: [{
-                type: HostBinding,
-                args: ['class.igx-radio--invalid']
-            }, {
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], focused: [{
-                type: HostBinding,
-                args: ['class.igx-radio--focused']
-            }], _changed: [{
-                type: HostListener,
-                args: ['change', ['$event']]
-            }], _onCheckboxClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
 /**
  * @hidden
  */
@@ -19185,8 +19007,7 @@ class IgxRadioGroupDirective {
      * ```
      */
     get radioButtons() {
-        const buttons = Array.from(this._radioButtons());
-        this._radioButtonsList.reset(buttons);
+        this._radioButtonsList.reset(this._radioButtons());
         return this._radioButtonsList;
     }
     /**
@@ -19465,7 +19286,7 @@ class IgxRadioGroupDirective {
         this.ngControl = ngControl;
         this._directionality = _directionality;
         this.cdr = cdr;
-        this._radioButtons = contentChildren(IgxRadioComponent, { descendants: true });
+        this._radioButtons = signal([]);
         this._radioButtonsList = new QueryList();
         /**
          * An event that is emitted after the radio group `value` is changed.
@@ -19547,9 +19368,7 @@ class IgxRadioGroupDirective {
         }
         effect(() => {
             this.initialize();
-            Promise.resolve().then(() => {
-                this.setRadioButtons();
-            });
+            this.setRadioButtons();
         });
     }
     /**
@@ -19582,8 +19401,10 @@ class IgxRadioGroupDirective {
      */
     setRadioButtons() {
         this._radioButtons().forEach((button) => {
-            button.name = this._name;
-            button.required = this._required;
+            Promise.resolve().then(() => {
+                button.name = this._name;
+                button.required = this._required;
+            });
             if (button.value === this._value) {
                 button.checked = true;
                 this._selected = button;
@@ -19681,6 +19502,28 @@ class IgxRadioGroupDirective {
             });
         }
     }
+    /**
+     * Registers a radio button with this radio group.
+     * This method is called by radio button components when they are created.
+     * @hidden @internal
+     */
+    _addRadioButton(radioButton) {
+        this._radioButtons.update(buttons => {
+            if (!buttons.includes(radioButton)) {
+                this._setRadioButtonEvents(radioButton);
+                return [...buttons, radioButton];
+            }
+            return buttons;
+        });
+    }
+    /**
+     * Unregisters a radio button from this radio group.
+     * This method is called by radio button components when they are destroyed.
+     * @hidden @internal
+     */
+    _removeRadioButton(radioButton) {
+        this._radioButtons.update(buttons => buttons.filter(btn => btn !== radioButton));
+    }
     /**
      * @hidden
      * @internal
@@ -19693,7 +19536,7 @@ class IgxRadioGroupDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxRadioGroupDirective, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: IgxDirectionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.0", type: IgxRadioGroupDirective, isStandalone: true, selector: "igx-radio-group, [igxRadioGroup]", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical", "class.igx-radio-group--before": "this.labelBefore", "class.igx-radio-group--disabled": "this.disabled" } }, queries: [{ propertyName: "_radioButtons", predicate: IgxRadioComponent, descendants: true, isSignal: true }], exportAs: ["igxRadioGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.0", type: IgxRadioGroupDirective, isStandalone: true, selector: "igx-radio-group, [igxRadioGroup]", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical", "class.igx-radio-group--before": "this.labelBefore", "class.igx-radio-group--disabled": "this.disabled" } }, exportAs: ["igxRadioGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxRadioGroupDirective, decorators: [{
             type: Directive,
@@ -19742,6 +19585,234 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 type: Input
             }] } });
 
+/**
+ * **Ignite UI for Angular Radio Button** -
+ * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html)
+ *
+ * The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side.
+ *
+ * Example:
+ * ```html
+ * <igx-radio>
+ *   Simple radio button
+ * </igx-radio>
+ * ```
+ */
+class IgxRadioComponent extends CheckboxBaseDirective {
+    constructor() {
+        super(...arguments);
+        /** @hidden @internal */
+        this.blurRadio = new EventEmitter();
+        this.radioGroup = inject(IgxRadioGroupDirective, { optional: true, skipSelf: true });
+        /**
+         * Returns the class of the radio component.
+         * ```typescript
+         * let radioClass = this.radio.cssClass;
+         * ```
+         *
+         * @memberof IgxRadioComponent
+         */
+        this.cssClass = 'igx-radio';
+        /**
+         * Sets/gets  the `disabled` attribute.
+         * Default value is `false`.
+         * ```html
+         * <igx-radio disabled></igx-radio>
+         * ```
+         * ```typescript
+         * let isDisabled =  this.radio.disabled;
+         * ```
+         *
+         * @memberof IgxRadioComponent
+         */
+        this.disabled = false;
+        /**
+         * Sets/gets whether the radio button is invalid.
+         * Default value is `false`.
+         * ```html
+         * <igx-radio invalid></igx-radio>
+         * ```
+         * ```typescript
+         * let isInvalid =  this.radio.invalid;
+         * ```
+         *
+         * @memberof IgxRadioComponent
+         */
+        this.invalid = false;
+        /**
+         * Sets/gets whether the radio component is on focus.
+         * Default value is `false`.
+         * ```typescript
+         * this.radio.focus = true;
+         * ```
+         * ```typescript
+         * let isFocused =  this.radio.focused;
+         * ```
+         *
+         * @memberof IgxRadioComponent
+         */
+        this.focused = false;
+    }
+    /**
+     * Sets/gets  the `checked` attribute.
+     * Default value is `false`.
+     * ```html
+     * <igx-radio [checked]="true"></igx-radio>
+     * ```
+     * ```typescript
+     * let isChecked =  this.radio.checked;
+     * ```
+     *
+     * @memberof IgxRadioComponent
+     */
+    set checked(value) {
+        this._checked = value;
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    _changed(event) {
+        if (event instanceof Event) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * @hidden
+     */
+    _onCheckboxClick() {
+        this.select();
+    }
+    /**
+     * Selects the current radio button.
+     * ```typescript
+     * this.radio.select();
+     * ```
+     *
+     * @memberof IgxRadioComponent
+     */
+    select() {
+        if (!this.checked) {
+            this.checked = true;
+            this.change.emit({
+                value: this.value,
+                owner: this,
+                checked: this.checked,
+            });
+            this._onChangeCallback(this.value);
+        }
+    }
+    /**
+     * Deselects the current radio button.
+     * ```typescript
+     * this.radio.deselect();
+     * ```
+     *
+     * @memberof IgxRadioComponent
+     */
+    deselect() {
+        this.checked = false;
+        this.focused = false;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Checks whether the provided value is consistent to the current radio button.
+     * If it is, the checked attribute will have value `true`;
+     * ```typescript
+     * this.radio.writeValue('radioButtonValue');
+     * ```
+     */
+    writeValue(value) {
+        this.value = this.value ?? value;
+        if (value === this.value) {
+            if (!this.checked) {
+                this.checked = true;
+            }
+        }
+        else {
+            this.deselect();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onBlur() {
+        super.onBlur();
+        this.blurRadio.emit();
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        // Register with parent radio group if it exists
+        if (this.radioGroup) {
+            this.radioGroup._addRadioButton(this);
+        }
+    }
+    /**
+     * @hidden
+     * @internal
+     */
+    ngOnDestroy() {
+        // Unregister from parent radio group if it exists
+        if (this.radioGroup) {
+            this.radioGroup._removeRadioButton(this);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.0", type: IgxRadioComponent, isStandalone: true, selector: "igx-radio", inputs: { checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute] }, host: { listeners: { "change": "_changed($event)", "click": "_onCheckboxClick()", "blur": "onBlur()" }, properties: { "class.igx-radio": "this.cssClass", "class.igx-radio--checked": "this.checked", "class.igx-radio--disabled": "this.disabled", "class.igx-radio--invalid": "this.invalid", "class.igx-radio--focused": "this.focused" } }, providers: [{
+                provide: EDITOR_PROVIDER,
+                useExisting: IgxRadioComponent,
+                multi: true
+            }], usesInheritance: true, ngImport: i0, template: "<input #checkbox class=\"igx-radio__input\" type=\"radio\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-radio__composite\" igxRipple\n    igxRippleTarget=\".igx-radio__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\">\n    <div class=\"igx-radio__ripple\"></div>\n</span>\n\n<span #placeholderLabel\n    [id]=\"labelId\"\n    [class]=\"labelClass\">\n    <ng-content></ng-content>\n</span>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igx-radio', providers: [{
+                            provide: EDITOR_PROVIDER,
+                            useExisting: IgxRadioComponent,
+                            multi: true
+                        }], imports: [IgxRippleDirective], template: "<input #checkbox class=\"igx-radio__input\" type=\"radio\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-radio__composite\" igxRipple\n    igxRippleTarget=\".igx-radio__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\">\n    <div class=\"igx-radio__ripple\"></div>\n</span>\n\n<span #placeholderLabel\n    [id]=\"labelId\"\n    [class]=\"labelClass\">\n    <ng-content></ng-content>\n</span>\n" }]
+        }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class.igx-radio']
+            }], checked: [{
+                type: HostBinding,
+                args: ['class.igx-radio--checked']
+            }, {
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.igx-radio--disabled']
+            }, {
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], invalid: [{
+                type: HostBinding,
+                args: ['class.igx-radio--invalid']
+            }, {
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], focused: [{
+                type: HostBinding,
+                args: ['class.igx-radio--focused']
+            }], _changed: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], _onCheckboxClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 /* NOTE: Radio Group directives collection for ease-of-use import in standalone components scenario */
 const IGX_RADIO_GROUP_DIRECTIVES = [
     IgxRadioGroupDirective,
@@ -21599,6 +21670,8 @@ class IgxDateTimeEditorDirective extends IgxMaskDirective {
          * ```
          */
         this.validationFailed = new EventEmitter();
+        this.SCROLL_THRESHOLD = 50;
+        this._scrollAccumulator = 0;
         this._datePartDeltas = {
             date: 1,
             month: 1,
@@ -21619,11 +21692,15 @@ class IgxDateTimeEditorDirective extends IgxMaskDirective {
         }
         event.preventDefault();
         event.stopPropagation();
-        if (event.deltaY > 0) {
-            this.decrement();
-        }
-        else {
-            this.increment();
+        this._scrollAccumulator += event.deltaY;
+        if (Math.abs(this._scrollAccumulator) > this.SCROLL_THRESHOLD) {
+            if (this._scrollAccumulator > 0) {
+                this.decrement();
+            }
+            else {
+                this.increment();
+            }
+            this._scrollAccumulator = 0;
         }
     }
     ngOnInit() {
@@ -37783,6 +37860,15 @@ const ComboResourceStringsEN = {
 const IGX_COMBO_COMPONENT = /*@__PURE__*/ new InjectionToken('IgxComboComponentToken');
 let NEXT_ID$f = 0;
 class IgxComboBaseDirective {
+    /**
+    * Enables/disables filtering in the list. The default is `false`.
+    */
+    get disableFiltering() {
+        return this._disableFiltering;
+    }
+    set disableFiltering(value) {
+        this._disableFiltering = value;
+    }
     /**
      * Gets/gets combo id.
      *
@@ -38438,6 +38524,7 @@ class IgxComboBaseDirective {
         this._onChangeCallback = noop;
         this.compareCollator = new Intl.Collator();
         this._id = `igx-combo-${NEXT_ID$f++}`;
+        this._disableFiltering = false;
         this._type = null;
         this._dataType = '';
         this._itemHeight = undefined;
@@ -38812,7 +38899,7 @@ class IgxComboBaseDirective {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxComboBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IgxComboAPIService }, { token: DOCUMENT }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: i0.Injector, optional: true }, { token: IgxIconService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.0", type: IgxComboBaseDirective, isStandalone: true, inputs: { showSearchCaseIcon: ["showSearchCaseIcon", "showSearchCaseIcon", booleanAttribute], overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: ["allowCustomValues", "allowCustomValues", booleanAttribute], itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", filterFunction: "filterFunction", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], type: "type", resourceStrings: "resourceStrings", filteringOptions: "filteringOptions" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }, { propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: 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: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }, { propertyName: "internalSuffixes", predicate: IgxSuffixDirective, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.0", type: IgxComboBaseDirective, isStandalone: true, inputs: { showSearchCaseIcon: ["showSearchCaseIcon", "showSearchCaseIcon", booleanAttribute], disableFiltering: ["disableFiltering", "disableFiltering", booleanAttribute], overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: ["allowCustomValues", "allowCustomValues", booleanAttribute], itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", filterFunction: "filterFunction", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], type: "type", resourceStrings: "resourceStrings", filteringOptions: "filteringOptions" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }, { propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: 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: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }, { propertyName: "internalSuffixes", predicate: IgxSuffixDirective, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
             type: Directive
@@ -38834,6 +38921,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }] }], propDecorators: { showSearchCaseIcon: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], disableFiltering: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], overlaySettings: [{
                 type: Input
             }], id: [{
@@ -39334,15 +39424,6 @@ const diffInSets = (set1, set2) => {
  * ```
  */
 class IgxComboComponent extends IgxComboBaseDirective {
-    /**
-     * Enables/disables filtering in the list. The default is `false`.
-     */
-    get disableFiltering() {
-        return this._disableFiltering || this.filteringOptions.filterable === false;
-    }
-    set disableFiltering(value) {
-        this._disableFiltering = value;
-    }
     /** @hidden @internal */
     get filteredData() {
         return this.disableFiltering ? this.data : this._filteredData;
@@ -39368,7 +39449,6 @@ class IgxComboComponent extends IgxComboBaseDirective {
          */
         this.selectionChanging = new EventEmitter();
         this._prevInputValue = '';
-        this._disableFiltering = false;
         this.comboAPI.register(this);
     }
     onArrowDown(event) {
@@ -39623,7 +39703,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxComboComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IgxComboAPIService }, { token: DOCUMENT }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: i0.Injector, optional: true }, { token: IgxIconService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxComboComponent, isStandalone: true, selector: "igx-combo", inputs: { autoFocusSearch: ["autoFocusSearch", "autoFocusSearch", booleanAttribute], disableFiltering: ["disableFiltering", "disableFiltering", booleanAttribute], searchPlaceholder: "searchPlaceholder" }, outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxComboComponent, isStandalone: true, selector: "igx-combo", inputs: { autoFocusSearch: ["autoFocusSearch", "autoFocusSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder" }, outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)" } }, providers: [
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
@@ -39671,9 +39751,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }] }], propDecorators: { autoFocusSearch: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], disableFiltering: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], searchPlaceholder: [{
                 type: Input
             }], selectionChanging: [{
@@ -40215,7 +40292,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n\n    @if (hasSelectedItem) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n            (click)=\"handleClear($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n\n    @if (showSearchCaseIcon) {\n        <igx-suffix>\n            <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    }\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n                index as rowIndex; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize; scrollOrientation: 'vertical';\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            @if (item?.isHeader) {\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            }\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            @if (!item?.isHeader) {\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            }\n        </igx-combo-item>\n    </div>\n\n    @if (filteredData.length === 0 || isAddButtonVisible()) {\n        <div class=\"igx-combo__add\">\n            @if (filteredData.length === 0) {\n                <div class=\"igx-combo__empty\">\n                    <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                    </ng-container>\n                </div>\n            }\n            @if (isAddButtonVisible()) {\n                <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\"\n                    [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                    [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n                    <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                    </ng-container>\n                </igx-combo-add-item>\n            }\n        </div>\n    }\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\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: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForInitialChunkSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "addItem", first: true, predicate: IgxComboAddItemComponent, descendants: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n\n    @if (hasSelectedItem) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n            (click)=\"handleClear($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n\n    @if (showSearchCaseIcon) {\n        <igx-suffix>\n            <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    }\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n                | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n                index as rowIndex; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize; scrollOrientation: 'vertical';\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            @if (item?.isHeader) {\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            }\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            @if (!item?.isHeader) {\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            }\n        </igx-combo-item>\n    </div>\n\n    @if (filteredData.length === 0 || isAddButtonVisible()) {\n        <div class=\"igx-combo__add\">\n            @if (filteredData.length === 0) {\n                <div class=\"igx-combo__empty\">\n                    <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                    </ng-container>\n                </div>\n            }\n            @if (isAddButtonVisible()) {\n                <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\"\n                    [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                    [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n                    <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                    </ng-container>\n                </igx-combo-add-item>\n            }\n        </div>\n    }\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\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: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForInitialChunkSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
             type: Component,
@@ -40223,7 +40300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
-                    ], imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe], template: "<igx-input-group #inputGroup [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n\n    @if (hasSelectedItem) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n            (click)=\"handleClear($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n\n    @if (showSearchCaseIcon) {\n        <igx-suffix>\n            <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    }\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n                | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n                index as rowIndex; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize; scrollOrientation: 'vertical';\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            @if (item?.isHeader) {\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            }\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            @if (!item?.isHeader) {\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            }\n        </igx-combo-item>\n    </div>\n\n    @if (filteredData.length === 0 || isAddButtonVisible()) {\n        <div class=\"igx-combo__add\">\n            @if (filteredData.length === 0) {\n                <div class=\"igx-combo__empty\">\n                    <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                    </ng-container>\n                </div>\n            }\n            @if (isAddButtonVisible()) {\n                <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\"\n                    [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                    [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n                    <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                    </ng-container>\n                </igx-combo-add-item>\n            }\n        </div>\n    }\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
+                    ], imports: [IgxInputGroupComponent, IgxInputDirective, IgxTextSelectionDirective, IgxSuffixDirective, NgTemplateOutlet, IgxIconComponent, IgxComboDropDownComponent, IgxDropDownItemNavigationDirective, IgxForOfDirective, IgxComboItemComponent, IgxComboAddItemComponent, IgxButtonDirective, IgxRippleDirective, IgxComboFilteringPipe, IgxComboGroupingPipe], template: "<igx-input-group #inputGroup [type]=\"type\">\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"displayValue\" role=\"combobox\"\n        aria-haspopup=\"listbox\" aria-autocomplete=\"list\" aria-readonly=\"false\"\n        [attr.aria-expanded]=\"!this.dropdown.collapsed\" [attr.aria-controls]=\"this.dropdown.listId\"\n        [attr.aria-labelledby]=\"this.ariaLabelledBy || this.label?.id || this.placeholder\"\n        [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [igxTextSelection]=\"!composing\"\n        (input)=\"handleInputChange($event)\" (click)=\"handleInputClick()\"\n        (keyup)=\"handleKeyUp($event)\" (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" (paste)=\"handleInputChange($event)\"/>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n\n    @if (hasSelectedItem) {\n        <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n            (click)=\"handleClear($event)\">\n            @if (clearIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n            }\n            @if (!clearIconTemplate) {\n                <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n            }\n        </igx-suffix>\n    }\n\n    @if (showSearchCaseIcon) {\n        <igx-suffix>\n            <igx-icon family=\"default\" name=\"case_sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    }\n\n    <igx-suffix class=\"igx-combo__toggle-button\" (click)=\"onClick($event)\">\n        @if (toggleIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        }\n        @if (!toggleIconTemplate) {\n            <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n        }\n    </igx-suffix>\n\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"this.ariaLabelledBy || this.label?.id || this.placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\"\n        [attr.aria-activedescendant]=\"this.activeDescendant\"\n        (focus)=\"dropdown.onFocus()\" (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item [role]=\"item?.isHeader? 'group' : 'option'\" [singleMode]=\"true\"\n            [itemHeight]=\"itemHeight\" (click)=\"handleItemClick()\" *igxFor=\"let item of data\n                | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n                | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n                index as rowIndex; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize; scrollOrientation: 'vertical';\"\n                [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\">\n            @if (item?.isHeader) {\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            }\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            @if (!item?.isHeader) {\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            }\n        </igx-combo-item>\n    </div>\n\n    @if (filteredData.length === 0 || isAddButtonVisible()) {\n        <div class=\"igx-combo__add\">\n            @if (filteredData.length === 0) {\n                <div class=\"igx-combo__empty\">\n                    <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n                    </ng-container>\n                </div>\n            }\n            @if (isAddButtonVisible()) {\n                <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\"\n                    [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n                    [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n                    <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n                    </ng-container>\n                </igx-combo-add-item>\n            }\n        </div>\n    }\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: PlatformUtil }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -47160,19 +47237,20 @@ class IgxSelectComponent extends IgxDropDownComponent {
     }
     manageRequiredAsterisk() {
         const hasRequiredHTMLAttribute = this.elementRef.nativeElement.hasAttribute('required');
+        let isRequired = false;
         if (this.ngControl && this.ngControl.control.validator) {
-            // Run the validation with empty object to check if required is enabled.
             const error = this.ngControl.control.validator({});
-            this.inputGroup.isRequired = error && error.required;
-            this.cdr.markForCheck();
-            // If validator is dynamically cleared and no required HTML attribute is set,
-            // reset label's required class(asterisk) and IgxInputState #6896
+            isRequired = !!(error && error.required);
+        }
+        this.inputGroup.isRequired = isRequired;
+        if (this.input?.nativeElement) {
+            this.input.nativeElement.setAttribute('aria-required', isRequired.toString());
         }
-        else if (this.inputGroup.isRequired && this.ngControl && !this.ngControl.control.validator && !hasRequiredHTMLAttribute) {
+        // Handle validator removal case
+        if (!isRequired && !hasRequiredHTMLAttribute) {
             this.input.valid = IgxInputState.INITIAL;
-            this.inputGroup.isRequired = false;
-            this.cdr.markForCheck();
         }
+        this.cdr.markForCheck();
     }
     setSelection(item) {
         if (item && item.value !== undefined && item.value !== null) {
@@ -47278,6 +47356,12 @@ class IgxItemListDirective {
         this.elementRef = elementRef;
         this.touchManager = touchManager;
         this.tabindex = 0;
+        this.SCROLL_THRESHOLD = 50;
+        this.PAN_THRESHOLD = 10;
+        /**
+         * accumulates wheel scrolls and triggers a change action above SCROLL_THRESHOLD
+         */
+        this.scrollAccumulator = 0;
         this.onPanMove = (event) => {
             const delta = event.deltaY < 0 ? -1 : event.deltaY > 0 ? 1 : 0;
             if (delta !== 0) {
@@ -47384,16 +47468,27 @@ class IgxItemListDirective {
     onScroll(event) {
         event.preventDefault();
         event.stopPropagation();
-        const delta = event.deltaY;
-        if (delta !== 0) {
-            this.nextItem(delta);
+        this.scrollAccumulator += event.deltaY;
+        if (Math.abs(this.scrollAccumulator) > this.SCROLL_THRESHOLD) {
+            this.nextItem(this.scrollAccumulator);
+            this.scrollAccumulator = 0;
         }
     }
     /**
      * @hidden @internal
      */
     ngOnInit() {
-        const hammerOptions = { recognizers: [[HammerGesturesManager.Hammer?.Pan, { direction: HammerGesturesManager.Hammer?.DIRECTION_VERTICAL, threshold: 10 }]] };
+        const hammerOptions = {
+            recognizers: [
+                [
+                    HammerGesturesManager.Hammer?.Pan,
+                    {
+                        direction: HammerGesturesManager.Hammer?.DIRECTION_VERTICAL,
+                        threshold: this.PAN_THRESHOLD
+                    }
+                ]
+            ]
+        };
         this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions);
     }
     /**
@@ -49602,7 +49697,7 @@ class IgxQueryBuilderTreeComponent {
     isAdvancedFiltering() {
         return (this.entities?.length === 1 && !this.entities[0]?.name) ||
             this.entities?.find(e => e.childEntities?.length > 0) !== undefined ||
-            this.entities !== this.queryBuilder?.entities;
+            (this.entities?.length > 0 && this.queryBuilder?.entities?.length > 0 && this.entities !== this.queryBuilder?.entities);
     }
     /** @hidden */
     isHierarchicalNestedQuery() {
@@ -50749,7 +50844,7 @@ class IgxQueryBuilderTreeComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IgxQueryBuilderDragService }, { token: PlatformUtil }, { token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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", expectedReturnField: "expectedReturnField" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, providers: [
             IgxQueryBuilderDragService
-        ], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "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() || this.isHierarchicalNestedQuery())) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_from_label }}</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            @if (!this.isHierarchicalNestedQuery()) {\n                <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_select_label }}</span>\n            }\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"(this.selectedEntity ? this.selectedEntity.childEntities : entities[0].childEntities) ?? entities\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expectedReturnField]=\"this.selectedField?.field\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "disableFiltering", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+        ], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "expressionsChips", predicate: IgxChipComponent, descendants: true, read: IgxChipComponent }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_from_label }}</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            @if (!this.isHierarchicalNestedQuery()) {\n                <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_select_label }}</span>\n            }\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\n                            [ngClass]=\"{'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 ? selectedReturnFields[0] : null\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"(this.selectedEntity ? this.selectedEntity.childEntities : entities?.[0]?.childEntities) ?? (entities ?? [])\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expectedReturnField]=\"this.selectedField?.field\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
             type: Component,
@@ -50787,7 +50882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         NgTemplateOutlet
                     ], providers: [
                         IgxQueryBuilderDragService
-                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_from_label }}</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            @if (!this.isHierarchicalNestedQuery()) {\n                <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_select_label }}</span>\n            }\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields[0]\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"(this.selectedEntity ? this.selectedEntity.childEntities : entities[0].childEntities) ?? entities\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expectedReturnField]=\"this.selectedField?.field\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n" }]
+                    ], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_from_label }}</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            @if (!this.isHierarchicalNestedQuery()) {\n                <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_select_label }}</span>\n            }\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\n                            [ngClass]=\"{'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 ? selectedReturnFields[0] : null\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [readOnly]=\"true\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"(this.selectedEntity ? this.selectedEntity.childEntities : entities?.[0]?.childEntities) ?? (entities ?? [])\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expectedReturnField]=\"this.selectedField?.field\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: IgxQueryBuilderDragService }, { type: PlatformUtil }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -51769,7 +51864,7 @@ class IgxExcelStyleDefaultExpressionComponent {
     getConditionFriendlyName(name) {
         return this.grid.resourceStrings[`igx_grid_filter_${name}`] || name;
     }
-    onValuesInput(eventArgs) {
+    updateSearchValueOnBlur(eventArgs) {
         this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);
     }
     onLogicOperatorButtonClicked(eventArgs, buttonIndex) {
@@ -51800,11 +51895,11 @@ class IgxExcelStyleDefaultExpressionComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxExcelStyleDefaultExpressionComponent, isStandalone: true, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 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        <span igxButton\n            tabindex=\"0\"\n            #orButton\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\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: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { 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: "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: "17.0.0", version: "20.0.0", type: IgxExcelStyleDefaultExpressionComponent, isStandalone: true, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 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        <span igxButton\n            tabindex=\"0\"\n            #orButton\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\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ 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: "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: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { 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: "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: "20.0.0", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-default-expression', imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, 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        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [value]=\"expressionUI.expression.searchVal\"\n        (input)=\"onValuesInput($event)\"\n    />\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 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        <span igxButton\n            tabindex=\"0\"\n            #orButton\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\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
+            args: [{ selector: 'igx-excel-style-default-expression', imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, 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        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 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        <span igxButton\n            tabindex=\"0\"\n            #orButton\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\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: PlatformUtil }], propDecorators: { column: [{
                 type: Input
             }], expressionUI: [{
@@ -68397,7 +68492,7 @@ class IgxGridBaseDirective {
         let sum = 0;
         for (const col of fc) {
             if (col.level === 0) {
-                sum += parseInt(col.calcWidth, 10);
+                sum += parseFloat(col.calcWidth);
             }
         }
         if (this.isPinningToStart) {
@@ -69067,7 +69162,7 @@ class IgxGridBaseDirective {
      * @hidden @internal
      */
     hasHorizontalScroll() {
-        return this.totalWidth - this.unpinnedWidth > 0 && this.width !== null;
+        return Math.round(this.totalWidth - this.unpinnedWidth) > 0 && this.width !== null;
     }
     /**
      * @hidden @internal
@@ -69103,6 +69198,9 @@ class IgxGridBaseDirective {
     // TODO: do not remove this, as it is used in rowEditTemplate, but mark is as internal and hidden
     /* blazorCSSuppress */
     endEdit(commit = true, event) {
+        if (!this.crudService.cellInEditMode && !this.crudService.rowInEditMode) {
+            return;
+        }
         const document = this.nativeElement?.getRootNode();
         const focusWithin = this.nativeElement?.contains(document.activeElement);
         const success = this.crudService.endEdit(commit, event);
@@ -73387,7 +73485,9 @@ class IgxGridCellComponent {
             modal: false,
             positionStrategy: new AutoPositionStrategy({
                 horizontalStartPoint: HorizontalAlignment.Center,
-                horizontalDirection: HorizontalAlignment.Center
+                horizontalDirection: HorizontalAlignment.Center,
+                openAnimation: useAnimation(scaleInCenter, { params: { duration: '150ms' } }),
+                closeAnimation: useAnimation(fadeOut, { params: { duration: '75ms' } })
             })
         });
     }
@@ -73427,6 +73527,10 @@ class IgxGridCellComponent {
                 this.highlight.lastSearchInfo.caseSensitive = this.grid.lastSearchInfo.caseSensitive;
                 this.highlight.lastSearchInfo.exactMatch = this.grid.lastSearchInfo.exactMatch;
             }
+            const isInEdit = this.grid.rowEditable ? this.row.inEditMode : this.editMode;
+            if (this.formControl && this.formControl.value !== changes.value.currentValue && !isInEdit) {
+                this.formControl.setValue(changes.value.currentValue);
+            }
         }
     }
     /**
@@ -77687,8 +77791,8 @@ class IgxPivotRowComponent extends IgxRowDirective {
             keyValueMap.set(dim.memberName, path.shift());
         }
         let pivotValue;
-        if (this.grid.hasMultipleValues) {
-            pivotValue = this.grid.values.find(x => x.member === path.shift());
+        if (this.grid.hasMultipleValues && path.length) {
+            pivotValue = this.grid.values.find(x => x.member === path[0]);
         }
         else {
             pivotValue = this.grid.values ? this.grid.values[0] : undefined;
@@ -87672,7 +87776,9 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
                 }
             ];
             entities[0].childEntities = this.childLayoutList.reduce((acc, rowIsland) => {
-                return acc.concat(this.generateChildEntity(rowIsland, this.data[0][rowIsland.key][0]));
+                const childFirstRowData = this.data?.length > 0 && this.data[0][rowIsland.key]?.length > 0 ?
+                    this.data[0][rowIsland.key][0] : null;
+                return acc.concat(this.generateChildEntity(rowIsland, childFirstRowData));
             }, []);
         }
         return entities;
@@ -87701,7 +87807,9 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             if (!firstRowData) {
                 return null;
             }
-            return acc.concat(this.generateChildEntity(childRowIsland, firstRowData[childRowIsland.key][0]));
+            const childFirstRowData = firstRowData.length > 0 && firstRowData[childRowIsland.key]?.length > 0 ?
+                firstRowData[childRowIsland.key][0] : null;
+            return acc.concat(this.generateChildEntity(childRowIsland, childFirstRowData));
         }, []);
         if (rowIslandChildEntities?.length > 0) {
             childEntities = rowIslandChildEntities;