igniteui-angular 21.0.3 → 21.1.0-alpha.1

package/fesm2022/igniteui-angular-tree.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, inject, ElementRef, HostListener, HostBinding, Input, Directive, ChangeDetectorRef, EventEmitter, TemplateRef, booleanAttribute, ViewChild, ContentChildren, Output, Component, ContentChild, NgModule } from '@angular/core';
 import { takeUntil, throttleTime } from 'rxjs/operators';
-import { NAVIGATION_KEYS, getCurrentResourceStrings, TreeResourceStringsEN, PlatformUtil, resizeObservable } from 'igniteui-angular/core';
+import { NAVIGATION_KEYS, getCurrentResourceStrings, TreeResourceStringsEN, onResourceChangeHandle, PlatformUtil, resizeObservable } from 'igniteui-angular/core';
 import { Subject } from 'rxjs';
 import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -743,63 +743,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  * ```
  */
 class IgxTreeNodeComponent extends ToggleAnimationPlayer {
-    constructor() {
-        super(...arguments);
-        this.tree = inject(IGX_TREE_COMPONENT);
-        this.selectionService = inject(IgxTreeSelectionService);
-        this.treeService = inject(IgxTreeService);
-        this.navService = inject(IgxTreeNavigationService);
-        this.cdr = inject(ChangeDetectorRef);
-        this.element = inject(ElementRef);
-        this.parentNode = inject(IGX_TREE_NODE_COMPONENT, { optional: true, skipSelf: true });
-        /**
-         * To be used for load-on-demand scenarios in order to specify whether the node is loading data.
-         *
-         * @remarks
-         * Loading nodes do not render children.
-         */
-        this.loading = false;
-        /**
-         * Emitted when the node's `selected` property changes.
-         *
-         * ```html
-         * <igx-tree>
-         *      <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
-         *      </igx-tree-node>
-         * </igx-tree>
-         * ```
-         *
-         * ```typescript
-         * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
-         * node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e))
-         * ```
-         */
-        this.selectedChange = new EventEmitter();
-        /**
-         * Emitted when the node's `expanded` property changes.
-         *
-         * ```html
-         * <igx-tree>
-         *      <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
-         *      </igx-tree-node>
-         * </igx-tree>
-         * ```
-         *
-         * ```typescript
-         * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
-         * node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e))
-         * ```
-         */
-        this.expandedChange = new EventEmitter();
-        /** @hidden @internal */
-        this.cssClass = 'igx-tree-node';
-        /** @hidden @internal */
-        this.registeredChildren = [];
-        /** @hidden @internal */
-        this._resourceStrings = getCurrentResourceStrings(TreeResourceStringsEN);
-        this._tabIndex = null;
-        this._disabled = false;
-    }
     // TO DO: return different tab index depending on anchor child
     /** @hidden @internal */
     set tabIndex(val) {
@@ -835,7 +778,7 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
      * An accessor that returns the resource strings.
      */
     get resourceStrings() {
-        return this._resourceStrings;
+        return this._resourceStrings || this._defaultResourceStrings;
     }
     /**
      * Gets/Sets the active state of the node
@@ -904,6 +847,66 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
     get hasLinkChildren() {
         return this.linkChildren?.length > 0 || this.registeredChildren?.length > 0;
     }
+    constructor() {
+        super();
+        this.tree = inject(IGX_TREE_COMPONENT);
+        this.selectionService = inject(IgxTreeSelectionService);
+        this.treeService = inject(IgxTreeService);
+        this.navService = inject(IgxTreeNavigationService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.element = inject(ElementRef);
+        this.parentNode = inject(IGX_TREE_NODE_COMPONENT, { optional: true, skipSelf: true });
+        /**
+         * To be used for load-on-demand scenarios in order to specify whether the node is loading data.
+         *
+         * @remarks
+         * Loading nodes do not render children.
+         */
+        this.loading = false;
+        /**
+         * Emitted when the node's `selected` property changes.
+         *
+         * ```html
+         * <igx-tree>
+         *      <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
+         *      </igx-tree-node>
+         * </igx-tree>
+         * ```
+         *
+         * ```typescript
+         * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
+         * node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e))
+         * ```
+         */
+        this.selectedChange = new EventEmitter();
+        /**
+         * Emitted when the node's `expanded` property changes.
+         *
+         * ```html
+         * <igx-tree>
+         *      <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
+         *      </igx-tree-node>
+         * </igx-tree>
+         * ```
+         *
+         * ```typescript
+         * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
+         * node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e))
+         * ```
+         */
+        this.expandedChange = new EventEmitter();
+        /** @hidden @internal */
+        this.cssClass = 'igx-tree-node';
+        /** @hidden @internal */
+        this.registeredChildren = [];
+        this._resourceStrings = null;
+        this._defaultResourceStrings = getCurrentResourceStrings(TreeResourceStringsEN);
+        this._tabIndex = null;
+        this._disabled = false;
+        onResourceChangeHandle(this.destroy$, () => {
+            this._defaultResourceStrings = getCurrentResourceStrings(TreeResourceStringsEN, false);
+        }, this);
+    }
     /**
      * @hidden @internal
      */
@@ -1196,7 +1199,7 @@ class IgxTreeNodeComponent extends ToggleAnimationPlayer {
             this.registeredChildren.splice(index, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", 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", 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"] }] }); }
@@ -1206,7 +1209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
             args: [{ selector: 'igx-tree-node', providers: [
                         { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
                     ], 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" }]
-        }], propDecorators: { data: [{
+        }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], loading: [{
                 type: Input,