ui-core-abv 0.5.35 → 0.5.45

package/fesm2022/ui-core-abv.mjs

@@ -2449,7 +2449,7 @@ class UicDynamicFormComponent {
     fields = [];
     form;
     disabled = false;
-    voiceToTextSilenceMs = 1000;
+    voiceToTextSilenceMs = 2000;
     alertS = inject(UicPushAlertService);
     colorToIcon = {
         red: 'ri-error-warning-line',
@@ -2613,7 +2613,7 @@ class UicDynamicFormComponent {
         recognition.start();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        @let currentValue = form.get(field.name)?.value ?? '';\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input #inp\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              exp\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n              cols=\"4\"\r\n            ></textarea>\r\n            @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n              @let listening = isListening(field.name);\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n            }\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-input>\r\n      }\r\n      @if ( field.type === 'phone' ) {\r\n        <ui-phone-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" \r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n          >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"field.searchFn\"\r\n          [itemDisplayFn]=\"field.searchDisplayFn\"\r\n          [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n          [placeholder]=\"field.placeholder??'Buscar...'\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if ( ['checkbox','switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        @let currentValue = form.get(field.name)?.value ?? '';\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input #inp\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              exp\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n              cols=\"4\"\r\n            ></textarea>\r\n            @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n              @let listening = isListening(field.name);\r\n              <div class=\"speak-icon\">\r\n                <ui-button\r\n                  [disabled]=\"listening\"\r\n                  style=\"margin-bottom: 2px;\"\r\n                  (click)=\"voiceToText(ta, field.name)\"\r\n                  [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                  [type]=\"listening?'filled':'bordered'\"\r\n                  size=\"s\"\r\n                  [iconOnly]=\"true\"\r\n                ></ui-button>\r\n                @if (isListening(field.name)) {\r\n                  <i class=\"ri-voiceprint-line\"></i>\r\n                }\r\n              </div>\r\n            }\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-input>\r\n      }\r\n      @if ( field.type === 'phone' ) {\r\n        <ui-phone-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" \r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n          >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"field.searchFn\"\r\n          [itemDisplayFn]=\"field.searchDisplayFn\"\r\n          [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n          [placeholder]=\"field.placeholder??'Buscar...'\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if ( ['checkbox','switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
             type: Component,
@@ -2633,7 +2633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicCheckboxComponent,
                         UicRadioComponent,
                         UicPhoneInputComponent,
-                        FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        @let currentValue = form.get(field.name)?.value ?? '';\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input #inp\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              exp\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n              cols=\"4\"\r\n            ></textarea>\r\n            @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n              @let listening = isListening(field.name);\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n            }\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-input>\r\n      }\r\n      @if ( field.type === 'phone' ) {\r\n        <ui-phone-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" \r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n          >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"field.searchFn\"\r\n          [itemDisplayFn]=\"field.searchDisplayFn\"\r\n          [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n          [placeholder]=\"field.placeholder??'Buscar...'\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if ( ['checkbox','switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}textarea{resize:none}\n"] }]
+                        FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        @let currentValue = form.get(field.name)?.value ?? '';\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input #inp\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              exp\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n              cols=\"4\"\r\n            ></textarea>\r\n            @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n              @let listening = isListening(field.name);\r\n              <div class=\"speak-icon\">\r\n                <ui-button\r\n                  [disabled]=\"listening\"\r\n                  style=\"margin-bottom: 2px;\"\r\n                  (click)=\"voiceToText(ta, field.name)\"\r\n                  [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                  [type]=\"listening?'filled':'bordered'\"\r\n                  size=\"s\"\r\n                  [iconOnly]=\"true\"\r\n                ></ui-button>\r\n                @if (isListening(field.name)) {\r\n                  <i class=\"ri-voiceprint-line\"></i>\r\n                }\r\n              </div>\r\n            }\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-input>\r\n      }\r\n      @if ( field.type === 'phone' ) {\r\n        <ui-phone-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" \r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n          >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"field.searchFn\"\r\n          [itemDisplayFn]=\"field.searchDisplayFn\"\r\n          [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n          [placeholder]=\"field.placeholder??'Buscar...'\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if ( ['checkbox','switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
                 type: Input
             }], form: [{
@@ -3298,7 +3298,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,
@@ -3307,7 +3307,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: [{
@@ -3766,11 +3766,11 @@ class UicStatusLabelComponent {
     type = 'status';
     icon = 'ri-circle-fill';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStatusLabelComponent, isStandalone: true, selector: "ui-status-label", inputs: { color: "color", type: "type", icon: "icon" }, ngImport: i0, template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n    @if (type == 'status') {\r\n        <i [class]=\"icon\"></i>\r\n    }\r\n    <div class=\"sl-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStatusLabelComponent, isStandalone: true, selector: "ui-status-label", inputs: { color: "color", type: "type", icon: "icon" }, ngImport: i0, template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n    @if (icon!='' && type == 'status') {\r\n        <i [class]=\"icon\"></i>\r\n    }\r\n    <div class=\"sl-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-status-label', imports: [], template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n    @if (type == 'status') {\r\n        <i [class]=\"icon\"></i>\r\n    }\r\n    <div class=\"sl-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] }]
+            args: [{ selector: 'ui-status-label', imports: [], template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n    @if (icon!='' && type == 'status') {\r\n        <i [class]=\"icon\"></i>\r\n    }\r\n    <div class=\"sl-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], type: [{
@@ -3874,11 +3874,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;padding:0 10px;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;padding:0 10px;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;padding:0 10px;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;padding:0 10px;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]
@@ -4218,7 +4218,7 @@ class ItemValueComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (data) {\r\n    @if (type == 'text' || !type) {\r\n        @if( data.icon ){ <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>}\r\n        {{  data.value }} \r\n        @if( data.rightIcon ){ <i [class]=\"data.rightIcon + ' ui-trc-' + data.iconColor\"></i>}\r\n    }\r\n    @if (type == 'copy') {\r\n        <div class=\"copy-div\">\r\n            {{  data.value }} \r\n            <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n        </div>\r\n    }\r\n    @if (type == 'money'){\r\n        {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n    }\r\n    @if (type == 'date'){\r\n        {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n    }\r\n    @if (type == 'bigtext') {\r\n        <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n            {{ data.value  }} \r\n            @if( data.value && data.value.toString().length > 0){\r\n                <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n            }\r\n            @if (!expanded && data.value && data.value.toString().length > 0) {\r\n                <div class=\"fade-overlay\"></div>\r\n            }\r\n        </div>\r\n    }\r\n    @if (type == 'icon-list') {\r\n        @for (alert of data.list; track $index) {\r\n            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n        }\r\n    }\r\n    @else if (type == 'list'){\r\n        <uic-table-list [list]=\"data.list??[]\"></uic-table-list>                 \r\n    }\r\n    @else if (type == 'user'){\r\n        <uic-table-user [user]=\"data.user\"></uic-table-user>                 \r\n    }\r\n    @else if (type == 'status'){\r\n        @if (data.value) {\r\n            <ui-status-label  [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label>                \r\n        }@else {\r\n            -\r\n        }\r\n    }\r\n    @else if (type == 'tag'){\r\n        <ui-status-label  type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label>                \r\n    }\r\n    @else if (type == 'switch'){\r\n        <div (click)=\"$event.stopPropagation()\">\r\n            <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch>    \r\n        </div>\r\n    }\r\n\r\n    @if( data.subtext  ){\r\n        <div [class]=\"'subtext ui-alignment-'+alignment\">{{  data.subtext }}</div>\r\n    }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (data) {\r\n    @if (type == 'text' || !type) {\r\n        @if( data.icon ){ <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>}\r\n        {{  data.value }} \r\n        @if( data.rightIcon ){ <i [class]=\"data.rightIcon + ' ui-trc-' + data.iconColor\"></i>}\r\n    }\r\n    @if (type == 'copy') {\r\n        <div class=\"copy-div\">\r\n            {{  data.value }} \r\n            <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n        </div>\r\n    }\r\n    @if (type == 'money'){\r\n        {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n    }\r\n    @if (type == 'bold'){\r\n        <b>{{ data.value}}</b>\r\n    }\r\n    @if (type == 'date'){\r\n        {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n    }\r\n    @if (type == 'bigtext') {\r\n        <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n            {{ data.value  }} \r\n            @if( data.value && data.value.toString().length > 0){\r\n                <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n            }\r\n            @if (!expanded && data.value && data.value.toString().length > 0) {\r\n                <div class=\"fade-overlay\"></div>\r\n            }\r\n        </div>\r\n    }\r\n    @if (type == 'icon-list') {\r\n        @for (alert of data.list; track $index) {\r\n            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n        }\r\n    }\r\n    @else if (type == 'list'){\r\n        <uic-table-list [list]=\"data.list??[]\"></uic-table-list>                 \r\n    }\r\n    @else if (type == 'user'){\r\n        <uic-table-user [user]=\"data.user\"></uic-table-user>                 \r\n    }\r\n    @else if (type == 'status'){\r\n        @if (data.value) {\r\n            <ui-status-label  [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label>                \r\n        }@else {\r\n            -\r\n        }\r\n    }\r\n    @else if (type == 'tag'){\r\n        <ui-status-label  type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label>                \r\n    }\r\n    @else if (type == 'switch'){\r\n        <div (click)=\"$event.stopPropagation()\">\r\n            <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch>    \r\n        </div>\r\n    }\r\n\r\n    @if( data.subtext  ){\r\n        <div [class]=\"'subtext ui-alignment-'+alignment\">{{  data.subtext }}</div>\r\n    }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, decorators: [{
             type: Component,
@@ -4232,7 +4232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         CurrencyPipe,
                         DatePipe
-                    ], template: "@if (data) {\r\n    @if (type == 'text' || !type) {\r\n        @if( data.icon ){ <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>}\r\n        {{  data.value }} \r\n        @if( data.rightIcon ){ <i [class]=\"data.rightIcon + ' ui-trc-' + data.iconColor\"></i>}\r\n    }\r\n    @if (type == 'copy') {\r\n        <div class=\"copy-div\">\r\n            {{  data.value }} \r\n            <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n        </div>\r\n    }\r\n    @if (type == 'money'){\r\n        {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n    }\r\n    @if (type == 'date'){\r\n        {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n    }\r\n    @if (type == 'bigtext') {\r\n        <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n            {{ data.value  }} \r\n            @if( data.value && data.value.toString().length > 0){\r\n                <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n            }\r\n            @if (!expanded && data.value && data.value.toString().length > 0) {\r\n                <div class=\"fade-overlay\"></div>\r\n            }\r\n        </div>\r\n    }\r\n    @if (type == 'icon-list') {\r\n        @for (alert of data.list; track $index) {\r\n            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n        }\r\n    }\r\n    @else if (type == 'list'){\r\n        <uic-table-list [list]=\"data.list??[]\"></uic-table-list>                 \r\n    }\r\n    @else if (type == 'user'){\r\n        <uic-table-user [user]=\"data.user\"></uic-table-user>                 \r\n    }\r\n    @else if (type == 'status'){\r\n        @if (data.value) {\r\n            <ui-status-label  [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label>                \r\n        }@else {\r\n            -\r\n        }\r\n    }\r\n    @else if (type == 'tag'){\r\n        <ui-status-label  type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label>                \r\n    }\r\n    @else if (type == 'switch'){\r\n        <div (click)=\"$event.stopPropagation()\">\r\n            <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch>    \r\n        </div>\r\n    }\r\n\r\n    @if( data.subtext  ){\r\n        <div [class]=\"'subtext ui-alignment-'+alignment\">{{  data.subtext }}</div>\r\n    }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"] }]
+                    ], template: "@if (data) {\r\n    @if (type == 'text' || !type) {\r\n        @if( data.icon ){ <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>}\r\n        {{  data.value }} \r\n        @if( data.rightIcon ){ <i [class]=\"data.rightIcon + ' ui-trc-' + data.iconColor\"></i>}\r\n    }\r\n    @if (type == 'copy') {\r\n        <div class=\"copy-div\">\r\n            {{  data.value }} \r\n            <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n        </div>\r\n    }\r\n    @if (type == 'money'){\r\n        {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n    }\r\n    @if (type == 'bold'){\r\n        <b>{{ data.value}}</b>\r\n    }\r\n    @if (type == 'date'){\r\n        {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n    }\r\n    @if (type == 'bigtext') {\r\n        <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n            {{ data.value  }} \r\n            @if( data.value && data.value.toString().length > 0){\r\n                <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n            }\r\n            @if (!expanded && data.value && data.value.toString().length > 0) {\r\n                <div class=\"fade-overlay\"></div>\r\n            }\r\n        </div>\r\n    }\r\n    @if (type == 'icon-list') {\r\n        @for (alert of data.list; track $index) {\r\n            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n        }\r\n    }\r\n    @else if (type == 'list'){\r\n        <uic-table-list [list]=\"data.list??[]\"></uic-table-list>                 \r\n    }\r\n    @else if (type == 'user'){\r\n        <uic-table-user [user]=\"data.user\"></uic-table-user>                 \r\n    }\r\n    @else if (type == 'status'){\r\n        @if (data.value) {\r\n            <ui-status-label  [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label>                \r\n        }@else {\r\n            -\r\n        }\r\n    }\r\n    @else if (type == 'tag'){\r\n        <ui-status-label  type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label>                \r\n    }\r\n    @else if (type == 'switch'){\r\n        <div (click)=\"$event.stopPropagation()\">\r\n            <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch>    \r\n        </div>\r\n    }\r\n\r\n    @if( data.subtext  ){\r\n        <div [class]=\"'subtext ui-alignment-'+alignment\">{{  data.subtext }}</div>\r\n    }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"] }]
         }], propDecorators: { key: [{
                 type: Input
             }], type: [{
@@ -4796,7 +4796,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(--grey-200, #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(--grey-200, #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,
@@ -4806,7 +4806,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(--grey-200, #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(--grey-200, #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: [{
@@ -4848,11 +4848,11 @@ class UicTabsButtonComponent {
         this.activeTabChange.emit(this.activeTab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            {{tab.text}}</div>\r\n    }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff;box-shadow:0 0 18px #0000001a}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            {{tab.text}}</div>\r\n    }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff;box-shadow:0 0 8px 1px #0000000d}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tabs-button', imports: [], template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            {{tab.text}}</div>\r\n    }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff;box-shadow:0 0 18px #0000001a}\n"] }]
+            args: [{ selector: 'ui-tabs-button', imports: [], template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            {{tab.text}}</div>\r\n    }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff;box-shadow:0 0 8px 1px #0000000d}\n"] }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], activeTab: [{
@@ -5172,13 +5172,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class UicTreeAdminComponent {
+    searchEnabled = true;
     loading = false;
     emptyMessage = 'Sin subcategorias';
-    createSubcategoryFn;
+    duplicateNameMessage = 'La subcategoria ya existe';
     edit = new EventEmitter();
     remove = new EventEmitter();
     deactivate = new EventEmitter();
     nameChange = new EventEmitter();
+    create = new EventEmitter();
     tree = [
         {
             id: 0,
@@ -5237,15 +5239,18 @@ class UicTreeAdminComponent {
     ];
     childNameInputs;
     parentNameInputs;
+    pushAler = inject(UicPushAlertService);
     collapsedIds = new Set();
     editingParentId = null;
     editingChildId = null;
     pendingFocusParentId = null;
     pendingFocusChildId = null;
-    creatingChildIds = new Set();
+    pendingCreateIds = new Set();
     originalNames = new Map();
     tempId = 0;
+    filterTerm = '';
     ngAfterViewChecked() {
+        this.cleanupPendingCreateIds();
         if (this.pendingFocusParentId !== null) {
             const targetId = String(this.pendingFocusParentId);
             const target = this.parentNameInputs?.find((input) => input.nativeElement.dataset['id'] === targetId);
@@ -5292,6 +5297,9 @@ class UicTreeAdminComponent {
     }
     startEditChild(subitem, event) {
         event?.stopPropagation();
+        if (this.pendingCreateIds.has(subitem.id)) {
+            return;
+        }
         this.editingChildId = subitem.id;
         this.pendingFocusChildId = subitem.id;
         if (!this.originalNames.has(subitem.id)) {
@@ -5310,12 +5318,31 @@ class UicTreeAdminComponent {
     updateChildName(parent, subitem, event) {
         subitem.name = event.target.value;
     }
+    updateFilter(event) {
+        this.filterTerm = event.target.value ?? '';
+    }
+    clearFilter() {
+        this.filterTerm = '';
+    }
+    getFilteredChildren(item) {
+        if (!item.children?.length) {
+            return [];
+        }
+        const term = this.filterTerm.trim().toLowerCase();
+        if (!term) {
+            return item.children;
+        }
+        return item.children.filter((child) => child.name.toLowerCase().includes(term));
+    }
     finalizeParentEdit(item) {
-        this.nameChange.emit({ kind: 'parent', id: item.id, name: item.name });
+        const original = this.originalNames.get(item.id);
+        if (original === undefined || original !== item.name) {
+            this.nameChange.emit({ kind: 'parent', id: item.id, name: item.name });
+        }
         this.originalNames.delete(item.id);
         this.stopEditParent();
     }
-    async finalizeChildEdit(parent, subitem) {
+    finalizeChildEdit(parent, subitem) {
         const trimmed = subitem.name.trim();
         if (!trimmed) {
             this.removeChild(parent, subitem);
@@ -5323,21 +5350,29 @@ class UicTreeAdminComponent {
             return;
         }
         subitem.name = trimmed;
-        this.nameChange.emit({ kind: 'child', parentId: parent.id, id: subitem.id, name: subitem.name });
-        this.originalNames.delete(subitem.id);
-        if (this.isTempId(subitem.id) && this.createSubcategoryFn) {
-            const tempId = subitem.id;
-            this.creatingChildIds.add(tempId);
-            try {
-                const result = await Promise.resolve(this.createSubcategoryFn({ parentId: Number(parent.id), name: trimmed }));
-                if (result?.id !== undefined) {
-                    subitem.id = result.id;
-                }
+        const original = this.originalNames.get(subitem.id);
+        const isNew = this.isNewChild(subitem.id);
+        if (isNew) {
+            if (original !== undefined && original === subitem.name) {
+                this.originalNames.delete(subitem.id);
+                this.stopEditChild();
+                return;
             }
-            finally {
-                this.creatingChildIds.delete(tempId);
+            if (this.hasDuplicateChildName(parent, subitem)) {
+                this.pushAler.warning(this.duplicateNameMessage);
+                this.removeChild(parent, subitem);
+                this.originalNames.delete(subitem.id);
+                return;
             }
+            this.pendingCreateIds.add(subitem.id);
+            this.create.emit({ parentId: parent.id, name: subitem.name, tempId: subitem.id });
         }
+        else {
+            if (original === undefined || original !== subitem.name) {
+                this.nameChange.emit({ kind: 'child', parentId: parent.id, id: subitem.id, name: subitem.name });
+            }
+        }
+        this.originalNames.delete(subitem.id);
         this.stopEditChild();
     }
     cancelParentEdit(item) {
@@ -5354,7 +5389,7 @@ class UicTreeAdminComponent {
             subitem.name = original;
         }
         this.originalNames.delete(subitem.id);
-        if (this.isTempId(subitem.id) && !subitem.name.trim()) {
+        if (this.isNewChild(subitem.id) && !subitem.name.trim()) {
             this.removeChild(parent, subitem);
             return;
         }
@@ -5380,7 +5415,6 @@ class UicTreeAdminComponent {
     emitEditChild(parent, subitem, event) {
         event?.stopPropagation();
         this.edit.emit({ kind: 'child', parentId: parent.id, id: subitem.id });
-        this.startEditChild(subitem);
     }
     emitDeleteParent(item, event) {
         event?.stopPropagation();
@@ -5391,14 +5425,15 @@ class UicTreeAdminComponent {
         this.remove.emit({ kind: 'child', parentId: parent.id, id: subitem.id });
     }
     emitDeactivateParent(item, checked) {
+        item.enabled = checked;
         this.deactivate.emit({ kind: 'parent', id: item.id, checked });
     }
     emitDeactivateChild(parent, subitem, checked) {
         subitem.enabled = checked;
         this.deactivate.emit({ kind: 'child', parentId: parent.id, id: subitem.id, checked });
     }
-    isCreatingChild(subitem) {
-        return this.creatingChildIds.has(subitem.id);
+    isPendingCreate(subitem) {
+        return this.pendingCreateIds.has(subitem.id);
     }
     removeChild(parent, subitem) {
         if (!parent.children) {
@@ -5408,25 +5443,60 @@ class UicTreeAdminComponent {
         if (this.editingChildId === subitem.id) {
             this.editingChildId = null;
         }
+        this.pendingCreateIds.delete(subitem.id);
+    }
+    isNewChild(id) {
+        if (id === null || id === undefined) {
+            return true;
+        }
+        if (typeof id === 'string') {
+            return id.trim() === '' || id.startsWith('new-');
+        }
+        return id <= 0;
     }
-    isTempId(id) {
-        return typeof id === 'string' && id.startsWith('new-');
+    hasDuplicateChildName(parent, subitem) {
+        const trimmed = subitem.name.trim().toLowerCase();
+        if (!trimmed || !parent.children) {
+            return false;
+        }
+        return parent.children.some((child) => child.id !== subitem.id && child.name.trim().toLowerCase() === trimmed);
+    }
+    cleanupPendingCreateIds() {
+        if (!this.pendingCreateIds.size) {
+            return;
+        }
+        const idsInTree = new Set();
+        for (const parent of this.tree) {
+            if (parent.children?.length) {
+                for (const child of parent.children) {
+                    idsInTree.add(child.id);
+                }
+            }
+        }
+        for (const pendingId of Array.from(this.pendingCreateIds)) {
+            if (!idsInTree.has(pendingId)) {
+                this.pendingCreateIds.delete(pendingId);
+            }
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { loading: "loading", emptyMessage: "emptyMessage", createSubcategoryFn: "createSubcategoryFn", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange" }, viewQueries: [{ propertyName: "childNameInputs", predicate: ["childNameInput"], descendants: true }, { propertyName: "parentNameInputs", predicate: ["parentNameInput"], descendants: true }], ngImport: i0, template: "@if (loading) {\n    <div class=\"tree-skeleton\">\n        <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\n    </div>\n} @else {\n    @for (item of tree; track item.id) {\n        <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\n            <div class=\"tree-header\" (click)=\"toggleItem(item)\">\n                <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\n                <div class=\"tree-header-name\">\n                    @if (isEditingParent(item)) {\n                        <input\n                            #parentNameInput\n                            class=\"tree-name-input\"\n                        [attr.data-id]=\"item.id\"\n                        [value]=\"item.name\"\n                        (input)=\"updateParentName(item, $event)\"\n                        (blur)=\"finalizeParentEdit(item)\"\n                        (keydown.enter)=\"finalizeParentEdit(item)\"\n                        (keydown.escape)=\"cancelParentEdit(item)\"\n                        (click)=\"$event.stopPropagation()\"\n                    />\n                    } @else {\n                        <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\n                            {{item.name}}\n                        </div>\n                    }\n                    <span>{{item.children?.length || 0}}</span>\n                </div>\n                <div>\n                    <ui-switch\n                        [checked]=\"item.enabled\"\n                        (click)=\"$event.stopPropagation()\"\n                        (checkedChange)=\"emitDeactivateParent(item, $event)\"\n                    ></ui-switch>\n                </div>\n                <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                @if (!item.children?.length) {\n                    <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                }\n            </div>\n            <div class=\"tree-body\">\n                @if (item.children?.length) {\n                    @for (subitem of item.children; track subitem.id) {\n                        <div\n                            class=\"tree-subitem\"\n                            [class.is-loading]=\"isCreatingChild(subitem)\"\n                            [class.is-disabled]=\"!subitem.enabled\"\n                        >\n                            <div class=\"tree-subitem-name\">\n                                <i\n                                    class=\"ri-circle-fill tree-subitem-status\"\n                                    [class.is-enabled]=\"subitem.enabled\"\n                                    [class.is-disabled]=\"!subitem.enabled\"\n                                ></i>\n                                @if (isEditingChild(subitem)) {\n                                    <input\n                                        #childNameInput\n                                        class=\"tree-name-input tree-name-input--sub\"\n                                        [attr.data-id]=\"subitem.id\"\n                                        [value]=\"subitem.name\"\n                                        (input)=\"updateChildName(item, subitem, $event)\"\n                                        (blur)=\"finalizeChildEdit(item, subitem)\"\n                                        (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\n                                        (keydown.escape)=\"cancelChildEdit(item, subitem)\"\n                                        (click)=\"$event.stopPropagation()\"\n                                    />\n                                } @else {\n                                    <span class=\"tree-name-text\" (click)=\"startEditChild(subitem, $event)\">{{subitem.name}}</span>\n                                }\n                            </div>\n                            <div class=\"tree-subitem-actions\">\n                                @if (isCreatingChild(subitem)) {\n                                    <div class=\"tree-subitem-loader\"></div>\n                                } @else {\n                                    <ui-switch\n                                        [checked]=\"subitem.enabled\"\n                                        (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n                                    ></ui-switch>\n                                    <ui-button (click)=\"emitEditChild(item, subitem, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                                    <ui-button (click)=\"emitDeleteChild(item, subitem, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                                }\n                            </div>\n                        </div>\n                    }\n                } @else {\n                    <div class=\"tree-empty\">\n                        {{emptyMessage}}\n                    </div>\n                }\n            </div>\n        </div>\n    }\n}\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--green-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem-loader{width:46px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 40%,var(--grey-200) 80%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-loading{opacity:.8}.tree-subitem.is-loading .tree-subitem-actions{opacity:1;pointer-events:none;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input{color:var(--grey-500)}.tree-name-text{color:var(--grey-900);cursor:text}.tree-name-input{flex:1 1;min-width:0;width:300px;border:solid 1px var(--grey-300);border-radius:6px;padding:2px 6px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:1px 6px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}@keyframes shimmer{0%{background-position:0% 0%}to{background-position:200% 0%}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }] });
+    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,
             args: [{ selector: 'ui-tree-admin', imports: [
+                        UicInputComponent,
                         UicButtonComponent,
                         UicSkeletonLoaderComponent,
                         UicSwichComponent
-                    ], template: "@if (loading) {\n    <div class=\"tree-skeleton\">\n        <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\n    </div>\n} @else {\n    @for (item of tree; track item.id) {\n        <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\n            <div class=\"tree-header\" (click)=\"toggleItem(item)\">\n                <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\n                <div class=\"tree-header-name\">\n                    @if (isEditingParent(item)) {\n                        <input\n                            #parentNameInput\n                            class=\"tree-name-input\"\n                        [attr.data-id]=\"item.id\"\n                        [value]=\"item.name\"\n                        (input)=\"updateParentName(item, $event)\"\n                        (blur)=\"finalizeParentEdit(item)\"\n                        (keydown.enter)=\"finalizeParentEdit(item)\"\n                        (keydown.escape)=\"cancelParentEdit(item)\"\n                        (click)=\"$event.stopPropagation()\"\n                    />\n                    } @else {\n                        <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\n                            {{item.name}}\n                        </div>\n                    }\n                    <span>{{item.children?.length || 0}}</span>\n                </div>\n                <div>\n                    <ui-switch\n                        [checked]=\"item.enabled\"\n                        (click)=\"$event.stopPropagation()\"\n                        (checkedChange)=\"emitDeactivateParent(item, $event)\"\n                    ></ui-switch>\n                </div>\n                <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                @if (!item.children?.length) {\n                    <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                }\n            </div>\n            <div class=\"tree-body\">\n                @if (item.children?.length) {\n                    @for (subitem of item.children; track subitem.id) {\n                        <div\n                            class=\"tree-subitem\"\n                            [class.is-loading]=\"isCreatingChild(subitem)\"\n                            [class.is-disabled]=\"!subitem.enabled\"\n                        >\n                            <div class=\"tree-subitem-name\">\n                                <i\n                                    class=\"ri-circle-fill tree-subitem-status\"\n                                    [class.is-enabled]=\"subitem.enabled\"\n                                    [class.is-disabled]=\"!subitem.enabled\"\n                                ></i>\n                                @if (isEditingChild(subitem)) {\n                                    <input\n                                        #childNameInput\n                                        class=\"tree-name-input tree-name-input--sub\"\n                                        [attr.data-id]=\"subitem.id\"\n                                        [value]=\"subitem.name\"\n                                        (input)=\"updateChildName(item, subitem, $event)\"\n                                        (blur)=\"finalizeChildEdit(item, subitem)\"\n                                        (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\n                                        (keydown.escape)=\"cancelChildEdit(item, subitem)\"\n                                        (click)=\"$event.stopPropagation()\"\n                                    />\n                                } @else {\n                                    <span class=\"tree-name-text\" (click)=\"startEditChild(subitem, $event)\">{{subitem.name}}</span>\n                                }\n                            </div>\n                            <div class=\"tree-subitem-actions\">\n                                @if (isCreatingChild(subitem)) {\n                                    <div class=\"tree-subitem-loader\"></div>\n                                } @else {\n                                    <ui-switch\n                                        [checked]=\"subitem.enabled\"\n                                        (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n                                    ></ui-switch>\n                                    <ui-button (click)=\"emitEditChild(item, subitem, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                                    <ui-button (click)=\"emitDeleteChild(item, subitem, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n                                }\n                            </div>\n                        </div>\n                    }\n                } @else {\n                    <div class=\"tree-empty\">\n                        {{emptyMessage}}\n                    </div>\n                }\n            </div>\n        </div>\n    }\n}\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--green-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem-loader{width:46px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 40%,var(--grey-200) 80%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-loading{opacity:.8}.tree-subitem.is-loading .tree-subitem-actions{opacity:1;pointer-events:none;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input{color:var(--grey-500)}.tree-name-text{color:var(--grey-900);cursor:text}.tree-name-input{flex:1 1;min-width:0;width:300px;border:solid 1px var(--grey-300);border-radius:6px;padding:2px 6px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:1px 6px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}@keyframes shimmer{0%{background-position:0% 0%}to{background-position:200% 0%}}\n"] }]
-        }], propDecorators: { loading: [{
+                    ], 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: [{
                 type: Input
             }], emptyMessage: [{
                 type: Input
-            }], createSubcategoryFn: [{
+            }], duplicateNameMessage: [{
                 type: Input
             }], edit: [{
                 type: Output
@@ -5436,6 +5506,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], nameChange: [{
                 type: Output
+            }], create: [{
+                type: Output
             }], tree: [{
                 type: Input
             }], childNameInputs: [{
@@ -5554,6 +5626,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class UicProgressBarComponent {
+    progress = 0; // Progress percentage (0-100)
+    color = 'primary'; // fill var(600) not fill var(200)
+    height = 6;
+    displayProgress = 0;
+    rafId = null;
+    get clampedProgress() {
+        return Math.min(100, Math.max(0, this.progress));
+    }
+    get heightPx() {
+        return `${this.height}px`;
+    }
+    ngOnChanges(changes) {
+        if (changes['progress']) {
+            this.scheduleProgressUpdate();
+        }
+    }
+    ngOnDestroy() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+        }
+    }
+    scheduleProgressUpdate() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = requestAnimationFrame(() => {
+            this.displayProgress = this.clampedProgress;
+            this.rafId = null;
+        });
+    }
+    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\">\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\">\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: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+
 const simpleFade = trigger('simpleFade', [
     transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
     transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
@@ -5592,5 +5709,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicTreeAdminComponent, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
+export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicProgressBarComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicTreeAdminComponent, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map