ui-core-abv 0.6.1 → 0.6.13

package/fesm2022/ui-core-abv.mjs

@@ -297,6 +297,15 @@ const DICTIONARY_EN = {
         browser_incompatibility_message: 'This browser does not support this feature.',
         voice_error: 'Error while starting voice dictation',
     },
+    validation: {
+        invalid: '{{field}} is invalid.',
+        required: '{{field}} is required.',
+        min: '{{field}} must be greater than or equal to {{min}}.',
+        max: '{{field}} must be less than or equal to {{max}}.',
+        minlength: '{{field}} must have at least {{requiredLength}} characters.',
+        maxlength: '{{field}} cannot exceed {{requiredLength}} characters.',
+        pattern: '{{field}} has an invalid format.',
+    },
     clipboard: {
         copy_error: 'Could not copy:',
     },
@@ -394,6 +403,15 @@ const DICTIONARY_ES = {
         browser_incompatibility_message: 'Este navegador no sorporta esta caracteristica.',
         voice_error: 'Error al intentar dictado por voz',
     },
+    validation: {
+        invalid: '{{field}} es invalido.',
+        required: '{{field}} es obligatorio.',
+        min: '{{field}} debe ser mayor o igual a {{min}}.',
+        max: '{{field}} debe ser menor o igual a {{max}}.',
+        minlength: '{{field}} debe tener al menos {{requiredLength}} caracteres.',
+        maxlength: '{{field}} no puede superar {{requiredLength}} caracteres.',
+        pattern: '{{field}} no tiene el formato correcto.',
+    },
     clipboard: {
         copy_error: 'No se pudo copiar:',
     },
