npm - ui-core-abv - Versions diffs - 0.3.25 → 0.3.29 - Mend

ui-core-abv 0.3.25 → 0.3.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fesm2022/ui-core-abv.mjs CHANGED Viewed

@@ -1841,6 +1841,8 @@ class UicPhoneInputComponent extends base$1 {
     selectedCountry;
     filteredCountries = [];
     dropdownId = `phone-dropdown-${Math.random().toString(36).slice(2, 8)}`;
+    pendingNormalizedValue = null;
+    changeRegistered = false;
     _countries = PHONE_COUNTRIES;
     host = inject((ElementRef));
     overlay = inject(Overlay);
@@ -1867,16 +1869,29 @@ class UicPhoneInputComponent extends base$1 {
         this.closeDropdown();
     }
     writeValue(value) {
-        super.writeValue(value);
-        if (!value) {
+        const normalizedValue = typeof value === 'string' ? this.parseStringValue(value) : value;
+        this.pendingNormalizedValue = typeof value === 'string' ? normalizedValue : null;
+        super.writeValue(normalizedValue);
+        if (!normalizedValue) {
             this.phoneNumber = '';
             this.selectedCountry = this.getDefaultCountry();
             return;
         }
-        const matchedCountry = this.countries.find(country => country.iso2 === value.countryIso2) ??
-            this.countries.find(country => country.dialCode === value.dialCode);
+        const matchedCountry = this.countries.find(country => country.iso2 === normalizedValue.countryIso2) ??
+            this.countries.find(country => country.dialCode === normalizedValue.dialCode);
         this.selectedCountry = matchedCountry ?? this.getDefaultCountry();
-        this.phoneNumber = (value.nationalNumber ?? '').replace(/\D/g, '');
+        this.phoneNumber = (normalizedValue.nationalNumber ?? '').replace(/\D/g, '');
+        if (typeof value === 'string') {
+            this.propagateNormalizedValue(normalizedValue);
+        }
+    }
+    registerOnChange(fn) {
+        super.registerOnChange(fn);
+        this.changeRegistered = true;
+        if (this.pendingNormalizedValue) {
+            this.onChange(this.pendingNormalizedValue);
+            this.pendingNormalizedValue = null;
+        }
     }
     toggleDropdown() {
         if (this.disabled || this.loading)
@@ -1999,6 +2014,44 @@ class UicPhoneInputComponent extends base$1 {
             .find((country) => !!country);
         return preferred ?? this.countries[0];
     }
+    parseStringValue(value) {
+        const digits = value.replace(/\D/g, '');
+        if (!digits)
+            return null;
+        const matchedCountry = this.findCountryByPrefix(digits) ?? this.getDefaultCountry();
+        const nationalNumber = digits.startsWith(matchedCountry.dialCode)
+            ? digits.slice(matchedCountry.dialCode.length)
+            : digits;
+        return {
+            countryIso2: matchedCountry.iso2,
+            dialCode: matchedCountry.dialCode,
+            nationalNumber,
+            internationalNumber: `+${matchedCountry.dialCode}${nationalNumber}`
+        };
+    }
+    findCountryByPrefix(number) {
+        return this.countries.reduce((best, country) => {
+            if (!number.startsWith(country.dialCode))
+                return best;
+            if (!best || country.dialCode.length > best.dialCode.length) {
+                return country;
+            }
+            return best;
+        }, undefined);
+    }
+    propagateNormalizedValue(value) {
+        if (typeof value === 'string')
+            return;
+        this.value = value;
+        this.valueChange.emit(value);
+        if (this.changeRegistered) {
+            this.onChange(value);
+            this.pendingNormalizedValue = null;
+        }
+        else {
+            this.pendingNormalizedValue = value;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPhoneInputComponent, isStandalone: true, selector: "ui-phone-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", placeholder: "placeholder", disabled: "disabled", loading: "loading", preferredCountries: "preferredCountries", flagPath: "flagPath", countries: "countries" }, providers: [
             {
@@ -2524,7 +2577,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)  ) {\n        @let currentValue = form.get(field.name)?.value ?? '';\n        @let inputColor = getInputColor(field, currentValue);\n        <ui-input \n          [error]=\"getErrorMessages(field)[0]\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [disabled]=\"!!form.get(field.name)?.disabled\"\n          [internalIconColor]=\"inputColor\"\n          [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\" >\n            <input #inp\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n              cols=\"4\"\r\n            ></textarea>\r\n            @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n              @let listening = isListening(field.name);\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n            }\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-input>\r\n      }\r\n      @if ( field.type === 'phone' ) {\r\n        <ui-phone-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" \r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n          >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"field.searchFn\"\r\n          [itemDisplayFn]=\"field.searchDisplayFn\"\r\n          [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n          [placeholder]=\"field.placeholder??'Buscar...'\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if ( ['checkbox','switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\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", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\n        @let currentValue = form.get(field.name)?.value ?? '';\n        @let inputColor = getInputColor(field, currentValue);\n        <ui-input \n          [error]=\"getErrorMessages(field)[0]\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [disabled]=\"!!form.get(field.name)?.disabled\"\n          [internalIconColor]=\"inputColor\"\n          [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\" >\n            <input #inp\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n              cols=\"4\"\r\n            ></textarea>\r\n            @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n              @let listening = isListening(field.name);\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n            }\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-input>\r\n      }\r\n      @if ( field.type === 'phone' ) {\r\n        <ui-phone-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" \r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n          >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"field.searchFn\"\r\n          [itemDisplayFn]=\"field.searchDisplayFn\"\r\n          [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n          [placeholder]=\"field.placeholder??'Buscar...'\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if ( ['checkbox','switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.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: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\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", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
             type: Component,
@@ -2544,7 +2597,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)  ) {\n        @let currentValue = form.get(field.name)?.value ?? '';\n        @let inputColor = getInputColor(field, currentValue);\n        <ui-input \n          [error]=\"getErrorMessages(field)[0]\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [disabled]=\"!!form.get(field.name)?.disabled\"\n          [internalIconColor]=\"inputColor\"\n          [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\" >\n            <input #inp\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n              cols=\"4\"\r\n            ></textarea>\r\n            @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n              @let listening = isListening(field.name);\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n            }\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-input>\r\n      }\r\n      @if ( field.type === 'phone' ) {\r\n        <ui-phone-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" \r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n          >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"field.searchFn\"\r\n          [itemDisplayFn]=\"field.searchDisplayFn\"\r\n          [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n          [placeholder]=\"field.placeholder??'Buscar...'\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if ( ['checkbox','switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\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)  ) {\n        @let currentValue = form.get(field.name)?.value ?? '';\n        @let inputColor = getInputColor(field, currentValue);\n        <ui-input \n          [error]=\"getErrorMessages(field)[0]\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [disabled]=\"!!form.get(field.name)?.disabled\"\n          [internalIconColor]=\"inputColor\"\n          [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\" >\n            <input #inp\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"\r\n              cols=\"4\"\r\n            ></textarea>\r\n            @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n              @let listening = isListening(field.name);\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n            }\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-input>\r\n      }\r\n      @if ( field.type === 'phone' ) {\r\n        <ui-phone-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" \r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n          >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"field.searchFn\"\r\n          [itemDisplayFn]=\"field.searchDisplayFn\"\r\n          [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n          [placeholder]=\"field.placeholder??'Buscar...'\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if ( ['checkbox','switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.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: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
                 type: Input
             }], form: [{
@@ -3402,6 +3455,7 @@ class UicTablePaginationComponent {
     totalPages = 1;
     size = 25;
     loading = false;
+    showText = true;
     visiblePages = 3;
     pagesInView = [];
     pageChange = new EventEmitter();
@@ -3440,11 +3494,11 @@ class UicTablePaginationComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "uic-table-pagination", inputs: { buttonSize: "buttonSize", currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "uic-table-pagination", inputs: { buttonSize: "buttonSize", currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading", showText: "showText" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == 1\" \r\n        (click)=\"changePage(currentPage - 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?'Anterior':''\"\r\n        [iconOnly]=\"!showText\" \r\n        icon=\"ri-arrow-left-line\" > \r\n    </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == totalPages\" \r\n        (click)=\"changePage(currentPage + 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?'Siguiente':''\"\r\n        [iconOnly]=\"!showText\" \r\n        rightIcon=\"ri-arrow-right-line\" > \r\n    </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"] }]
+            args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == 1\" \r\n        (click)=\"changePage(currentPage - 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?'Anterior':''\"\r\n        [iconOnly]=\"!showText\" \r\n        icon=\"ri-arrow-left-line\" > \r\n    </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == totalPages\" \r\n        (click)=\"changePage(currentPage + 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?'Siguiente':''\"\r\n        [iconOnly]=\"!showText\" \r\n        rightIcon=\"ri-arrow-right-line\" > \r\n    </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"] }]
         }], propDecorators: { buttonSize: [{
                 type: Input
             }], currentPage: [{
@@ -3455,6 +3509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], loading: [{
                 type: Input
+            }], showText: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], sizeChange: [{
@@ -3464,11 +3520,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class UicTableListComponent {
     list = [];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "uic-table-list", inputs: { list: "list" }, ngImport: i0, template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "uic-table-list", inputs: { list: "list" }, ngImport: i0, template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uic-table-list', imports: [], template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] }]
+            args: [{ selector: 'uic-table-list', imports: [], template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] }]
         }], propDecorators: { list: [{
                 type: Input
             }] } });
