ui-core-abv 0.5.26 → 0.5.35

package/fesm2022/ui-core-abv.mjs

@@ -5171,6 +5171,281 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+class UicTreeAdminComponent {
+    loading = false;
+    emptyMessage = 'Sin subcategorias';
+    createSubcategoryFn;
+    edit = new EventEmitter();
+    remove = new EventEmitter();
+    deactivate = new EventEmitter();
+    nameChange = new EventEmitter();
+    tree = [
+        {
+            id: 0,
+            name: 'Sin hijos',
+            enabled: true
+        },
+        {
+            id: 1,
+            name: 'Equipo A',
+            enabled: true,
+            children: [
+                {
+                    id: 10,
+                    enabled: true,
+                    name: 'Miembro 1'
+                },
+                {
+                    id: 11,
+                    enabled: true,
+                    name: 'Miembro 3'
+                },
+                {
+                    id: 12,
+                    enabled: true,
+                    name: 'Miembro 5'
+                },
+                {
+                    id: 13,
+                    enabled: true,
+                    name: 'Miembro 10'
+                },
+                {
+                    id: 14,
+                    enabled: true,
+                    name: 'Miembro 9'
+                }
+            ]
+        },
+        {
+            id: 2,
+            name: 'Team B',
+            enabled: true,
+            children: [
+                {
+                    id: 20,
+                    enabled: true,
+                    name: 'Person 1'
+                },
+                {
+                    id: 21,
+                    enabled: true,
+                    name: 'Person 3'
+                }
+            ]
+        }
+    ];
+    childNameInputs;
+    parentNameInputs;
+    collapsedIds = new Set();
+    editingParentId = null;
+    editingChildId = null;
+    pendingFocusParentId = null;
+    pendingFocusChildId = null;
+    creatingChildIds = new Set();
+    originalNames = new Map();
+    tempId = 0;
+    ngAfterViewChecked() {
+        if (this.pendingFocusParentId !== null) {
+            const targetId = String(this.pendingFocusParentId);
+            const target = this.parentNameInputs?.find((input) => input.nativeElement.dataset['id'] === targetId);
+            if (target) {
+                target.nativeElement.focus();
+                target.nativeElement.select();
+                this.pendingFocusParentId = null;
+            }
+        }
+        if (this.pendingFocusChildId !== null) {
+            const targetId = String(this.pendingFocusChildId);
+            const target = this.childNameInputs?.find((input) => input.nativeElement.dataset['id'] === targetId);
+            if (target) {
+                target.nativeElement.focus();
+                target.nativeElement.select();
+                this.pendingFocusChildId = null;
+            }
+        }
+    }
+    isExpanded(item) {
+        return !this.collapsedIds.has(item.id);
+    }
+    toggleItem(item) {
+        if (this.collapsedIds.has(item.id)) {
+            this.collapsedIds.delete(item.id);
+        }
+        else {
+            this.collapsedIds.add(item.id);
+        }
+    }
+    startEditParent(item, event) {
+        event?.stopPropagation();
+        this.editingParentId = item.id;
+        this.pendingFocusParentId = item.id;
+        if (!this.originalNames.has(item.id)) {
+            this.originalNames.set(item.id, item.name);
+        }
+    }
+    stopEditParent() {
+        this.editingParentId = null;
+    }
+    isEditingParent(item) {
+        return this.editingParentId === item.id;
+    }
+    startEditChild(subitem, event) {
+        event?.stopPropagation();
+        this.editingChildId = subitem.id;
+        this.pendingFocusChildId = subitem.id;
+        if (!this.originalNames.has(subitem.id)) {
+            this.originalNames.set(subitem.id, subitem.name);
+        }
+    }
+    stopEditChild() {
+        this.editingChildId = null;
+    }
+    isEditingChild(subitem) {
+        return this.editingChildId === subitem.id;
+    }
+    updateParentName(item, event) {
+        item.name = event.target.value;
+    }
+    updateChildName(parent, subitem, event) {
+        subitem.name = event.target.value;
+    }
+    finalizeParentEdit(item) {
+        this.nameChange.emit({ kind: 'parent', id: item.id, name: item.name });
+        this.originalNames.delete(item.id);
+        this.stopEditParent();
+    }
+    async finalizeChildEdit(parent, subitem) {
+        const trimmed = subitem.name.trim();
+        if (!trimmed) {
+            this.removeChild(parent, subitem);
+            this.originalNames.delete(subitem.id);
+            return;
+        }
+        subitem.name = trimmed;
+        this.nameChange.emit({ kind: 'child', parentId: parent.id, id: subitem.id, name: subitem.name });
+        this.originalNames.delete(subitem.id);
+        if (this.isTempId(subitem.id) && this.createSubcategoryFn) {
+            const tempId = subitem.id;
+            this.creatingChildIds.add(tempId);
+            try {
+                const result = await Promise.resolve(this.createSubcategoryFn({ parentId: Number(parent.id), name: trimmed }));
+                if (result?.id !== undefined) {
+                    subitem.id = result.id;
+                }
+            }
+            finally {
+                this.creatingChildIds.delete(tempId);
+            }
+        }
+        this.stopEditChild();
+    }
+    cancelParentEdit(item) {
+        const original = this.originalNames.get(item.id);
+        if (original !== undefined) {
+            item.name = original;
+        }
+        this.originalNames.delete(item.id);
+        this.stopEditParent();
+    }
+    cancelChildEdit(parent, subitem) {
+        const original = this.originalNames.get(subitem.id);
+        if (original !== undefined) {
+            subitem.name = original;
+        }
+        this.originalNames.delete(subitem.id);
+        if (this.isTempId(subitem.id) && !subitem.name.trim()) {
+            this.removeChild(parent, subitem);
+            return;
+        }
+        this.stopEditChild();
+    }
+    addSubItem(item, event) {
+        event?.stopPropagation();
+        if (!item.children) {
+            item.children = [];
+        }
+        const newId = `new-${Date.now()}-${this.tempId++}`;
+        const newChild = { id: newId, name: '', enabled: true };
+        item.children.unshift(newChild);
+        this.collapsedIds.delete(item.id);
+        this.editingChildId = newChild.id;
+        this.pendingFocusChildId = newChild.id;
+    }
+    emitEditParent(item, event) {
+        event?.stopPropagation();
+        this.edit.emit({ kind: 'parent', id: item.id });
+        this.startEditParent(item);
+    }
+    emitEditChild(parent, subitem, event) {
+        event?.stopPropagation();
+        this.edit.emit({ kind: 'child', parentId: parent.id, id: subitem.id });
+        this.startEditChild(subitem);
+    }
+    emitDeleteParent(item, event) {
+        event?.stopPropagation();
+        this.remove.emit({ kind: 'parent', id: item.id });
+    }
+    emitDeleteChild(parent, subitem, event) {
+        event?.stopPropagation();
+        this.remove.emit({ kind: 'child', parentId: parent.id, id: subitem.id });
+    }
+    emitDeactivateParent(item, checked) {
+        this.deactivate.emit({ kind: 'parent', id: item.id, checked });
+    }
+    emitDeactivateChild(parent, subitem, checked) {
+        subitem.enabled = checked;
+        this.deactivate.emit({ kind: 'child', parentId: parent.id, id: subitem.id, checked });
+    }
+    isCreatingChild(subitem) {
+        return this.creatingChildIds.has(subitem.id);
+    }
+    removeChild(parent, subitem) {
+        if (!parent.children) {
+            return;
+        }
+        parent.children = parent.children.filter((child) => child.id !== subitem.id);
+        if (this.editingChildId === subitem.id) {
+            this.editingChildId = null;
+        }
+    }
+    isTempId(id) {
+        return typeof id === 'string' && id.startsWith('new-');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { loading: "loading", emptyMessage: "emptyMessage", createSubcategoryFn: "createSubcategoryFn", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange" }, viewQueries: [{ propertyName: "childNameInputs", predicate: ["childNameInput"], descendants: true }, { propertyName: "parentNameInputs", predicate: ["parentNameInput"], descendants: true }], ngImport: i0, template: "@if (loading) {\n    <div class=\"tree-skeleton\">\n        <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\n    </div>\n} @else {\n    @for (item of tree; track item.id) {\n        <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\n            <div class=\"tree-header\" (click)=\"toggleItem(item)\">\n                <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\n                <div class=\"tree-header-name\">\n                    @if (isEditingParent(item)) {\n                        <input\n                            #parentNameInput\n                            class=\"tree-name-input\"\n                        [attr.data-id]=\"item.id\"\n                        [value]=\"item.name\"\n                        (input)=\"updateParentName(item, $event)\"\n                        (blur)=\"finalizeParentEdit(item)\"\n                        (keydown.enter)=\"finalizeParentEdit(item)\"\n                        (keydown.escape)=\"cancelParentEdit(item)\"\n                        (click)=\"$event.stopPropagation()\"\n                    />\n                    } @else {\n                        <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\n                            {{item.name}}\n                        </div>\n                    }\n                    <span>{{item.children?.length || 0}}</span>\n                </div>\n                <div>\n                    <ui-switch\n                        [checked]=\"item.enabled\"\n                        (click)=\"$event.stopPropagation()\"\n                        (checkedChange)=\"emitDeactivateParent(item, $event)\"\n                    ></ui-switch>\n                </div>\n                <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                @if (!item.children?.length) {\n                    <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                }\n            </div>\n            <div class=\"tree-body\">\n                @if (item.children?.length) {\n                    @for (subitem of item.children; track subitem.id) {\n                        <div\n                            class=\"tree-subitem\"\n                            [class.is-loading]=\"isCreatingChild(subitem)\"\n                            [class.is-disabled]=\"!subitem.enabled\"\n                        >\n                            <div class=\"tree-subitem-name\">\n                                <i\n                                    class=\"ri-circle-fill tree-subitem-status\"\n                                    [class.is-enabled]=\"subitem.enabled\"\n                                    [class.is-disabled]=\"!subitem.enabled\"\n                                ></i>\n                                @if (isEditingChild(subitem)) {\n                                    <input\n                                        #childNameInput\n                                        class=\"tree-name-input tree-name-input--sub\"\n                                        [attr.data-id]=\"subitem.id\"\n                                        [value]=\"subitem.name\"\n                                        (input)=\"updateChildName(item, subitem, $event)\"\n                                        (blur)=\"finalizeChildEdit(item, subitem)\"\n                                        (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\n                                        (keydown.escape)=\"cancelChildEdit(item, subitem)\"\n                                        (click)=\"$event.stopPropagation()\"\n                                    />\n                                } @else {\n                                    <span class=\"tree-name-text\" (click)=\"startEditChild(subitem, $event)\">{{subitem.name}}</span>\n                                }\n                            </div>\n                            <div class=\"tree-subitem-actions\">\n                                @if (isCreatingChild(subitem)) {\n                                    <div class=\"tree-subitem-loader\"></div>\n                                } @else {\n                                    <ui-switch\n                                        [checked]=\"subitem.enabled\"\n                                        (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n                                    ></ui-switch>\n                                    <ui-button (click)=\"emitEditChild(item, subitem, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                                    <ui-button (click)=\"emitDeleteChild(item, subitem, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                                }\n                            </div>\n                        </div>\n                    }\n                } @else {\n                    <div class=\"tree-empty\">\n                        {{emptyMessage}}\n                    </div>\n                }\n            </div>\n        </div>\n    }\n}\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--green-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem-loader{width:46px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 40%,var(--grey-200) 80%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-loading{opacity:.8}.tree-subitem.is-loading .tree-subitem-actions{opacity:1;pointer-events:none;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input{color:var(--grey-500)}.tree-name-text{color:var(--grey-900);cursor:text}.tree-name-input{flex:1 1;min-width:0;width:300px;border:solid 1px var(--grey-300);border-radius:6px;padding:2px 6px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:1px 6px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}@keyframes shimmer{0%{background-position:0% 0%}to{background-position:200% 0%}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tree-admin', imports: [
+                        UicButtonComponent,
+                        UicSkeletonLoaderComponent,
+                        UicSwichComponent
+                    ], template: "@if (loading) {\n    <div class=\"tree-skeleton\">\n        <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\n    </div>\n} @else {\n    @for (item of tree; track item.id) {\n        <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\n            <div class=\"tree-header\" (click)=\"toggleItem(item)\">\n                <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\n                <div class=\"tree-header-name\">\n                    @if (isEditingParent(item)) {\n                        <input\n                            #parentNameInput\n                            class=\"tree-name-input\"\n                        [attr.data-id]=\"item.id\"\n                        [value]=\"item.name\"\n                        (input)=\"updateParentName(item, $event)\"\n                        (blur)=\"finalizeParentEdit(item)\"\n                        (keydown.enter)=\"finalizeParentEdit(item)\"\n                        (keydown.escape)=\"cancelParentEdit(item)\"\n                        (click)=\"$event.stopPropagation()\"\n                    />\n                    } @else {\n                        <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\n                            {{item.name}}\n                        </div>\n                    }\n                    <span>{{item.children?.length || 0}}</span>\n                </div>\n                <div>\n                    <ui-switch\n                        [checked]=\"item.enabled\"\n                        (click)=\"$event.stopPropagation()\"\n                        (checkedChange)=\"emitDeactivateParent(item, $event)\"\n                    ></ui-switch>\n                </div>\n                <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                @if (!item.children?.length) {\n                    <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                }\n            </div>\n            <div class=\"tree-body\">\n                @if (item.children?.length) {\n                    @for (subitem of item.children; track subitem.id) {\n                        <div\n                            class=\"tree-subitem\"\n                            [class.is-loading]=\"isCreatingChild(subitem)\"\n                            [class.is-disabled]=\"!subitem.enabled\"\n                        >\n                            <div class=\"tree-subitem-name\">\n                                <i\n                                    class=\"ri-circle-fill tree-subitem-status\"\n                                    [class.is-enabled]=\"subitem.enabled\"\n                                    [class.is-disabled]=\"!subitem.enabled\"\n                                ></i>\n                                @if (isEditingChild(subitem)) {\n                                    <input\n                                        #childNameInput\n                                        class=\"tree-name-input tree-name-input--sub\"\n                                        [attr.data-id]=\"subitem.id\"\n                                        [value]=\"subitem.name\"\n                                        (input)=\"updateChildName(item, subitem, $event)\"\n                                        (blur)=\"finalizeChildEdit(item, subitem)\"\n                                        (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\n                                        (keydown.escape)=\"cancelChildEdit(item, subitem)\"\n                                        (click)=\"$event.stopPropagation()\"\n                                    />\n                                } @else {\n                                    <span class=\"tree-name-text\" (click)=\"startEditChild(subitem, $event)\">{{subitem.name}}</span>\n                                }\n                            </div>\n                            <div class=\"tree-subitem-actions\">\n                                @if (isCreatingChild(subitem)) {\n                                    <div class=\"tree-subitem-loader\"></div>\n                                } @else {\n                                    <ui-switch\n                                        [checked]=\"subitem.enabled\"\n                                        (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n                                    ></ui-switch>\n                                    <ui-button (click)=\"emitEditChild(item, subitem, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                                    <ui-button (click)=\"emitDeleteChild(item, subitem, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                                }\n                            </div>\n                        </div>\n                    }\n                } @else {\n                    <div class=\"tree-empty\">\n                        {{emptyMessage}}\n                    </div>\n                }\n            </div>\n        </div>\n    }\n}\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--green-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem-loader{width:46px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 40%,var(--grey-200) 80%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-loading{opacity:.8}.tree-subitem.is-loading .tree-subitem-actions{opacity:1;pointer-events:none;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input{color:var(--grey-500)}.tree-name-text{color:var(--grey-900);cursor:text}.tree-name-input{flex:1 1;min-width:0;width:300px;border:solid 1px var(--grey-300);border-radius:6px;padding:2px 6px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:1px 6px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}@keyframes shimmer{0%{background-position:0% 0%}to{background-position:200% 0%}}\n"] }]
+        }], propDecorators: { loading: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], createSubcategoryFn: [{
+                type: Input
+            }], edit: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], deactivate: [{
+                type: Output
+            }], nameChange: [{
+                type: Output
+            }], tree: [{
+                type: Input
+            }], childNameInputs: [{
+                type: ViewChildren,
+                args: ['childNameInput']
+            }], parentNameInputs: [{
+                type: ViewChildren,
+                args: ['parentNameInput']
+            }] } });
+
 const base = createValueAccessor();
 class UicTagSelectorComponent extends base {
     icon = ''; // Icono externo
@@ -5317,5 +5592,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
+export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicTreeAdminComponent, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map