@seniorsistemas/angular-components 19.10.0-develop-ef29acb7 → 19.10.1-feat-142334-3f5508e1

package/fesm2022/seniorsistemas-angular-components-tree.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, ElementRef, input, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, ElementRef, input, output, viewChild, Component } from '@angular/core';
+import { linkedState } from '@seniorsistemas/angular-components/utils';
 import { LoadingStateDirective } from '@seniorsistemas/angular-components/loading-state';
 import { trigger, transition, style, animate, query, stagger } from '@angular/animations';
 import * as i1 from '@angular/forms';
@@ -13,29 +14,29 @@ class TreeNodeItemComponent {
     elementRef = inject(ElementRef);
     ariaLevel = input(0);
     showCheckbox = input(false);
-    treeNodeItem;
-    treeNodeItemClicked = new EventEmitter();
-    treeNodeEdit = new EventEmitter();
-    nodeExpanded = new EventEmitter();
-    nodeCollapsed = new EventEmitter();
-    input;
+    treeNodeItem = input.required();
+    treeNodeItemClicked = output();
+    treeNodeEdit = output();
+    nodeExpanded = output();
+    nodeCollapsed = output();
+    input = viewChild.required('input', { read: ElementRef });
     get hasChildren() {
-        return !!(this.treeNodeItem?.children && this.treeNodeItem.children.length > 0);
+        return (this.treeNodeItem()?.children?.length ?? 0) > 0;
     }
     get editable() {
-        return this.treeNodeItem?.editable || false;
+        return this.treeNodeItem()?.editable || false;
     }
     get ariaLabel() {
-        return `${this.translateService.instant('platform.angular_components.select')} ${this.treeNodeItem.label}`;
+        return `${this.translateService.instant('platform.angular_components.select')} ${this.treeNodeItem().label}`;
     }
     expandNode() {
-        if (this.hasChildren && !this.treeNodeItem.isExpanded) {
-            this.toggleExpanded(this.treeNodeItem);
+        if (this.hasChildren && !this.treeNodeItem().isExpanded) {
+            this.toggleExpanded(this.treeNodeItem());
         }
     }
     collapseNode() {
-        if (this.hasChildren && this.treeNodeItem.isExpanded) {
-            this.toggleExpanded(this.treeNodeItem);
+        if (this.hasChildren && this.treeNodeItem().isExpanded) {
+            this.toggleExpanded(this.treeNodeItem());
         }
     }
     focusNextNode(event) {
@@ -60,7 +61,7 @@ class TreeNodeItemComponent {
         this.treeNodeItemClicked.emit({ item: node, event: new KeyboardEvent('keydown', { key: 'Enter' }) });
     }
     handleTreeNodeItemClick(event, treeNodeItem) {
-        const item = treeNodeItem || this.treeNodeItem;
+        const item = treeNodeItem || this.treeNodeItem();
         this.treeNodeItemClicked.emit({ item, event });
     }
     handleTreeNodeItemClicked({ event, item }) {
@@ -80,46 +81,48 @@ class TreeNodeItemComponent {
     }
     toggleEditing($event) {
         $event.stopPropagation();
-        this.treeNodeItem.isEditing = !this.treeNodeItem.isEditing;
+        this.treeNodeItem().isEditing = !this.treeNodeItem().isEditing;
         this.cdr.detectChanges();
-        if (this.treeNodeItem.isEditing) {
-            this.treeNodeItem.editNewValue = this.treeNodeItem.label;
-            const input = this.input?.nativeElement;
+        if (this.treeNodeItem().isEditing) {
+            this.treeNodeItem().editNewValue = this.treeNodeItem().label;
+            const input = this.input()?.nativeElement;
             input?.focus();
         }
     }
     cancelEdit($event) {
         $event.stopPropagation();
-        this.treeNodeItem.isEditing = false;
-        this.treeNodeItem.editNewValue = '';
-        this.treeNodeItem.editPreviousValue = '';
+        this.treeNodeItem().isEditing = false;
+        this.treeNodeItem().editNewValue = '';
+        this.treeNodeItem().editPreviousValue = '';
         this.cdr.detectChanges();
     }
     saveEdit($event) {
         $event.stopPropagation();
-        this.treeNodeItem.isEditing = false;
-        if (!this.treeNodeItem.editNewValue) {
+        const item = this.treeNodeItem();
+        item.isEditing = false;
+        const newValue = item.editNewValue;
+        if (!newValue) {
             return;
         }
-        this.treeNodeItem.editPreviousValue = this.treeNodeItem.label;
-        this.treeNodeItem.label = this.treeNodeItem.editNewValue;
+        item.editPreviousValue = item.label;
+        item.label = newValue;
         const revertAction = () => {
-            this.treeNodeItem.label = this.treeNodeItem.editPreviousValue;
-            this.treeNodeItem.isEditing = false;
+            item.label = item.editPreviousValue;
+            item.isEditing = false;
             this.cdr.detectChanges();
         };
         this.treeNodeEdit.emit({
             revertAction,
-            item: this.treeNodeItem,
-            newValue: this.treeNodeItem.editNewValue,
-            previousValue: this.treeNodeItem.editPreviousValue,
+            item,
+            newValue,
+            previousValue: item.editPreviousValue,
         });
     }
     treeNodeEditChildEvent(payload) {
         this.treeNodeEdit.emit(payload);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeNodeItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeNodeItemComponent, isStandalone: true, selector: "s-tree-node-item", inputs: { ariaLevel: { classPropertyName: "ariaLevel", publicName: "ariaLevel", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, treeNodeItem: { classPropertyName: "treeNodeItem", publicName: "treeNodeItem", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { treeNodeItemClicked: "treeNodeItemClicked", treeNodeEdit: "treeNodeEdit", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (treeNodeItem) {\n    <div\n        class=\"tree-node-item\"\n        role=\"treeitem\"\n        [class.tree-node-item-selected]=\"treeNodeItem.checked\"\n        [class.selectable]=\"hasChildren\"\n        [attr.aria-expanded]=\"hasChildren ? treeNodeItem.isExpanded : null\"\n        [attr.aria-selected]=\"treeNodeItem.checked === true\"\n        [attr.aria-label]=\"treeNodeItem.label\"\n        [attr.aria-level]=\"ariaLevel()\"\n        tabindex=\"0\"\n        (keydown.enter)=\"handleTreeNodeItemClick($event)\"\n        (keydown.arrowRight)=\"expandNode()\"\n        (keydown.arrowLeft)=\"collapseNode()\"\n        (keydown.arrowDown)=\"focusNextNode($event)\"\n        (keydown.arrowUp)=\"focusPreviousNode($event)\"\n    >\n        @if (hasChildren || treeNodeItem.leaf === true) {\n            <div\n                class=\"arrow\"\n                (click)=\"toggleExpanded(treeNodeItem)\"\n            >\n                @if (!treeNodeItem.isExpanded) {\n                    <i [class]=\"treeNodeItem.collapsedIcon || 'fas fa-chevron-right'\"></i>\n                }\n                @if (treeNodeItem.isExpanded) {\n                    <i [class]=\"treeNodeItem.expandedIcon || 'fas fa-chevron-down'\"></i>\n                }\n            </div>\n        }\n\n        <div\n            class=\"tree-node-item-text\"\n            (click)=\"handleTreeNodeItemClick($event)\"\n        >\n            @if (treeNodeItem.icon || treeNodeItem.isEditing) {\n                <span class=\"tree-node-item-text-icon\">\n                    @if (treeNodeItem.icon && !treeNodeItem.isEditing) {\n                        <i [class]=\"treeNodeItem.icon\"></i>\n                    }\n                    @if (treeNodeItem.isEditing) {\n                        <i\n                            class=\"fas fa-edit edit\"\n                            (click)=\"saveEdit($event)\"\n                        ></i>\n                    }\n                </span>\n            }\n\n            @if (showCheckbox() && !treeNodeItem.isEditing) {\n                <span class=\"tree-node-item-text-checkbox\">\n                    <input\n                        type=\"checkbox\"\n                        [checked]=\"treeNodeItem.checked === true\"\n                        [indeterminate]=\"treeNodeItem.checked === null\"\n                        [attr.aria-checked]=\"treeNodeItem.checked === null ? 'mixed' : treeNodeItem.checked\"\n                        [attr.aria-label]=\"ariaLabel\"\n                        role=\"checkbox\"\n                        tabindex=\"0\"\n                        (keydown.enter)=\"onCheckboxEnter(treeNodeItem)\"\n                    />\n                </span>\n            }\n\n            <span class=\"tree-node-item-text-label\">\n                @if (treeNodeItem.isEditing) {\n                    <input\n                        #input\n                        type=\"text\"\n                        sInputText\n                        class=\"tree-node-item-text-input\"\n                        [(ngModel)]=\"treeNodeItem.editNewValue\"\n                        (keydown.enter)=\"saveEdit($event)\"\n                        (keydown.escape)=\"cancelEdit($event)\"\n                        (click)=\"$event.stopPropagation()\"\n                        aria-label=\"Editar nome do item\"\n                        aria-live=\"polite\"\n                    />\n                } @else if (!treeNodeItem.isEditing) {\n                    {{ treeNodeItem.label }}\n                }\n            </span>\n\n            @if (editable) {\n                <span class=\"tree-node-item-text-editable\">\n                    <i\n                        class=\"fas fa-pencil-alt\"\n                        (click)=\"toggleEditing($event)\"\n                        aria-label=\"Editar item\"\n                        tabindex=\"0\"\n                    ></i>\n                </span>\n            }\n        </div>\n    </div>\n}\n\n@if (hasChildren && treeNodeItem.isExpanded) {\n    <div\n        @fadeExpand\n        class=\"child\"\n        role=\"group\"\n        @childrenAnimation\n    >\n        @for (child of treeNodeItem.children; track $index) {\n            <s-tree-node-item\n                [showCheckbox]=\"showCheckbox()\"\n                [treeNodeItem]=\"child\"\n                [ariaLevel]=\"ariaLevel() + 1\"\n                (treeNodeItemClicked)=\"handleTreeNodeItemClicked($event)\"\n                (treeNodeEdit)=\"treeNodeEditChildEvent($event)\"\n                (nodeExpanded)=\"nodeExpanded.emit($event)\"\n                (nodeCollapsed)=\"nodeCollapsed.emit($event)\"\n                class=\"child-item\"\n            />\n        }\n    </div>\n}\n\n", styles: [".tree-node-item{width:100%;display:flex;cursor:pointer}.tree-node-item:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item .arrow{padding:3px 9px;display:flex;align-items:center;justify-content:center}.tree-node-item-text{flex:1;display:flex;padding:3px 0;align-items:center}.tree-node-item-text:hover{background:#f1f7f8}.tree-node-item-text-icon{display:flex;align-items:center;justify-content:center;padding-right:9px}.tree-node-item-text-icon .edit{color:#428bca}.tree-node-item-text-label{color:#212533;font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;line-height:150%;display:flex;flex:1}.tree-node-item-text-checkbox{padding-right:9px;display:flex}.tree-node-item-text-checkbox input[type=checkbox]{accent-color:#428bca;width:14px;height:14px}.tree-node-item-text-checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item-text-editable{display:flex;align-items:center;justify-content:flex-end}.tree-node-item-text-editable i{padding:9px;border-radius:50%}.tree-node-item-text-editable i:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item-text-input{flex:1}.tree-node-item.selectable .tree-node-item-text-label{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:700}.tree-node-item.selectable *{cursor:pointer}.tree-node-item-selected .tree-node-item-text{background:#d5e8ec}.child{overflow:hidden;padding-left:2.2em;padding-right:5px;display:flex;flex-direction:column;gap:5px}.child-item:first-child{padding-top:5px}.child-item:last-child{padding-bottom:5px}\n"], dependencies: [{ kind: "component", type: TreeNodeItemComponent, selector: "s-tree-node-item", inputs: ["ariaLevel", "showCheckbox", "treeNodeItem"], outputs: ["treeNodeItemClicked", "treeNodeEdit", "nodeExpanded", "nodeCollapsed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputTextDirective, selector: "input[sInputText]" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeNodeItemComponent, isStandalone: true, selector: "s-tree-node-item", inputs: { ariaLevel: { classPropertyName: "ariaLevel", publicName: "ariaLevel", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, treeNodeItem: { classPropertyName: "treeNodeItem", publicName: "treeNodeItem", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { treeNodeItemClicked: "treeNodeItemClicked", treeNodeEdit: "treeNodeEdit", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (treeNodeItem()) {\n    <div\n        class=\"tree-node-item\"\n        role=\"treeitem\"\n        [class.tree-node-item-selected]=\"treeNodeItem().checked\"\n        [class.selectable]=\"hasChildren\"\n        [attr.aria-expanded]=\"hasChildren ? treeNodeItem().isExpanded : null\"\n        [attr.aria-selected]=\"treeNodeItem().checked === true\"\n        [attr.aria-label]=\"treeNodeItem().label\"\n        [attr.aria-level]=\"ariaLevel()\"\n        tabindex=\"0\"\n        (keydown.enter)=\"handleTreeNodeItemClick($event)\"\n        (keydown.arrowRight)=\"expandNode()\"\n        (keydown.arrowLeft)=\"collapseNode()\"\n        (keydown.arrowDown)=\"focusNextNode($event)\"\n        (keydown.arrowUp)=\"focusPreviousNode($event)\"\n    >\n        @if (hasChildren || treeNodeItem().leaf === true) {\n            <div\n                class=\"arrow\"\n                (click)=\"toggleExpanded(treeNodeItem())\"\n            >\n                @if (!treeNodeItem().isExpanded) {\n                    <i [class]=\"treeNodeItem().collapsedIcon || 'fas fa-chevron-right'\"></i>\n                }\n                @if (treeNodeItem().isExpanded) {\n                    <i [class]=\"treeNodeItem().expandedIcon || 'fas fa-chevron-down'\"></i>\n                }\n            </div>\n        }\n\n        <div\n            class=\"tree-node-item-text\"\n            (click)=\"handleTreeNodeItemClick($event)\"\n        >\n            @if (treeNodeItem().icon || treeNodeItem().isEditing) {\n                <span class=\"tree-node-item-text-icon\">\n                    @if (treeNodeItem().icon && !treeNodeItem().isEditing) {\n                        <i [class]=\"treeNodeItem().icon\"></i>\n                    }\n                    @if (treeNodeItem().isEditing) {\n                        <i\n                            class=\"fas fa-edit edit\"\n                            (click)=\"saveEdit($event)\"\n                        ></i>\n                    }\n                </span>\n            }\n\n            @if (showCheckbox() && !treeNodeItem().isEditing) {\n                <span class=\"tree-node-item-text-checkbox\">\n                    <input\n                        type=\"checkbox\"\n                        [checked]=\"treeNodeItem().checked === true\"\n                        [indeterminate]=\"treeNodeItem().checked === null\"\n                        [attr.aria-checked]=\"treeNodeItem().checked === null ? 'mixed' : treeNodeItem().checked\"\n                        [attr.aria-label]=\"ariaLabel\"\n                        role=\"checkbox\"\n                        tabindex=\"0\"\n                        (keydown.enter)=\"onCheckboxEnter(treeNodeItem())\"\n                    />\n                </span>\n            }\n\n            <span class=\"tree-node-item-text-label\">\n                @if (treeNodeItem().isEditing) {\n                    <input\n                        #input\n                        type=\"text\"\n                        sInputText\n                        class=\"tree-node-item-text-input\"\n                        [(ngModel)]=\"treeNodeItem().editNewValue\"\n                        (keydown.enter)=\"saveEdit($event)\"\n                        (keydown.escape)=\"cancelEdit($event)\"\n                        (click)=\"$event.stopPropagation()\"\n                        aria-label=\"Editar nome do item\"\n                        aria-live=\"polite\"\n                    />\n                } @else if (!treeNodeItem().isEditing) {\n                    {{ treeNodeItem().label }}\n                }\n            </span>\n\n            @if (editable) {\n                <span class=\"tree-node-item-text-editable\">\n                    <i\n                        class=\"fas fa-pencil-alt\"\n                        (click)=\"toggleEditing($event)\"\n                        aria-label=\"Editar item\"\n                        tabindex=\"0\"\n                    ></i>\n                </span>\n            }\n        </div>\n    </div>\n}\n\n@if (hasChildren && treeNodeItem().isExpanded) {\n    <div\n        @fadeExpand\n        class=\"child\"\n        role=\"group\"\n        @childrenAnimation\n    >\n        @for (child of treeNodeItem().children; track $index) {\n            <s-tree-node-item\n                [showCheckbox]=\"showCheckbox()\"\n                [treeNodeItem]=\"child\"\n                [ariaLevel]=\"ariaLevel() + 1\"\n                (treeNodeItemClicked)=\"handleTreeNodeItemClicked($event)\"\n                (treeNodeEdit)=\"treeNodeEditChildEvent($event)\"\n                (nodeExpanded)=\"nodeExpanded.emit($event)\"\n                (nodeCollapsed)=\"nodeCollapsed.emit($event)\"\n                class=\"child-item\"\n            />\n        }\n    </div>\n}\n\n", styles: [".tree-node-item{width:100%;display:flex;cursor:pointer}.tree-node-item:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item .arrow{padding:3px 9px;display:flex;align-items:center;justify-content:center}.tree-node-item-text{flex:1;display:flex;padding:3px 0;align-items:center}.tree-node-item-text:hover{background:#f1f7f8}.tree-node-item-text-icon{display:flex;align-items:center;justify-content:center;padding-right:9px}.tree-node-item-text-icon .edit{color:#428bca}.tree-node-item-text-label{color:#212533;font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;line-height:150%;display:flex;flex:1}.tree-node-item-text-checkbox{padding-right:9px;display:flex}.tree-node-item-text-checkbox input[type=checkbox]{accent-color:#428bca;width:14px;height:14px}.tree-node-item-text-checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item-text-editable{display:flex;align-items:center;justify-content:flex-end}.tree-node-item-text-editable i{padding:9px;border-radius:50%}.tree-node-item-text-editable i:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item-text-input{flex:1}.tree-node-item.selectable .tree-node-item-text-label{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:700}.tree-node-item.selectable *{cursor:pointer}.tree-node-item-selected .tree-node-item-text{background:#d5e8ec}.child{overflow:hidden;padding-left:2.2em;padding-right:5px;display:flex;flex-direction:column;gap:5px}.child-item:first-child{padding-top:5px}.child-item:last-child{padding-bottom:5px}\n"], dependencies: [{ kind: "component", type: TreeNodeItemComponent, selector: "s-tree-node-item", inputs: ["ariaLevel", "showCheckbox", "treeNodeItem"], outputs: ["treeNodeItemClicked", "treeNodeEdit", "nodeExpanded", "nodeCollapsed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputTextDirective, selector: "input[sInputText]" }], animations: [
             trigger('fadeExpand', [
                 transition(':enter', [
                     style({ height: '0px', opacity: 0, overflow: 'hidden' }),
@@ -155,21 +158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                 ], { optional: true }),
                             ]),
                         ]),
-                    ], standalone: true, imports: [FormsModule, InputTextDirective], template: "@if (treeNodeItem) {\n    <div\n        class=\"tree-node-item\"\n        role=\"treeitem\"\n        [class.tree-node-item-selected]=\"treeNodeItem.checked\"\n        [class.selectable]=\"hasChildren\"\n        [attr.aria-expanded]=\"hasChildren ? treeNodeItem.isExpanded : null\"\n        [attr.aria-selected]=\"treeNodeItem.checked === true\"\n        [attr.aria-label]=\"treeNodeItem.label\"\n        [attr.aria-level]=\"ariaLevel()\"\n        tabindex=\"0\"\n        (keydown.enter)=\"handleTreeNodeItemClick($event)\"\n        (keydown.arrowRight)=\"expandNode()\"\n        (keydown.arrowLeft)=\"collapseNode()\"\n        (keydown.arrowDown)=\"focusNextNode($event)\"\n        (keydown.arrowUp)=\"focusPreviousNode($event)\"\n    >\n        @if (hasChildren || treeNodeItem.leaf === true) {\n            <div\n                class=\"arrow\"\n                (click)=\"toggleExpanded(treeNodeItem)\"\n            >\n                @if (!treeNodeItem.isExpanded) {\n                    <i [class]=\"treeNodeItem.collapsedIcon || 'fas fa-chevron-right'\"></i>\n                }\n                @if (treeNodeItem.isExpanded) {\n                    <i [class]=\"treeNodeItem.expandedIcon || 'fas fa-chevron-down'\"></i>\n                }\n            </div>\n        }\n\n        <div\n            class=\"tree-node-item-text\"\n            (click)=\"handleTreeNodeItemClick($event)\"\n        >\n            @if (treeNodeItem.icon || treeNodeItem.isEditing) {\n                <span class=\"tree-node-item-text-icon\">\n                    @if (treeNodeItem.icon && !treeNodeItem.isEditing) {\n                        <i [class]=\"treeNodeItem.icon\"></i>\n                    }\n                    @if (treeNodeItem.isEditing) {\n                        <i\n                            class=\"fas fa-edit edit\"\n                            (click)=\"saveEdit($event)\"\n                        ></i>\n                    }\n                </span>\n            }\n\n            @if (showCheckbox() && !treeNodeItem.isEditing) {\n                <span class=\"tree-node-item-text-checkbox\">\n                    <input\n                        type=\"checkbox\"\n                        [checked]=\"treeNodeItem.checked === true\"\n                        [indeterminate]=\"treeNodeItem.checked === null\"\n                        [attr.aria-checked]=\"treeNodeItem.checked === null ? 'mixed' : treeNodeItem.checked\"\n                        [attr.aria-label]=\"ariaLabel\"\n                        role=\"checkbox\"\n                        tabindex=\"0\"\n                        (keydown.enter)=\"onCheckboxEnter(treeNodeItem)\"\n                    />\n                </span>\n            }\n\n            <span class=\"tree-node-item-text-label\">\n                @if (treeNodeItem.isEditing) {\n                    <input\n                        #input\n                        type=\"text\"\n                        sInputText\n                        class=\"tree-node-item-text-input\"\n                        [(ngModel)]=\"treeNodeItem.editNewValue\"\n                        (keydown.enter)=\"saveEdit($event)\"\n                        (keydown.escape)=\"cancelEdit($event)\"\n                        (click)=\"$event.stopPropagation()\"\n                        aria-label=\"Editar nome do item\"\n                        aria-live=\"polite\"\n                    />\n                } @else if (!treeNodeItem.isEditing) {\n                    {{ treeNodeItem.label }}\n                }\n            </span>\n\n            @if (editable) {\n                <span class=\"tree-node-item-text-editable\">\n                    <i\n                        class=\"fas fa-pencil-alt\"\n                        (click)=\"toggleEditing($event)\"\n                        aria-label=\"Editar item\"\n                        tabindex=\"0\"\n                    ></i>\n                </span>\n            }\n        </div>\n    </div>\n}\n\n@if (hasChildren && treeNodeItem.isExpanded) {\n    <div\n        @fadeExpand\n        class=\"child\"\n        role=\"group\"\n        @childrenAnimation\n    >\n        @for (child of treeNodeItem.children; track $index) {\n            <s-tree-node-item\n                [showCheckbox]=\"showCheckbox()\"\n                [treeNodeItem]=\"child\"\n                [ariaLevel]=\"ariaLevel() + 1\"\n                (treeNodeItemClicked)=\"handleTreeNodeItemClicked($event)\"\n                (treeNodeEdit)=\"treeNodeEditChildEvent($event)\"\n                (nodeExpanded)=\"nodeExpanded.emit($event)\"\n                (nodeCollapsed)=\"nodeCollapsed.emit($event)\"\n                class=\"child-item\"\n            />\n        }\n    </div>\n}\n\n", styles: [".tree-node-item{width:100%;display:flex;cursor:pointer}.tree-node-item:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item .arrow{padding:3px 9px;display:flex;align-items:center;justify-content:center}.tree-node-item-text{flex:1;display:flex;padding:3px 0;align-items:center}.tree-node-item-text:hover{background:#f1f7f8}.tree-node-item-text-icon{display:flex;align-items:center;justify-content:center;padding-right:9px}.tree-node-item-text-icon .edit{color:#428bca}.tree-node-item-text-label{color:#212533;font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;line-height:150%;display:flex;flex:1}.tree-node-item-text-checkbox{padding-right:9px;display:flex}.tree-node-item-text-checkbox input[type=checkbox]{accent-color:#428bca;width:14px;height:14px}.tree-node-item-text-checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item-text-editable{display:flex;align-items:center;justify-content:flex-end}.tree-node-item-text-editable i{padding:9px;border-radius:50%}.tree-node-item-text-editable i:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item-text-input{flex:1}.tree-node-item.selectable .tree-node-item-text-label{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:700}.tree-node-item.selectable *{cursor:pointer}.tree-node-item-selected .tree-node-item-text{background:#d5e8ec}.child{overflow:hidden;padding-left:2.2em;padding-right:5px;display:flex;flex-direction:column;gap:5px}.child-item:first-child{padding-top:5px}.child-item:last-child{padding-bottom:5px}\n"] }]
-        }], propDecorators: { treeNodeItem: [{
-                type: Input
-            }], treeNodeItemClicked: [{
-                type: Output
-            }], treeNodeEdit: [{
-                type: Output
-            }], nodeExpanded: [{
-                type: Output
-            }], nodeCollapsed: [{
-                type: Output
-            }], input: [{
-                type: ViewChild,
-                args: ['input', { read: ElementRef }]
-            }] } });
+                    ], standalone: true, imports: [FormsModule, InputTextDirective], template: "@if (treeNodeItem()) {\n    <div\n        class=\"tree-node-item\"\n        role=\"treeitem\"\n        [class.tree-node-item-selected]=\"treeNodeItem().checked\"\n        [class.selectable]=\"hasChildren\"\n        [attr.aria-expanded]=\"hasChildren ? treeNodeItem().isExpanded : null\"\n        [attr.aria-selected]=\"treeNodeItem().checked === true\"\n        [attr.aria-label]=\"treeNodeItem().label\"\n        [attr.aria-level]=\"ariaLevel()\"\n        tabindex=\"0\"\n        (keydown.enter)=\"handleTreeNodeItemClick($event)\"\n        (keydown.arrowRight)=\"expandNode()\"\n        (keydown.arrowLeft)=\"collapseNode()\"\n        (keydown.arrowDown)=\"focusNextNode($event)\"\n        (keydown.arrowUp)=\"focusPreviousNode($event)\"\n    >\n        @if (hasChildren || treeNodeItem().leaf === true) {\n            <div\n                class=\"arrow\"\n                (click)=\"toggleExpanded(treeNodeItem())\"\n            >\n                @if (!treeNodeItem().isExpanded) {\n                    <i [class]=\"treeNodeItem().collapsedIcon || 'fas fa-chevron-right'\"></i>\n                }\n                @if (treeNodeItem().isExpanded) {\n                    <i [class]=\"treeNodeItem().expandedIcon || 'fas fa-chevron-down'\"></i>\n                }\n            </div>\n        }\n\n        <div\n            class=\"tree-node-item-text\"\n            (click)=\"handleTreeNodeItemClick($event)\"\n        >\n            @if (treeNodeItem().icon || treeNodeItem().isEditing) {\n                <span class=\"tree-node-item-text-icon\">\n                    @if (treeNodeItem().icon && !treeNodeItem().isEditing) {\n                        <i [class]=\"treeNodeItem().icon\"></i>\n                    }\n                    @if (treeNodeItem().isEditing) {\n                        <i\n                            class=\"fas fa-edit edit\"\n                            (click)=\"saveEdit($event)\"\n                        ></i>\n                    }\n                </span>\n            }\n\n            @if (showCheckbox() && !treeNodeItem().isEditing) {\n                <span class=\"tree-node-item-text-checkbox\">\n                    <input\n                        type=\"checkbox\"\n                        [checked]=\"treeNodeItem().checked === true\"\n                        [indeterminate]=\"treeNodeItem().checked === null\"\n                        [attr.aria-checked]=\"treeNodeItem().checked === null ? 'mixed' : treeNodeItem().checked\"\n                        [attr.aria-label]=\"ariaLabel\"\n                        role=\"checkbox\"\n                        tabindex=\"0\"\n                        (keydown.enter)=\"onCheckboxEnter(treeNodeItem())\"\n                    />\n                </span>\n            }\n\n            <span class=\"tree-node-item-text-label\">\n                @if (treeNodeItem().isEditing) {\n                    <input\n                        #input\n                        type=\"text\"\n                        sInputText\n                        class=\"tree-node-item-text-input\"\n                        [(ngModel)]=\"treeNodeItem().editNewValue\"\n                        (keydown.enter)=\"saveEdit($event)\"\n                        (keydown.escape)=\"cancelEdit($event)\"\n                        (click)=\"$event.stopPropagation()\"\n                        aria-label=\"Editar nome do item\"\n                        aria-live=\"polite\"\n                    />\n                } @else if (!treeNodeItem().isEditing) {\n                    {{ treeNodeItem().label }}\n                }\n            </span>\n\n            @if (editable) {\n                <span class=\"tree-node-item-text-editable\">\n                    <i\n                        class=\"fas fa-pencil-alt\"\n                        (click)=\"toggleEditing($event)\"\n                        aria-label=\"Editar item\"\n                        tabindex=\"0\"\n                    ></i>\n                </span>\n            }\n        </div>\n    </div>\n}\n\n@if (hasChildren && treeNodeItem().isExpanded) {\n    <div\n        @fadeExpand\n        class=\"child\"\n        role=\"group\"\n        @childrenAnimation\n    >\n        @for (child of treeNodeItem().children; track $index) {\n            <s-tree-node-item\n                [showCheckbox]=\"showCheckbox()\"\n                [treeNodeItem]=\"child\"\n                [ariaLevel]=\"ariaLevel() + 1\"\n                (treeNodeItemClicked)=\"handleTreeNodeItemClicked($event)\"\n                (treeNodeEdit)=\"treeNodeEditChildEvent($event)\"\n                (nodeExpanded)=\"nodeExpanded.emit($event)\"\n                (nodeCollapsed)=\"nodeCollapsed.emit($event)\"\n                class=\"child-item\"\n            />\n        }\n    </div>\n}\n\n", styles: [".tree-node-item{width:100%;display:flex;cursor:pointer}.tree-node-item:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item .arrow{padding:3px 9px;display:flex;align-items:center;justify-content:center}.tree-node-item-text{flex:1;display:flex;padding:3px 0;align-items:center}.tree-node-item-text:hover{background:#f1f7f8}.tree-node-item-text-icon{display:flex;align-items:center;justify-content:center;padding-right:9px}.tree-node-item-text-icon .edit{color:#428bca}.tree-node-item-text-label{color:#212533;font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;line-height:150%;display:flex;flex:1}.tree-node-item-text-checkbox{padding-right:9px;display:flex}.tree-node-item-text-checkbox input[type=checkbox]{accent-color:#428bca;width:14px;height:14px}.tree-node-item-text-checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item-text-editable{display:flex;align-items:center;justify-content:flex-end}.tree-node-item-text-editable i{padding:9px;border-radius:50%}.tree-node-item-text-editable i:focus-visible{outline:2px solid var(--s-focus-ring-color);outline-offset:3px}.tree-node-item-text-input{flex:1}.tree-node-item.selectable .tree-node-item-text-label{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:700}.tree-node-item.selectable *{cursor:pointer}.tree-node-item-selected .tree-node-item-text{background:#d5e8ec}.child{overflow:hidden;padding-left:2.2em;padding-right:5px;display:flex;flex-direction:column;gap:5px}.child-item:first-child{padding-top:5px}.child-item:last-child{padding-bottom:5px}\n"] }]
+        }] });
 
 /**
  * @description Componente de árvore hierárquica com suporte a seleção única ou múltipla,
@@ -189,41 +179,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class TreeComponent {
     /** @description Lista de nós raíz da árvore. @default [] */
-    treeData = [];
-    _selected = [];
+    treeData = input([]);
     /** @description Nó(s) selecionado(s). Suporta array ou item único dependendo de `selectionMode`. @default [] */
-    get selected() {
-        return this._selected;
-    }
-    set selected(value) {
-        if (!value) {
-            value = [];
-        }
-        if (!Array.isArray(value)) {
-            value = [value];
-        }
-        this._selected = value;
-    }
+    selected = input([], {
+        transform: (value) => {
+            if (!value) {
+                return [];
+            }
+            return Array.isArray(value) ? value : [value];
+        },
+    });
+    /** Seleção corrente, mantida internamente (volta ao input `selected` sempre que ele muda). */
+    _selected = linkedState(this.selected);
     /** @description Exibe indicador de carregamento nos nós. @default false */
-    loading = false;
+    loading = input(false);
     /** @description Modo de seleção: `'single'` ou `'multiple'`. @default 'single' */
-    selectionMode = 'single';
+    selectionMode = input('single');
     /** @description Exibe checkboxes nos nós para seleção visual. @default false */
-    showCheckbox = false;
-    /** @description Expão todos os nós inicialmente. @default false */
-    allExpanded = false;
+    showCheckbox = input(false);
+    /**
+     * @description Expande (`true`) ou colapsa (`false`) todos os nós. Quando não informado, mantém o
+     * `isExpanded` de cada nó. @default undefined
+     */
+    allExpanded = input(undefined);
+    /** Inputs da última reação (`undefined` antes da primeira). */
+    _appliedInputs;
     /** @description Emitido quando a seleção muda, com o(s) nó(s) selecionado(s). */
-    selectedChange = new EventEmitter();
+    selectedChange = output();
     /** @description Emitido quando o usuário clica em um nó da árvore. */
-    treeNodeItemClicked = new EventEmitter();
+    treeNodeItemClicked = output();
     /** @description Emitido após uma edição inline de rótulo de nó. */
-    treeNodeEdit = new EventEmitter();
+    treeNodeEdit = output();
     /** @description Emitido quando um nó é expandido pelo usuário. */
-    nodeExpanded = new EventEmitter();
+    nodeExpanded = output();
     /** @description Emitido quando um nó é colapsado pelo usuário. */
-    nodeCollapsed = new EventEmitter();
-    ngOnChanges(changes) {
-        this.onChanges(changes);
+    nodeCollapsed = output();
+    /**
+     * Roda no mesmo ciclo em que os inputs mudam, sem agendar nada: um `effect` que lê inputs ligados a uma nova
+     * referência a cada ciclo (ex.: `[treeData]="getTree()"`) se reagendaria para sempre. Os valores iniciais
+     * são aplicados no `ngOnInit`.
+     */
+    ngDoCheck() {
+        const previous = this._appliedInputs;
+        if (!previous) {
+            return;
+        }
+        const treeData = this.treeData();
+        const selected = this.selected();
+        const allExpanded = this.allExpanded();
+        if (Object.is(previous.treeData, treeData) &&
+            Object.is(previous.selected, selected) &&
+            Object.is(previous.allExpanded, allExpanded)) {
+            return;
+        }
+        this.onInputsChange(treeData, selected, allExpanded);
+    }
+    ngOnInit() {
+        this.onInputsChange(this.treeData(), this.selected(), this.allExpanded());
     }
     onTreeNodeItemClicked({ item }) {
         this.treeNodeItemClicked.emit(parseInternalTreeNodeItem(item));
@@ -247,8 +259,8 @@ class TreeComponent {
     toggleChecked(treeNodeItem) {
         const elementCheckState = !treeNodeItem.checked;
         if (!this.multiple) {
-            flattenTree(this.treeData).forEach((x) => (x.checked = false));
-            this.selected = [treeNodeItem];
+            flattenTree(this.treeData()).forEach((x) => (x.checked = false));
+            this._selected.set([treeNodeItem]);
         }
         treeNodeItem.checked = elementCheckState;
         if (this.multiple) {
@@ -287,33 +299,30 @@ class TreeComponent {
                 node.checked = false;
             }
         };
-        this.treeData.forEach(updateCheckedStateRecursively);
+        this.treeData().forEach(updateCheckedStateRecursively);
     }
     setSelected() {
         const selected = this.selectedElements;
-        this.selected = [...selected];
+        this._selected.set([...selected]);
         this.selectedChange.emit(selected);
     }
-    onChanges(changes) {
-        const allExpandedChanges = changes['allExpanded'];
-        const _checkIsFirstChangeWithValue = (value) => {
-            if (!changes[value]) {
-                return;
-            }
-            return ((!changes[value].previousValue || changes[value].previousValue.length === 0) &&
-                changes[value].currentValue?.length > 0);
-        };
-        if (_checkIsFirstChangeWithValue('selected')) {
+    onInputsChange(treeData, selected, allExpanded) {
+        const previous = this._appliedInputs;
+        this._appliedInputs = { treeData, selected, allExpanded };
+        // "Primeira vez com valor": a lista anterior não existia ou estava vazia e a atual tem itens.
+        const _isFirstChangeWithValue = (previousValue, currentValue) => (!previousValue || previousValue.length === 0) && currentValue?.length > 0;
+        if (previous?.selected !== selected && _isFirstChangeWithValue(previous?.selected, selected)) {
             this.syncSelectedChanges();
         }
-        if (_checkIsFirstChangeWithValue('treeData')) {
-            const isAllExpanded = this.allExpanded;
-            if (isAllExpanded) {
+        if (previous?.treeData !== treeData && _isFirstChangeWithValue(previous?.treeData, treeData)) {
+            if (allExpanded) {
                 this.expandAll();
             }
         }
-        if (allExpandedChanges) {
-            if (this.allExpanded) {
+        // Sem binding, `allExpanded` fica `undefined` e não mexe nos nós; com binding, qualquer mudança vale.
+        const allExpandedChanged = previous ? previous.allExpanded !== allExpanded : allExpanded !== undefined;
+        if (allExpandedChanged) {
+            if (allExpanded) {
                 this.expandAll();
             }
             else {
@@ -322,8 +331,9 @@ class TreeComponent {
         }
     }
     syncSelectedChanges() {
-        const treeFlatten = flattenTree(this.treeData);
-        this.selected.forEach((selectedItem) => {
+        const treeFlatten = flattenTree(this.treeData());
+        const _selected = this._selected();
+        _selected.forEach((selectedItem) => {
             const item = treeFlatten.find((item) => item.id === selectedItem.id);
             if (item) {
                 item.checked = true;
@@ -331,69 +341,47 @@ class TreeComponent {
             if (item && item.children && this.multiple) {
                 item.children.forEach((child) => {
                     child.checked = true;
-                    const existChildInSelectedList = this.selected.some((item) => item.id === child.id);
+                    const existChildInSelectedList = _selected.some((item) => item.id === child.id);
                     if (!existChildInSelectedList) {
-                        this.selected.push(child);
+                        _selected.push(child);
                     }
                 });
             }
         });
         const selectedElements = this.selectedElements;
-        const selectedElementsNotInSelectedList = selectedElements.filter((x) => !this.selected.some((y) => y.id === x.id));
+        const selectedElementsNotInSelectedList = selectedElements.filter((x) => !_selected.some((y) => y.id === x.id));
         selectedElementsNotInSelectedList.forEach((item) => {
             this.checkTreeDataChildren(item);
         });
         this.setSelected();
     }
     collapseAll() {
-        const flatten = flattenTree(this.treeData);
+        const flatten = flattenTree(this.treeData());
         flatten.forEach((item) => {
             item.isExpanded = false;
         });
     }
     expandAll() {
-        const flatten = flattenTree(this.treeData);
+        const flatten = flattenTree(this.treeData());
         flatten.forEach((item) => {
             item.isExpanded = true;
         });
     }
     get selectedElements() {
-        return flattenTree(this.treeData)
+        return flattenTree(this.treeData())
             .filter((x) => x.checked)
             .filter((x) => x.leaf !== true && !x.children?.length);
     }
     get multiple() {
-        return this.selectionMode === 'multiple';
+        return this.selectionMode() === 'multiple';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeComponent, isStandalone: true, selector: "s-tree", inputs: { treeData: "treeData", selected: "selected", loading: "loading", selectionMode: "selectionMode", showCheckbox: "showCheckbox", allExpanded: "allExpanded" }, outputs: { selectedChange: "selectedChange", treeNodeItemClicked: "treeNodeItemClicked", treeNodeEdit: "treeNodeEdit", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tree\" *sLoadingState=\"loading\">\n    @for(item of treeData; track $index) {\n        <s-tree-node-item\n            [showCheckbox]=\"showCheckbox\"\n            [treeNodeItem]=\"item\"\n            (nodeExpanded)=\"onNodeExpanded($event)\"\n            (nodeCollapsed)=\"onNodeCollapsed($event)\"\n            (treeNodeEdit)=\"onTreeNodeEdit($event)\"\n            (treeNodeItemClicked)=\"onTreeNodeItemClicked($event)\">\n        </s-tree-node-item>\n\n    }\n</div>\n", styles: [".tree{display:flex;flex-direction:column;gap:5px;border:1px solid #dddddd;border-radius:4px;padding:15px;margin:15px}\n"], dependencies: [{ kind: "directive", type: LoadingStateDirective, selector: "[sLoadingState]", inputs: ["sLoadingState"] }, { kind: "component", type: TreeNodeItemComponent, selector: "s-tree-node-item", inputs: ["ariaLevel", "showCheckbox", "treeNodeItem"], outputs: ["treeNodeItemClicked", "treeNodeEdit", "nodeExpanded", "nodeCollapsed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeComponent, isStandalone: true, selector: "s-tree", inputs: { treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, allExpanded: { classPropertyName: "allExpanded", publicName: "allExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", treeNodeItemClicked: "treeNodeItemClicked", treeNodeEdit: "treeNodeEdit", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed" }, ngImport: i0, template: "<div class=\"tree\" *sLoadingState=\"loading()\">\n    @for(item of treeData(); track $index) {\n        <s-tree-node-item [showCheckbox]=\"showCheckbox()\"\n            [treeNodeItem]=\"item\"\n            (nodeExpanded)=\"onNodeExpanded($event)\"\n            (nodeCollapsed)=\"onNodeCollapsed($event)\"\n            (treeNodeEdit)=\"onTreeNodeEdit($event)\"\n            (treeNodeItemClicked)=\"onTreeNodeItemClicked($event)\" />\n\n    }\n</div>\n", styles: [".tree{display:flex;flex-direction:column;gap:5px;border:1px solid #dddddd;border-radius:4px;padding:15px;margin:15px}\n"], dependencies: [{ kind: "directive", type: LoadingStateDirective, selector: "[sLoadingState]", inputs: ["sLoadingState"] }, { kind: "component", type: TreeNodeItemComponent, selector: "s-tree-node-item", inputs: ["ariaLevel", "showCheckbox", "treeNodeItem"], outputs: ["treeNodeItemClicked", "treeNodeEdit", "nodeExpanded", "nodeCollapsed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tree', standalone: true, imports: [LoadingStateDirective, TreeNodeItemComponent], template: "<div class=\"tree\" *sLoadingState=\"loading\">\n    @for(item of treeData; track $index) {\n        <s-tree-node-item\n            [showCheckbox]=\"showCheckbox\"\n            [treeNodeItem]=\"item\"\n            (nodeExpanded)=\"onNodeExpanded($event)\"\n            (nodeCollapsed)=\"onNodeCollapsed($event)\"\n            (treeNodeEdit)=\"onTreeNodeEdit($event)\"\n            (treeNodeItemClicked)=\"onTreeNodeItemClicked($event)\">\n        </s-tree-node-item>\n\n    }\n</div>\n", styles: [".tree{display:flex;flex-direction:column;gap:5px;border:1px solid #dddddd;border-radius:4px;padding:15px;margin:15px}\n"] }]
-        }], propDecorators: { treeData: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], selectionMode: [{
-                type: Input
-            }], showCheckbox: [{
-                type: Input
-            }], allExpanded: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], treeNodeItemClicked: [{
-                type: Output
-            }], treeNodeEdit: [{
-                type: Output
-            }], nodeExpanded: [{
-                type: Output
-            }], nodeCollapsed: [{
-                type: Output
-            }] } });
+            args: [{ selector: 's-tree', standalone: true, imports: [LoadingStateDirective, TreeNodeItemComponent], template: "<div class=\"tree\" *sLoadingState=\"loading()\">\n    @for(item of treeData(); track $index) {\n        <s-tree-node-item [showCheckbox]=\"showCheckbox()\"\n            [treeNodeItem]=\"item\"\n            (nodeExpanded)=\"onNodeExpanded($event)\"\n            (nodeCollapsed)=\"onNodeCollapsed($event)\"\n            (treeNodeEdit)=\"onTreeNodeEdit($event)\"\n            (treeNodeItemClicked)=\"onTreeNodeItemClicked($event)\" />\n\n    }\n</div>\n", styles: [".tree{display:flex;flex-direction:column;gap:5px;border:1px solid #dddddd;border-radius:4px;padding:15px;margin:15px}\n"] }]
+        }] });
 const flattenTree = (tree) => {
     const result = [];
     function traverse(nodes) {
@@ -432,29 +420,9 @@ const parseInternalTreeNodeItem = (internalTreeNodeItem) => {
     return object;
 };
 
-/**
- * @deprecated Será removido na v20. Importe diretamente o standalone `TreeComponent` (de
- * `@seniorsistemas/angular-components/tree`) no lugar deste módulo.
- *
- * Migração automática (também executada pelo `ng update` na v20):
- * `ng generate @seniorsistemas/angular-components:migrate-modules-to-standalone`
- */
-class TreeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TreeModule, imports: [TreeComponent], exports: [TreeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeModule, imports: [TreeComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [TreeComponent],
-                    exports: [TreeComponent],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TreeComponent, TreeModule };
+export { TreeComponent };
 //# sourceMappingURL=seniorsistemas-angular-components-tree.mjs.map