ui-core-abv 0.5.94 → 0.5.96

package/fesm2022/ui-core-abv.mjs

@@ -1007,7 +1007,7 @@ class UicDatePickerComponent extends base$8 {
                 useExisting: forwardRef(() => UicDatePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          [placeholder]=\"inputPlaceholder\"\r\n          [value]=\"displayValue\"\r\n          inputmode=\"numeric\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInputChange($event)\"\r\n          (blur)=\"onInputBlur()\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              [class.day-selected]=\"isSelectedMonth(i)\"\r\n              [disabled]=\"isMonthDisabled(i)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\n              color=\"red\"\n              size=\"s\"\n              type=\"ghost\"\n              (click)=\"cleanInput()\"\n              >Limpiar</ui-button\n            >\n            @if (isTodayAvailable()) {\n            <ui-button\n              color=\"blue\"\n              size=\"s\"\n              type=\"ghost\"\n              (click)=\"pickToday()\"\n              >Hoy</ui-button\n            >\n            }\n          </div>\n        </div>\n      </ng-template>\n    </div>\r\n</ui-input-wrapper>\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
+        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          [placeholder]=\"inputPlaceholder\"\r\n          [value]=\"displayValue\"\r\n          inputmode=\"numeric\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInputChange($event)\"\r\n          (blur)=\"onInputBlur()\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              [class.day-selected]=\"isSelectedMonth(i)\"\r\n              [disabled]=\"isMonthDisabled(i)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            @if (isTodayAvailable()) {\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n</ui-input-wrapper>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, decorators: [{
             type: Component,
@@ -1017,7 +1017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicDatePickerComponent),
                             multi: true
                         }
-                    ], template: "<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          [placeholder]=\"inputPlaceholder\"\r\n          [value]=\"displayValue\"\r\n          inputmode=\"numeric\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInputChange($event)\"\r\n          (blur)=\"onInputBlur()\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              [class.day-selected]=\"isSelectedMonth(i)\"\r\n              [disabled]=\"isMonthDisabled(i)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\n              color=\"red\"\n              size=\"s\"\n              type=\"ghost\"\n              (click)=\"cleanInput()\"\n              >Limpiar</ui-button\n            >\n            @if (isTodayAvailable()) {\n            <ui-button\n              color=\"blue\"\n              size=\"s\"\n              type=\"ghost\"\n              (click)=\"pickToday()\"\n              >Hoy</ui-button\n            >\n            }\n          </div>\n        </div>\n      </ng-template>\n    </div>\r\n</ui-input-wrapper>\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
+                    ], template: "<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          [placeholder]=\"inputPlaceholder\"\r\n          [value]=\"displayValue\"\r\n          inputmode=\"numeric\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInputChange($event)\"\r\n          (blur)=\"onInputBlur()\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              [class.day-selected]=\"isSelectedMonth(i)\"\r\n              [disabled]=\"isMonthDisabled(i)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            @if (isTodayAvailable()) {\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n</ui-input-wrapper>\r\n", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -3596,7 +3596,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,
@@ -3605,7 +3605,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: [{
@@ -4187,11 +4187,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]
@@ -5109,7 +5109,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,
@@ -5119,7 +5119,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: [{
@@ -5800,7 +5800,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,
@@ -5809,7 +5809,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: [{
@@ -5899,14 +5899,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: [{
@@ -5929,7 +5929,8 @@ class UicTagSelectorComponent extends base {
     newTagTitle = 'Nuevo tag';
     predefinedLabels = [];
     createdTag = new EventEmitter();
-    deleteTag = new EventEmitter();
+    selectTag = new EventEmitter();
+    unselectTag = new EventEmitter();
     selectedTags = [];
     filterText = '';
     newTagLabel = '';
@@ -5944,15 +5945,16 @@ class UicTagSelectorComponent extends base {
         const idx = this.selectedTags.findIndex(f => f.name == tag.name);
         if (idx != -1) {
             this.selectedTags.splice(idx, 1);
+            this.unselectTag.emit(tag.id);
         }
         else {
             this.selectedTags.push(tag);
+            this.selectTag.emit(tag.id);
         }
         this.notifyChange(this.selectedTags);
     }
     removeTag(tag) {
         this.select(tag);
-        this.deleteTag.emit(tag.id);
     }
     createTag() {
         const newTag = {
@@ -5976,7 +5978,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" }, outputs: { createdTag: "createdTag", deleteTag: "deleteTag" }, 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", selectTag: "selectTag", unselectTag: "unselectTag" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UicTagSelectorComponent),
@@ -6025,7 +6027,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], createdTag: [{
                 type: Output
-            }], deleteTag: [{
+            }], selectTag: [{
+                type: Output
+            }], unselectTag: [{
                 type: Output
             }] } });
 
@@ -6061,11 +6065,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: [{