igniteui-angular 19.0.1 → 19.0.3

package/fesm2022/igniteui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, Output, HostBinding, Self, Optional, booleanAttribute, SecurityContext, Component, ContentChildren, ContentChild, RendererStyleFlags2, Pipe, ViewChild, DestroyRef, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
+import { Injectable, Directive, Input, HostListener, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, Output, HostBinding, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChildren, ContentChild, RendererStyleFlags2, Pipe, ViewChild, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { NgModel, NgControl, FormControlName, NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, FormGroup, FormsModule, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, takeUntil as takeUntil$1, pipe } from 'rxjs';
@@ -789,7 +789,13 @@ function getComponentCssSizeVar(size) {
  * @returns string encoded using the encodeURI function.
  */
 function normalizeURI(path) {
-    return path.split('/').map(encodeURI).join('/');
+    return path?.split('/').map(encodeURI).join('/');
+}
+function getComponentTheme(el) {
+    return globalThis.window
+        ?.getComputedStyle(el)
+        .getPropertyValue('--theme')
+        .trim();
 }
 
 var PagingError;
@@ -1403,13 +1409,14 @@ class ExportUtilities {
         return !ExportUtilities.isSpecialData(dataEntry) ? Array.from(keys) : ['Column 1'];
     }
     static saveBlobToFile(blob, fileName) {
-        const a = document.createElement('a');
+        const doc = globalThis.document;
+        const a = doc.createElement('a');
         const url = window.URL.createObjectURL(blob);
         a.download = fileName;
         a.href = url;
-        document.body.appendChild(a);
+        doc.body.appendChild(a);
         a.click();
-        document.body.removeChild(a);
+        doc.body.removeChild(a);
         window.URL.revokeObjectURL(url);
     }
     static stringToArrayBuffer(s) {
@@ -4532,7 +4539,7 @@ class WorksheetDataDictionary {
     }
     getContext() {
         if (!this._context) {
-            const canvas = document.createElement('canvas');
+            const canvas = globalThis.document?.createElement('canvas');
             this._context = canvas.getContext('2d');
             this._context.font = WorksheetDataDictionary.DEFAULT_FONT;
         }
@@ -7320,6 +7327,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }]
         }] });
 
+class ThemeToken {
+    constructor(t) {
+        this.t = t;
+        this.document = inject(DOCUMENT);
+        const globalTheme = globalThis.window
+            ?.getComputedStyle(this.document.body)
+            .getPropertyValue("--ig-theme")
+            .trim() || 'material';
+        const _theme = t ?? globalTheme;
+        this.subject = new BehaviorSubject(_theme);
+    }
+    onChange(callback) {
+        return this.subject.subscribe(callback);
+    }
+    set(theme) {
+        this.subject.next(theme);
+    }
+    get theme() {
+        return this.subject.getValue();
+    }
+    get preferToken() {
+        return !!this.t;
+    }
+}
+const THEME_TOKEN = new InjectionToken('ThemeToken', {
+    providedIn: 'root',
+    factory: () => new ThemeToken()
+});
+const Theme = /*@__PURE__*/ mkenum({
+    Material: "material",
+    Fluent: "fluent",
+    Bootstrap: "bootstrap",
+    IndigoDesign: "indigo",
+});
+
 // Export services
 
 /** @hidden */
@@ -9700,10 +9742,12 @@ const IndigoIcons = new Map(Object.entries({
  * ```
  */
 class IgxIconService {
-    constructor(_sanitizer, _httpClient, _platformUtil, document) {
+    constructor(_sanitizer, _httpClient, _platformUtil, _themeToken, _destroyRef, document) {
         this._sanitizer = _sanitizer;
         this._httpClient = _httpClient;
         this._platformUtil = _platformUtil;
+        this._themeToken = _themeToken;
+        this._destroyRef = _destroyRef;
         this.document = document;
         this._defaultFamily = {
             name: "material",
@@ -9715,6 +9759,10 @@ class IgxIconService {
         this._iconLoaded = new Subject();
         this.iconLoaded = this._iconLoaded.asObservable();
         this.setFamily(this._defaultFamily.name, this._defaultFamily.meta);
+        const { unsubscribe } = this._themeToken?.onChange((theme) => {
+            this.setRefsByTheme(theme);
+        });
+        this._destroyRef.onDestroy(() => unsubscribe);
         if (this._platformUtil?.isBrowser) {
             this._domParser = new DOMParser();
             for (const [name, svg] of IndigoIcons) {
@@ -9767,12 +9815,13 @@ class IgxIconService {
     }
     /** @hidden @internal */
     setRefsByTheme(theme) {
-        if (this.theme !== theme) {
-            this.theme = theme;
-            for (const { alias, target } of iconReferences) {
-                const icon = target.get(theme) ?? target.get('default');
-                this.addIconRef(alias.name, alias.family, icon);
-            }
+        for (const { alias, target } of iconReferences) {
+            const external = this._iconRefs.get(alias.family)?.get(alias.name)?.external;
+            const _ref = this._iconRefs.get('default')?.get(alias.name) ?? {};
+            const _target = target.get(theme) ?? target.get('default');
+            const icon = target.get(theme) ?? target.get('default');
+            const overwrite = !external && !(JSON.stringify(_ref) === JSON.stringify(_target));
+            this._setIconRef(alias.name, alias.family, icon, overwrite);
         }
     }
     /**
@@ -9798,6 +9847,14 @@ class IgxIconService {
             this.setIconRef(name, family, icon);
         }
     }
+    _setIconRef(name, family, icon, overwrite = false) {
+        if (overwrite) {
+            this.setIconRef(name, family, {
+                ...icon,
+                external: false
+            });
+        }
+    }
     /**
      *  Similar to addIconRef, but always sets the icon reference meta for an icon in a meta family.
      * ```typescript
@@ -9810,8 +9867,9 @@ class IgxIconService {
             familyRef = new Map();
             this._iconRefs.set(family, familyRef);
         }
+        const external = icon.external ?? true;
         const familyType = this.familyType(icon?.family);
-        familyRef.set(name, { ...icon, type: icon.type ?? familyType });
+        familyRef.set(name, { ...icon, type: icon.type ?? familyType, external });
         this._iconLoaded.next({ name, family });
     }
     /**
@@ -9950,7 +10008,7 @@ class IgxIconService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconService, deps: [{ token: i1$1.DomSanitizer, optional: true }, { token: i2.HttpClient, optional: true }, { token: PlatformUtil, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconService, deps: [{ token: i1$1.DomSanitizer, optional: true }, { token: i2.HttpClient, optional: true }, { token: PlatformUtil, optional: true }, { token: THEME_TOKEN, optional: true }, { token: DestroyRef, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconService, decorators: [{
@@ -9964,52 +10022,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     type: Optional
                 }] }, { type: PlatformUtil, decorators: [{
                     type: Optional
-                }] }, { type: Document, decorators: [{
+                }] }, { type: ThemeToken, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
-
-const Theme = /*@__PURE__*/ mkenum({
-    Material: "material",
-    Fluent: "fluent",
-    Bootstrap: "bootstrap",
-    IndigoDesign: "indigo",
-});
-class ThemeService {
-    constructor(document) {
-        this.document = document;
-        this.theme$ = new BehaviorSubject("material");
-        this.theme$.asObservable().subscribe((value) => {
-            this.globalTheme = value;
-        });
-        this.init();
-    }
-    init() {
-        const theme = globalThis.window
-            ?.getComputedStyle(this.document.body)
-            .getPropertyValue("--ig-theme")
-            .trim();
-        if (theme !== "") {
-            this.theme$.next(theme);
-        }
-    }
-    getComponentTheme(el) {
-        return globalThis.window
-            ?.getComputedStyle(el.nativeElement)
-            .getPropertyValue('--theme')
-            .trim();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ThemeService, providedIn: "root" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    args: [THEME_TOKEN]
+                }] }, { type: i0.DestroyRef, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DestroyRef]
+                }] }, { type: Document, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [DOCUMENT]
                 }] }] });
