ui-core-abv 0.5.71 → 0.5.80

package/fesm2022/ui-core-abv.mjs

@@ -3574,7 +3574,7 @@ class UicDropdownContainerComponent {
                 provide: DROPDOWN_OVERLAY_CONTROLS,
                 useExisting: forwardRef(() => UicDropdownContainerComponent),
             },
-        ], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n  <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n  <div  class=\"ui-dropdown-panel\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+        ], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n  <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n  <div  class=\"ui-dropdown-panel\">\r\n    <ng-content select=\"[content]\"></ng-content>\r\n  </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
             type: Component,
@@ -3583,7 +3583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: DROPDOWN_OVERLAY_CONTROLS,
                             useExisting: forwardRef(() => UicDropdownContainerComponent),
                         },
-                    ], template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n  <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n  <div  class=\"ui-dropdown-panel\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
+                    ], template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n  <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n  <div  class=\"ui-dropdown-panel\">\r\n    <ng-content select=\"[content]\"></ng-content>\r\n  </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
         }], propDecorators: { buttonLabel: [{
                 type: Input
             }], disabled: [{
@@ -4165,11 +4165,11 @@ class UicModalComponent {
         this.modalRef.closeFloating(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \n    <div @pushTop class=\"uic_modal\" \n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n        (click)=\"$event.stopPropagation()\">\n        \n        @if ( myConfig.title) {\n            <div class=\"uic_modal-header\">\n                {{myConfig.title}}\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n            </div>\n        }\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n    </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"uic_modal\" \r\n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"uic_modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \n    <div @pushTop class=\"uic_modal\" \n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n        (click)=\"$event.stopPropagation()\">\n        \n        @if ( myConfig.title) {\n            <div class=\"uic_modal-header\">\n                {{myConfig.title}}\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n            </div>\n        }\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n    </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
+            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"uic_modal\" \r\n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"uic_modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -5087,7 +5087,7 @@ class UicSignaturePadComponent extends base$1 {
                 useExisting: forwardRef(() => UicSignaturePadComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\n  <canvas\n    #canvas\n    class=\"signature-canvas\"\n    [attr.width]=\"width\"\n    [attr.height]=\"height\"\n    (pointerdown)=\"startDraw($event)\"\n    (pointermove)=\"draw($event)\"\n    (pointerup)=\"endDraw($event)\"\n    (pointerleave)=\"endDraw($event)\"\n  ></canvas>\n  <div class=\"signature-actions\">\n    <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\n  </div>\n</div>\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--primary-500, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+        ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\r\n  <canvas\r\n    #canvas\r\n    class=\"signature-canvas\"\r\n    [attr.width]=\"width\"\r\n    [attr.height]=\"height\"\r\n    (pointerdown)=\"startDraw($event)\"\r\n    (pointermove)=\"draw($event)\"\r\n    (pointerup)=\"endDraw($event)\"\r\n    (pointerleave)=\"endDraw($event)\"\r\n  ></canvas>\r\n  <div class=\"signature-actions\">\r\n    <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\r\n  </div>\r\n</div>\r\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--primary-500, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSignaturePadComponent, decorators: [{
             type: Component,
@@ -5097,7 +5097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicSignaturePadComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\n  <canvas\n    #canvas\n    class=\"signature-canvas\"\n    [attr.width]=\"width\"\n    [attr.height]=\"height\"\n    (pointerdown)=\"startDraw($event)\"\n    (pointermove)=\"draw($event)\"\n    (pointerup)=\"endDraw($event)\"\n    (pointerleave)=\"endDraw($event)\"\n  ></canvas>\n  <div class=\"signature-actions\">\n    <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\n  </div>\n</div>\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--primary-500, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"] }]
+                    ], template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\r\n  <canvas\r\n    #canvas\r\n    class=\"signature-canvas\"\r\n    [attr.width]=\"width\"\r\n    [attr.height]=\"height\"\r\n    (pointerdown)=\"startDraw($event)\"\r\n    (pointermove)=\"draw($event)\"\r\n    (pointerup)=\"endDraw($event)\"\r\n    (pointerleave)=\"endDraw($event)\"\r\n  ></canvas>\r\n  <div class=\"signature-actions\">\r\n    <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\r\n  </div>\r\n</div>\r\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--primary-500, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -5778,7 +5778,7 @@ class UicTreeAdminComponent {
         }
     }
     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: { searchEnabled: "searchEnabled", loading: "loading", emptyMessage: "emptyMessage", duplicateNameMessage: "duplicateNameMessage", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange", create: "create" }, 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    @if (searchEnabled) {\n        <div class=\"filter-bar\">\n            Buscar subcategor\u00EDas:\n            <ui-input>\n                <input #inp placeholder=\"Buscar...\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\n            </ui-input>\n            <ui-button\n                [iconOnly]=\"true\"\n                icon=\"ri-eraser-line\"\n                type=\"bordered\"\n                color=\"black\"\n                [disabled]=\"!filterTerm\"\n                (click)=\"clearFilter(); inp.focus()\"\n            ></ui-button>\n        </div>\n    }\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 (getFilteredChildren(item).length) {\n                    @for (subitem of getFilteredChildren(item); track subitem.id) {\n                        <div\n                            class=\"tree-subitem\"\n                            [class.is-disabled]=\"!subitem.enabled\"\n                            [class.is-pending]=\"isPendingCreate(subitem)\"\n                            [class.is-parent-disabled]=\"!item.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\n                                        class=\"tree-name-text\"\n                                        (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\n                                    >{{subitem.name}}</span>\n                                }\n                            </div>\n                            <div class=\"tree-subitem-actions\">\n                                <ui-switch\n                                    [checked]=\"subitem.enabled\"\n                                    [disabled]=\"isPendingCreate(subitem)\"\n                                    (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n                                ></ui-switch>\n                                <ui-button\n                                    (click)=\"emitEditChild(item, subitem, $event)\"\n                                    [disabled]=\"isPendingCreate(subitem)\"\n                                    icon=\"ri-edit-line\"\n                                    type=\"ghost\"\n                                    [iconOnly]=\"true\"\n                                    size=\"s\"\n                                ></ui-button>\n                                <ui-button \n                                    (click)=\"emitDeleteChild(item, subitem, $event)\" \n                                    icon=\"ri-delete-bin-line\" \n                                    [disabled]=\"isPendingCreate(subitem)\"\n                                    type=\"ghost\" \n                                    [iconOnly]=\"true\" size=\"s\"></ui-button>\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(--blue-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:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{width:50%;color:var(--grey-900);cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.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)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { searchEnabled: "searchEnabled", loading: "loading", emptyMessage: "emptyMessage", duplicateNameMessage: "duplicateNameMessage", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange", create: "create" }, viewQueries: [{ propertyName: "childNameInputs", predicate: ["childNameInput"], descendants: true }, { propertyName: "parentNameInputs", predicate: ["parentNameInput"], descendants: true }], ngImport: i0, template: "@if (loading) {\r\n    <div class=\"tree-skeleton\">\r\n        <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\r\n    </div>\r\n} @else {\r\n    @if (searchEnabled) {\r\n        <div class=\"filter-bar\">\r\n            Buscar subcategor\u00EDas:\r\n            <ui-input>\r\n                <input #inp placeholder=\"Buscar...\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\r\n            </ui-input>\r\n            <ui-button\r\n                [iconOnly]=\"true\"\r\n                icon=\"ri-eraser-line\"\r\n                type=\"bordered\"\r\n                color=\"black\"\r\n                [disabled]=\"!filterTerm\"\r\n                (click)=\"clearFilter(); inp.focus()\"\r\n            ></ui-button>\r\n        </div>\r\n    }\r\n    @for (item of tree; track item.id) {\r\n        <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\r\n            <div class=\"tree-header\" (click)=\"toggleItem(item)\">\r\n                <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\r\n                <div class=\"tree-header-name\">\r\n                    @if (isEditingParent(item)) {\r\n                        <input\r\n                            #parentNameInput\r\n                            class=\"tree-name-input\"\r\n                        [attr.data-id]=\"item.id\"\r\n                        [value]=\"item.name\"\r\n                        (input)=\"updateParentName(item, $event)\"\r\n                        (blur)=\"finalizeParentEdit(item)\"\r\n                        (keydown.enter)=\"finalizeParentEdit(item)\"\r\n                        (keydown.escape)=\"cancelParentEdit(item)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                    } @else {\r\n                        <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\r\n                            {{item.name}}\r\n                        </div>\r\n                    }\r\n                    <span>{{item.children?.length || 0}}</span>\r\n                </div>\r\n                <div>\r\n                    <ui-switch\r\n                        [checked]=\"item.enabled\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        (checkedChange)=\"emitDeactivateParent(item, $event)\"\r\n                    ></ui-switch>\r\n                </div>\r\n                <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                @if (!item.children?.length) {\r\n                    <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                }\r\n            </div>\r\n            <div class=\"tree-body\">\r\n                @if (getFilteredChildren(item).length) {\r\n                    @for (subitem of getFilteredChildren(item); track subitem.id) {\r\n                        <div\r\n                            class=\"tree-subitem\"\r\n                            [class.is-disabled]=\"!subitem.enabled\"\r\n                            [class.is-pending]=\"isPendingCreate(subitem)\"\r\n                            [class.is-parent-disabled]=\"!item.enabled\"\r\n                        >\r\n                            <div class=\"tree-subitem-name\">\r\n                                <i\r\n                                    class=\"ri-circle-fill tree-subitem-status\"\r\n                                    [class.is-enabled]=\"subitem.enabled\"\r\n                                    [class.is-disabled]=\"!subitem.enabled\"\r\n                                ></i>\r\n                                @if (isEditingChild(subitem)) {\r\n                                    <input\r\n                                        #childNameInput\r\n                                        class=\"tree-name-input tree-name-input--sub\"\r\n                                        [attr.data-id]=\"subitem.id\"\r\n                                        [value]=\"subitem.name\"\r\n                                        (input)=\"updateChildName(item, subitem, $event)\"\r\n                                        (blur)=\"finalizeChildEdit(item, subitem)\"\r\n                                        (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\r\n                                        (keydown.escape)=\"cancelChildEdit(item, subitem)\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                    />\r\n                                } @else {\r\n                                    <span\r\n                                        class=\"tree-name-text\"\r\n                                        (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\r\n                                    >{{subitem.name}}</span>\r\n                                }\r\n                            </div>\r\n                            <div class=\"tree-subitem-actions\">\r\n                                <ui-switch\r\n                                    [checked]=\"subitem.enabled\"\r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\r\n                                ></ui-switch>\r\n                                <ui-button\r\n                                    (click)=\"emitEditChild(item, subitem, $event)\"\r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    icon=\"ri-edit-line\"\r\n                                    type=\"ghost\"\r\n                                    [iconOnly]=\"true\"\r\n                                    size=\"s\"\r\n                                ></ui-button>\r\n                                <ui-button \r\n                                    (click)=\"emitDeleteChild(item, subitem, $event)\" \r\n                                    icon=\"ri-delete-bin-line\" \r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    type=\"ghost\" \r\n                                    [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                } @else {\r\n                    <div class=\"tree-empty\">\r\n                        {{emptyMessage}}\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n}\r\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(--blue-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:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{width:50%;color:var(--grey-900);cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.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)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { 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,
@@ -5787,7 +5787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         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    @if (searchEnabled) {\n        <div class=\"filter-bar\">\n            Buscar subcategor\u00EDas:\n            <ui-input>\n                <input #inp placeholder=\"Buscar...\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\n            </ui-input>\n            <ui-button\n                [iconOnly]=\"true\"\n                icon=\"ri-eraser-line\"\n                type=\"bordered\"\n                color=\"black\"\n                [disabled]=\"!filterTerm\"\n                (click)=\"clearFilter(); inp.focus()\"\n            ></ui-button>\n        </div>\n    }\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 (getFilteredChildren(item).length) {\n                    @for (subitem of getFilteredChildren(item); track subitem.id) {\n                        <div\n                            class=\"tree-subitem\"\n                            [class.is-disabled]=\"!subitem.enabled\"\n                            [class.is-pending]=\"isPendingCreate(subitem)\"\n                            [class.is-parent-disabled]=\"!item.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\n                                        class=\"tree-name-text\"\n                                        (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\n                                    >{{subitem.name}}</span>\n                                }\n                            </div>\n                            <div class=\"tree-subitem-actions\">\n                                <ui-switch\n                                    [checked]=\"subitem.enabled\"\n                                    [disabled]=\"isPendingCreate(subitem)\"\n                                    (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n                                ></ui-switch>\n                                <ui-button\n                                    (click)=\"emitEditChild(item, subitem, $event)\"\n                                    [disabled]=\"isPendingCreate(subitem)\"\n                                    icon=\"ri-edit-line\"\n                                    type=\"ghost\"\n                                    [iconOnly]=\"true\"\n                                    size=\"s\"\n                                ></ui-button>\n                                <ui-button \n                                    (click)=\"emitDeleteChild(item, subitem, $event)\" \n                                    icon=\"ri-delete-bin-line\" \n                                    [disabled]=\"isPendingCreate(subitem)\"\n                                    type=\"ghost\" \n                                    [iconOnly]=\"true\" size=\"s\"></ui-button>\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(--blue-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:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{width:50%;color:var(--grey-900);cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.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)}\n"] }]
+                    ], template: "@if (loading) {\r\n    <div class=\"tree-skeleton\">\r\n        <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\r\n    </div>\r\n} @else {\r\n    @if (searchEnabled) {\r\n        <div class=\"filter-bar\">\r\n            Buscar subcategor\u00EDas:\r\n            <ui-input>\r\n                <input #inp placeholder=\"Buscar...\" [value]=\"filterTerm\" (input)=\"updateFilter($event)\">\r\n            </ui-input>\r\n            <ui-button\r\n                [iconOnly]=\"true\"\r\n                icon=\"ri-eraser-line\"\r\n                type=\"bordered\"\r\n                color=\"black\"\r\n                [disabled]=\"!filterTerm\"\r\n                (click)=\"clearFilter(); inp.focus()\"\r\n            ></ui-button>\r\n        </div>\r\n    }\r\n    @for (item of tree; track item.id) {\r\n        <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\r\n            <div class=\"tree-header\" (click)=\"toggleItem(item)\">\r\n                <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\r\n                <div class=\"tree-header-name\">\r\n                    @if (isEditingParent(item)) {\r\n                        <input\r\n                            #parentNameInput\r\n                            class=\"tree-name-input\"\r\n                        [attr.data-id]=\"item.id\"\r\n                        [value]=\"item.name\"\r\n                        (input)=\"updateParentName(item, $event)\"\r\n                        (blur)=\"finalizeParentEdit(item)\"\r\n                        (keydown.enter)=\"finalizeParentEdit(item)\"\r\n                        (keydown.escape)=\"cancelParentEdit(item)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                    />\r\n                    } @else {\r\n                        <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\r\n                            {{item.name}}\r\n                        </div>\r\n                    }\r\n                    <span>{{item.children?.length || 0}}</span>\r\n                </div>\r\n                <div>\r\n                    <ui-switch\r\n                        [checked]=\"item.enabled\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        (checkedChange)=\"emitDeactivateParent(item, $event)\"\r\n                    ></ui-switch>\r\n                </div>\r\n                <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                @if (!item.children?.length) {\r\n                    <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                }\r\n            </div>\r\n            <div class=\"tree-body\">\r\n                @if (getFilteredChildren(item).length) {\r\n                    @for (subitem of getFilteredChildren(item); track subitem.id) {\r\n                        <div\r\n                            class=\"tree-subitem\"\r\n                            [class.is-disabled]=\"!subitem.enabled\"\r\n                            [class.is-pending]=\"isPendingCreate(subitem)\"\r\n                            [class.is-parent-disabled]=\"!item.enabled\"\r\n                        >\r\n                            <div class=\"tree-subitem-name\">\r\n                                <i\r\n                                    class=\"ri-circle-fill tree-subitem-status\"\r\n                                    [class.is-enabled]=\"subitem.enabled\"\r\n                                    [class.is-disabled]=\"!subitem.enabled\"\r\n                                ></i>\r\n                                @if (isEditingChild(subitem)) {\r\n                                    <input\r\n                                        #childNameInput\r\n                                        class=\"tree-name-input tree-name-input--sub\"\r\n                                        [attr.data-id]=\"subitem.id\"\r\n                                        [value]=\"subitem.name\"\r\n                                        (input)=\"updateChildName(item, subitem, $event)\"\r\n                                        (blur)=\"finalizeChildEdit(item, subitem)\"\r\n                                        (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\r\n                                        (keydown.escape)=\"cancelChildEdit(item, subitem)\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                    />\r\n                                } @else {\r\n                                    <span\r\n                                        class=\"tree-name-text\"\r\n                                        (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\r\n                                    >{{subitem.name}}</span>\r\n                                }\r\n                            </div>\r\n                            <div class=\"tree-subitem-actions\">\r\n                                <ui-switch\r\n                                    [checked]=\"subitem.enabled\"\r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\r\n                                ></ui-switch>\r\n                                <ui-button\r\n                                    (click)=\"emitEditChild(item, subitem, $event)\"\r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    icon=\"ri-edit-line\"\r\n                                    type=\"ghost\"\r\n                                    [iconOnly]=\"true\"\r\n                                    size=\"s\"\r\n                                ></ui-button>\r\n                                <ui-button \r\n                                    (click)=\"emitDeleteChild(item, subitem, $event)\" \r\n                                    icon=\"ri-delete-bin-line\" \r\n                                    [disabled]=\"isPendingCreate(subitem)\"\r\n                                    type=\"ghost\" \r\n                                    [iconOnly]=\"true\" size=\"s\"></ui-button>\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                } @else {\r\n                    <div class=\"tree-empty\">\r\n                        {{emptyMessage}}\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n}\r\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(--blue-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:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{width:50%;color:var(--grey-900);cursor:text}.filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}.filter-bar input{flex:1 1}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.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)}\n"] }]
         }], propDecorators: { searchEnabled: [{
                 type: Input
             }], loading: [{
@@ -5877,14 +5877,14 @@ class UicExcelTableComponent {
         this.jsonDataChange.emit(this.jsonData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicExcelTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicExcelTableComponent, isStandalone: true, selector: "ui-excel-table", inputs: { title: "title" }, outputs: { jsonDataChange: "jsonDataChange" }, ngImport: i0, template: "<input\n#fileInput\ntype=\"file\"\naccept=\".xlsx,.xls,.csv\"\n(change)=\"onFileSelected($event)\"\nhidden\n/>\n\n<div class=\"xls-button\">\n    <h1 style=\"flex: 1 1;\">{{title}}</h1>\n    <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"fileInput.value = ''\">Limpiar</ui-button>\n    <ui-button color=\"black\" size=\"m\" (click)=\"fileInput.click()\">Cargar excel</ui-button>\n</div>\n@if (headers.length > 0) {\n    <table class=\"xls-table\">\n        <thead>\n            <tr>\n                <th *ngFor=\"let header of headers\">{{ header }}</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let row of rows\">\n                <td *ngFor=\"let header of headers\">{{ row[header] }}</td>\n            </tr>\n        </tbody>\n    </table>\n}\n", styles: [".xls-button{display:flex;gap:10px;justify-content:flex-end;margin-bottom:10px}.xls-table{width:100%;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:5px;line-height:20px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table th{background-color:var(--grey-100);text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicExcelTableComponent, isStandalone: true, selector: "ui-excel-table", inputs: { title: "title" }, outputs: { jsonDataChange: "jsonDataChange" }, ngImport: i0, template: "<input\r\n#fileInput\r\ntype=\"file\"\r\naccept=\".xlsx,.xls,.csv\"\r\n(change)=\"onFileSelected($event)\"\r\nhidden\r\n/>\r\n\r\n<div class=\"xls-button\">\r\n    <h1 style=\"flex: 1 1;\">{{title}}</h1>\r\n    <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"fileInput.value = ''\">Limpiar</ui-button>\r\n    <ui-button color=\"black\" size=\"m\" (click)=\"fileInput.click()\">Cargar excel</ui-button>\r\n</div>\r\n@if (headers.length > 0) {\r\n    <table class=\"xls-table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngFor=\"let header of headers\">{{ header }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of rows\">\r\n                <td *ngFor=\"let header of headers\">{{ row[header] }}</td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n}\r\n", styles: [".xls-button{display:flex;gap:10px;justify-content:flex-end;margin-bottom:10px}.xls-table{width:100%;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:5px;line-height:20px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table th{background-color:var(--grey-100);text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicExcelTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-excel-table', imports: [
                         CommonModule,
                         UicButtonComponent
-                    ], template: "<input\n#fileInput\ntype=\"file\"\naccept=\".xlsx,.xls,.csv\"\n(change)=\"onFileSelected($event)\"\nhidden\n/>\n\n<div class=\"xls-button\">\n    <h1 style=\"flex: 1 1;\">{{title}}</h1>\n    <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"fileInput.value = ''\">Limpiar</ui-button>\n    <ui-button color=\"black\" size=\"m\" (click)=\"fileInput.click()\">Cargar excel</ui-button>\n</div>\n@if (headers.length > 0) {\n    <table class=\"xls-table\">\n        <thead>\n            <tr>\n                <th *ngFor=\"let header of headers\">{{ header }}</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let row of rows\">\n                <td *ngFor=\"let header of headers\">{{ row[header] }}</td>\n            </tr>\n        </tbody>\n    </table>\n}\n", styles: [".xls-button{display:flex;gap:10px;justify-content:flex-end;margin-bottom:10px}.xls-table{width:100%;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:5px;line-height:20px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table th{background-color:var(--grey-100);text-align:left}\n"] }]
+                    ], template: "<input\r\n#fileInput\r\ntype=\"file\"\r\naccept=\".xlsx,.xls,.csv\"\r\n(change)=\"onFileSelected($event)\"\r\nhidden\r\n/>\r\n\r\n<div class=\"xls-button\">\r\n    <h1 style=\"flex: 1 1;\">{{title}}</h1>\r\n    <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"fileInput.value = ''\">Limpiar</ui-button>\r\n    <ui-button color=\"black\" size=\"m\" (click)=\"fileInput.click()\">Cargar excel</ui-button>\r\n</div>\r\n@if (headers.length > 0) {\r\n    <table class=\"xls-table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngFor=\"let header of headers\">{{ header }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of rows\">\r\n                <td *ngFor=\"let header of headers\">{{ row[header] }}</td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n}\r\n", styles: [".xls-button{display:flex;gap:10px;justify-content:flex-end;margin-bottom:10px}.xls-table{width:100%;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:5px;line-height:20px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table th{background-color:var(--grey-100);text-align:left}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], jsonDataChange: [{
@@ -5906,6 +5906,7 @@ class UicTagSelectorComponent extends base {
     predefinedTitle = 'Tags predefinidos';
     newTagTitle = 'Nuevo tag';
     predefinedLabels = [];
+    createdTag = new EventEmitter();
     selectedTags = [];
     filterText = '';
     newTagLabel = '';
@@ -5940,6 +5941,7 @@ class UicTagSelectorComponent extends base {
         this.filter();
         this.select(newTag);
         this.newTagLabel = '';
+        this.createdTag.emit(newTag);
     }
     isSelected(name) {
         return this.selectedTags.some(t => t.name === name);
@@ -5950,7 +5952,7 @@ class UicTagSelectorComponent extends base {
         this.selectedTags = [...safeValue];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTagSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTagSelectorComponent, isStandalone: true, selector: "ui-tag-selector", inputs: { icon: "icon", iconColor: "iconColor", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", placeholder: "placeholder", buttonText: "buttonText", predefinedTitle: "predefinedTitle", newTagTitle: "newTagTitle", predefinedLabels: "predefinedLabels" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTagSelectorComponent, isStandalone: true, selector: "ui-tag-selector", inputs: { icon: "icon", iconColor: "iconColor", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", placeholder: "placeholder", buttonText: "buttonText", predefinedTitle: "predefinedTitle", newTagTitle: "newTagTitle", predefinedLabels: "predefinedLabels" }, outputs: { createdTag: "createdTag" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UicTagSelectorComponent),
@@ -5997,6 +5999,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], predefinedLabels: [{
                 type: Input
+            }], createdTag: [{
+                type: Output
             }] } });
 
 class UicProgressBarComponent {
@@ -6031,11 +6035,11 @@ class UicProgressBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
+            args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
         }], propDecorators: { progress: [{
                 type: Input
             }], color: [{