npm - igniteui-angular - Versions diffs - 22.2.0-rc.2 → 22.2.1 - Mend

igniteui-angular 22.2.0-rc.2 → 22.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/fesm2022/igniteui-angular-tree.mjs CHANGED Viewed

@@ -1207,13 +1207,13 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.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: [
             { 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\" 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 }); }
+        ], 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:none}.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.2.0", 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\" 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"] }]
+                    ], 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:none}.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: [{