@@ -3672,6 +3728,7 @@ class UicTableComponent {
     searchOnKeydown = false;
     showEmptyMessage = true;
     showSearchButton = false;
+    showTextPagination = true;
     emptyMessage = 'No hay elementos';
     searcherShowButtonText = false;
     action = new EventEmitter();
@@ -3689,8 +3746,8 @@ class UicTableComponent {
         return col?.value?.toString() ?? '';
     }
     isChecked(data, key) {
-        const col = data.find(col => col.key == key);
-        return col?.checked ?? false;
+        const cell = data.find(c => c.key === key);
+        return !!cell?.checked;
     }
     getMoreActions(actions, row) {
         return actions
@@ -3789,8 +3846,11 @@ class UicTableComponent {
     areAllSelected() {
         this.allSelected = this.checkedIds.size === this.data.length && this.data.length > 0;
     }
-    ngOnChanges() {
+    ngOnChanges(change) {
         this.areAllSelected();
+        if (change['data']) {
+            console.log("cambiado");
+        }
     }
     doAction(rowId, key) {
         this.action.emit({ rowId, key });
@@ -3799,8 +3859,11 @@ class UicTableComponent {
         this.checkedIds.clear();
         this.checkedChange.emit([]);
     }
+    switchHandler(key, value, columName) {
+        this.switchChange.emit({ key, value, columName });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ui-table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher \r\n            [showSearchButton]=\"showSearchButton\" \r\n            [showButtonText]=\"searcherShowButtonText\" \r\n            [searchOnKeydown]=\"searchOnKeydown\"\r\n            (filter)=\"search($event)\" \r\n            [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"ui-filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.ui-tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'text') {\r\n                                            @if( getIcon(row.data,header.key) ){\r\n                                                <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n                                            }\r\n                                            {{  getValue(row.data,header.key) }} \r\n                                        }\r\n                                        @if (header.type == 'icon-list') {\r\n                                            @for (alert of getList(row.data,header.key); track $index) {\r\n                                                <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n                                            }\r\n                                        }\r\n                                        @else if (header.type == 'list'){\r\n                                            <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                        }\r\n                                        @else if (header.type == 'user'){\r\n                                            <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (header.type == 'status'){\r\n                                            <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'switch'){\r\n                                            <div>\r\n                                                <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchChange.emit({key:row.id,value:$event})\"></ui-switch>    \r\n                                            </div>\r\n                                        }\r\n                                        @else if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.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)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ui-table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher \r\n            [showSearchButton]=\"showSearchButton\" \r\n            [showButtonText]=\"searcherShowButtonText\" \r\n            [searchOnKeydown]=\"searchOnKeydown\"\r\n            (filter)=\"search($event)\" \r\n            [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"ui-filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.ui-tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'text') {\r\n                                            @if( getIcon(row.data,header.key) ){\r\n                                                <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n                                            }\r\n                                            {{  getValue(row.data,header.key) }} \r\n                                        }\r\n                                        @if (header.type == 'icon-list') {\r\n                                            @for (alert of getList(row.data,header.key); track $index) {\r\n                                                <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n                                            }\r\n                                        }\r\n                                        @else if (header.type == 'list'){\r\n                                            <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                        }\r\n                                        @else if (header.type == 'user'){\r\n                                            <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (header.type == 'status'){\r\n                                            <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'switch'){\r\n                                            <div>\r\n                                                <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch>    \r\n                                            </div>\r\n                                        }\r\n                                        @else if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.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)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
             type: Component,
@@ -3808,7 +3871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicTableUserComponent, UicTableListComponent, UicActionButtonComponent,
                         UicTableUicSearcherComponent, UicStatusLabelComponent,
                         UicSwichComponent,
-                        UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"ui-table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher \r\n            [showSearchButton]=\"showSearchButton\" \r\n            [showButtonText]=\"searcherShowButtonText\" \r\n            [searchOnKeydown]=\"searchOnKeydown\"\r\n            (filter)=\"search($event)\" \r\n            [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"ui-filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.ui-tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'text') {\r\n                                            @if( getIcon(row.data,header.key) ){\r\n                                                <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n                                            }\r\n                                            {{  getValue(row.data,header.key) }} \r\n                                        }\r\n                                        @if (header.type == 'icon-list') {\r\n                                            @for (alert of getList(row.data,header.key); track $index) {\r\n                                                <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n                                            }\r\n                                        }\r\n                                        @else if (header.type == 'list'){\r\n                                            <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                        }\r\n                                        @else if (header.type == 'user'){\r\n                                            <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (header.type == 'status'){\r\n                                            <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'switch'){\r\n                                            <div>\r\n                                                <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchChange.emit({key:row.id,value:$event})\"></ui-switch>    \r\n                                            </div>\r\n                                        }\r\n                                        @else if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.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)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"] }]
+                        UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"ui-table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher \r\n            [showSearchButton]=\"showSearchButton\" \r\n            [showButtonText]=\"searcherShowButtonText\" \r\n            [searchOnKeydown]=\"searchOnKeydown\"\r\n            (filter)=\"search($event)\" \r\n            [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"ui-filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.ui-tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'text') {\r\n                                            @if( getIcon(row.data,header.key) ){\r\n                                                <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n                                            }\r\n                                            {{  getValue(row.data,header.key) }} \r\n                                        }\r\n                                        @if (header.type == 'icon-list') {\r\n                                            @for (alert of getList(row.data,header.key); track $index) {\r\n                                                <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n                                            }\r\n                                        }\r\n                                        @else if (header.type == 'list'){\r\n                                            <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                        }\r\n                                        @else if (header.type == 'user'){\r\n                                            <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (header.type == 'status'){\r\n                                            <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'switch'){\r\n                                            <div>\r\n                                                <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch>    \r\n                                            </div>\r\n                                        }\r\n                                        @else if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.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)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -3853,6 +3916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], showSearchButton: [{
                 type: Input
+            }], showTextPagination: [{
+                type: Input
             }], emptyMessage: [{
                 type: Input
             }], searcherShowButtonText: [{