igniteui-angular 22.1.0-beta.2 → 22.1.0-beta.4

package/fesm2022/igniteui-angular-toast.mjs

@@ -2,7 +2,8 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, EventEmitter, Input, Output, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { VerticalAlignment, HorizontalAlignment, GlobalPositionStrategy } from 'igniteui-angular/core';
-import { IgxNotificationsDirective } from 'igniteui-angular/directives';
+import * as i1 from 'igniteui-angular/directives';
+import { IgxNotificationsDirective, IgxNoTypographyDirective } from 'igniteui-angular/directives';
 import { useAnimation } from '@angular/animations';
 import { fadeOut, fadeIn } from 'igniteui-angular/animations';
 
@@ -155,12 +156,12 @@ class IgxToastComponent extends IgxNotificationsDirective {
             this.isVisibleChange.emit(closedEventArgs);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: IgxToastComponent, isStandalone: true, selector: "igx-toast", inputs: { id: "id", role: "role", positionSettings: "positionSettings" }, outputs: { isVisibleChange: "isVisibleChange" }, host: { properties: { "class.igx-toast": "this.cssClass", "attr.id": "this.id", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n", styles: ["@layer ig.base{.igx-toast{--_padding: .625rem 1rem;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:inline-flex;justify-content:center;align-items:center;margin:2.625rem auto;padding:var(--_padding);min-width:3.25rem;color:var(--text-color);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.igx-toast:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-toast>*{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-toast{--_padding: .5rem .75rem;font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:revert-layer}.igx-toast>*{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-toast{--_padding: .75rem}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxToastComponent, isStandalone: true, selector: "igx-toast", inputs: { id: "id", role: "role", positionSettings: "positionSettings" }, outputs: { isVisibleChange: "isVisibleChange" }, host: { properties: { "class.igx-toast": "this.cssClass", "attr.id": "this.id", "attr.role": "this.role" } }, usesInheritance: true, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0, template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n", styles: ["@layer ig.base{.igx-toast{--_padding: .625rem 1rem;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:inline-flex;justify-content:center;align-items:center;margin:2.625rem auto;padding:var(--_padding);min-width:3.25rem;color:var(--text-color);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.igx-toast:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-toast>*{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-toast{--_padding: .5rem .75rem;font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:revert-layer}.igx-toast>*{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-toast{--_padding: .75rem}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-toast', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n", styles: ["@layer ig.base{.igx-toast{--_padding: .625rem 1rem;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:inline-flex;justify-content:center;align-items:center;margin:2.625rem auto;padding:var(--_padding);min-width:3.25rem;color:var(--text-color);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.igx-toast:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-toast>*{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-toast{--_padding: .5rem .75rem;font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:revert-layer}.igx-toast>*{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-toast{--_padding: .75rem}}}\n"] }]
+            args: [{ selector: 'igx-toast', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: true, hostDirectives: [IgxNoTypographyDirective], template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n", styles: ["@layer ig.base{.igx-toast{--_padding: .625rem 1rem;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:inline-flex;justify-content:center;align-items:center;margin:2.625rem auto;padding:var(--_padding);min-width:3.25rem;color:var(--text-color);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.igx-toast:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-toast>*{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-toast{--_padding: .5rem .75rem;font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:revert-layer}.igx-toast>*{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-toast{--_padding: .75rem}}}\n"] }]
         }], propDecorators: { cssClass: [{
                 type: HostBinding,
                 args: ['class.igx-toast']
@@ -185,11 +186,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxToastModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxToastModule, imports: [IgxToastComponent], exports: [IgxToastComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxToastModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxToastModule, imports: [IgxToastComponent], exports: [IgxToastComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToastModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"igniteui-angular-toast.mjs","sources":["../../../projects/igniteui-angular/toast/src/toast/toast.component.ts","../../../projects/igniteui-angular/toast/src/toast/toast.component.html","../../../projects/igniteui-angular/toast/src/toast/toast.module.ts","../../../projects/igniteui-angular/toast/src/igniteui-angular-toast.ts"],"sourcesContent":["import {\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnInit,\n    Output,\n    inject,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntil } from 'rxjs/operators';\nimport {\n    HorizontalAlignment,\n    VerticalAlignment,\n    GlobalPositionStrategy,\n    PositionSettings\n} from 'igniteui-angular/core';\nimport { IgxNotificationsDirective } from 'igniteui-angular/directives';\nimport { ToggleViewEventArgs } from 'igniteui-angular/directives';\nimport { useAnimation } from '@angular/animations';\nimport { fadeIn, fadeOut } from 'igniteui-angular/animations';\n\nlet NEXT_ID = 0;\n\n/**\n * **Ignite UI for Angular Toast** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)\n *\n * The Ignite UI Toast provides information and warning messages that are non-interactive and cannot\n * be dismissed by the user. Toasts can be displayed at the bottom, middle, or top of the page.\n *\n * Example:\n * ```html\n * <button type=\"button\" igxButton (click)=\"toast.open()\">Show notification</button>\n * <igx-toast #toast displayTime=\"1000\">\n *      Notification displayed\n * </igx-toast>\n * ```\n */\n@Component({\n    selector: 'igx-toast',\n    templateUrl: 'toast.component.html',\n    styleUrl: 'toast.component.css',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.Eager,\n    standalone: true\n})\nexport class IgxToastComponent extends IgxNotificationsDirective implements OnInit {\n    private _element = inject(ElementRef);\n\n    /**\n     * @hidden\n     */\n    @HostBinding('class.igx-toast')\n    public cssClass = 'igx-toast';\n\n    /**\n     * Sets/gets the `id` of the toast.\n     * If not set, the `id` will have value `\"igx-toast-0\"`.\n     * ```html\n     * <igx-toast id = \"my-first-toast\"></igx-toast>\n     * ```\n     * ```typescript\n     * let toastId = this.toast.id;\n     * ```\n     */\n    @HostBinding('attr.id')\n    @Input()\n    public override id = `igx-toast-${NEXT_ID++}`;\n\n    /**\n     * Sets/gets the `role` attribute.\n     * If not set, `role` will have value `\"alert\"`.\n     * ```html\n     * <igx-toast [role] = \"'notify'\"></igx-toast>\n     * ```\n     * ```typescript\n     * let toastRole = this.toast.role;\n     * ```\n     *\n     * @memberof IgxToastComponent\n     */\n    @HostBinding('attr.role')\n    @Input()\n    public role = 'alert';\n\n    /**\n     * @hidden\n     */\n    @Output()\n    public isVisibleChange = new EventEmitter<ToggleViewEventArgs>();\n\n    /**\n     * Get the position and animation settings used by the toast.\n     * ```typescript\n     * @ViewChild('toast', { static: true }) public toast: IgxToastComponent;\n     * let currentPosition: PositionSettings = this.toast.positionSettings\n     * ```\n     */\n     @Input()\n     public get positionSettings(): PositionSettings {\n         return this._positionSettings;\n     }\n\n     /**\n      * Set the position and animation settings used by the toast.\n      * ```html\n      * <igx-toast [positionSettings]=\"newPositionSettings\"></igx-toast>\n      * ```\n      * ```typescript\n      * import { slideInTop, slideOutBottom } from 'igniteui-angular';\n      * ...\n      * @ViewChild('toast', { static: true }) public toast: IgxToastComponent;\n      *  public newPositionSettings: PositionSettings = {\n      *      openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),\n      *      closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),\n      *      horizontalDirection: HorizontalAlignment.Left,\n      *      verticalDirection: VerticalAlignment.Middle,\n      *      horizontalStartPoint: HorizontalAlignment.Left,\n      *      verticalStartPoint: VerticalAlignment.Middle\n      *  };\n      * this.toast.positionSettings = this.newPositionSettings;\n      * ```\n      */\n     public set positionSettings(settings: PositionSettings) {\n         this._positionSettings = settings;\n     }\n\n     private _positionSettings: PositionSettings = {\n        horizontalDirection: HorizontalAlignment.Center,\n        verticalDirection: VerticalAlignment.Bottom,\n        openAnimation: useAnimation(fadeIn),\n        closeAnimation: useAnimation(fadeOut),\n     };\n\n    /**\n     * Gets the nativeElement of the toast.\n     * ```typescript\n     * let nativeElement = this.toast.element;\n     * ```\n     *\n     * @memberof IgxToastComponent\n     */\n    public override get element() {\n        return this._element.nativeElement;\n    }\n\n    /**\n     * Shows the toast.\n     * If `autoHide` is enabled, the toast will hide after `displayTime` is over.\n     *\n     * ```typescript\n     * this.toast.open();\n     * ```\n     */\n    public override open(message?: string, settings?: PositionSettings) {\n        if (message !== undefined) {\n            this.textMessage = message;\n        }\n        if (settings !== undefined) {\n            this.positionSettings = settings;\n        }\n        this.strategy = new GlobalPositionStrategy(this.positionSettings);\n        super.open();\n    }\n\n    /**\n     * Opens or closes the toast, depending on its current state.\n     *\n     * ```typescript\n     * this.toast.toggle();\n     * ```\n     */\n     public override toggle() {\n        if (this.collapsed || this.isClosing) {\n            this.open();\n        } else {\n            this.close();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    public override ngOnInit() {\n        this.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };\n            this.isVisibleChange.emit(openedEventArgs);\n        });\n\n        this.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };\n            this.isVisibleChange.emit(closedEventArgs);\n        });\n    }\n}\n","<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n","import { NgModule } from '@angular/core';\nimport { IgxToastComponent } from './toast.component';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [\n        IgxToastComponent\n    ],\n    exports: [\n        IgxToastComponent\n    ]\n})\nexport class IgxToastModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"igniteui-angular-toast.mjs","sources":["../../../projects/igniteui-angular/toast/src/toast/toast.component.ts","../../../projects/igniteui-angular/toast/src/toast/toast.component.html","../../../projects/igniteui-angular/toast/src/toast/toast.module.ts","../../../projects/igniteui-angular/toast/src/igniteui-angular-toast.ts"],"sourcesContent":["import {\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnInit,\n    Output,\n    inject,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntil } from 'rxjs/operators';\nimport {\n    HorizontalAlignment,\n    VerticalAlignment,\n    GlobalPositionStrategy,\n    PositionSettings\n} from 'igniteui-angular/core';\nimport { IgxNotificationsDirective, IgxNoTypographyDirective } from 'igniteui-angular/directives';\nimport { ToggleViewEventArgs } from 'igniteui-angular/directives';\nimport { useAnimation } from '@angular/animations';\nimport { fadeIn, fadeOut } from 'igniteui-angular/animations';\n\nlet NEXT_ID = 0;\n\n/**\n * **Ignite UI for Angular Toast** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)\n *\n * The Ignite UI Toast provides information and warning messages that are non-interactive and cannot\n * be dismissed by the user. Toasts can be displayed at the bottom, middle, or top of the page.\n *\n * Example:\n * ```html\n * <button type=\"button\" igxButton (click)=\"toast.open()\">Show notification</button>\n * <igx-toast #toast displayTime=\"1000\">\n *      Notification displayed\n * </igx-toast>\n * ```\n */\n@Component({\n    selector: 'igx-toast',\n    templateUrl: 'toast.component.html',\n    styleUrl: 'toast.component.css',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.Eager,\n    standalone: true,\n    hostDirectives: [IgxNoTypographyDirective]\n})\nexport class IgxToastComponent extends IgxNotificationsDirective implements OnInit {\n    private _element = inject(ElementRef);\n\n    /**\n     * @hidden\n     */\n    @HostBinding('class.igx-toast')\n    public cssClass = 'igx-toast';\n\n    /**\n     * Sets/gets the `id` of the toast.\n     * If not set, the `id` will have value `\"igx-toast-0\"`.\n     * ```html\n     * <igx-toast id = \"my-first-toast\"></igx-toast>\n     * ```\n     * ```typescript\n     * let toastId = this.toast.id;\n     * ```\n     */\n    @HostBinding('attr.id')\n    @Input()\n    public override id = `igx-toast-${NEXT_ID++}`;\n\n    /**\n     * Sets/gets the `role` attribute.\n     * If not set, `role` will have value `\"alert\"`.\n     * ```html\n     * <igx-toast [role] = \"'notify'\"></igx-toast>\n     * ```\n     * ```typescript\n     * let toastRole = this.toast.role;\n     * ```\n     *\n     * @memberof IgxToastComponent\n     */\n    @HostBinding('attr.role')\n    @Input()\n    public role = 'alert';\n\n    /**\n     * @hidden\n     */\n    @Output()\n    public isVisibleChange = new EventEmitter<ToggleViewEventArgs>();\n\n    /**\n     * Get the position and animation settings used by the toast.\n     * ```typescript\n     * @ViewChild('toast', { static: true }) public toast: IgxToastComponent;\n     * let currentPosition: PositionSettings = this.toast.positionSettings\n     * ```\n     */\n     @Input()\n     public get positionSettings(): PositionSettings {\n         return this._positionSettings;\n     }\n\n     /**\n      * Set the position and animation settings used by the toast.\n      * ```html\n      * <igx-toast [positionSettings]=\"newPositionSettings\"></igx-toast>\n      * ```\n      * ```typescript\n      * import { slideInTop, slideOutBottom } from 'igniteui-angular';\n      * ...\n      * @ViewChild('toast', { static: true }) public toast: IgxToastComponent;\n      *  public newPositionSettings: PositionSettings = {\n      *      openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),\n      *      closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),\n      *      horizontalDirection: HorizontalAlignment.Left,\n      *      verticalDirection: VerticalAlignment.Middle,\n      *      horizontalStartPoint: HorizontalAlignment.Left,\n      *      verticalStartPoint: VerticalAlignment.Middle\n      *  };\n      * this.toast.positionSettings = this.newPositionSettings;\n      * ```\n      */\n     public set positionSettings(settings: PositionSettings) {\n         this._positionSettings = settings;\n     }\n\n     private _positionSettings: PositionSettings = {\n        horizontalDirection: HorizontalAlignment.Center,\n        verticalDirection: VerticalAlignment.Bottom,\n        openAnimation: useAnimation(fadeIn),\n        closeAnimation: useAnimation(fadeOut),\n     };\n\n    /**\n     * Gets the nativeElement of the toast.\n     * ```typescript\n     * let nativeElement = this.toast.element;\n     * ```\n     *\n     * @memberof IgxToastComponent\n     */\n    public override get element() {\n        return this._element.nativeElement;\n    }\n\n    /**\n     * Shows the toast.\n     * If `autoHide` is enabled, the toast will hide after `displayTime` is over.\n     *\n     * ```typescript\n     * this.toast.open();\n     * ```\n     */\n    public override open(message?: string, settings?: PositionSettings) {\n        if (message !== undefined) {\n            this.textMessage = message;\n        }\n        if (settings !== undefined) {\n            this.positionSettings = settings;\n        }\n        this.strategy = new GlobalPositionStrategy(this.positionSettings);\n        super.open();\n    }\n\n    /**\n     * Opens or closes the toast, depending on its current state.\n     *\n     * ```typescript\n     * this.toast.toggle();\n     * ```\n     */\n     public override toggle() {\n        if (this.collapsed || this.isClosing) {\n            this.open();\n        } else {\n            this.close();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    public override ngOnInit() {\n        this.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };\n            this.isVisibleChange.emit(openedEventArgs);\n        });\n\n        this.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };\n            this.isVisibleChange.emit(closedEventArgs);\n        });\n    }\n}\n","<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n","import { NgModule } from '@angular/core';\nimport { IgxToastComponent } from './toast.component';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [\n        IgxToastComponent\n    ],\n    exports: [\n        IgxToastComponent\n    ]\n})\nexport class IgxToastModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/igniteui-angular-tree.mjs

@@ -81,10 +81,10 @@ class IgxTreeService {
     register(tree) {
         this.tree = tree;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeService, decorators: [{
             type: Injectable
         }] });
 
@@ -394,10 +394,10 @@ class IgxTreeSelectionService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeSelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeSelectionService, decorators: [{
             type: Injectable
         }] });
 
@@ -625,10 +625,10 @@ class IgxTreeNavigationService {
         const nodeIndex = this.visibleChildren.indexOf(node);
         return this.visibleChildren[nodeIndex + dir] || node;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -702,10 +702,10 @@ class IgxTreeNodeLinkDirective {
     ngOnDestroy() {
         this.target.removeLinkChild(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeNodeLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxTreeNodeLinkDirective, isStandalone: true, selector: "[igxTreeNodeLink]", inputs: { parentNode: ["igxTreeNodeLink", "parentNode"] }, host: { listeners: { "blur": "handleBlur()", "focus": "handleFocus()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeNodeLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTreeNodeLinkDirective, isStandalone: true, selector: "[igxTreeNodeLink]", inputs: { parentNode: ["igxTreeNodeLink", "parentNode"] }, host: { listeners: { "blur": "handleBlur()", "focus": "handleFocus()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeNodeLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeNodeLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[igxTreeNodeLink]`,
@@ -1199,16 +1199,16 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
             this.registeredChildren.splice(index, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxTreeNodeComponent, isStandalone: true, selector: "igx-tree-node", inputs: { data: "data", loading: ["loading", "loading", booleanAttribute], resourceStrings: "resourceStrings", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { selectedChange: "selectedChange", expandedChange: "expandedChange" }, host: { properties: { "class.igx-tree-node--disabled": "this.disabled", "class.igx-tree-node": "this.cssClass", "attr.role": "this.role" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeNodeComponent, isStandalone: true, selector: "igx-tree-node", inputs: { data: "data", loading: ["loading", "loading", booleanAttribute], resourceStrings: "resourceStrings", active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { selectedChange: "selectedChange", expandedChange: "expandedChange" }, host: { properties: { "class.igx-tree-node--disabled": "this.disabled", "class.igx-tree-node": "this.cssClass", "attr.role": "this.role" } }, providers: [
             { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
-        ], queries: [{ propertyName: "linkChildren", predicate: IgxTreeNodeLinkDirective, read: ElementRef }, { propertyName: "_children", predicate: IGX_TREE_NODE_COMPONENT, read: IGX_TREE_NODE_COMPONENT }, { propertyName: "allChildren", predicate: IGX_TREE_NODE_COMPONENT, descendants: true, read: IGX_TREE_NODE_COMPONENT }], viewQueries: [{ propertyName: "header", first: true, predicate: ["ghostTemplate"], descendants: true, read: ElementRef }, { propertyName: "_defaultExpandIndicatorTemplate", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childrenContainer", first: true, predicate: ["childrenContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #noDragTemplate>\n    <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n</ng-template>\n\n<!-- Will switch templates depending on dragDrop -->\n<ng-template *ngTemplateOutlet=\"noDragTemplate\">\n</ng-template>\n\n@if (expanded && !loading) {\n    <div #childrenContainer\n        class=\"igx-tree-node__group\"\n        role=\"group\"\n    >\n        <ng-content select=\"igx-tree-node\"></ng-content>\n    </div>\n}\n\n\n<ng-template #defaultIndicator>\n    <igx-icon\n        [attr.aria-label]=\"expanded ? resourceStrings.igx_collapse : resourceStrings.igx_expand\"\n        [name]=\"!expanded ? 'tree_expand' : 'tree_collapse'\"\n        family=\"default\"\n    >\n    </igx-icon>\n</ng-template>\n\n<!-- separated in a template in case this ever needs to be templatable -->\n<ng-template #selectMarkerTemplate>\n    <igx-checkbox [checked]=\"selected\" [disabled]=\"disabled\" [readonly]=\"true\" [indeterminate]=\"indeterminate\" [tabindex]=\"-1\">\n    </igx-checkbox>\n</ng-template>\n\n<ng-template #headerTemplate>\n    <div #ghostTemplate class=\"igx-tree-node__wrapper\"\n        [attr.role]=\"role\"\n        [tabIndex]=\"tabIndex\"\n        [ngClass]=\"{\n            'igx-tree-node__wrapper--selected': selected,\n            'igx-tree-node__wrapper--active' : this.active,\n            'igx-tree-node__wrapper--focused' : this.focused,\n            'igx-tree-node__wrapper--disabled' : this.disabled\n        }\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"clearFocus()\"\n    >\n        <div aria-hidden=\"true\">\n            @for (item of [].constructor(level); track $index) {\n                <span\n                    aria-hidden=\"true\"\n                    class=\"igx-tree-node__spacer\"\n                ></span>\n            }\n        </div>\n\n        <!-- Expand/Collapse indicator -->\n        @if (!loading) {\n            <span\n                class=\"igx-tree-node__toggle-button\"\n                [ngClass]=\"{ 'igx-tree-node__toggle-button--hidden': !_children?.length }\"\n                (click)=\"indicatorClick()\"\n            >\n                <ng-container *ngTemplateOutlet=\"expandIndicatorTemplate, context: { $implicit: expanded }\">\n                </ng-container>\n            </span>\n        }\n        @if (loading) {\n            <span class=\"igx-tree-node__toggle-button\">\n                <igx-circular-bar\n                    [animate]=\"false\"\n                    [indeterminate]=\"true\"\n                    [textVisibility]=\"false\"\n                >\n                </igx-circular-bar>\n            </span>\n        }\n\n        <!-- Item selection -->\n        @if (showSelectors) {\n            <div\n                class=\"igx-tree-node__select\"\n                (pointerdown)=\"onSelectorPointerDown($event)\"\n                (click)=\"onSelectorClick($event)\">\n                <ng-container *ngTemplateOutlet=\"selectMarkerTemplate\">\n                </ng-container>\n            </div>\n        }\n\n        <div class=\"igx-tree-node__content\">\n            <!-- Ghost content -->\n            <ng-content></ng-content>\n        </div>\n    </div>\n\n    <!--  Buffer element for 'move after' when D&D is implemented-->\n    <div class=\"igx-tree-node__drop-indicator\">\n        @for (item of [].constructor(level); track $index) {\n            <span aria-hidden=\"true\" class=\"igx-tree-node__spacer\"></span>\n        }\n        <!-- style rules target this div, do not delete it -->\n        <div></div>\n    </div>\n</ng-template>\n\n<ng-template #dragTemplate>\n    <!-- Drag drop goes here\n        igxDrop\n        #dropRef=\"drop\"\n        [igxNodeDrag]=\"this\"\n        (dragStart)=\"logDrop(dropRef)\"\n        (leave)=\"emitLeave()\"\n        (enter)=\"emitEnter()\" -->\n    <div class=\"igx-tree-node__drag-wrapper\">\n        <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n    </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tree-node{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--tree-size: var(--component-size);display:flex;flex-direction:column}.igx-tree-node__wrapper{display:flex;align-items:center;min-height:var(--size);padding-block:0;position:relative;background:var(--background);color:var(--foreground)}.igx-tree-node__wrapper:dir(rtl) igx-icon,[dir=rtl] .igx-tree-node__wrapper igx-icon{transform:scaleX(-1)}.igx-tree-node__wrapper:after{content:\"\";position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;background:#0000;z-index:0}.igx-tree-node__wrapper:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper:focus{outline-width:0}.igx-tree-node__wrapper igx-circular-bar{--diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max( calc(1.5rem - 4px) , -1 * calc(1.5rem - 4px) ), var(--is-small, 1) * max( calc(1.5rem - 6px) , -1 * calc(1.5rem - 6px) )) !important}.igx-tree-node__wrapper--selected{background:var(--background-selected);color:var(--foreground-selected)}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active{background:var(--background-active);color:var(--foreground-active)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected{background:var(--background-active-selected);color:var(--foreground-active-selected)}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-tree-node__wrapper--disabled{background:var(--background-disabled)!important;color:var(--foreground-disabled)!important;box-shadow:none!important;pointer-events:none}.igx-tree-node__wrapper--disabled:after{display:none}.igx-tree-node--disabled .igx-tree-node__toggle-button{color:var(--foreground-disabled)!important}.igx-tree-node__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:block;align-items:center;flex:1;z-index:1}.igx-tree-node__spacer{--component-size: var(--tree-size);--spacer: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.75rem, -1 * .75rem));width:var(--spacer);display:inline-block}.igx-tree-node__toggle-button{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:1.5rem;z-index:1}.igx-tree-node__toggle-button--hidden{visibility:hidden}.igx-tree-node__drop-indicator{display:flex;visibility:hidden;position:absolute;inset-inline-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));bottom:0}.igx-tree-node__drop-indicator>div{flex:1;height:.0625rem;background:var(--drop-area-color)}.igx-tree-node__select{display:flex;align-items:center;z-index:1}.igx-tree-node__group{overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__wrapper igx-checkbox{--composite-padding: 0}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 4.75rem),-1 * calc(100% - 4.75rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 3.75rem),-1 * calc(100% - 3.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline:.625rem .875rem}.igx-tree-node__toggle-button{margin-inline-end:.25rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tree-node{border-radius:.25rem}.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:.25rem;margin-block-end:.25rem}.igx-tree-node__wrapper:after{border-radius:.25rem}.igx-tree-node__wrapper igx-icon{--component-size: 2;color:var(--icon-color)}.igx-tree-node__wrapper:hover{color:var(--foreground-active)}.igx-tree-node__wrapper igx-circular-bar{--circular-bar: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max( calc(1rem - 4px) , -1 * calc(1rem - 4px) ), var(--is-small, 1) * max( calc(1rem - 6px) , -1 * calc(1rem - 6px) )) !important}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper--active:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active:hover:after{background:#0000}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:after{background:#0000}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .125rem var(--border-color)}.igx-tree-node__wrapper--disabled igx-icon{color:var(--foreground-disabled)!important}.igx-tree-node__spacer{--spacer: 1rem}.igx-tree-node__drop-indicator{inset-inline-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));width:max(var(--is-large, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 2.75rem),-1 * calc(100% - 2.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 2.25rem),-1 * calc(100% - 2.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline-end:.5rem}.igx-tree-node__toggle-button igx-icon{--component-size: 1}.igx-tree-node__toggle-button{min-width:.875rem;margin-inline-end:.25rem}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "linkChildren", predicate: IgxTreeNodeLinkDirective, read: ElementRef }, { propertyName: "_children", predicate: IGX_TREE_NODE_COMPONENT, read: IGX_TREE_NODE_COMPONENT }, { propertyName: "allChildren", predicate: IGX_TREE_NODE_COMPONENT, descendants: true, read: IGX_TREE_NODE_COMPONENT }], viewQueries: [{ propertyName: "header", first: true, predicate: ["ghostTemplate"], descendants: true, read: ElementRef }, { propertyName: "_defaultExpandIndicatorTemplate", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childrenContainer", first: true, predicate: ["childrenContainer"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #noDragTemplate>\n    <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n</ng-template>\n\n<!-- Will switch templates depending on dragDrop -->\n<ng-template *ngTemplateOutlet=\"noDragTemplate\">\n</ng-template>\n\n@if (expanded && !loading) {\n    <div #childrenContainer\n        class=\"igx-tree-node__group\"\n        role=\"group\"\n    >\n        <ng-content select=\"igx-tree-node\"></ng-content>\n    </div>\n}\n\n\n<ng-template #defaultIndicator>\n    <igx-icon\n        [attr.aria-label]=\"expanded ? resourceStrings.igx_collapse : resourceStrings.igx_expand\"\n        [name]=\"!expanded ? 'tree_expand' : 'tree_collapse'\"\n        family=\"default\"\n    >\n    </igx-icon>\n</ng-template>\n\n<!-- separated in a template in case this ever needs to be templatable -->\n<ng-template #selectMarkerTemplate>\n    <igx-checkbox [checked]=\"selected\" [disabled]=\"disabled\" [readonly]=\"true\" [indeterminate]=\"indeterminate\" [tabindex]=\"-1\">\n    </igx-checkbox>\n</ng-template>\n\n<ng-template #headerTemplate>\n    <div #ghostTemplate class=\"igx-tree-node__wrapper\"\n        [attr.role]=\"role\"\n        [tabIndex]=\"tabIndex\"\n        [ngClass]=\"{\n            'igx-tree-node__wrapper--selected': selected,\n            'igx-tree-node__wrapper--active' : this.active,\n            'igx-tree-node__wrapper--focused' : this.focused,\n            'igx-tree-node__wrapper--disabled' : this.disabled\n        }\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"clearFocus()\"\n    >\n        <div aria-hidden=\"true\">\n            @for (item of [].constructor(level); track $index) {\n                <span\n                    aria-hidden=\"true\"\n                    class=\"igx-tree-node__spacer\"\n                ></span>\n            }\n        </div>\n\n        <!-- Expand/Collapse indicator -->\n        @if (!loading) {\n            <span\n                class=\"igx-tree-node__toggle-button\"\n                [ngClass]=\"{ 'igx-tree-node__toggle-button--hidden': !_children?.length }\"\n                (click)=\"indicatorClick()\"\n            >\n                <ng-container *ngTemplateOutlet=\"expandIndicatorTemplate, context: { $implicit: expanded }\">\n                </ng-container>\n            </span>\n        }\n        @if (loading) {\n            <span class=\"igx-tree-node__toggle-button\">\n                <igx-circular-bar\n                    [animate]=\"false\"\n                    [indeterminate]=\"true\"\n                    [textVisibility]=\"false\"\n                >\n                </igx-circular-bar>\n            </span>\n        }\n\n        <!-- Item selection -->\n        @if (showSelectors) {\n            <div\n                class=\"igx-tree-node__select\"\n                (pointerdown)=\"onSelectorPointerDown($event)\"\n                (click)=\"onSelectorClick($event)\">\n                <ng-container *ngTemplateOutlet=\"selectMarkerTemplate\">\n                </ng-container>\n            </div>\n        }\n\n        <div class=\"igx-tree-node__content\" data-no-typography>\n            <!-- Ghost content -->\n            <ng-content></ng-content>\n        </div>\n    </div>\n\n    <!--  Buffer element for 'move after' when D&D is implemented-->\n    <div class=\"igx-tree-node__drop-indicator\">\n        @for (item of [].constructor(level); track $index) {\n            <span aria-hidden=\"true\" class=\"igx-tree-node__spacer\"></span>\n        }\n        <!-- style rules target this div, do not delete it -->\n        <div></div>\n    </div>\n</ng-template>\n\n<ng-template #dragTemplate>\n    <!-- Drag drop goes here\n        igxDrop\n        #dropRef=\"drop\"\n        [igxNodeDrag]=\"this\"\n        (dragStart)=\"logDrop(dropRef)\"\n        (leave)=\"emitLeave()\"\n        (enter)=\"emitEnter()\" -->\n    <div class=\"igx-tree-node__drag-wrapper\">\n        <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n    </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tree-node{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--tree-size: var(--component-size);display:flex;flex-direction:column}.igx-tree-node__wrapper{display:flex;align-items:center;min-height:var(--size);padding-block:0;position:relative;background:var(--background);color:var(--foreground)}.igx-tree-node__wrapper:dir(rtl) igx-icon,[dir=rtl] .igx-tree-node__wrapper igx-icon{transform:scaleX(-1)}.igx-tree-node__wrapper:after{content:\"\";position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;background:#0000;z-index:0}.igx-tree-node__wrapper:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper:focus{outline-width:0}.igx-tree-node__wrapper igx-circular-bar{--diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max( calc(1.5rem - 4px) , -1 * calc(1.5rem - 4px) ), var(--is-small, 1) * max( calc(1.5rem - 6px) , -1 * calc(1.5rem - 6px) )) !important}.igx-tree-node__wrapper--selected{background:var(--background-selected);color:var(--foreground-selected)}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active{background:var(--background-active);color:var(--foreground-active)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected{background:var(--background-active-selected);color:var(--foreground-active-selected)}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-tree-node__wrapper--disabled{background:var(--background-disabled)!important;color:var(--foreground-disabled)!important;box-shadow:none!important;pointer-events:none}.igx-tree-node__wrapper--disabled:after{display:none}.igx-tree-node--disabled .igx-tree-node__toggle-button{color:var(--foreground-disabled)!important}.igx-tree-node__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:block;align-items:center;flex:1;z-index:1}.igx-tree-node__spacer{--component-size: var(--tree-size);--spacer: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.75rem, -1 * .75rem));width:var(--spacer);display:inline-block}.igx-tree-node__toggle-button{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:1.5rem;z-index:1}.igx-tree-node__toggle-button--hidden{visibility:hidden}.igx-tree-node__drop-indicator{display:flex;visibility:hidden;position:absolute;inset-inline-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));bottom:0}.igx-tree-node__drop-indicator>div{flex:1;height:.0625rem;background:var(--drop-area-color)}.igx-tree-node__select{display:flex;align-items:center;z-index:1}.igx-tree-node__group{overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__wrapper igx-checkbox{--composite-padding: 0}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 4.75rem),-1 * calc(100% - 4.75rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 3.75rem),-1 * calc(100% - 3.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline:.625rem .875rem}.igx-tree-node__toggle-button{margin-inline-end:.25rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tree-node{border-radius:.25rem}.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:.25rem;margin-block-end:.25rem}.igx-tree-node__wrapper:after{border-radius:.25rem}.igx-tree-node__wrapper igx-icon{--component-size: 2;color:var(--icon-color)}.igx-tree-node__wrapper:hover{color:var(--foreground-active)}.igx-tree-node__wrapper igx-circular-bar{--circular-bar: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max( calc(1rem - 4px) , -1 * calc(1rem - 4px) ), var(--is-small, 1) * max( calc(1rem - 6px) , -1 * calc(1rem - 6px) )) !important}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper--active:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active:hover:after{background:#0000}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:after{background:#0000}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .125rem var(--border-color)}.igx-tree-node__wrapper--disabled igx-icon{color:var(--foreground-disabled)!important}.igx-tree-node__spacer{--spacer: 1rem}.igx-tree-node__drop-indicator{inset-inline-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));width:max(var(--is-large, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 2.75rem),-1 * calc(100% - 2.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 2.25rem),-1 * calc(100% - 2.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline-end:.5rem}.igx-tree-node__toggle-button igx-icon{--component-size: 1}.igx-tree-node__toggle-button{min-width:.875rem;margin-inline-end:.25rem}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tree-node', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
-                    ], changeDetection: ChangeDetectionStrategy.Eager, imports: [NgTemplateOutlet, IgxIconComponent, IgxCheckboxComponent, NgClass, IgxCircularProgressBarComponent], template: "<ng-template #noDragTemplate>\n    <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n</ng-template>\n\n<!-- Will switch templates depending on dragDrop -->\n<ng-template *ngTemplateOutlet=\"noDragTemplate\">\n</ng-template>\n\n@if (expanded && !loading) {\n    <div #childrenContainer\n        class=\"igx-tree-node__group\"\n        role=\"group\"\n    >\n        <ng-content select=\"igx-tree-node\"></ng-content>\n    </div>\n}\n\n\n<ng-template #defaultIndicator>\n    <igx-icon\n        [attr.aria-label]=\"expanded ? resourceStrings.igx_collapse : resourceStrings.igx_expand\"\n        [name]=\"!expanded ? 'tree_expand' : 'tree_collapse'\"\n        family=\"default\"\n    >\n    </igx-icon>\n</ng-template>\n\n<!-- separated in a template in case this ever needs to be templatable -->\n<ng-template #selectMarkerTemplate>\n    <igx-checkbox [checked]=\"selected\" [disabled]=\"disabled\" [readonly]=\"true\" [indeterminate]=\"indeterminate\" [tabindex]=\"-1\">\n    </igx-checkbox>\n</ng-template>\n\n<ng-template #headerTemplate>\n    <div #ghostTemplate class=\"igx-tree-node__wrapper\"\n        [attr.role]=\"role\"\n        [tabIndex]=\"tabIndex\"\n        [ngClass]=\"{\n            'igx-tree-node__wrapper--selected': selected,\n            'igx-tree-node__wrapper--active' : this.active,\n            'igx-tree-node__wrapper--focused' : this.focused,\n            'igx-tree-node__wrapper--disabled' : this.disabled\n        }\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"clearFocus()\"\n    >\n        <div aria-hidden=\"true\">\n            @for (item of [].constructor(level); track $index) {\n                <span\n                    aria-hidden=\"true\"\n                    class=\"igx-tree-node__spacer\"\n                ></span>\n            }\n        </div>\n\n        <!-- Expand/Collapse indicator -->\n        @if (!loading) {\n            <span\n                class=\"igx-tree-node__toggle-button\"\n                [ngClass]=\"{ 'igx-tree-node__toggle-button--hidden': !_children?.length }\"\n                (click)=\"indicatorClick()\"\n            >\n                <ng-container *ngTemplateOutlet=\"expandIndicatorTemplate, context: { $implicit: expanded }\">\n                </ng-container>\n            </span>\n        }\n        @if (loading) {\n            <span class=\"igx-tree-node__toggle-button\">\n                <igx-circular-bar\n                    [animate]=\"false\"\n                    [indeterminate]=\"true\"\n                    [textVisibility]=\"false\"\n                >\n                </igx-circular-bar>\n            </span>\n        }\n\n        <!-- Item selection -->\n        @if (showSelectors) {\n            <div\n                class=\"igx-tree-node__select\"\n                (pointerdown)=\"onSelectorPointerDown($event)\"\n                (click)=\"onSelectorClick($event)\">\n                <ng-container *ngTemplateOutlet=\"selectMarkerTemplate\">\n                </ng-container>\n            </div>\n        }\n\n        <div class=\"igx-tree-node__content\">\n            <!-- Ghost content -->\n            <ng-content></ng-content>\n        </div>\n    </div>\n\n    <!--  Buffer element for 'move after' when D&D is implemented-->\n    <div class=\"igx-tree-node__drop-indicator\">\n        @for (item of [].constructor(level); track $index) {\n            <span aria-hidden=\"true\" class=\"igx-tree-node__spacer\"></span>\n        }\n        <!-- style rules target this div, do not delete it -->\n        <div></div>\n    </div>\n</ng-template>\n\n<ng-template #dragTemplate>\n    <!-- Drag drop goes here\n        igxDrop\n        #dropRef=\"drop\"\n        [igxNodeDrag]=\"this\"\n        (dragStart)=\"logDrop(dropRef)\"\n        (leave)=\"emitLeave()\"\n        (enter)=\"emitEnter()\" -->\n    <div class=\"igx-tree-node__drag-wrapper\">\n        <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n    </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tree-node{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--tree-size: var(--component-size);display:flex;flex-direction:column}.igx-tree-node__wrapper{display:flex;align-items:center;min-height:var(--size);padding-block:0;position:relative;background:var(--background);color:var(--foreground)}.igx-tree-node__wrapper:dir(rtl) igx-icon,[dir=rtl] .igx-tree-node__wrapper igx-icon{transform:scaleX(-1)}.igx-tree-node__wrapper:after{content:\"\";position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;background:#0000;z-index:0}.igx-tree-node__wrapper:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper:focus{outline-width:0}.igx-tree-node__wrapper igx-circular-bar{--diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max( calc(1.5rem - 4px) , -1 * calc(1.5rem - 4px) ), var(--is-small, 1) * max( calc(1.5rem - 6px) , -1 * calc(1.5rem - 6px) )) !important}.igx-tree-node__wrapper--selected{background:var(--background-selected);color:var(--foreground-selected)}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active{background:var(--background-active);color:var(--foreground-active)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected{background:var(--background-active-selected);color:var(--foreground-active-selected)}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-tree-node__wrapper--disabled{background:var(--background-disabled)!important;color:var(--foreground-disabled)!important;box-shadow:none!important;pointer-events:none}.igx-tree-node__wrapper--disabled:after{display:none}.igx-tree-node--disabled .igx-tree-node__toggle-button{color:var(--foreground-disabled)!important}.igx-tree-node__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:block;align-items:center;flex:1;z-index:1}.igx-tree-node__spacer{--component-size: var(--tree-size);--spacer: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.75rem, -1 * .75rem));width:var(--spacer);display:inline-block}.igx-tree-node__toggle-button{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:1.5rem;z-index:1}.igx-tree-node__toggle-button--hidden{visibility:hidden}.igx-tree-node__drop-indicator{display:flex;visibility:hidden;position:absolute;inset-inline-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));bottom:0}.igx-tree-node__drop-indicator>div{flex:1;height:.0625rem;background:var(--drop-area-color)}.igx-tree-node__select{display:flex;align-items:center;z-index:1}.igx-tree-node__group{overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__wrapper igx-checkbox{--composite-padding: 0}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 4.75rem),-1 * calc(100% - 4.75rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 3.75rem),-1 * calc(100% - 3.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline:.625rem .875rem}.igx-tree-node__toggle-button{margin-inline-end:.25rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tree-node{border-radius:.25rem}.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:.25rem;margin-block-end:.25rem}.igx-tree-node__wrapper:after{border-radius:.25rem}.igx-tree-node__wrapper igx-icon{--component-size: 2;color:var(--icon-color)}.igx-tree-node__wrapper:hover{color:var(--foreground-active)}.igx-tree-node__wrapper igx-circular-bar{--circular-bar: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max( calc(1rem - 4px) , -1 * calc(1rem - 4px) ), var(--is-small, 1) * max( calc(1rem - 6px) , -1 * calc(1rem - 6px) )) !important}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper--active:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active:hover:after{background:#0000}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:after{background:#0000}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .125rem var(--border-color)}.igx-tree-node__wrapper--disabled igx-icon{color:var(--foreground-disabled)!important}.igx-tree-node__spacer{--spacer: 1rem}.igx-tree-node__drop-indicator{inset-inline-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));width:max(var(--is-large, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 2.75rem),-1 * calc(100% - 2.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 2.25rem),-1 * calc(100% - 2.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline-end:.5rem}.igx-tree-node__toggle-button igx-icon{--component-size: 1}.igx-tree-node__toggle-button{min-width:.875rem;margin-inline-end:.25rem}}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, imports: [NgTemplateOutlet, IgxIconComponent, IgxCheckboxComponent, NgClass, IgxCircularProgressBarComponent], template: "<ng-template #noDragTemplate>\n    <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n</ng-template>\n\n<!-- Will switch templates depending on dragDrop -->\n<ng-template *ngTemplateOutlet=\"noDragTemplate\">\n</ng-template>\n\n@if (expanded && !loading) {\n    <div #childrenContainer\n        class=\"igx-tree-node__group\"\n        role=\"group\"\n    >\n        <ng-content select=\"igx-tree-node\"></ng-content>\n    </div>\n}\n\n\n<ng-template #defaultIndicator>\n    <igx-icon\n        [attr.aria-label]=\"expanded ? resourceStrings.igx_collapse : resourceStrings.igx_expand\"\n        [name]=\"!expanded ? 'tree_expand' : 'tree_collapse'\"\n        family=\"default\"\n    >\n    </igx-icon>\n</ng-template>\n\n<!-- separated in a template in case this ever needs to be templatable -->\n<ng-template #selectMarkerTemplate>\n    <igx-checkbox [checked]=\"selected\" [disabled]=\"disabled\" [readonly]=\"true\" [indeterminate]=\"indeterminate\" [tabindex]=\"-1\">\n    </igx-checkbox>\n</ng-template>\n\n<ng-template #headerTemplate>\n    <div #ghostTemplate class=\"igx-tree-node__wrapper\"\n        [attr.role]=\"role\"\n        [tabIndex]=\"tabIndex\"\n        [ngClass]=\"{\n            'igx-tree-node__wrapper--selected': selected,\n            'igx-tree-node__wrapper--active' : this.active,\n            'igx-tree-node__wrapper--focused' : this.focused,\n            'igx-tree-node__wrapper--disabled' : this.disabled\n        }\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"clearFocus()\"\n    >\n        <div aria-hidden=\"true\">\n            @for (item of [].constructor(level); track $index) {\n                <span\n                    aria-hidden=\"true\"\n                    class=\"igx-tree-node__spacer\"\n                ></span>\n            }\n        </div>\n\n        <!-- Expand/Collapse indicator -->\n        @if (!loading) {\n            <span\n                class=\"igx-tree-node__toggle-button\"\n                [ngClass]=\"{ 'igx-tree-node__toggle-button--hidden': !_children?.length }\"\n                (click)=\"indicatorClick()\"\n            >\n                <ng-container *ngTemplateOutlet=\"expandIndicatorTemplate, context: { $implicit: expanded }\">\n                </ng-container>\n            </span>\n        }\n        @if (loading) {\n            <span class=\"igx-tree-node__toggle-button\">\n                <igx-circular-bar\n                    [animate]=\"false\"\n                    [indeterminate]=\"true\"\n                    [textVisibility]=\"false\"\n                >\n                </igx-circular-bar>\n            </span>\n        }\n\n        <!-- Item selection -->\n        @if (showSelectors) {\n            <div\n                class=\"igx-tree-node__select\"\n                (pointerdown)=\"onSelectorPointerDown($event)\"\n                (click)=\"onSelectorClick($event)\">\n                <ng-container *ngTemplateOutlet=\"selectMarkerTemplate\">\n                </ng-container>\n            </div>\n        }\n\n        <div class=\"igx-tree-node__content\" data-no-typography>\n            <!-- Ghost content -->\n            <ng-content></ng-content>\n        </div>\n    </div>\n\n    <!--  Buffer element for 'move after' when D&D is implemented-->\n    <div class=\"igx-tree-node__drop-indicator\">\n        @for (item of [].constructor(level); track $index) {\n            <span aria-hidden=\"true\" class=\"igx-tree-node__spacer\"></span>\n        }\n        <!-- style rules target this div, do not delete it -->\n        <div></div>\n    </div>\n</ng-template>\n\n<ng-template #dragTemplate>\n    <!-- Drag drop goes here\n        igxDrop\n        #dropRef=\"drop\"\n        [igxNodeDrag]=\"this\"\n        (dragStart)=\"logDrop(dropRef)\"\n        (leave)=\"emitLeave()\"\n        (enter)=\"emitEnter()\" -->\n    <div class=\"igx-tree-node__drag-wrapper\">\n        <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n    </div>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tree-node{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--tree-size: var(--component-size);display:flex;flex-direction:column}.igx-tree-node__wrapper{display:flex;align-items:center;min-height:var(--size);padding-block:0;position:relative;background:var(--background);color:var(--foreground)}.igx-tree-node__wrapper:dir(rtl) igx-icon,[dir=rtl] .igx-tree-node__wrapper igx-icon{transform:scaleX(-1)}.igx-tree-node__wrapper:after{content:\"\";position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;background:#0000;z-index:0}.igx-tree-node__wrapper:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper:focus{outline-width:0}.igx-tree-node__wrapper igx-circular-bar{--diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max( calc(1.5rem - 4px) , -1 * calc(1.5rem - 4px) ), var(--is-small, 1) * max( calc(1.5rem - 6px) , -1 * calc(1.5rem - 6px) )) !important}.igx-tree-node__wrapper--selected{background:var(--background-selected);color:var(--foreground-selected)}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active{background:var(--background-active);color:var(--foreground-active)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected{background:var(--background-active-selected);color:var(--foreground-active-selected)}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-tree-node__wrapper--disabled{background:var(--background-disabled)!important;color:var(--foreground-disabled)!important;box-shadow:none!important;pointer-events:none}.igx-tree-node__wrapper--disabled:after{display:none}.igx-tree-node--disabled .igx-tree-node__toggle-button{color:var(--foreground-disabled)!important}.igx-tree-node__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:block;align-items:center;flex:1;z-index:1}.igx-tree-node__spacer{--component-size: var(--tree-size);--spacer: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(.75rem, -1 * .75rem));width:var(--spacer);display:inline-block}.igx-tree-node__toggle-button{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:1.5rem;z-index:1}.igx-tree-node__toggle-button--hidden{visibility:hidden}.igx-tree-node__drop-indicator{display:flex;visibility:hidden;position:absolute;inset-inline-end:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));bottom:0}.igx-tree-node__drop-indicator>div{flex:1;height:.0625rem;background:var(--drop-area-color)}.igx-tree-node__select{display:flex;align-items:center;z-index:1}.igx-tree-node__group{overflow:hidden}}@layer ig.material{@container style(--ig-theme: material){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__wrapper igx-checkbox{--composite-padding: 0}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 4.75rem),-1 * calc(100% - 4.75rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 3.75rem),-1 * calc(100% - 3.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline:.625rem .875rem}.igx-tree-node__toggle-button{margin-inline-end:.25rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-tree-node__wrapper igx-icon{--component-size: 3}.igx-tree-node__drop-indicator{width:max(var(--is-large, 1)*max(calc(100% - 5rem),-1 * calc(100% - 5rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 4rem),-1 * calc(100% - 4rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 3.5rem),-1 * calc(100% - 3.5rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select,.igx-tree-node__toggle-button{margin-inline-end:.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tree-node{border-radius:.25rem}.igx-tree-node__wrapper{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-radius:.25rem;margin-block-end:.25rem}.igx-tree-node__wrapper:after{border-radius:.25rem}.igx-tree-node__wrapper igx-icon{--component-size: 2;color:var(--icon-color)}.igx-tree-node__wrapper:hover{color:var(--foreground-active)}.igx-tree-node__wrapper igx-circular-bar{--circular-bar: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max( calc(1rem - 4px) , -1 * calc(1rem - 4px) ), var(--is-small, 1) * max( calc(1rem - 6px) , -1 * calc(1rem - 6px) )) !important}.igx-tree-node__wrapper--selected:hover:after{background:var(--hover-color)}.igx-tree-node__wrapper--active:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active:hover:after{background:#0000}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:hover{background:var(--hover-selected-color)}.igx-tree-node__wrapper--active.igx-tree-node__wrapper--selected:after{background:#0000}.igx-tree-node__wrapper--focused{box-shadow:inset 0 0 0 .125rem var(--border-color)}.igx-tree-node__wrapper--disabled igx-icon{color:var(--foreground-disabled)!important}.igx-tree-node__spacer{--spacer: 1rem}.igx-tree-node__drop-indicator{inset-inline-end:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));width:max(var(--is-large, 1)*max(calc(100% - 3.25rem),-1 * calc(100% - 3.25rem))*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(calc(100% - 2.75rem),-1 * calc(100% - 2.75rem))*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(calc(100% - 2.25rem),-1 * calc(100% - 2.25rem))*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))))}.igx-tree-node__select{margin-inline-end:.5rem}.igx-tree-node__toggle-button igx-icon{--component-size: 1}.igx-tree-node__toggle-button{min-width:.875rem;margin-inline-end:.25rem}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], loading: [{
@@ -1266,10 +1266,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Used for templating the select marker of the tree
  */
 class IgxTreeSelectMarkerDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeSelectMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxTreeSelectMarkerDirective, isStandalone: true, selector: "[igxTreeSelectMarker]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeSelectMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTreeSelectMarkerDirective, isStandalone: true, selector: "[igxTreeSelectMarker]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeSelectMarkerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeSelectMarkerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTreeSelectMarker]',
@@ -1281,10 +1281,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Used for templating the expand indicator of the tree
  */
 class IgxTreeExpandIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxTreeExpandIndicatorDirective, isStandalone: true, selector: "[igxTreeExpandIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTreeExpandIndicatorDirective, isStandalone: true, selector: "[igxTreeExpandIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeExpandIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeExpandIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTreeExpandIndicator]',
@@ -1704,15 +1704,15 @@ class IgxTreeComponent {
                 this.nativeElement.scrollTop + bottomOffset + topOffset + (topOffset ? -1 : +1) * nodeRect.height;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.0", type: IgxTreeComponent, isStandalone: true, selector: "igx-tree", inputs: { selection: "selection", singleBranchExpand: ["singleBranchExpand", "singleBranchExpand", booleanAttribute], toggleNodeOnClick: ["toggleNodeOnClick", "toggleNodeOnClick", booleanAttribute], animationSettings: "animationSettings" }, outputs: { nodeSelection: "nodeSelection", nodeExpanding: "nodeExpanding", nodeExpanded: "nodeExpanded", nodeCollapsing: "nodeCollapsing", nodeCollapsed: "nodeCollapsed", activeNodeChanged: "activeNodeChanged" }, host: { properties: { "class.igx-tree": "this.cssClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.1", type: IgxTreeComponent, isStandalone: true, selector: "igx-tree", inputs: { selection: "selection", singleBranchExpand: ["singleBranchExpand", "singleBranchExpand", booleanAttribute], toggleNodeOnClick: ["toggleNodeOnClick", "toggleNodeOnClick", booleanAttribute], animationSettings: "animationSettings" }, outputs: { nodeSelection: "nodeSelection", nodeExpanding: "nodeExpanding", nodeExpanded: "nodeExpanded", nodeCollapsing: "nodeCollapsing", nodeCollapsed: "nodeCollapsed", activeNodeChanged: "activeNodeChanged" }, host: { properties: { "class.igx-tree": "this.cssClass" } }, providers: [
             IgxTreeService,
             IgxTreeSelectionService,
             IgxTreeNavigationService,
             { provide: IGX_TREE_COMPONENT, useExisting: IgxTreeComponent },
         ], queries: [{ propertyName: "expandIndicator", first: true, predicate: IgxTreeExpandIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "nodes", predicate: IgxTreeNodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-tree__root\" role=\"tree\" (keydown)=\"handleKeydown($event)\">\n    <ng-content select=\"igx-tree-node\"></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-tree{display:block;z-index:0;overflow-y:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tree', encapsulation: ViewEncapsulation.None, providers: [
                         IgxTreeService,
@@ -1766,11 +1766,11 @@ const IGX_TREE_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTreeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective], exports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeNodeComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective], exports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeModule, imports: [IgxTreeNodeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [