igniteui-angular 21.0.6 → 21.0.7

package/fesm2022/igniteui-angular-navigation-drawer.mjs

@@ -70,10 +70,10 @@ class IgxNavDrawerItemDirective {
     get disabledCSS() {
         return this.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", type: IgxNavDrawerItemDirective, isStandalone: true, selector: "[igxDrawerItem]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], isHeader: ["isHeader", "isHeader", booleanAttribute] }, host: { properties: { "class.igx-nav-drawer__item": "this.defaultCSS", "class.igx-nav-drawer__item--active": "this.currentCSS", "class.igx-nav-drawer__item--header": "this.headerCSS", "class.igx-nav-drawer__item--disabled": "this.disabledCSS" } }, exportAs: ["igxDrawerItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavDrawerItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", type: IgxNavDrawerItemDirective, isStandalone: true, selector: "[igxDrawerItem]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], isHeader: ["isHeader", "isHeader", booleanAttribute] }, host: { properties: { "class.igx-nav-drawer__item": "this.defaultCSS", "class.igx-nav-drawer__item--active": "this.currentCSS", "class.igx-nav-drawer__item--header": "this.headerCSS", "class.igx-nav-drawer__item--disabled": "this.disabledCSS" } }, exportAs: ["igxDrawerItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavDrawerItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDrawerItem]',