@@ -3044,7 +3062,7 @@ class UicDynamicFormComponent {
     }
     // MANEJO DE ERRORES
     getErrorMessages(field) {
-        const control = this.form.get(field.name);
+        const control = this.form.get([field.name]);
         if (!control?.errors)
             return [];
         if (!(control.touched || control.dirty))
@@ -3052,19 +3070,35 @@ class UicDynamicFormComponent {
         return Object.keys(control.errors).map(errorKey => {
             const error = control.errors?.[errorKey];
             const mapper = this.errorMessages[errorKey];
-            return mapper ? mapper(error, field) : `${field.label ?? field.name} es inválido.`;
+            return mapper
+                ? mapper(error, field)
+                : this.i18n.translate('validation.invalid', {
+                    field: field.label ?? field.name,
+                });
         });
     }
     isListening(fieldName) {
         return this.listeningField === fieldName;
     }
     errorMessages = {
-        required: (_err, field) => `${field.label ?? field.name} es obligatorio.`,
-        min: (err, field) => `${field.label ?? field.name} debe ser mayor o igual a ${err.min}.`,
-        max: (err, field) => `${field.label ?? field.name} debe ser menor o igual a ${err.max}.`,
-        minlength: (err, field) => `${field.label ?? field.name} debe tener al menos ${err.requiredLength} caracteres.`,
-        maxlength: (err, field) => `${field.label ?? field.name} no puede superar ${err.requiredLength} caracteres.`,
-        pattern: (_err, field) => `${field.label ?? field.name} no tiene el formato correcto.`
+        required: (_err, field) => this.i18n.translate('validation.required', { field: field.label ?? field.name }),
+        min: (err, field) => this.i18n.translate('validation.min', {
+            field: field.label ?? field.name,
+            min: err.min,
+        }),
+        max: (err, field) => this.i18n.translate('validation.max', {
+            field: field.label ?? field.name,
+            max: err.max,
+        }),
+        minlength: (err, field) => this.i18n.translate('validation.minlength', {
+            field: field.label ?? field.name,
+            requiredLength: err.requiredLength,
+        }),
+        maxlength: (err, field) => this.i18n.translate('validation.maxlength', {
+            field: field.label ?? field.name,
+            requiredLength: err.requiredLength,
+        }),
+        pattern: (_err, field) => this.i18n.translate('validation.pattern', { field: field.label ?? field.name })
     };
     getInputColor(field, value) {
         const scale = field.internalColorScale;
@@ -3155,7 +3189,7 @@ class UicDynamicFormComponent {
             const updatedValue = `${currentValue}${needsSpace ? ' ' : ''}${transcript}`;
             target.value = updatedValue;
             target.dispatchEvent(new Event('input', { bubbles: true }));
-            const control = this.form.get(fieldName);
+            const control = this.form.get([fieldName]);
             if (control) {
                 this.ngZone.run(() => {
                     control.setValue(updatedValue);
@@ -3193,7 +3227,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          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\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              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [textareaAutoresize]=\"field.textareaResize\"\r\n              [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n              [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n              [rows]=\"field.resizeMinRows??3\"\r\n              [placeholder]=\"field.placeholder??field.label\"\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\" (click)=\"ta.focus()\">\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.showCounter) {\r\n              <span counter> {{ta.value.length}} \r\n                @if (field.maxLength){\r\n                  /{{field.maxLength}}\r\n                }\r\n              </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??'common.search_ellipsis'\"\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??'common.selected'\"\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;width:100%;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: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { 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          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\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              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [textareaAutoresize]=\"field.textareaResize\"\r\n              [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n              [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n              [rows]=\"field.resizeMinRows??3\"\r\n              [placeholder]=\"field.placeholder??field.label\"\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\" (click)=\"ta.focus()\">\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.showCounter) {\r\n              <span counter> {{ta.value.length}} \r\n                @if (field.maxLength){\r\n                  /{{field.maxLength}}\r\n                }\r\n              </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??'common.search_ellipsis'\"\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??'common.selected'\"\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;width:100%;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: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { 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,
@@ -3216,7 +3250,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          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\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              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [textareaAutoresize]=\"field.textareaResize\"\r\n              [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n              [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n              [rows]=\"field.resizeMinRows??3\"\r\n              [placeholder]=\"field.placeholder??field.label\"\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\" (click)=\"ta.focus()\">\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.showCounter) {\r\n              <span counter> {{ta.value.length}} \r\n                @if (field.maxLength){\r\n                  /{{field.maxLength}}\r\n                }\r\n              </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??'common.search_ellipsis'\"\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??'common.selected'\"\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;width:100%;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"] }]
+                        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          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\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              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [textareaAutoresize]=\"field.textareaResize\"\r\n              [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n              [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n              [rows]=\"field.resizeMinRows??3\"\r\n              [placeholder]=\"field.placeholder??field.label\"\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\" (click)=\"ta.focus()\">\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.showCounter) {\r\n              <span counter> {{ta.value.length}} \r\n                @if (field.maxLength){\r\n                  /{{field.maxLength}}\r\n                }\r\n              </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??'common.search_ellipsis'\"\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??'common.selected'\"\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;width:100%;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: [{
@@ -3254,7 +3288,10 @@ class UicFormWrapperComponent {
     fb = inject(FormBuilder);
     form = this.fb.group({});
     currentStep = 0;
+    effectiveSchema = { cols: 2, blocks: [{ fields: [] }] };
     schema;
+    fields = [];
+    cols = 2;
     externalData = {};
     loading = false;
     disabled = false;
@@ -3265,14 +3302,22 @@ class UicFormWrapperComponent {
     formChange = new EventEmitter();
     destroy$ = new Subject();
     ngOnInit() {
+        this.syncEffectiveSchema();
         this.buildForm();
+        this.updateExtenalData();
     }
     ngOnChanges(changes) {
         ;
+        const sourceChanged = (changes['schema'] && !changes['schema'].firstChange) ||
+            (changes['fields'] && !changes['fields'].firstChange && !this.schema) ||
+            (changes['cols'] && !changes['cols'].firstChange && !this.schema);
+        if (changes['schema'] || (changes['fields'] && !this.schema) || (changes['cols'] && !this.schema)) {
+            this.syncEffectiveSchema();
+        }
         if (changes['disabled'] && !changes["disabled"].firstChange) {
             this.updateDisabledState();
         }
-        if (changes['schema'] && !changes["schema"].firstChange) {
+        if (sourceChanged) {
             this.buildForm();
             this.updateExtenalData();
         }
@@ -3292,7 +3337,7 @@ class UicFormWrapperComponent {
         const newForm = this.fb.group({});
         fields.forEach(f => {
             const validators = this.mapValidatorsFromField(f);
-            let initial = this.initialValues[f.name] ?? null;
+            let initial = this.resolveInitialValue(f.name);
             if ((f.type === 'checkbox' || f.type === 'switch') && initial == null)
                 initial = false; // 
             if (f.type === 'slider' && initial == null)
@@ -3319,7 +3364,9 @@ class UicFormWrapperComponent {
         if (!this.form)
             return;
         Object.keys(this.form.controls).forEach(key => {
-            const control = this.form.get(key);
+            const control = this.getFieldControl(key);
+            if (!control)
+                return;
             const field = this.collectAllFields().find(f => f.name === key);
             if (this.disabled) {
                 control.disable({ emitEvent: false });
@@ -3333,9 +3380,9 @@ class UicFormWrapperComponent {
         });
     }
     updateExtenalData() {
-        if (!this.externalData || !this.schema?.blocks || Object.keys(this.externalData).length === 0)
+        if (!this.externalData || !this.effectiveSchema?.blocks || Object.keys(this.externalData).length === 0)
             return;
-        for (const block of this.schema.blocks) {
+        for (const block of this.effectiveSchema.blocks) {
             block.fields = this.updateFieldOptions(block);
         }
     }
@@ -3359,7 +3406,7 @@ class UicFormWrapperComponent {
     handleSubmit() {
         let result = { result: false, form: null };
         if (this.form.valid) {
-            result = { result: true, form: this.form.getRawValue() };
+            result = { result: true, form: this.toNestedValues(this.form.getRawValue()) };
         }
         else {
             this.form.markAllAsTouched();
@@ -3368,7 +3415,7 @@ class UicFormWrapperComponent {
         return result;
     }
     handleFormChange() {
-        this.formChange.emit(this.form.getRawValue());
+        this.formChange.emit(this.toNestedValues(this.form.getRawValue()));
     }
     // UTILITARIOS
     updateFieldOptions(block) {
@@ -3386,19 +3433,19 @@ class UicFormWrapperComponent {
         });
     }
     collectAllFields() {
-        if (!this.schema)
+        if (!this.effectiveSchema)
             return [];
-        return (this.schema.blocks ?? []).flatMap(b => b.fields ?? []);
+        return (this.effectiveSchema.blocks ?? []).flatMap(b => b.fields ?? []);
     }
     // FUNCIONES PÚBLICAS
     // ACTUALIZAR EL VALOR DE UN CAMPO
     updateFieldValue(name, value) {
-        this.form.get(name)?.patchValue(value, { emitEvent: false });
+        this.getFieldControl(name)?.patchValue(value, { emitEvent: false });
     }
     updateFieldConfig(name, config) {
-        if (!this.schema?.blocks?.length)
+        if (!this.effectiveSchema?.blocks?.length)
             return;
-        for (const block of this.schema.blocks) {
+        for (const block of this.effectiveSchema.blocks) {
             const index = block.fields.findIndex(field => field.name === name);
             if (index === -1)
                 continue;
@@ -3414,8 +3461,8 @@ class UicFormWrapperComponent {
             };
             block.fields[index] = updatedField;
             block.fields = [...block.fields];
-            this.schema.blocks = [...this.schema.blocks];
-            const control = this.form.get(name);
+            this.effectiveSchema.blocks = [...this.effectiveSchema.blocks];
+            const control = this.getFieldControl(name);
             if (control) {
                 control.setValidators(this.mapValidatorsFromField(updatedField));
                 control.updateValueAndValidity({ onlySelf: true, emitEvent: false });
@@ -3425,7 +3472,7 @@ class UicFormWrapperComponent {
     }
     // ACTUALIZAR EL ESTADO DE DISABLED DE UN CAMPO
     updateFieldDisabled(name, disabled) {
-        const control = this.form.get(name);
+        const control = this.getFieldControl(name);
         if (!control)
             return;
         // Actualizar estado del control reactivo
@@ -3435,14 +3482,14 @@ class UicFormWrapperComponent {
         else {
             control.enable({ emitEvent: false });
         }
-        if (this.updateSchemaField(name, { disabled }, this.schema.blocks))
+        if (this.updateSchemaField(name, { disabled }, this.effectiveSchema.blocks))
             return;
     }
     updateFieldLoading(name, loading) {
-        const control = this.form.get(name);
+        const control = this.getFieldControl(name);
         if (!control)
             return;
-        if (this.updateSchemaField(name, { loading }, this.schema.blocks))
+        if (this.updateSchemaField(name, { loading }, this.effectiveSchema.blocks))
             return;
     }
     submit() {
@@ -3468,10 +3515,10 @@ class UicFormWrapperComponent {
         const controlState = { value: this.newFieldInitialValue(field), disabled: !!field.disabled };
         this.form.addControl(field.name, this.fb.control(controlState, validators), { emitEvent: false });
         this.updateExtenalData();
-        if (this.insertField(field, this.schema.blocks, after))
+        if (this.insertField(field, this.effectiveSchema.blocks, after))
             return;
-        if (this.schema.blocks?.length) {
-            this.schema.blocks[0].fields.push(field);
+        if (this.effectiveSchema.blocks?.length) {
+            this.effectiveSchema.blocks[0].fields.push(field);
         }
     }
     removeFieldControl(name) {
@@ -3490,12 +3537,14 @@ class UicFormWrapperComponent {
             }
             return false;
         };
-        if (removeSchemaField(this.schema.blocks))
+        if (removeSchemaField(this.effectiveSchema.blocks))
             return;
     }
     resolveResetValue(name, field, hardReset) {
-        if (!hardReset && this.initialValues && Object.prototype.hasOwnProperty.call(this.initialValues, name)) {
-            return this.initialValues[name];
+        if (!hardReset) {
+            const initial = this.resolveInitialValue(name);
+            if (initial !== null && initial !== undefined)
+                return initial;
         }
         return this.blankValue(field);
     }
@@ -3517,7 +3566,7 @@ class UicFormWrapperComponent {
         }
     }
     newFieldInitialValue(field) {
-        let initial = this.initialValues[field.name] ?? null;
+        let initial = this.resolveInitialValue(field.name);
         if ((field.type === 'checkbox' || field.type === 'switch') && initial == null)
             initial = false;
         if (field.type === 'slider' && initial == null)
@@ -3552,8 +3601,73 @@ class UicFormWrapperComponent {
         }
         return false;
     }
+    getFieldControl(name) {
+        // Use array path so dots in field names are treated as literal keys.
+        return this.form.get([name]);
+    }
+    resolveInitialValue(name) {
+        if (!this.initialValues)
+            return null;
+        if (Object.prototype.hasOwnProperty.call(this.initialValues, name)) {
+            return this.initialValues[name];
+        }
+        const parts = name.split('.');
+        if (parts.length === 1)
+            return null;
+        let current = this.initialValues;
+        for (const part of parts) {
+            if (current == null || typeof current !== 'object' || !Object.prototype.hasOwnProperty.call(current, part)) {
+                return null;
+            }
+            current = current[part];
+        }
+        return current;
+    }
+    toNestedValues(values) {
+        const nested = {};
+        Object.entries(values ?? {}).forEach(([key, value]) => {
+            this.setNestedValue(nested, key, value);
+        });
+        return nested;
+    }
+    setNestedValue(target, key, value) {
+        const parts = key.split('.');
+        if (parts.length === 1) {
+            target[key] = value;
+            return;
+        }
+        let current = target;
+        for (let i = 0; i < parts.length - 1; i++) {
+            const part = parts[i];
+            const next = current[part];
+            if (next == null) {
+                current[part] = {};
+            }
+            else if (typeof next !== 'object' || Array.isArray(next)) {
+                // Fallback to flat key when path conflicts with a non-object value.
+                target[key] = value;
+                return;
+            }
+            current = current[part];
+        }
+        current[parts[parts.length - 1]] = value;
+    }
+    syncEffectiveSchema() {
+        if (this.schema) {
+            this.effectiveSchema = this.schema;
+            return;
+        }
+        this.effectiveSchema = {
+            cols: this.cols ?? 2,
+            blocks: [
+                {
+                    fields: [...(this.fields ?? [])]
+                }
+            ]
+        };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", externalData: "externalData", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of schema.blocks; track block.title) {\r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"schema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", fields: "fields", cols: "cols", externalData: "externalData", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track block.title) {\r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
             type: Component,
@@ -3561,9 +3675,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicSkeletonLoaderComponent,
                         UicButtonComponent,
                         UicTranslatePipe,
-                        ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of schema.blocks; track block.title) {\r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"schema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"] }]
+                        ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track block.title) {\r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input
+            }], fields: [{
+                type: Input
+            }], cols: [{
+                type: Input
             }], externalData: [{
                 type: Input
             }], loading: [{
@@ -3691,7 +3809,7 @@ class UicStepsFormComponent {
         return this.currentIdx === this.steps.length - 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >{{'step_form.back' | uicTranslate}}</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?('step_form.submit' | uicTranslate):('step_form.next' | uicTranslate)}}</ui-button>\r\n    </div>\r\n}\r\n", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >{{'step_form.back' | uicTranslate}}</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?('step_form.submit' | uicTranslate):('step_form.next' | uicTranslate)}}</ui-button>\r\n    </div>\r\n}\r\n", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, decorators: [{
             type: Component,
@@ -3882,7 +4000,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,
@@ -3891,7 +4009,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: [{
@@ -4477,11 +4595,11 @@ class UicModalComponent {
         this.modalRef.closeFloating(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \n    <div @pushTop class=\"uic_modal\" \n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n        (click)=\"$event.stopPropagation()\">\n        \n        @if ( myConfig.title) {\n            <div class=\"uic_modal-header\">\n                {{myConfig.title}}\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n            </div>\n        }\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n    </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"uic_modal\" \r\n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"uic_modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \n    <div @pushTop class=\"uic_modal\" \n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n        (click)=\"$event.stopPropagation()\">\n        \n        @if ( myConfig.title) {\n            <div class=\"uic_modal-header\">\n                {{myConfig.title}}\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n            </div>\n        }\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n    </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
+            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"uic_modal\" \r\n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"uic_modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -4821,7 +4939,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 == '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" }] });
+    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        <div [class]=\"'ui-trc-' + data.textColor \">\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        </div>\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,
@@ -4835,7 +4953,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 == '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"] }]
+                    ], template: "@if (data) {\r\n    @if (type == 'text' || !type) {\r\n        <div [class]=\"'ui-trc-' + data.textColor \">\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        </div>\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: [{
@@ -4862,6 +4980,7 @@ class UicPortletCardComponent {
     gap = 20;
     labelWeight = 400;
     valueWeight = 500;
+    valueSize = 14;
     switchValidation = [];
     finalData = [];
     ngOnInit() {
@@ -4885,13 +5004,13 @@ class UicPortletCardComponent {
     switchHandler(key, value) {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { title: "title", data: "data", layout: "layout", cols: "cols", gap: "gap", labelWeight: "labelWeight", valueWeight: "valueWeight", switchValidation: "switchValidation" }, ngImport: i0, template: "@if ( title) {\r\n    <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n    [class.portlet-vertical]=\"layout === 'vertical'\" \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n    [style]=\"'gap: ' + gap + 'px;'\" >\r\n    @for (item of finalData; track $index) {\r\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n            <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}:</div>\r\n            <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\">\r\n                <ui-item-value\r\n                    [type]=\"item.type??'text'\"\r\n                    [data]=\"item\"\r\n                    [switchValidation]=\"switchValidation\"\r\n                    (switchConfirmed)=\"switchHandler('xx', $event)\"\r\n                ></ui-item-value>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;text-align:left;gap:5px}.portlet-row-label{color:var(--grey-400)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { title: "title", data: "data", layout: "layout", cols: "cols", gap: "gap", labelWeight: "labelWeight", valueWeight: "valueWeight", valueSize: "valueSize", switchValidation: "switchValidation" }, ngImport: i0, template: "@if ( title) {\r\n    <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n    [class.portlet-vertical]=\"layout === 'vertical'\" \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n    [style]=\"'gap: ' + gap + 'px;'\" >\r\n    @for (item of finalData; track $index) {\r\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n            <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}:</div>\r\n            <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\" [style.fontSize.px]=\"valueSize\">\r\n                <ui-item-value\r\n                    [type]=\"item.type??'text'\"\r\n                    [data]=\"item\"\r\n                    [switchValidation]=\"switchValidation\"\r\n                    (switchConfirmed)=\"switchHandler('xx', $event)\"\r\n                ></ui-item-value>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;text-align:left;gap:5px}.portlet-row-label{color:var(--grey-500)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-portlet-card', imports: [
                         ItemValueComponent
-                    ], template: "@if ( title) {\r\n    <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n    [class.portlet-vertical]=\"layout === 'vertical'\" \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n    [style]=\"'gap: ' + gap + 'px;'\" >\r\n    @for (item of finalData; track $index) {\r\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n            <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}:</div>\r\n            <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\">\r\n                <ui-item-value\r\n                    [type]=\"item.type??'text'\"\r\n                    [data]=\"item\"\r\n                    [switchValidation]=\"switchValidation\"\r\n                    (switchConfirmed)=\"switchHandler('xx', $event)\"\r\n                ></ui-item-value>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;text-align:left;gap:5px}.portlet-row-label{color:var(--grey-400)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"] }]
+                    ], template: "@if ( title) {\r\n    <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n    [class.portlet-vertical]=\"layout === 'vertical'\" \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n    [style]=\"'gap: ' + gap + 'px;'\" >\r\n    @for (item of finalData; track $index) {\r\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n            <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}:</div>\r\n            <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\" [style.fontSize.px]=\"valueSize\">\r\n                <ui-item-value\r\n                    [type]=\"item.type??'text'\"\r\n                    [data]=\"item\"\r\n                    [switchValidation]=\"switchValidation\"\r\n                    (switchConfirmed)=\"switchHandler('xx', $event)\"\r\n                ></ui-item-value>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;text-align:left;gap:5px}.portlet-row-label{color:var(--grey-500)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], data: [{
@@ -4906,6 +5025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], valueWeight: [{
                 type: Input
+            }], valueSize: [{
+                type: Input
             }], switchValidation: [{
                 type: Input
             }] } });
@@ -4935,7 +5056,7 @@ class UicShortTableComponent {
             .filter((p) => p !== null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicShortTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicShortTableComponent, isStandalone: true, selector: "ui-short-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<ui-portlet-card \r\n    [gap]=\"20\" \r\n    layout=\"vertical\" \r\n    [cols]=\"cols\" \r\n    [data]=\"portlet\">\r\n</ui-portlet-card>", styles: [".row-body{padding:10px;border:solid 1px var(--grey-200)}\n"], dependencies: [{ kind: "component", type: UicPortletCardComponent, selector: "ui-portlet-card", inputs: ["title", "data", "layout", "cols", "gap", "labelWeight", "valueWeight", "switchValidation"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicShortTableComponent, isStandalone: true, selector: "ui-short-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<ui-portlet-card \r\n    [gap]=\"20\" \r\n    layout=\"vertical\" \r\n    [cols]=\"cols\" \r\n    [data]=\"portlet\">\r\n</ui-portlet-card>", styles: [".row-body{padding:10px;border:solid 1px var(--grey-200)}\n"], dependencies: [{ kind: "component", type: UicPortletCardComponent, selector: "ui-portlet-card", inputs: ["title", "data", "layout", "cols", "gap", "labelWeight", "valueWeight", "valueSize", "switchValidation"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicShortTableComponent, decorators: [{
             type: Component,
@@ -5313,11 +5434,11 @@ class UicSkeletonCardsComponent {
         return this.cards > 0 ? this.cards : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n    @for (card of [].constructor(cardsCount); track $index) {\n        <div class=\"skeleton-card skeleton-gradient\"></div>\n    }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\r\n    @for (card of [].constructor(cardsCount); track $index) {\r\n        <div class=\"skeleton-card skeleton-gradient\"></div>\r\n    }\r\n</div>\r\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n    @for (card of [].constructor(cardsCount); track $index) {\n        <div class=\"skeleton-card skeleton-gradient\"></div>\n    }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
+            args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\r\n    @for (card of [].constructor(cardsCount); track $index) {\r\n        <div class=\"skeleton-card skeleton-gradient\"></div>\r\n    }\r\n</div>\r\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
         }], propDecorators: { cards: [{
                 type: Input
             }], gap: [{
@@ -6525,11 +6646,11 @@ class UicProgressBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
+            args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
         }], propDecorators: { progress: [{
                 type: Input
             }], color: [{