@@ -10063,28 +10088,13 @@ class IgxIconComponent {
     get getInactive() {
         return !this.active;
     }
-    constructor(el, iconService, themeService, ref) {
+    constructor(el, iconService, ref) {
         this.el = el;
         this.iconService = iconService;
-        this.themeService = themeService;
         this.ref = ref;
         this._destroy$ = new Subject();
         this._userClasses = new Set();
         this._iconClasses = new Set();
-        /**
-         *  This allows you to disable the `aria-hidden` attribute. By default it's applied.
-         *
-         * @example
-         * ```typescript
-         * @ViewChild("MyIcon") public icon: IgxIconComponent;
-         * constructor(private cdRef:ChangeDetectorRef) {}
-         * ngAfterViewInit() {
-         *     this.icon.ariaHidden = false;
-         *     this.cdRef.detectChanges();
-         * }
-         * ```
-         */
-        this.ariaHidden = true;
         /**
          * An @Input property that allows you to disable the `active` property. By default it's applied.
          *
@@ -10095,7 +10105,6 @@ class IgxIconComponent {
          */
         this.active = true;
         this.family = this.iconService.defaultFamily.name;
-        this.iconService.setRefsByTheme(this.themeService.globalTheme);
         this.iconService.iconLoaded
             .pipe(filter((e) => e.name === this.name && e.family === this.family), takeUntil(this._destroy$))
             .subscribe(() => {
@@ -10208,18 +10217,15 @@ class IgxIconComponent {
         }
         this.addIconClass(className);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconComponent, deps: [{ token: i0.ElementRef }, { token: IgxIconService }, { token: ThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IgxIconComponent, isStandalone: true, selector: "igx-icon", inputs: { family: "family", name: "name", active: ["active", "active", booleanAttribute] }, host: { properties: { "class": "this.elementClasses", "attr.aria-hidden": "this.ariaHidden", "class.igx-icon--inactive": "this.getInactive" } }, usesOnChanges: true, ngImport: i0, template: "<!-- This is only here for backwards compatibility in case  -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n    <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n    @case (\"liga\") {{{ iconRef.name }}}\n\n    @case (\"svg\") {\n        <div [innerHTML]=\"getSvg\"></div>\n    }\n}\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconComponent, deps: [{ token: i0.ElementRef }, { token: IgxIconService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IgxIconComponent, isStandalone: true, selector: "igx-icon", inputs: { family: "family", name: "name", active: ["active", "active", booleanAttribute] }, host: { properties: { "class": "this.elementClasses", "class.igx-icon--inactive": "this.getInactive" } }, usesOnChanges: true, ngImport: i0, template: "<!-- This is only here for backwards compatibility in case  -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n    <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n    @case (\"liga\") {{{ iconRef.name }}}\n\n    @case (\"svg\") {\n        <div [innerHTML]=\"getSvg\"></div>\n    }\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxIconComponent, decorators: [{
             type: Component,
             args: [{ selector: "igx-icon", imports: [NgTemplateOutlet, NgIf], template: "<!-- This is only here for backwards compatibility in case  -->\n<!-- ligatures are used and the name is provided as content -->\n@if (!iconRef.name) {\n    <ng-content></ng-content>\n}\n\n@switch (iconRef.type) {\n    @case (\"liga\") {{{ iconRef.name }}}\n\n    @case (\"svg\") {\n        <div [innerHTML]=\"getSvg\"></div>\n    }\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxIconService }, { type: ThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { elementClasses: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: IgxIconService }, { type: i0.ChangeDetectorRef }], propDecorators: { elementClasses: [{
                 type: HostBinding,
                 args: ["class"]
-            }], ariaHidden: [{
-                type: HostBinding,
-                args: ["attr.aria-hidden"]
             }], getInactive: [{
                 type: HostBinding,
                 args: ["class.igx-icon--inactive"]
@@ -10345,13 +10351,13 @@ class IgxInputGroupComponent {
     get theme() {
         return this._theme;
     }
-    constructor(element, _inputGroupType, document, platform, cdr, themeService) {
+    constructor(element, _inputGroupType, document, platform, cdr, themeToken) {
         this.element = element;
         this._inputGroupType = _inputGroupType;
         this.document = document;
         this.platform = platform;
         this.cdr = cdr;
-        this.themeService = themeService;
+        this.themeToken = themeToken;
         /**
          * Property that enables/disables the auto-generated class of the `IgxInputGroupComponent`.
          * By default applied the class is applied.
@@ -10392,15 +10398,18 @@ class IgxInputGroupComponent {
         this.suppressInputAutofocus = false;
         /** @hidden */
         this.hasWarning = false;
+        this._destroyRef = inject(DestroyRef);
         this._type = null;
         this._filled = false;
-        this._theme$ = new Subject();
         this._resourceStrings = getCurrentResourceStrings(InputResourceStringsEN);
-        this._theme = this.themeService.globalTheme;
-        this._subscription = this._theme$.asObservable().subscribe(value => {
-            this._theme = value;
-            this.cdr.detectChanges();
+        this._theme = this.themeToken.theme;
+        const { unsubscribe } = this.themeToken.onChange((theme) => {
+            if (this._theme !== theme) {
+                this._theme = theme;
+                this.cdr.detectChanges();
+            }
         });
+        this._destroyRef.onDestroy(() => unsubscribe);
     }
     /** @hidden */
     onClick(event) {
@@ -10578,19 +10587,20 @@ class IgxInputGroupComponent {
     set filled(val) {
         this._filled = val;
     }
-    /** @hidden @internal */
-    ngAfterViewChecked() {
-        const theme = this.themeService.getComponentTheme(this.element);
-        if (theme) {
-            this._theme$.next(theme);
-            this.cdr.markForCheck();
+    setComponentTheme() {
+        if (!this.themeToken.preferToken) {
+            const theme = getComponentTheme(this.element.nativeElement);
+            if (theme && theme !== this._theme) {
+                this.theme = theme;
+                this.cdr.markForCheck();
+            }
         }
     }
     /** @hidden @internal */
-    ngOnDestroy() {
-        this._subscription.unsubscribe();
+    ngAfterViewInit() {
+        this.setComponentTheme();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxInputGroupComponent, deps: [{ token: i0.ElementRef }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: DOCUMENT }, { token: PlatformUtil }, { token: i0.ChangeDetectorRef }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxInputGroupComponent, deps: [{ token: i0.ElementRef }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: DOCUMENT }, { token: PlatformUtil }, { token: i0.ChangeDetectorRef }, { token: THEME_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxInputGroupComponent, isStandalone: true, selector: "igx-input-group", inputs: { resourceStrings: "resourceStrings", suppressInputAutofocus: ["suppressInputAutofocus", "suppressInputAutofocus", booleanAttribute], type: "type", theme: "theme" }, host: { listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)" }, properties: { "class.igx-input-group": "this.defaultClass", "class.igx-input-group--placeholder": "this.hasPlaceholder", "class.igx-input-group--required": "this.isRequired", "class.igx-input-group--focused": "this.isFocused", "class.igx-input-group--disabled": "this.disabled", "class.igx-input-group--warning": "this.hasWarning", "class.igx-input-group--valid": "this.validClass", "class.igx-input-group--invalid": "this.invalidClass", "class.igx-input-group--filled": "this.isFilled", "class.igx-input-group--textarea-group": "this.textAreaClass", "class.igx-input-group--prefixed": "this.hasPrefixes", "class.igx-input-group--suffixed": "this.hasSuffixes", "class.igx-input-group--box": "this.isTypeBox", "class.igx-input-group--file": "this.isFileType", "class.igx-input-group--border": "this.isTypeBorder", "class.igx-input-group--fluent": "this.isTypeFluent", "class.igx-input-group--bootstrap": "this.isTypeBootstrap", "class.igx-input-group--indigo": "this.isTypeIndigo", "class.igx-input-group--search": "this.isTypeSearch" } }, providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], queries: [{ propertyName: "input", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective, static: true }, { propertyName: "hints", predicate: IgxHintDirective, read: IgxHintDirective }, { propertyName: "_prefixes", predicate: IgxPrefixDirective, descendants: true, read: IgxPrefixDirective }, { propertyName: "_suffixes", predicate: IgxSuffixDirective, descendants: true, read: IgxSuffixDirective }], ngImport: i0, template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-input-group__upload-button\">\n        <button\n            igxButton=\"contained\"\n            type=\"button\"\n            (click)=\"uploadButtonHandler()\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__line\" *ngIf=\"hasBorder\"></div>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__line\" *ngIf=\"hasBorder\"></div>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxInputGroupComponent, decorators: [{
@@ -10604,7 +10614,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: PlatformUtil }, { type: i0.ChangeDetectorRef }, { type: ThemeService }], propDecorators: { resourceStrings: [{
+                }] }, { type: PlatformUtil }, { type: i0.ChangeDetectorRef }, { type: ThemeToken, decorators: [{
+                    type: Inject,
+                    args: [THEME_TOKEN]
+                }] }], propDecorators: { resourceStrings: [{
                 type: Input
             }], defaultClass: [{
                 type: HostBinding,
@@ -11366,7 +11379,7 @@ class IgxDragDirective {
     set ghostLeft(pageX) {
         if (this.ghostElement) {
             // We need to take into account marginLeft, since top style does not include margin, but pageX includes the margin.
-            const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
+            const ghostMarginLeft = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
             // If ghost host is defined it needs to be taken into account.
             this.ghostElement.style.left = (pageX - ghostMarginLeft - this._ghostHostX) + 'px';
         }
@@ -11379,7 +11392,7 @@ class IgxDragDirective {
     set ghostTop(pageY) {
         if (this.ghostElement) {
             // We need to take into account marginTop, since top style does not include margin, but pageY includes the margin.
-            const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
+            const ghostMarginTop = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
             // If ghost host is defined it needs to be taken into account.
             this.ghostElement.style.top = (pageY - ghostMarginTop - this._ghostHostY) + 'px';
         }
@@ -11390,16 +11403,16 @@ class IgxDragDirective {
         }
     }
     get windowScrollTop() {
-        return document.documentElement.scrollTop || window.scrollY;
+        return this.document.documentElement.scrollTop || window.scrollY;
     }
     get windowScrollLeft() {
-        return document.documentElement.scrollLeft || window.scrollX;
+        return this.document.documentElement.scrollLeft || window.scrollX;
     }
     get windowScrollHeight() {
-        return document.documentElement.scrollHeight;
+        return this.document.documentElement.scrollHeight;
     }
     get windowScrollWidth() {
-        return document.documentElement.scrollWidth;
+        return this.document.documentElement.scrollWidth;
     }
     /**
      * Sets the offset of the dragged element relative to the mouse in pixels.
@@ -11658,6 +11671,7 @@ class IgxDragDirective {
         this._scrollContainerStepMs = 10;
         this._scrollContainerThreshold = 25;
         this._containerScrollIntervalId = null;
+        this.document = inject(DOCUMENT);
     }
     /**
      * @hidden
@@ -11705,13 +11719,13 @@ class IgxDragDirective {
             });
             // We should bind to document events only once when there are no pointer events.
             if (!this.pointerEventsEnabled && this.touchEventsEnabled) {
-                fromEvent(document.defaultView, 'touchmove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));
-                fromEvent(document.defaultView, 'touchend').pipe(takeUntil(this._destroy))
+                fromEvent(this.document.defaultView, 'touchmove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));
+                fromEvent(this.document.defaultView, 'touchend').pipe(takeUntil(this._destroy))
                     .subscribe((res) => this.onPointerUp(res));
             }
             else if (!this.pointerEventsEnabled) {
-                fromEvent(document.defaultView, 'mousemove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));
-                fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
+                fromEvent(this.document.defaultView, 'mousemove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe((res) => this.onPointerMove(res));
+                fromEvent(this.document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
                     .subscribe((res) => this.onPointerUp(res));
             }
             this.element.nativeElement.addEventListener('transitionend', this.onTransitionEnd.bind(this));
@@ -12070,9 +12084,9 @@ class IgxDragDirective {
                 ghostReattached = true;
                 this.ghostHost.appendChild(this.ghostElement);
             }
-            else if (!this.ghostHost && !Array.from(document.body.children).includes(this.ghostElement)) {
+            else if (!this.ghostHost && !Array.from(this.document.body.children).includes(this.ghostElement)) {
                 ghostReattached = true;
-                document.body.appendChild(this.ghostElement);
+                this.document.body.appendChild(this.ghostElement);
             }
             if (ghostReattached) {
                 this.ghostElement.setPointerCapture(this._pointerDownId);
@@ -12210,10 +12224,10 @@ class IgxDragDirective {
             this.ghostHost.appendChild(this.ghostElement);
         }
         else {
-            document.body.appendChild(this.ghostElement);
+            this.document.body.appendChild(this.ghostElement);
         }
-        const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
-        const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
+        const ghostMarginLeft = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
+        const ghostMarginTop = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
         this.ghostElement.style.left = (this._ghostStartX - ghostMarginLeft + totalMovedX - this._ghostHostX) + 'px';
         this.ghostElement.style.top = (this._ghostStartY - ghostMarginTop + totalMovedY - this._ghostHostY) + 'px';
         if (this.pointerEventsEnabled) {
@@ -12322,14 +12336,14 @@ class IgxDragDirective {
         // using window.pageXOffset for IE9 compatibility
         const viewPortX = pageX - window.pageXOffset;
         const viewPortY = pageY - window.pageYOffset;
-        if (document['msElementsFromPoint']) {
+        if (this.document['msElementsFromPoint']) {
             // Edge and IE special snowflakes
-            const elements = document['msElementsFromPoint'](viewPortX, viewPortY);
+            const elements = this.document['msElementsFromPoint'](viewPortX, viewPortY);
             return elements === null ? [] : elements;
         }
         else {
             // Other browsers like Chrome, Firefox, Opera
-            return document.elementsFromPoint(viewPortX, viewPortY);
+            return this.document.elementsFromPoint(viewPortX, viewPortY);
         }
     }
     /**
@@ -12382,8 +12396,8 @@ class IgxDragDirective {
     getGhostHostBaseOffsetX() {
         if (!this.ghostHost)
             return 0;
-        const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
-        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {
+        const ghostPosition = this.document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === this.document.body) {
             return 0;
         }
         else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {
@@ -12394,8 +12408,8 @@ class IgxDragDirective {
     getGhostHostBaseOffsetY() {
         if (!this.ghostHost)
             return 0;
-        const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
-        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {
+        const ghostPosition = this.document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === this.document.body) {
             return 0;
         }
         else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {
@@ -12439,8 +12453,8 @@ class IgxDragDirective {
             let yDir = scrollDir == DragScrollDirection$1.UP ? -1 : (scrollDir == DragScrollDirection$1.DOWN ? 1 : 0);
             if (!this.scrollContainer) {
                 // Cap scrolling so we don't scroll past the window max scroll position.
-                const maxScrollX = this._originalScrollContainerWidth - document.documentElement.clientWidth;
-                const maxScrollY = this._originalScrollContainerHeight - document.documentElement.clientHeight;
+                const maxScrollX = this._originalScrollContainerWidth - this.document.documentElement.clientWidth;
+                const maxScrollY = this._originalScrollContainerHeight - this.document.documentElement.clientHeight;
                 xDir = (this.windowScrollLeft <= 0 && xDir < 0) || (this.windowScrollLeft >= maxScrollX && xDir > 0) ? 0 : xDir;
                 yDir = (this.windowScrollTop <= 0 && yDir < 0) || (this.windowScrollTop >= maxScrollY && yDir > 0) ? 0 : yDir;
             }
@@ -16740,10 +16754,10 @@ class IgxCheckboxComponent {
             this._onChangeCallback(this._checked);
         }
     }
-    constructor(cdr, renderer, themeService, ngControl) {
+    constructor(cdr, renderer, themeToken, ngControl) {
         this.cdr = cdr;
         this.renderer = renderer;
-        this.themeService = themeService;
+        this.themeToken = themeToken;
         this.ngControl = ngControl;
         /**
          * An event that is emitted after the checkbox state is changed.
@@ -16956,17 +16970,27 @@ class IgxCheckboxComponent {
          */
         this._required = false;
         this.elRef = inject(ElementRef);
-        this._theme$ = new Subject();
         this.destroyRef = inject(DestroyRef);
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
-        this.theme = this.themeService.globalTheme;
-        this._subscription = this._theme$.asObservable().subscribe(value => {
-            this.theme = value;
-            this.cdr.detectChanges();
+        this.theme = this.themeToken.theme;
+        const { unsubscribe } = this.themeToken.onChange((theme) => {
+            if (this.theme !== theme) {
+                this.theme = theme;
+                this.cdr.detectChanges();
+            }
         });
-        this.destroyRef.onDestroy(() => this._subscription.unsubscribe());
+        this.destroyRef.onDestroy(() => unsubscribe);
+    }
+    setComponentTheme() {
+        if (!this.themeToken.preferToken) {
+            const theme = getComponentTheme(this.elRef.nativeElement);
+            if (theme && theme !== this.theme) {
+                this.theme = theme;
+                this.cdr.markForCheck();
+            }
+        }
     }
     /**
      * @hidden
@@ -16980,11 +17004,7 @@ class IgxCheckboxComponent {
                 this.cdr.detectChanges();
             }
         }
-        const theme = this.themeService.getComponentTheme(this.elRef);
-        if (theme) {
-            this._theme$.next(theme);
-            this.cdr.markForCheck();
-        }
+        this.setComponentTheme();
     }
     /** @hidden @internal */
     onKeyUp(event) {
@@ -17105,7 +17125,7 @@ class IgxCheckboxComponent {
             this.invalid = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: ThemeService }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: THEME_TOKEN }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], required: ["required", "required", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id", "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--material": "this.material", "class.igx-checkbox--indigo": "this.indigo", "class.igx-checkbox--bootstrap": "this.bootstrap", "class.igx-checkbox--fluent": "this.fluent", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [{
                 provide: EDITOR_PROVIDER,
                 useExisting: IgxCheckboxComponent,
@@ -17119,7 +17139,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                             useExisting: IgxCheckboxComponent,
                             multi: true
                         }], preserveWhitespaces: false, imports: [IgxRippleDirective], template: "<input #checkbox class=\"igx-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"ariaChecked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (change)=\"_onCheckboxChange($event)\"\n    (blur)=\"onBlur()\" />\n\n<div\n    igxRipple\n    igxRippleTarget=\".igx-checkbox__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\"\n    class=\"igx-checkbox__composite-wrapper\"\n>\n    <span #label class=\"igx-checkbox__composite\">\n        @if (theme === 'indigo') {\n            <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <rect width=\"18\" height=\"4\" x=\"2\" y=\"9\" rx=\"1.85\"/>\n                <path d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"/>\n            </svg>\n        } @else {\n            <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path d=\"M4.1,12.7 9,17.6 20.3,6.3\"/>\n            </svg>\n        }\n    </span>\n\n    <div class=\"igx-checkbox__ripple\"></div>\n</div>\n\n<span #placeholderLabel\n    [class]=\"labelClass\"\n    [id]=\"labelId\">\n    <ng-content></ng-content>\n</span>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: ThemeService }, { type: i4.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: ThemeToken, decorators: [{
+                    type: Inject,
+                    args: [THEME_TOKEN]
+                }] }, { type: i4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -22420,11 +22443,11 @@ class IgxExpansionPanelHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExpansionPanelHeaderComponent, deps: [{ token: IGX_EXPANSION_PANEL_COMPONENT, host: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxExpansionPanelHeaderComponent, isStandalone: true, selector: "igx-expansion-panel-header", inputs: { lv: "lv", role: "role", iconPosition: "iconPosition", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { interaction: "interaction" }, host: { listeners: { "keydown.Enter": "onAction($event)", "keydown.Space": "onAction($event)", "keydown.Spacebar": "onAction($event)", "click": "onAction($event)", "keydown.Alt.ArrowDown": "openPanel($event)", "keydown.Alt.ArrowUp": "closePanel($event)" }, properties: { "attr.aria-level": "this.lv", "attr.role": "this.role", "class.igx-expansion-panel__header": "this.cssClass", "class.igx-expansion-panel__header--expanded": "this.isExpanded", "class.igx-expansion-panel--disabled": "this.disabled" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true }, { propertyName: "customIconRef", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "defaultIconRef", first: true, predicate: IgxIconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n    <div class=\"igx-expansion-panel__title-wrapper\">\n        <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n        <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <div [class]=\"iconPositionClass\">\n        <ng-content *ngIf=\"iconTemplate\" select=\"igx-expansion-panel-icon\"></ng-content>\n        <igx-icon\n            *ngIf=\"!iconTemplate\"\n            family=\"default\"\n            [name]=\"panel.collapsed ? 'expand' : 'collapse'\">\n        </igx-icon>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxExpansionPanelHeaderComponent, isStandalone: true, selector: "igx-expansion-panel-header", inputs: { lv: "lv", role: "role", iconPosition: "iconPosition", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { interaction: "interaction" }, host: { listeners: { "keydown.Enter": "onAction($event)", "keydown.Space": "onAction($event)", "keydown.Spacebar": "onAction($event)", "click": "onAction($event)", "keydown.Alt.ArrowDown": "openPanel($event)", "keydown.Alt.ArrowUp": "closePanel($event)" }, properties: { "attr.aria-level": "this.lv", "attr.role": "this.role", "class.igx-expansion-panel__header": "this.cssClass", "class.igx-expansion-panel__header--expanded": "this.isExpanded", "class.igx-expansion-panel--disabled": "this.disabled" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true }, { propertyName: "customIconRef", first: true, predicate: IgxExpansionPanelIconDirective, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "defaultIconRef", first: true, predicate: IgxIconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n    <div class=\"igx-expansion-panel__title-wrapper\">\n        <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n        <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <div [class]=\"iconPositionClass\">\n        <ng-content *ngIf=\"iconTemplate\" select=\"igx-expansion-panel-icon\"></ng-content>\n        <igx-icon\n            *ngIf=\"!iconTemplate\"\n            family=\"default\"\n            [name]=\"panel.collapsed ? 'expand' : 'collapse'\"\n            [attr.aria-hidden]=\"true\">\n        </igx-icon>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxExpansionPanelHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-expansion-panel-header', imports: [NgIf, IgxIconComponent], template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n    <div class=\"igx-expansion-panel__title-wrapper\">\n        <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n        <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <div [class]=\"iconPositionClass\">\n        <ng-content *ngIf=\"iconTemplate\" select=\"igx-expansion-panel-icon\"></ng-content>\n        <igx-icon\n            *ngIf=\"!iconTemplate\"\n            family=\"default\"\n            [name]=\"panel.collapsed ? 'expand' : 'collapse'\">\n        </igx-icon>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'igx-expansion-panel-header', imports: [NgIf, IgxIconComponent], template: "<div class=\"igx-expansion-panel__header-inner\" [attr.tabindex]=\"tabIndex\" role=\"button\" [attr.id]=\"id\"\n[attr.aria-disabled]=\"disabled\" [attr.aria-expanded]=\"isExpanded\" [attr.aria-controls]=\"controls\">\n    <div class=\"igx-expansion-panel__title-wrapper\">\n        <ng-content select=\"igx-expansion-panel-title\"></ng-content>\n        <ng-content select=\"igx-expansion-panel-description\"></ng-content>\n    </div>\n    <ng-content></ng-content>\n    <div [class]=\"iconPositionClass\">\n        <ng-content *ngIf=\"iconTemplate\" select=\"igx-expansion-panel-icon\"></ng-content>\n        <igx-icon\n            *ngIf=\"!iconTemplate\"\n            family=\"default\"\n            [name]=\"panel.collapsed ? 'expand' : 'collapse'\"\n            [attr.aria-hidden]=\"true\">\n        </igx-icon>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Host
                 }, {
@@ -26400,7 +26423,7 @@ class IgxGridSelectionService {
         this._ranges = new Set();
         this.pointerOriginHandler = (event) => {
             this.pointerEventInGridBody = false;
-            document.body.removeEventListener('pointerup', this.pointerOriginHandler);
+            this.grid.document.body.removeEventListener('pointerup', this.pointerOriginHandler);
             const targetTagName = event.target.tagName.toLowerCase();
             if (targetTagName !== 'igx-grid-cell' && targetTagName !== 'igx-tree-grid-cell') {
                 this.pointerUp(this._lastSelectedNode, this.grid.rangeSelected, true);
@@ -26559,7 +26582,7 @@ class IgxGridSelectionService {
         this.pointerState.ctrl = ctrl;
         this.pointerState.shift = shift;
         this.pointerEventInGridBody = true;
-        document.body.addEventListener('pointerup', this.pointerOriginHandler);
+        this.grid.document.body.addEventListener('pointerup', this.pointerOriginHandler);
         // No ctrl key pressed - no multiple selection
         if (!ctrl) {
             this.clear();
@@ -26682,7 +26705,7 @@ class IgxGridSelectionService {
     restoreTextSelection() {
         const selection = window.getSelection();
         if (!selection.rangeCount) {
-            selection.addRange(this._selectionRange || document.createRange());
+            selection.addRange(this._selectionRange || this.grid.document.createRange());
         }
     }
     getSelectedRowsData() {
@@ -34817,12 +34840,13 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
         this._interval = +value;
         this.restartInterval();
     }
-    constructor(cdr, element, iterableDiffers, animationService, platformUtil, dir) {
+    constructor(cdr, element, iterableDiffers, animationService, platformUtil, dir, document) {
         super(animationService, cdr);
         this.element = element;
         this.iterableDiffers = iterableDiffers;
         this.platformUtil = platformUtil;
         this.dir = dir;
+        this.document = document;
         /**
          * Sets the `id` of the carousel.
          * If not set, the `id` of the first carousel component will be `"igx-carousel-0"`.
@@ -35431,7 +35455,7 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
         return this._indicators.toArray();
     }
     focusElement() {
-        const focusedElement = document.activeElement;
+        const focusedElement = this.document.activeElement;
         if (focusedElement.classList.contains('igx-carousel-indicators__indicator')) {
             this.indicatorsElements[this.current].nativeElement.focus();
         }
@@ -35581,7 +35605,7 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
             requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: IgxAngularAnimationService }, { token: PlatformUtil }, { token: IgxDirectionality }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: IgxAngularAnimationService }, { token: PlatformUtil }, { token: IgxDirectionality }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxCarouselComponent, isStandalone: true, selector: "igx-carousel", inputs: { id: "id", loop: ["loop", "loop", booleanAttribute], pause: ["pause", "pause", booleanAttribute], navigation: ["navigation", "navigation", booleanAttribute], indicators: ["indicators", "indicators", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], keyboardSupport: ["keyboardSupport", "keyboardSupport", booleanAttribute], gesturesSupport: ["gesturesSupport", "gesturesSupport", booleanAttribute], maximumIndicatorsCount: "maximumIndicatorsCount", indicatorsOrientation: "indicatorsOrientation", animationType: "animationType", resourceStrings: "resourceStrings", interval: "interval" }, outputs: { slideChanged: "slideChanged", slideAdded: "slideAdded", slideRemoved: "slideRemoved", carouselPaused: "carouselPaused", carouselPlaying: "carouselPlaying" }, host: { listeners: { "keydown.arrowright": "onKeydownArrowRight($event)", "keydown.arrowleft": "onKeydownArrowLeft($event)", "tap": "onTap($event)", "keydown.home": "onKeydownHome($event)", "keydown.end": "onKeydownEnd($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "panleft": "onPanLeft($event)", "panright": "onPanRight($event)", "panup": "onPanUp($event)", "pandown": "onPanDown($event)", "panend": "onPanEnd($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.aria-roledescription": "this.roleDescription", "attr.aria-labelledby": "this.labelId", "class.igx-carousel--vertical": "this.isVertical", "class.igx-carousel": "this.cssClass", "style.touch-action": "this.touchAction" } }, providers: [
             {
                 provide: HAMMER_GESTURE_CONFIG,
@@ -35600,7 +35624,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IgxAngularAnimationService]
-                }] }, { type: PlatformUtil }, { type: IgxDirectionality }], propDecorators: { id: [{
+                }] }, { type: PlatformUtil }, { type: IgxDirectionality }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
             }, {
@@ -46547,14 +46574,14 @@ class IgxSelectComponent extends IgxDropDownComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxSelectComponent, isStandalone: true, selector: "igx-select", inputs: { placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], overlaySettings: "overlaySettings", value: "value", type: "type" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "style.maxHeight": "this.maxHeight" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },
             { provide: IGX_DROPDOWN_BASE, useExisting: IgxSelectComponent }
-        ], queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxSelectToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxSelectHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxSelectFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "hintElement", first: true, predicate: IgxHintDirective, descendants: true, read: ElementRef }, { propertyName: "children", predicate: i0.forwardRef(() => IgxSelectItemComponent), descendants: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"this.label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-select__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down__list\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    <div *ngIf=\"headerTemplate\" class=\"igx-drop-down__select-header\">\n        <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n    </div>\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    <div *ngIf=\"footerTemplate\" class=\"igx-drop-down__select-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSelectItemNavigationDirective, selector: "[igxSelectItemNavigation]", inputs: ["igxSelectItemNavigation"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] }); }
+        ], queries: [{ propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxSelectToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxSelectHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxSelectFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "hintElement", first: true, predicate: IgxHintDirective, descendants: true, read: ElementRef }, { propertyName: "children", predicate: i0.forwardRef(() => IgxSelectItemComponent), descendants: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"this.label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-select__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\" [attr.aria-hidden]=\"true\"></igx-icon>\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down__list\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    <div *ngIf=\"headerTemplate\" class=\"igx-drop-down__select-header\">\n        <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n    </div>\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    <div *ngIf=\"footerTemplate\" class=\"igx-drop-down__select-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSelectItemNavigationDirective, selector: "[igxSelectItemNavigation]", inputs: ["igxSelectItemNavigation"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-select', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxSelectComponent, multi: true },
                         { provide: IGX_DROPDOWN_BASE, useExisting: IgxSelectComponent }
-                    ], imports: [IgxInputGroupComponent, IgxInputDirective, IgxSelectItemNavigationDirective, IgxSuffixDirective, NgIf, NgTemplateOutlet, IgxIconComponent, IgxToggleDirective], template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"this.label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-select__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down__list\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    <div *ngIf=\"headerTemplate\" class=\"igx-drop-down__select-header\">\n        <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n    </div>\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    <div *ngIf=\"footerTemplate\" class=\"igx-drop-down__select-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], imports: [IgxInputGroupComponent, IgxInputDirective, IgxSelectItemNavigationDirective, IgxSuffixDirective, NgIf, NgTemplateOutlet, IgxIconComponent, IgxToggleDirective], template: "<igx-input-group #inputGroup class=\"input-group\" (click)=\"inputGroupClick($event)\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n    <input #input class=\"input\" type=\"text\" igxInput [igxSelectItemNavigation]=\"this\"\n        [disabled]=\"disabled\"\n        readonly=\"true\"\n        [attr.placeholder]=\"this.placeholder\"\n        [value]=\"this.selectionValue\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-labelledby]=\"this.label?.id\"\n        [attr.aria-expanded]=\"!this.collapsed\"\n        [attr.aria-owns]=\"this.listId\"\n        [attr.aria-activedescendant]=\"!this.collapsed ? this.focusedItem?.id : null\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n    />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <igx-suffix class=\"igx-select__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\" [attr.aria-hidden]=\"true\"></igx-icon>\n    </igx-suffix>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\" >\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n<div igxToggle class=\"igx-drop-down__list\" (mousedown)=\"mousedownHandler($event);\"\n    (appended)=\"onToggleContentAppended($event)\"\n    (opening)=\"handleOpening($event)\"\n    (opened)=\"handleOpened()\"\n    (closing)=\"handleClosing($event)\"\n    (closed)=\"handleClosed()\">\n\n    <div *ngIf=\"headerTemplate\" class=\"igx-drop-down__select-header\">\n        <ng-content *ngTemplateOutlet=\"headerTemplate\"></ng-content>\n    </div>\n\n    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->\n    <div #scrollContainer class=\"igx-drop-down__list-scroll\" unselectable=\"on\" [style.maxHeight]=\"maxHeight\"\n        [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-labelledby]=\"this.label?.id\">\n        <ng-content select=\"igx-select-item, igx-select-item-group\"></ng-content>\n    </div>\n\n    <div *ngIf=\"footerTemplate\" class=\"igx-drop-down__select-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -49267,11 +49294,11 @@ class IgxQueryBuilderComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IgxIconService }, { token: PlatformUtil }, { token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [resourceStrings]=\"this.resourceStrings\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            (click)=\"addAndGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            (click)=\"addOrGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"edit-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    <igx-icon id=\"edit-expression\">edit</igx-icon>\n                </button>\n\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"add-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    <igx-icon id=\"add-expression\">add</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n            >\n                <input\n                    #input\n                    #searchValueInput\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                    [defaultFormatType]=\"selectedField.dataType\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [resourceStrings]=\"this.resourceStrings\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            (click)=\"addAndGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            (click)=\"addOrGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"edit-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    <igx-icon id=\"edit-expression\" [attr.aria-hidden]=\"true\">edit</igx-icon>\n                </button>\n\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"add-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    <igx-icon id=\"add-expression\">add</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n            >\n                <input\n                    #input\n                    #searchValueInput\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                    [defaultFormatType]=\"selectedField.dataType\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-query-builder', imports: [NgIf, IgxQueryBuilderHeaderComponent, IgxButtonDirective, IgxIconComponent, IgxChipComponent, IgxPrefixDirective, IgxSuffixDirective, IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, NgClass, IgxToggleDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, DatePipe, IgxFieldFormatterPipe, IgxIconButtonDirective], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [resourceStrings]=\"this.resourceStrings\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            (click)=\"addAndGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            (click)=\"addOrGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"edit-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    <igx-icon id=\"edit-expression\">edit</igx-icon>\n                </button>\n\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"add-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    <igx-icon id=\"add-expression\">add</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n            >\n                <input\n                    #input\n                    #searchValueInput\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                    [defaultFormatType]=\"selectedField.dataType\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n" }]
+            args: [{ selector: 'igx-query-builder', imports: [NgIf, IgxQueryBuilderHeaderComponent, IgxButtonDirective, IgxIconComponent, IgxChipComponent, IgxPrefixDirective, IgxSuffixDirective, IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, NgClass, IgxToggleDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, DatePipe, IgxFieldFormatterPipe, IgxIconButtonDirective], template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [resourceStrings]=\"this.resourceStrings\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            (click)=\"addAndGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            (click)=\"addOrGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"edit-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                    <igx-icon id=\"edit-expression\" [attr.aria-hidden]=\"true\">edit</igx-icon>\n                </button>\n\n                <button\n                    igxIconButton=\"flat\"\n                    aria-labelledby=\"add-expression\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                    <igx-icon id=\"add-expression\">add</igx-icon>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-date-picker>\n\n            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n            >\n                <!-- disable default icons -->\n                <igx-picker-toggle></igx-picker-toggle>\n                <igx-picker-clear></igx-picker-clear>\n            </igx-time-picker>\n\n            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n            >\n                <input\n                    #input\n                    #searchValueInput\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [locale]=\"this.locale\"\n                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                    [defaultFormatType]=\"selectedField.dataType\"\n                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: IgxIconService }, { type: PlatformUtil }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -55425,8 +55452,8 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
         this.ghostElement.style.flexBasis = null;
         this.ghostElement.style.position = null;
         this.ghostElement.classList.remove(this.columnSelectedClass);
-        const icon = document.createElement('i');
-        const text = document.createTextNode('block');
+        const icon = this.column?.grid.document.createElement('i');
+        const text = this.column?.grid.document.createTextNode('block');
         icon.appendChild(text);
         icon.classList.add('material-icons');
         this.cms.icon = icon;
@@ -56999,7 +57026,7 @@ class IgxGridFilteringCellComponent {
             const chipsAreaElements = this.chipsArea.element.nativeElement.children;
             let visibleChipsCount = 0;
             const moreIconWidth = this.moreIcon.nativeElement.offsetWidth -
-                parseInt(document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
+                parseInt(this.column?.grid.document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
             for (let index = 0; index < chipsAreaElements.length - 1; index++) {
                 if (viewWidth + chipsAreaElements[index].offsetWidth < areaWidth) {
                     viewWidth += chipsAreaElements[index].offsetWidth;
@@ -57007,8 +57034,8 @@ class IgxGridFilteringCellComponent {
                         visibleChipsCount++;
                     }
                     else {
-                        viewWidth += parseInt(document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-left'], 10);
-                        viewWidth += parseInt(document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-right'], 10);
+                        viewWidth += parseInt(this.column?.grid.document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-left'], 10);
+                        viewWidth += parseInt(this.column?.grid.document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-right'], 10);
                     }
                 }
                 else {
@@ -57993,7 +58020,7 @@ class IgxGridFilteringRowComponent {
             return;
         }
         requestAnimationFrame(() => {
-            const focusedElement = document.activeElement;
+            const focusedElement = this.column?.grid.document.activeElement;
             if (focusedElement.classList.contains('igx-chip__remove')) {
                 return;
             }
@@ -58075,7 +58102,7 @@ class IgxGridFilteringRowComponent {
         requestAnimationFrame(() => this.focusEditElement());
     }
     onChipPointerdown(args, chip) {
-        const activeElement = document.activeElement;
+        const activeElement = this.column?.grid.document.activeElement;
         this._cancelChipClick = chip.selected
             && activeElement && this.editorFocused(activeElement);
     }
@@ -68011,7 +68038,7 @@ class IgxGridBaseDirective {
     get renderedActualRowHeight() {
         let border = 1;
         if (this.rowList.toArray().length > 0) {
-            const rowStyles = document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
+            const rowStyles = this.document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
             border = rowStyles.borderBottomWidth ? Math.ceil(parseFloat(rowStyles.borderBottomWidth)) : border;
         }
         return this.rowHeight + border;
@@ -83693,7 +83720,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
     set expandChildren(value) {
         this._defaultExpandState = value;
         this.rowIslandAPI.getChildGrids().forEach((grid) => {
-            if (document.body.contains(grid.nativeElement)) {
+            if (this.document.body.contains(grid.nativeElement)) {
                 // Detect changes right away if the grid is visible
                 grid.expandChildren = value;
                 grid.cdr.detectChanges();
@@ -83938,7 +83965,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         this.updateColumns(this._childColumns);
         this.rowIslandAPI.getChildGrids().forEach((grid) => {
             grid.createColumnsList(this._childColumns);
-            if (!document.body.contains(grid.nativeElement)) {
+            if (!this.document.body.contains(grid.nativeElement)) {
                 grid.updateOnRender = true;
             }
         });
@@ -93027,7 +93054,7 @@ class IgxDateRangePickerComponent extends PickerBaseDirective {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0", type: IgxDateRangePickerComponent, isStandalone: true, selector: "igx-date-range-picker", inputs: { displayMonthsCount: "displayMonthsCount", hideOutsideDays: ["hideOutsideDays", "hideOutsideDays", booleanAttribute], formatter: "formatter", doneButtonText: "doneButtonText", overlaySettings: "overlaySettings", displayFormat: "displayFormat", inputFormat: "inputFormat", minValue: "minValue", maxValue: "maxValue", resourceStrings: "resourceStrings", placeholder: "placeholder", outlet: "outlet", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], locale: "locale", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.igx-date-range-picker": "this.cssClass" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxDateRangePickerComponent, multi: true },
             { provide: NG_VALIDATORS, useExisting: IgxDateRangePickerComponent, multi: true }
-        ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }] }); }
+        ], queries: [{ propertyName: "label", first: true, predicate: IgxLabelDirective, descendants: true }, { propertyName: "pickerActions", first: true, predicate: IgxPickerActionsDirective, descendants: true }, { propertyName: "dateSeparatorTemplate", first: true, predicate: IgxDateRangeSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedInputs", predicate: IgxDateRangeInputsBaseComponent }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: IgxInputGroupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "inputDirective", first: true, predicate: IgxInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "pipe", type: DateRangePickerFormatPipe, name: "dateRange" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IgxDateRangePickerComponent, decorators: [{
             type: Component,
@@ -93042,7 +93069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         IgxInputDirective,
                         IgxPrefixDirective,
                         DateRangePickerFormatPipe
-                    ], template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n" }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"hasProjectedInputs ? startEndTemplate : defTemplate\"></ng-container>\n\n<ng-template #singleTemplate>\n    <div (click)=\"open()\" class=\"content-wrap\">\n        <ng-content select=\"igx-date-single\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #startEndTemplate>\n    <ng-content select=\"igx-date-range-start\"></ng-content>\n    <div [className]=\"separatorClass\">\n        <ng-container *ngTemplateOutlet=\"dateSeparatorTemplate || defDateSeparatorTemplate;\">\n        </ng-container>\n    </div>\n    <ng-content select=\"igx-date-range-end\"></ng-content>\n</ng-template>\n\n<ng-template #defIcon>\n    <igx-icon family=\"default\" name=\"date_range\" [attr.aria-hidden]=\"true\"></igx-icon>\n</ng-template>\n\n<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>\n\n<ng-template #defTemplate>\n    <igx-input-group [type]=\"type\" (click)=\"open()\">\n        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->\n        <input #singleInput igxInput type=\"text\" readonly [disabled]=\"disabled\" [placeholder]=\"value ? '' : singleInputFormat\"\n            role=\"combobox\" aria-haspopup=\"grid\" [attr.aria-expanded]=\"!collapsed\" [attr.aria-labelledby]=\"label?.id\"\n            [value]=\"value | dateRange: appliedFormat : locale : formatter\" />\n\n        <igx-prefix *ngIf=\"!toggleComponents.length\">\n            <ng-container *ngTemplateOutlet=\"defIcon\"></ng-container>\n        </igx-prefix>\n\n        <ng-container ngProjectAs=\"[igxLabel]\">\n            <ng-content select=\"[igxLabel]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-prefix\">\n            <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-suffix\">\n            <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n        </ng-container>\n        <ng-container ngProjectAs=\"igx-hint\">\n            <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n        </ng-container>\n    </igx-input-group>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -94316,5 +94343,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, ActionStripResourceStringsEN, AutoPositionStrategy, BannerResourceStringsEN, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, CachedDataCloneStrategy, Calendar, CalendarResourceStringsEN, CalendarSelection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CarouselResourceStringsEN, ChipResourceStringsEN, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ComboResourceStringsEN, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DatePickerResourceStringsEN, DateRangePickerFormatPipe, DateRangePickerResourceStringsEN, DateRangeType, DefaultDataCloneStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DimensionValuesFilteringStrategy, Direction, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, ExpressionsTreeUtil, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, FormattedValuesSortingStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridColumnDataType, GridPagingMode, GridResourceStringsEN, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CALENDAR_VIEW_ITEM, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_RADIO_GROUP_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollPageDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarViewBaseDirective, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconButtonDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotNumericAggregate, IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextHighlightService, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, IndigoIcons, InputResourceStringsEN, LabelPosition, ListResourceStringsEN, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PaginatorResourceStringsEN, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, Point, QueryBuilderResourceStringsEN, RadioGroupAlignment, RelativePosition, RelativePositionStrategy, RowPinningPosition, ScrollStrategy, Size, SliderHandle, SortingDirection, SplitterType, TickLabelsOrientation, TicksOrientation, TimePickerResourceStringsEN, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, TreeResourceStringsEN, VerticalAlignment, VerticalAnimationType, WEEKDAYS, changei18n, comboIgnoreDiacriticsFilter, igxI18N, isLeap, monthRange, range, weekDay };
+export { AbsolutePosition, AbsoluteScrollStrategy, ActionStripResourceStringsEN, AutoPositionStrategy, BannerResourceStringsEN, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, CachedDataCloneStrategy, Calendar, CalendarResourceStringsEN, CalendarSelection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CarouselResourceStringsEN, ChipResourceStringsEN, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ComboResourceStringsEN, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DatePickerResourceStringsEN, DateRangePickerFormatPipe, DateRangePickerResourceStringsEN, DateRangeType, DefaultDataCloneStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DimensionValuesFilteringStrategy, Direction, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, ExpressionsTreeUtil, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, FormattedValuesSortingStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridColumnDataType, GridPagingMode, GridResourceStringsEN, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CALENDAR_VIEW_ITEM, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_RADIO_GROUP_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollPageDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarViewBaseDirective, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconButtonDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotNumericAggregate, IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextHighlightService, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, IndigoIcons, InputResourceStringsEN, LabelPosition, ListResourceStringsEN, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PaginatorResourceStringsEN, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, Point, QueryBuilderResourceStringsEN, RadioGroupAlignment, RelativePosition, RelativePositionStrategy, RowPinningPosition, ScrollStrategy, Size, SliderHandle, SortingDirection, SplitterType, THEME_TOKEN, ThemeToken, TickLabelsOrientation, TicksOrientation, TimePickerResourceStringsEN, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, TreeResourceStringsEN, VerticalAlignment, VerticalAnimationType, WEEKDAYS, changei18n, comboIgnoreDiacriticsFilter, igxI18N, isLeap, monthRange, range, weekDay };
 //# sourceMappingURL=igniteui-angular.mjs.map