@@ -106,10 +106,10 @@ class IgxNavDrawerTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxNavDrawerTemplateDirective, isStandalone: true, selector: "[igxDrawer]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavDrawerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: IgxNavDrawerTemplateDirective, isStandalone: true, selector: "[igxDrawer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavDrawerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDrawer]',
@@ -120,10 +120,10 @@ class IgxNavDrawerMiniTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxNavDrawerMiniTemplateDirective, isStandalone: true, selector: "[igxDrawerMini]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: IgxNavDrawerMiniTemplateDirective, isStandalone: true, selector: "[igxDrawerMini]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDrawerMini]',
@@ -823,10 +823,10 @@ class IgxNavigationDrawerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.8", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "class.igx-nav-drawer--mini": "this.isMini", "class.igx-nav-drawer--pinned": "this.pinned", "style.--igx-nav-drawer-size": "this.normalSize", "style.--igx-nav-drawer-size--mini": "this.miniSize", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n    <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n    <div igxDrawerItem> Start by adding</div>\n    <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n    <div igxDrawerItem> And some items inside </div>\n    <div igxDrawerItem> Style with igxDrawerItem </div>\n    <div igxDrawerItem> and igxRipple directives</div>\n    <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n    class=\"igx-nav-drawer__overlay\"\n    [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n    (click)=\"close()\" #overlay>\n</div>\n<nav\n    class=\"igx-nav-drawer__aside\"\n    [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n    [class.igx-nav-drawer__aside--pinned]=\"pin\"\n    [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n    <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: IgxNavDrawerItemDirective, selector: "[igxDrawerItem]", inputs: ["active", "disabled", "isHeader"], exportAs: ["igxDrawerItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavigationDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "class.igx-nav-drawer--mini": "this.isMini", "class.igx-nav-drawer--pinned": "this.pinned", "style.--igx-nav-drawer-size": "this.normalSize", "style.--igx-nav-drawer-size--mini": "this.miniSize", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n    <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n    <div igxDrawerItem> Start by adding</div>\n    <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n    <div igxDrawerItem> And some items inside </div>\n    <div igxDrawerItem> Style with igxDrawerItem </div>\n    <div igxDrawerItem> and igxRipple directives</div>\n    <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n    class=\"igx-nav-drawer__overlay\"\n    [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n    (click)=\"close()\" #overlay>\n</div>\n<nav\n    class=\"igx-nav-drawer__aside\"\n    [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n    [class.igx-nav-drawer__aside--pinned]=\"pin\"\n    [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n    <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: IgxNavDrawerItemDirective, selector: "[igxDrawerItem]", inputs: ["active", "disabled", "isHeader"], exportAs: ["igxDrawerItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavigationDrawerComponent, decorators: [{
             type: Component,
             args: [{ providers: [HammerGesturesManager], selector: 'igx-nav-drawer', imports: [IgxNavDrawerItemDirective, NgTemplateOutlet], template: "<ng-template #defaultItemsTemplate>\n    <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n    <div igxDrawerItem> Start by adding</div>\n    <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n    <div igxDrawerItem> And some items inside </div>\n    <div igxDrawerItem> Style with igxDrawerItem </div>\n    <div igxDrawerItem> and igxRipple directives</div>\n    <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n    class=\"igx-nav-drawer__overlay\"\n    [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n    (click)=\"close()\" #overlay>\n</div>\n<nav\n    class=\"igx-nav-drawer__aside\"\n    [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n    [class.igx-nav-drawer__aside--pinned]=\"pin\"\n    [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n    <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"] }]
         }], propDecorators: { cssClass: [{
@@ -916,11 +916,11 @@ const IGX_NAVIGATION_DRAWER_DIRECTIVES = [
  * @hidden
  */
 class IgxNavigationDrawerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerModule, imports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective], exports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavigationDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: IgxNavigationDrawerModule, imports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective], exports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavigationDrawerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxNavigationDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-paginator.mjs

@@ -11,10 +11,10 @@ class IgxPaginatorDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxPaginatorDirective, isStandalone: true, selector: "[igxPaginator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: IgxPaginatorDirective, isStandalone: true, selector: "[igxPaginator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxPaginator]',
@@ -34,10 +34,10 @@ class IgxPaginatorContentDirective {
          */
         this.cssClass = 'igx-paginator-content';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxPaginatorContentDirective, isStandalone: true, selector: "[igxPaginatorContent],igx-paginator-content", host: { properties: { "class.igx-paginator-content": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: IgxPaginatorContentDirective, isStandalone: true, selector: "[igxPaginatorContent],igx-paginator-content", host: { properties: { "class.igx-paginator-content": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxPaginatorContent],igx-paginator-content',
@@ -315,12 +315,12 @@ class IgxPaginatorComponent {
     sortUniqueOptions(values, newOption) {
         return Array.from(new Set([...values, newOption])).sort((a, b) => a - b);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxPaginatorComponent, isStandalone: true, selector: "igx-paginator", inputs: { page: "page", perPage: "perPage", totalRecords: "totalRecords", selectOptions: "selectOptions", overlaySettings: "overlaySettings", resourceStrings: "resourceStrings" }, outputs: { perPageChange: "perPageChange", pageChange: "pageChange", paging: "paging", pagingDone: "pagingDone" }, host: { properties: { "class.igx-paginator": "this.cssClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IgxPaginatorComponent, isStandalone: true, selector: "igx-paginator", inputs: { page: "page", perPage: "perPage", totalRecords: "totalRecords", selectOptions: "selectOptions", overlaySettings: "overlaySettings", resourceStrings: "resourceStrings" }, outputs: { perPageChange: "perPageChange", pageChange: "pageChange", paging: "paging", pagingDone: "pagingDone" }, host: { properties: { "class.igx-paginator": "this.cssClass" } }, providers: [
             { provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }
         ], queries: [{ propertyName: "customContent", first: true, predicate: IgxPaginatorContentDirective, descendants: true }], ngImport: i0, template: "<ng-content select=\"[igxPaginatorContent],igx-paginator-content\"></ng-content>\n\n@if (!customContent) {\n    <igx-page-size></igx-page-size>\n}\n@if (!customContent) {\n    <igx-page-nav></igx-page-nav>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxPageSizeSelectorComponent), selector: "igx-page-size" }, { kind: "component", type: i0.forwardRef(() => IgxPageNavigationComponent), selector: "igx-page-nav", inputs: ["role"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-paginator', imports: [forwardRef(() => IgxPageSizeSelectorComponent), forwardRef(() => IgxPageNavigationComponent)], providers: [
                         { provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }
@@ -361,10 +361,10 @@ class IgxPageSizeSelectorComponent {
          */
         this.cssClass = 'igx-page-size';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPageSizeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxPageSizeSelectorComponent, isStandalone: true, selector: "igx-page-size", host: { properties: { "class.igx-page-size": "this.cssClass" } }, ngImport: i0, template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        @for (val of paginator.selectOptions; track val) {\n            <igx-select-item [value]=\"val\">\n                {{ val }}\n            </igx-select-item>\n        }\n    </igx-select>\n</div>\n", dependencies: [{ 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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPageSizeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IgxPageSizeSelectorComponent, isStandalone: true, selector: "igx-page-size", host: { properties: { "class.igx-page-size": "this.cssClass" } }, ngImport: i0, template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        @for (val of paginator.selectOptions; track val) {\n            <igx-select-item [value]=\"val\">\n                {{ val }}\n            </igx-select-item>\n        }\n    </igx-select>\n</div>\n", dependencies: [{ 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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-page-size', imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent], template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        @for (val of paginator.selectOptions; track val) {\n            <igx-select-item [value]=\"val\">\n                {{ val }}\n            </igx-select-item>\n        }\n    </igx-select>\n</div>\n" }]
         }], propDecorators: { cssClass: [{
@@ -384,10 +384,10 @@ class IgxPageNavigationComponent {
          */
         this.role = 'navigation';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPageNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxPageNavigationComponent, isStandalone: true, selector: "igx-page-nav", inputs: { role: "role" }, host: { properties: { "class.igx-page-nav": "this.cssClass", "attr.role": "this.role" } }, ngImport: i0, template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.paginate(0)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.previousPage()\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxIconButton=\"flat\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPageNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: IgxPageNavigationComponent, isStandalone: true, selector: "igx-page-nav", inputs: { role: "role" }, host: { properties: { "class.igx-page-nav": "this.cssClass", "attr.role": "this.role" } }, ngImport: i0, template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.paginate(0)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.previousPage()\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxIconButton=\"flat\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-page-nav', imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.paginate(0)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.previousPage()\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxIconButton=\"flat\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n" }]
         }], propDecorators: { cssClass: [{
@@ -414,11 +414,11 @@ const IGX_PAGINATOR_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxPaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective], exports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective], exports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxPaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-progressbar.mjs

@@ -6,10 +6,10 @@ class IgxProgressBarTextTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxProgressBarTextTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxProgressBarTextTemplateDirective, isStandalone: true, selector: "[igxProgressBarText]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxProgressBarTextTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: IgxProgressBarTextTemplateDirective, isStandalone: true, selector: "[igxProgressBarText]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxProgressBarTextTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxProgressBarTextTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxProgressBarText]',
@@ -20,10 +20,10 @@ class IgxProgressBarGradientDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxProgressBarGradientDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxProgressBarGradientDirective, isStandalone: true, selector: "[igxProgressBarGradient]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxProgressBarGradientDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: IgxProgressBarGradientDirective, isStandalone: true, selector: "[igxProgressBarGradient]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxProgressBarGradientDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxProgressBarGradientDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxProgressBarGradient]',
@@ -313,10 +313,10 @@ class BaseProgressDirective {
             currentValue: this._value,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", type: BaseProgressDirective, isStandalone: true, inputs: { animationDuration: "animationDuration", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], step: "step", text: "text", animate: ["animate", "animate", booleanAttribute], max: "max", value: "value" }, outputs: { progressChanged: "progressChanged" }, host: { properties: { "attr.aria-valuemax": "this.max", "style.--_progress-integer": "this.progressInteger", "style.--_progress-fraction": "this.progressFraction", "style.--_progress-whole": "this.progressWhole", "style.--_transition-duration": "this.transitionDuration", "attr.aria-valuenow": "this.value" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", type: BaseProgressDirective, isStandalone: true, inputs: { animationDuration: "animationDuration", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], step: "step", text: "text", animate: ["animate", "animate", booleanAttribute], max: "max", value: "value" }, outputs: { progressChanged: "progressChanged" }, host: { properties: { "attr.aria-valuemax": "this.max", "style.--_progress-integer": "this.progressInteger", "style.--_progress-fraction": "this.progressFraction", "style.--_progress-whole": "this.progressWhole", "style.--_transition-duration": "this.transitionDuration", "attr.aria-valuenow": "this.value" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BaseProgressDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseProgressDirective, decorators: [{
             type: Directive
         }], propDecorators: { progressChanged: [{
                 type: Output
@@ -467,10 +467,10 @@ class IgxLinearProgressBarComponent extends BaseProgressDirective {
     ngAfterContentInit() {
         this._contentInit = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxLinearProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.8", type: IgxLinearProgressBarComponent, isStandalone: true, selector: "igx-linear-bar", inputs: { striped: ["striped", "striped", booleanAttribute], role: "role", id: "id", textAlign: "textAlign", textVisibility: ["textVisibility", "textVisibility", booleanAttribute], textTop: ["textTop", "textTop", booleanAttribute], type: "type" }, host: { properties: { "attr.aria-valuemin": "this.valueMin", "class.igx-linear-bar": "this.cssClass", "class.igx-linear-bar--striped": "this.striped", "class.igx-linear-bar--indeterminate": "this.isIndeterminate", "attr.role": "this.role", "attr.id": "this.id", "class.igx-linear-bar--animation-none": "this.disableAnimationClass", "class.igx-linear-bar--hide-counter": "this.hasText", "class.igx-linear-bar--danger": "this.error", "class.igx-linear-bar--info": "this.info", "class.igx-linear-bar--warning": "this.warning", "class.igx-linear-bar--success": "this.success" } }, usesInheritance: true, ngImport: i0, template: "\n    <div class=\"igx-linear-bar__base\">\n        <div class=\"igx-linear-bar__indicator\"></div>\n        <div class=\"igx-linear-bar__indicator-secondary\"></div>\n    </div>\n\n    <span\n        class=\"igx-linear-bar__value\"\n        [ngClass]=\"{\n        'igx-linear-bar__value--start': textAlign === 'start',\n        'igx-linear-bar__value--center': textAlign === 'center',\n        'igx-linear-bar__value--end': textAlign === 'end',\n        'igx-linear-bar__value--top': textTop,\n        'igx-linear-bar__value--hidden': !textVisibility,\n        'igx-linear-bar__value--fraction': hasFraction\n    }\">\n        {{text}}\n    </span>\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxLinearProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: IgxLinearProgressBarComponent, isStandalone: true, selector: "igx-linear-bar", inputs: { striped: ["striped", "striped", booleanAttribute], role: "role", id: "id", textAlign: "textAlign", textVisibility: ["textVisibility", "textVisibility", booleanAttribute], textTop: ["textTop", "textTop", booleanAttribute], type: "type" }, host: { properties: { "attr.aria-valuemin": "this.valueMin", "class.igx-linear-bar": "this.cssClass", "class.igx-linear-bar--striped": "this.striped", "class.igx-linear-bar--indeterminate": "this.isIndeterminate", "attr.role": "this.role", "attr.id": "this.id", "class.igx-linear-bar--animation-none": "this.disableAnimationClass", "class.igx-linear-bar--hide-counter": "this.hasText", "class.igx-linear-bar--danger": "this.error", "class.igx-linear-bar--info": "this.info", "class.igx-linear-bar--warning": "this.warning", "class.igx-linear-bar--success": "this.success" } }, usesInheritance: true, ngImport: i0, template: "\n    <div class=\"igx-linear-bar__base\">\n        <div class=\"igx-linear-bar__indicator\"></div>\n        <div class=\"igx-linear-bar__indicator-secondary\"></div>\n    </div>\n\n    <span\n        class=\"igx-linear-bar__value\"\n        [ngClass]=\"{\n        'igx-linear-bar__value--start': textAlign === 'start',\n        'igx-linear-bar__value--center': textAlign === 'center',\n        'igx-linear-bar__value--end': textAlign === 'end',\n        'igx-linear-bar__value--top': textTop,\n        'igx-linear-bar__value--hidden': !textVisibility,\n        'igx-linear-bar__value--fraction': hasFraction\n    }\">\n        {{text}}\n    </span>\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxLinearProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxLinearProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-linear-bar', imports: [NgClass], template: "\n    <div class=\"igx-linear-bar__base\">\n        <div class=\"igx-linear-bar__indicator\"></div>\n        <div class=\"igx-linear-bar__indicator-secondary\"></div>\n    </div>\n\n    <span\n        class=\"igx-linear-bar__value\"\n        [ngClass]=\"{\n        'igx-linear-bar__value--start': textAlign === 'start',\n        'igx-linear-bar__value--center': textAlign === 'center',\n        'igx-linear-bar__value--end': textAlign === 'end',\n        'igx-linear-bar__value--top': textTop,\n        'igx-linear-bar__value--hidden': !textVisibility,\n        'igx-linear-bar__value--fraction': hasFraction\n    }\">\n        {{text}}\n    </span>\n\n" }]
         }], propDecorators: { valueMin: [{
@@ -626,10 +626,10 @@ class IgxCircularProgressBarComponent extends BaseProgressDirective {
     ngAfterContentInit() {
         this._contentInit = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCircularProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxCircularProgressBarComponent, isStandalone: true, selector: "igx-circular-bar", inputs: { id: "id", textVisibility: ["textVisibility", "textVisibility", booleanAttribute], type: "type" }, host: { properties: { "class.igx-circular-bar": "this.cssClass", "attr.id": "this.id", "class.igx-circular-bar--indeterminate": "this.isIndeterminate", "class.igx-circular-bar--animation-none": "this.disableAnimationClass", "class.igx-circular-bar--hide-counter": "this.hasText", "class.igx-circular-bar--danger": "this.error", "class.igx-circular-bar--info": "this.info", "class.igx-circular-bar--warning": "this.warning", "class.igx-circular-bar--success": "this.success", "style.stroke": "this.strokeStyle" } }, queries: [{ propertyName: "textTemplate", first: true, predicate: IgxProgressBarTextTemplateDirective, descendants: true, read: IgxProgressBarTextTemplateDirective }, { propertyName: "gradientTemplate", first: true, predicate: IgxProgressBarGradientDirective, descendants: true, read: IgxProgressBarGradientDirective }], viewQueries: [{ propertyName: "_svgCircle", first: true, predicate: ["circle"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg #svg\n     role=\"progressbar\"\n     aria-valuemin=\"0\"\n     [attr.aria-valuemax]=\"max\"\n     [attr.aria-valuenow]=\"value\">\n    <svg:circle class=\"igx-circular-bar__inner\" />\n    <svg:circle #circle class=\"igx-circular-bar__outer\"/>\n\n    <svg:defs>\n        <ng-container\n                *ngTemplateOutlet=\"gradientTemplate ? gradientTemplate.template : defaultGradientTemplate;\n        context: { $implicit: gradientId }\">\n        </ng-container>\n    </svg:defs>\n\n    <ng-template #defaultGradientTemplate>\n        <svg:linearGradient [id]=\"gradientId\" gradientTransform=\"rotate(90)\">\n            <stop offset=\"0%\"   class=\"igx-circular-bar__gradient-start\" />\n            <stop offset=\"100%\" class=\"igx-circular-bar__gradient-end\" />\n        </svg:linearGradient>\n    </ng-template>\n</svg>\n\n@if (textVisibility) {\n    <span class=\"igx-circular-bar__text\" [ngClass]=\"hasFraction ? 'igx-circular-bar__value--fraction' : ''\">\n        <ng-container *ngTemplateOutlet=\"textTemplate ? textTemplate.template : defaultTextTemplate;\n            context: context\">\n        </ng-container>\n    </span>\n}\n\n<ng-template #defaultTextTemplate>\n    {{textContent}}\n</ng-template>\n\n\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxCircularProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IgxCircularProgressBarComponent, isStandalone: true, selector: "igx-circular-bar", inputs: { id: "id", textVisibility: ["textVisibility", "textVisibility", booleanAttribute], type: "type" }, host: { properties: { "class.igx-circular-bar": "this.cssClass", "attr.id": "this.id", "class.igx-circular-bar--indeterminate": "this.isIndeterminate", "class.igx-circular-bar--animation-none": "this.disableAnimationClass", "class.igx-circular-bar--hide-counter": "this.hasText", "class.igx-circular-bar--danger": "this.error", "class.igx-circular-bar--info": "this.info", "class.igx-circular-bar--warning": "this.warning", "class.igx-circular-bar--success": "this.success", "style.stroke": "this.strokeStyle" } }, queries: [{ propertyName: "textTemplate", first: true, predicate: IgxProgressBarTextTemplateDirective, descendants: true, read: IgxProgressBarTextTemplateDirective }, { propertyName: "gradientTemplate", first: true, predicate: IgxProgressBarGradientDirective, descendants: true, read: IgxProgressBarGradientDirective }], viewQueries: [{ propertyName: "_svgCircle", first: true, predicate: ["circle"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg #svg\n     role=\"progressbar\"\n     aria-valuemin=\"0\"\n     [attr.aria-valuemax]=\"max\"\n     [attr.aria-valuenow]=\"value\">\n    <svg:circle class=\"igx-circular-bar__inner\" />\n    <svg:circle #circle class=\"igx-circular-bar__outer\"/>\n\n    <svg:defs>\n        <ng-container\n                *ngTemplateOutlet=\"gradientTemplate ? gradientTemplate.template : defaultGradientTemplate;\n        context: { $implicit: gradientId }\">\n        </ng-container>\n    </svg:defs>\n\n    <ng-template #defaultGradientTemplate>\n        <svg:linearGradient [id]=\"gradientId\" gradientTransform=\"rotate(90)\">\n            <stop offset=\"0%\"   class=\"igx-circular-bar__gradient-start\" />\n            <stop offset=\"100%\" class=\"igx-circular-bar__gradient-end\" />\n        </svg:linearGradient>\n    </ng-template>\n</svg>\n\n@if (textVisibility) {\n    <span class=\"igx-circular-bar__text\" [ngClass]=\"hasFraction ? 'igx-circular-bar__value--fraction' : ''\">\n        <ng-container *ngTemplateOutlet=\"textTemplate ? textTemplate.template : defaultTextTemplate;\n            context: context\">\n        </ng-container>\n    </span>\n}\n\n<ng-template #defaultTextTemplate>\n    {{textContent}}\n</ng-template>\n\n\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxCircularProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxCircularProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-circular-bar', imports: [NgTemplateOutlet, NgClass], template: "<svg #svg\n     role=\"progressbar\"\n     aria-valuemin=\"0\"\n     [attr.aria-valuemax]=\"max\"\n     [attr.aria-valuenow]=\"value\">\n    <svg:circle class=\"igx-circular-bar__inner\" />\n    <svg:circle #circle class=\"igx-circular-bar__outer\"/>\n\n    <svg:defs>\n        <ng-container\n                *ngTemplateOutlet=\"gradientTemplate ? gradientTemplate.template : defaultGradientTemplate;\n        context: { $implicit: gradientId }\">\n        </ng-container>\n    </svg:defs>\n\n    <ng-template #defaultGradientTemplate>\n        <svg:linearGradient [id]=\"gradientId\" gradientTransform=\"rotate(90)\">\n            <stop offset=\"0%\"   class=\"igx-circular-bar__gradient-start\" />\n            <stop offset=\"100%\" class=\"igx-circular-bar__gradient-end\" />\n        </svg:linearGradient>\n    </ng-template>\n</svg>\n\n@if (textVisibility) {\n    <span class=\"igx-circular-bar__text\" [ngClass]=\"hasFraction ? 'igx-circular-bar__value--fraction' : ''\">\n        <ng-container *ngTemplateOutlet=\"textTemplate ? textTemplate.template : defaultTextTemplate;\n            context: context\">\n        </ng-container>\n    </span>\n}\n\n<ng-template #defaultTextTemplate>\n    {{textContent}}\n</ng-template>\n\n\n" }]
         }], propDecorators: { cssClass: [{
@@ -704,11 +704,11 @@ const IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxProgressBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxProgressBarModule, imports: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent, IgxProgressBarTextTemplateDirective, IgxProgressBarGradientDirective], exports: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent, IgxProgressBarTextTemplateDirective, IgxProgressBarGradientDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxProgressBarModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: IgxProgressBarModule, imports: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent, IgxProgressBarTextTemplateDirective, IgxProgressBarGradientDirective], exports: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent, IgxProgressBarTextTemplateDirective, IgxProgressBarGradientDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxProgressBarModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -53,10 +53,10 @@ class IgxQueryBuilderHeaderComponent {
     get resourceStrings() {
         return this._resourceStrings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxQueryBuilderHeaderComponent, isStandalone: true, selector: "igx-query-builder-header", inputs: { title: "title", showLegend: "showLegend", resourceStrings: "resourceStrings" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<div class=\"igx-query-builder__title\">{{ title }}</div>\n<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: IgxQueryBuilderHeaderComponent, isStandalone: true, selector: "igx-query-builder-header", inputs: { title: "title", showLegend: "showLegend", resourceStrings: "resourceStrings" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<div class=\"igx-query-builder__title\">{{ title }}</div>\n<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-query-builder-header', template: "<div class=\"igx-query-builder__title\">{{ title }}</div>\n<ng-content></ng-content>\n" }]
         }], propDecorators: { getClass: [{
@@ -74,10 +74,10 @@ class IgxFieldFormatterPipe {
     transform(value, formatter, rowData, fieldData) {
         return formatter(value, rowData, fieldData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFieldFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxFieldFormatterPipe, isStandalone: true, name: "fieldFormatter" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxFieldFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: IgxFieldFormatterPipe, isStandalone: true, name: "fieldFormatter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxFieldFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxFieldFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fieldFormatter',
@@ -579,10 +579,10 @@ class IgxQueryBuilderDragService {
             }
         }, DEFAULT_SET_Z_INDEX_DELAY);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderDragService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderDragService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderDragService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderDragService, decorators: [{
             type: Injectable
         }] });
 
@@ -1885,12 +1885,12 @@ class IgxQueryBuilderTreeComponent {
             this.currentGroup = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", expectedReturnField: "expectedReturnField" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", expectedReturnField: "expectedReturnField" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, providers: [
             IgxQueryBuilderDragService
         ], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "expressionsChips", predicate: IgxChipComponent, descendants: true, read: IgxChipComponent }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n    <div class=\"igx-filter-tree__inputs\" [style.display]=\"(isInEditMode() && (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())) ? 'flex' : 'none'\">\n        <div class=\"igx-filter-tree__inputs-field\">\n            <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_from_label }}</span>\n            <igx-select #entitySelect\n                type=\"box\"\n                (selectionChanging)=\"onEntitySelectChanging($event)\"\n                (opening)=\"exitEditAddMode(true)\"\n                [overlaySettings]=\"entitySelectOverlaySettings\"\n                [ngModel]=\"selectedEntity\"\n                [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity\"\n                [disabled]=\"disableEntityChange\"\n            >\n                @for (entity of entities; track entity.name) {\n                    <igx-select-item [value]=\"entity\">\n                        {{entity.name}}\n                    </igx-select-item>\n                }\n            </igx-select>\n        </div>\n\n        <div class=\"igx-filter-tree__inputs-field\">\n            @if (!this.isHierarchicalNestedQuery()) {\n                <span class=\"igx-query-builder__label\">{{ this.resourceStrings.igx_query_builder_select_label }}</span>\n            }\n            @if (!parentExpression) {\n                <igx-combo\n                    #returnFieldsCombo\n                    [itemsMaxHeight]=\"250\"\n                    [data]=\"fields\"\n                    [displayKey]=\"'field'\"\n                    [valueKey]=\"'field'\"\n                    [disabled]=\"disableReturnFieldsChange\"\n                    [(ngModel)]=\"selectedReturnFields\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields\"\n                    searchPlaceholder=\"{{ this.resourceStrings.igx_query_builder_search }}\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    <ng-template igxComboHeader>\n                        <div\n                            class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n                            (click)=\"onSelectAllClicked()\"\n                            [ngClass]=\"{'igx-drop-down__item--selected': this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length}\"\n                        >\n                            <igx-checkbox\n                                    [checked]=\"this.selectedEntity && this.selectedReturnFields && this.selectedEntity.fields.length === this.selectedReturnFields.length\"\n                                    [indeterminate]=\"this.selectedEntity && this.selectedReturnFields && this.selectedReturnFields.length > 0 && this.selectedReturnFields.length < this.selectedEntity.fields?.length\"\n                                    [readonly]=\"true\"\n                                    [disableRipple]=\"true\"\n                                    [tabindex]=\"-1\"\n                                    class=\"igx-combo__checkbox\">\n                            </igx-checkbox>\n                            <div class=\"igx-drop-down__inner\">\n                                {{ this.resourceStrings.igx_query_builder_select_all }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </igx-combo>\n            }\n            @else {\n                <igx-select #returnFieldSelect\n                    type=\"box\"\n                    (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n                    [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n                    [disabled]=\"!selectedEntity\"\n                    [ngModel]=\"selectedReturnFields ? selectedReturnFields[0] : null\"\n                    [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single\"\n                    [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n                    (opening)=\"exitEditAddMode()\"\n                >\n                    @for (field of fields; track field.field) {\n                        <igx-select-item [value]=\"field.field\">\n                            {{ field.field }}\n                        </igx-select-item>\n                    }\n                </igx-select>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n>\n    <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n    <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"flat\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression, true)\"\n            igxDrop\n            (enter)=\"dragService.onAddConditionEnter(addConditionButton, expressionItem)\"\n            (leave)=\"dragService.onChipLeave()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition_root\n            }}</span>\n        </button>\n\n        @if (this.rootGroup) {\n            <button type=\"button\"\n                igxButton=\"flat\"\n                [disabled]=\"hasEditedExpression\"\n                (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n            >\n                <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n                <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #operandTemplate let-expressionItem>\n        @if (!expressionItem.inEditMode) {\n            @if(dragService.dropGhostExpression && expressionItem === dragService.dropGhostExpression && dragService.isKeyboardDrag === false){\n                <div class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\">\n                    <igx-chip [data]=\"expressionItem\">\n                        {{this.resourceStrings.igx_query_builder_drop_ghost_text}}\n                    </igx-chip>\n                </div>\n            } @else {\n            <div\n                #dragRef\n                igxDrop\n                (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n                (leave)=\"dragService.onChipLeave()\"\n                (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                [ngClass]=\"{\n                    'igx-filter-tree__expression-item': true,\n                    'igx-filter-tree__expression-item-keyboard-ghost': expressionItem === dragService.dropGhostExpression\n                  }\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                (focusin)=\"onExpressionFocus(expressionItem)\"\n                (focusout)=\"onExpressionBlur($event, expressionItem)\"\n            >\n                <igx-chip\n                    #expressionChip\n                    [draggable]=\"true\"\n                    [hideBaseOnDrag]=\"false\"\n                    [animateOnRelease]=\"false\"\n                    (moveStart)=\"dragService.onMoveStart(dragRef, expressionItem, false)\"\n                    (moveEnd)=\"dragService.onMoveEnd()\"\n                    (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n                    (dragOver)=\"dragService.onChipOver(dragRef)\"\n                    (dragLeave)=\"dragService.onChipLeave()\"\n                    (dragDrop)=\"dragService.onChipDropped()\"\n                    #target=\"tooltipTarget\"\n                    [igxTooltipTarget]=\"tooltipRef\"\n                    [data]=\"expressionItem\"\n                    [removable]=\"isInEditMode() ? 'true' : 'false'\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"onChipClick(expressionItem, expressionChip)\"\n                    (remove)=\"onChipRemove(expressionItem)\"\n\n                >\n                    <igx-icon igxPrefix\n                        class=\"igx-drag-indicator\"\n                        tabindex=\"0\"\n                        (focus)=\"dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\"\n                        (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n                        family=\"default\" name=\"drag_indicator\"\n                    >\n                    </igx-icon>\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">\n                        {{expressionItem.fieldLabel || expressionItem.expression.fieldName}}\n                    </span>\n                    <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n                        {{\n                            getConditionFriendlyName(\n                                expressionItem.expression.condition?.name\n                            )\n                        }}\n                    </span>\n                    @if (!expressionItem.expression.condition?.isUnary) {\n                        <span>\n                            @if (expressionItem.expression.searchTree) {\n                                <ng-container>\n                                    <strong>{{expressionItem.expression.searchTree.entity}}</strong>&nbsp;/ {{formatReturnFields(expressionItem.expression.searchTree)}}\n                                </ng-container>\n                            }\n                            @else {\n                                <ng-container>\n                                    @if(isDate(expressionItem.expression.searchVal)) {\n                                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                                        {{\n                                                expressionItem.expression.searchVal\n                                                | fieldFormatter\n                                                    : getFormatter(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                        }}\n                                        } @else {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                | date\n                                                    : getFormat(\n                                                            expressionItem.expression.fieldName\n                                                        )\n                                                    : undefined\n                                                    : this.locale\n                                            }}\n                                        }\n                                    } @else {\n                                        @if (getFormatter(expressionItem.expression.fieldName)) {\n                                            {{\n                                                expressionItem.expression.searchVal\n                                                    | fieldFormatter\n                                                    : getFormatter(expressionItem.expression.fieldName)\n                                                    : (expressionItem.expression.conditionName ||  expressionItem.expression.condition?.name)\n                                            }}\n                                        } @else {\n                                            {{ expressionItem.expression.searchVal }}\n                                        }\n                                    }\n                                </ng-container>\n                            }\n                        </span>\n                    }\n                </igx-chip>\n                <div #tooltipRef=\"tooltip\" igxTooltip>\n                    @if (expressionItem.expression.searchTree){\n                        {{expressionItem.expression.searchTree.returnFields.join(', ')}}\n                    } @else if (expressionItem.expression.condition?.isUnary) {\n                        {{getConditionFriendlyName(expressionItem.expression.condition?.name)}}\n                    } @else {\n                        @if(getFormatter(expressionItem.expression.fieldName)) {\n                            {{\n                                expressionItem.expression.searchVal\n                                    | fieldFormatter\n                                    : getFormatter(expressionItem.expression.fieldName)\n                                    : (expressionItem.expression.conditionName || expressionItem.expression.condition?.name)\n                            }}\n                        } @else {\n                            {{ expressionItem.expression.searchVal }}\n                        }\n                    }\n                </div>\n\n                @if (expressionItem.focused || expressionItem.hovered) {\n                    <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n                        <button #addExpressionButton igxDragIgnore igxIconButton=\"outlined\" [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n                        aria-labelledby=\"add-expression\" (keydown)=\"invokeClick($event)\"\n                            (click)=\"clickExpressionAdd(addExpressionButton, expressionChip)\"\n                            (blur)=\"addExpressionBlur()\">\n                            <igx-icon id=\"add-expression\" family=\"default\" name=\"add\"></igx-icon>\n                        </button>\n                        <igx-drop-down #addOptionsDropDown\n                            (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\">\n                            <igx-drop-down-item [value]=\"'addCondition'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_condition}}</span>\n                            </igx-drop-down-item>\n                            <igx-drop-down-item [value]=\"'addGroup'\">\n                                <span>{{this.resourceStrings.igx_query_builder_add_group}}</span>\n                            </igx-drop-down-item>\n                        </igx-drop-down>\n                    </div>\n                }\n            </div>\n        }\n    }\n        <div #editingInputsContainer class=\"igx-filter-tree__subquery\" >\n            @if (expressionItem.inEditMode) {\n                <div\n                    #editingInputs\n                    igxDrop\n                    (enter)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (over)=\"dragService.onChipEnter(editingInputsContainer, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                    (dropped)=\"dragService.onDivDropped(expressionItem)\"\n                    class=\"igx-filter-tree__inputs\"\n                >\n                    <igx-select\n                        #fieldSelect\n                        type=\"box\"\n                        [overlaySettings]=\"fieldSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedField\"\n                        [disabled]=\"!fields\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder\"\n                    >\n\n                        @for (field of fields; track field) {\n                            <igx-select-item [value]=\"field\">\n                                {{ field.label || field.header || field.field }}\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <igx-select\n                        #conditionSelect\n                        type=\"box\"\n                        [overlaySettings]=\"conditionSelectOverlaySettings\"\n                        [(ngModel)]=\"selectedCondition\"\n                        (selectionChanging)=\"onConditionSelectChanging($event)\"\n                        [disabled]=\"!selectedField\"\n                        [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder\"\n                    >\n                        @if (\n                            selectedField &&\n                            conditionSelect.value &&\n                            selectedField.filters.condition(conditionSelect.value)\n                        ) {\n                            <igx-prefix>\n                                <igx-icon\n                                    family=\"default\"\n                                    [name]=\"\n                                        selectedField.filters.condition(\n                                            conditionSelect.value\n                                        ).iconName\n                                    \"\n                                >\n                                </igx-icon>\n                            </igx-prefix>\n                        }\n\n                        @for (condition of getConditionList(); track condition) {\n                            <igx-select-item\n                                [value]=\"condition\"\n                                [text]=\"getConditionFriendlyName(condition)\"\n                            >\n                                <div class=\"igx-grid__filtering-dropdown-items\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        [name]=\"\n                                            selectedField.filters.condition(condition)\n                                                .iconName\n                                        \"\n                                    >\n                                    </igx-icon>\n                                    <span class=\"igx-grid__filtering-dropdown-text\">{{\n                                        getConditionFriendlyName(condition)\n                                    }}</span>\n                                </div>\n                            </igx-select-item>\n                        }\n                    </igx-select>\n\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            searchValueTemplate ? searchValueTemplate : defaultSearchValueTemplate;\n                            context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n                        \"\n                    >\n                    </ng-container>\n\n                    <ng-template #defaultSearchValueTemplate>\n                        @if(!selectedField ||\n                            (selectedField.dataType !== 'date' && selectedField.dataType !== 'time' && selectedField.dataType !== 'dateTime')) {\n                                <igx-input-group type=\"box\">\n\n                                        <input\n                                            #searchValueInput\n                                            igxInput\n                                            [disabled]=\"isSearchValueInputDisabled()\"\n                                            [placeholder]=\"this.selectedCondition === 'inQuery' || this.selectedCondition === 'notInQuery' ?\n                                            this.resourceStrings.igx_query_builder_query_value_placeholder :\n                                            this.resourceStrings.igx_query_builder_value_placeholder\"\n                                            [type]=\"\n                                            selectedField && selectedField.dataType === 'number'\n                                                ? 'number'\n                                                : 'text'\n                                        \"\n                                        [(ngModel)]=\"searchValue.value\"\n                                    />\n                                </igx-input-group>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'date') {\n                            <igx-date-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (keydown)=\"openPicker($event)\"\n                                (click)=\"picker.open()\"\n                                type=\"box\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [weekStart]=\"selectedField.pipeArgs.weekStart\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_date_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-date-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'time') {\n                            <igx-time-picker\n                                #picker\n                                [(value)]=\"searchValue.value\"\n                                (click)=\"picker.open()\"\n                                (keydown)=\"openPicker($event)\"\n                                type=\"box\"\n                                [disabled]=\"isSearchValueInputDisabled()\"\n                                [locale]=\"this.locale\"\n                                [outlet]=\"pickerOutlet\"\n                                [formatter]=\"selectedField.formatter\"\n                                [displayFormat]=\"selectedField.pipeArgs.format\"\n                                [inputFormat]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                [placeholder]=\"this.resourceStrings.igx_query_builder_time_placeholder\"\n                            >\n                                <!-- disable default icons -->\n                                <igx-picker-toggle></igx-picker-toggle>\n                                <igx-picker-clear></igx-picker-clear>\n                            </igx-time-picker>\n                        }\n                        @else if (selectedField && selectedField.dataType === 'dateTime') {\n                            <igx-input-group #inputGroup type=\"box\">\n                                <input\n                                    #input\n                                    igxInput\n                                    tabindex=\"0\"\n                                    [placeholder]=\"this.resourceStrings.igx_query_builder_datetime_placeholder\"\n                                    [(ngModel)]=\"searchValue.value\"\n                                    [disabled]=\"isSearchValueInputDisabled()\"\n                                    [locale]=\"this.locale\"\n                                    [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat\"\n                                    [defaultFormatType]=\"selectedField.dataType\"\n                                    [displayFormat]=\"selectedField.pipeArgs.format\"\n                                />\n                            </igx-input-group>\n                        }\n                    </ng-template>\n\n                    <div class=\"igx-filter-tree__inputs-actions\">\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitExpression()\"\n                        >\n                            <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                        </button>\n                        <button type=\"button\"\n                            igxIconButton=\"outlined\"\n                            (click)=\"discardExpression(expressionItem)\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                        </button>\n                    </div>\n                </div>\n            }\n\n            @if (\n                (!expressionItem.inEditMode && expressionItem.expression.searchTree && expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n                (expressionItem.inEditMode && selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n            ) {\n                <ng-container>\n                    <igx-query-builder-tree\n                        [style.display]=\"expressionItem.inEditMode || expressionItem.expanded ? 'block' : 'none'\"\n                        [entities]=\"(this.selectedEntity ? this.selectedEntity.childEntities : entities?.[0]?.childEntities) ?? (entities ?? [])\"\n                        [queryBuilder]=\"this.queryBuilder\"\n                        [parentExpression]=\"expressionItem\"\n                        [expectedReturnField]=\"this.selectedField?.field\"\n                        [expressionTree]=\"expressionItem.inEditMode ? (innerQueryNewExpressionTree ?? getExpressionTreeCopy(expressionItem.expression.searchTree, true)) : expressionItem.expression.searchTree\"\n                        (inEditModeChange)=\"onInEditModeChanged($event)\"\n                        [searchValueTemplate]=\"searchValueTemplate\">\n                    </igx-query-builder-tree>\n                </ng-container>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #expressionGroupTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\"\n            (focusout)=\"parentExpression? null : dragService.onDragFocusOut()\">\n            <div\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n                    'igx-filter-tree__line--or': getOperator(expressionItem) === 1\n                }\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expressions\">\n                <div class=\"igx-filter-tree__expression-context-menu\"\n                    #groupRef\n                    igxDrop\n                    (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                    (leave)=\"dragService.onChipLeave()\"\n                >\n                    <button #changeGroupButton\n                            [ngClass]=\"{\n                                'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n                                'igx-filter-tree__button--or': getOperator(expressionItem) === 1\n                            }\"\n                            [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n                            igxDragIgnore\n                            igxButton=\"flat\"\n                            aria-labelledby=\"change-group\"\n                            (keydown)=\"invokeClick($event)\"\n                            (click)=\"onGroupClick(groupContextMenuDropDown, changeGroupButton, expressionItem)\"\n                    >\n                        <span\n                            igxDrop\n                            (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n                            (leave)=\"dragService.onChipLeave()\"\n                        >\n                            {{getOperator(expressionItem) === 0 ? this.resourceStrings.igx_query_builder_and_label : this.resourceStrings.igx_query_builder_or_label}}\n                        </span>\n                        <igx-icon family=\"default\" name=\"arrow_drop_down\" role=\"button\"></igx-icon>\n                    </button>\n                    <igx-drop-down #groupContextMenuDropDown\n                                   (selectionChanging)=\"onGroupContextMenuDropDownSelectionChanging($event)\"\n                                   [width]=\"'fit-content'\">\n                        <igx-drop-down-item [value]=\"'switchCondition'\"\n                        >\n                            {{getSwitchGroupText(expressionItem)}}\n                        </igx-drop-down-item>\n                        <igx-drop-down-item [value]=\"'ungroup'\"\n                                            [disabled]=\"this.rootGroup === this.contextualGroup\"\n                        >\n                            {{this.resourceStrings.igx_query_builder_ungroup}}\n                        </igx-drop-down-item>\n                    </igx-drop-down>\n                </div>\n                <div class=\"igx-filter-tree__expression-section\">\n                    @for (expr of expressionItem?.children; track trackExpressionItem(expr)) {\n                        <ng-container>\n                            <ng-container\n                                    *ngTemplateOutlet=\"\n                                isExpressionGroup(expr)\n                                    ? expressionGroupTemplate\n                                    : operandTemplate;\n                                context: context(expr)\n                            \"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    }\n                </div>\n\n                @if (expressionItem === rootGroup && !hasEditedExpression) {\n                    <div\n                            #currentGroupButtonsContainer\n                            class=\"igx-filter-tree__buttons\"\n                    >\n                        <ng-container\n                                *ngTemplateOutlet=\"\n                                addExpressionsTemplate;\n                                context: context(expressionItem)\n                            \"\n                        >\n                        </ng-container>\n                    </div>\n                }\n            </div>\n        </div>\n    </ng-template>\n\n    @if (rootGroup || (!rootGroup && (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))) {\n        <div class=\"igx-filter-tree__section\">\n            @if (!this.isAdvancedFiltering()) {\n                <span class=\"igx-query-builder__label\">Where</span>\n            }\n            <ng-container\n                *ngTemplateOutlet=\"\n                    expressionGroupTemplate;\n                    context: context(rootGroup)\n                \"\n            ></ng-container>\n        </div>\n    }\n</div>\n\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n\n<igx-dialog\n    #entityChangeDialog\n    title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n    leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n    rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n    (leftButtonSelect)=\"onEntityChangeCancel()\"\n    (rightButtonSelect)=\"onEntityChangeConfirm()\">\n    <section class=\"igx-query-builder-dialog\">\n        <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n        <igx-checkbox\n                (change)=\"onShowEntityChangeDialogChange($event)\"\n                [disableRipple]=\"true\"\n                [tabindex]=\"-1\">\n            {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n        </igx-checkbox>\n    </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "searchPlaceholder"], outputs: ["selectionChanging"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-query-builder-tree', host: { 'class': 'igx-query-builder-tree' }, imports: [
                         DatePipe,
@@ -2029,10 +2029,10 @@ class IgxQueryBuilderSearchValueTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxQueryBuilderSearchValueTemplateDirective, isStandalone: true, selector: "[igxQueryBuilderSearchValue]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: IgxQueryBuilderSearchValueTemplateDirective, isStandalone: true, selector: "[igxQueryBuilderSearchValue]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxQueryBuilderSearchValue]',
@@ -2308,10 +2308,10 @@ class IgxQueryBuilderComponent {
             family: 'material',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.8", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { showEntityChangeDialog: ["showEntityChangeDialog", "showEntityChangeDialog", booleanAttribute], entities: "entities", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", disableEntityChange: "disableEntityChange", disableReturnFieldsChange: "disableReturnFieldsChange" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "searchValueTemplate", first: true, predicate: IgxQueryBuilderSearchValueTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "queryTree", first: true, predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n    [entities]=\"this.entities\"\n    [expressionTree]=\"this.expressionTree\"\n    [locale]=\"this.locale\"\n    [resourceStrings]=\"this.resourceStrings\"\n    [queryBuilder]=\"this\"\n    (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n    [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { showEntityChangeDialog: ["showEntityChangeDialog", "showEntityChangeDialog", booleanAttribute], entities: "entities", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", disableEntityChange: "disableEntityChange", disableReturnFieldsChange: "disableReturnFieldsChange" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "searchValueTemplate", first: true, predicate: IgxQueryBuilderSearchValueTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "queryTree", first: true, predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n    [entities]=\"this.entities\"\n    [expressionTree]=\"this.expressionTree\"\n    [locale]=\"this.locale\"\n    [resourceStrings]=\"this.resourceStrings\"\n    [queryBuilder]=\"this\"\n    (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n    [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-query-builder', imports: [IgxQueryBuilderTreeComponent], template: "<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n    [entities]=\"this.entities\"\n    [expressionTree]=\"this.expressionTree\"\n    [locale]=\"this.locale\"\n    [resourceStrings]=\"this.resourceStrings\"\n    [queryBuilder]=\"this\"\n    (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n    [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n" }]
         }], ctorParameters: () => [], propDecorators: { cssClass: [{
@@ -2359,11 +2359,11 @@ const IGX_QUERY_BUILDER_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxQueryBuilderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective], exports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective], exports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxQueryBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxQueryBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [