ui-core-abv 0.1.96 → 0.2.0

package/fesm2022/ui-core-abv.mjs

@@ -1,14 +1,14 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, DestroyRef, TemplateRef, ContentChild, createComponent, Pipe, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
+import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, InjectionToken, TemplateRef, ContentChild, createComponent, Pipe, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
-import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, takeUntil } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, takeUntil, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
 
 class UicButtonComponent {
@@ -521,6 +521,18 @@ class UicDatePickerComponent extends base$6 {
         this.maxDate = this.parseDateLimits(this.max);
         this.applyValue(this.value);
     }
+    ngOnChanges(changes) {
+        if (changes['min'] || changes['max']) {
+            this.minDate = this.parseDateLimits(this.min);
+            this.maxDate = this.parseDateLimits(this.max);
+            if (this.paintedDate && !this.isWithinLimits(this.paintedDate)) {
+                this.clearValue(true);
+            }
+            else if (this.value) {
+                this.applyValue(this.value);
+            }
+        }
+    }
     // --- Overlay ---
     overlayPositions = [
         { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
@@ -700,18 +712,33 @@ class UicDatePickerComponent extends base$6 {
     }
     // MÍNIMO Y MÁXIMO
     parseDateLimits(date) {
-        if (date) {
-            const parsed = new Date(date);
-            if (isNaN(parsed.getTime())) {
-                return null;
-            }
-            else {
-                return this.normalizeDate(parsed);
-            }
+        if (!date) {
+            return null;
         }
-        else {
+        if (date instanceof Date) {
+            return isNaN(date.getTime()) ? null : this.normalizeDate(date);
+        }
+        const trimmed = date.trim();
+        if (!trimmed) {
             return null;
         }
+        const isoMatch = trimmed.match(/^(\d{4})-(\d{1,2})-(\d{1,2})(?:$|[T\s])/);
+        if (isoMatch) {
+            const [, year, month, day] = isoMatch;
+            const parsed = new Date(+year, +month - 1, +day);
+            return isNaN(parsed.getTime()) ? null : this.normalizeDate(parsed);
+        }
+        const isoMonthMatch = trimmed.match(/^(\d{4})-(\d{1,2})(?:$|[T\s])/);
+        if (isoMonthMatch) {
+            const [, year, month] = isoMonthMatch;
+            const baseDay = this.monthDay === 'last'
+                ? new Date(+year, +month, 0).getDate()
+                : 1;
+            const parsed = new Date(+year, +month - 1, baseDay);
+            return isNaN(parsed.getTime()) ? null : this.normalizeDate(parsed);
+        }
+        const parsed = new Date(trimmed);
+        return isNaN(parsed.getTime()) ? null : this.normalizeDate(parsed);
     }
     cleanInput() {
         this.clearValue(true);
@@ -833,10 +860,11 @@ class UicDatePickerComponent extends base$6 {
         return candidate;
     }
     isWithinLimits(date) {
-        if (this.minDate && date < this.minDate) {
+        const normalized = this.normalizeDate(date);
+        if (this.minDate && normalized < this.minDate) {
             return false;
         }
-        if (this.maxDate && date > this.maxDate) {
+        if (this.maxDate && normalized > this.maxDate) {
             return false;
         }
         return true;
@@ -874,7 +902,7 @@ class UicDatePickerComponent extends base$6 {
                 useExisting: forwardRef(() => UicDatePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          [placeholder]=\"inputPlaceholder\"\r\n          [value]=\"displayValue\"\r\n          inputmode=\"numeric\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInputChange($event)\"\r\n          (blur)=\"onInputBlur()\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              [class.day-selected]=\"isSelectedMonth(i)\"\r\n              [disabled]=\"isMonthDisabled(i)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n</ui-input-wrapper>", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--disabled-color)}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
+        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          [placeholder]=\"inputPlaceholder\"\r\n          [value]=\"displayValue\"\r\n          inputmode=\"numeric\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInputChange($event)\"\r\n          (blur)=\"onInputBlur()\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              [class.day-selected]=\"isSelectedMonth(i)\"\r\n              [disabled]=\"isMonthDisabled(i)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n</ui-input-wrapper>", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, decorators: [{
             type: Component,
@@ -884,7 +912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicDatePickerComponent),
                             multi: true
                         }
-                    ], template: "<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          [placeholder]=\"inputPlaceholder\"\r\n          [value]=\"displayValue\"\r\n          inputmode=\"numeric\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInputChange($event)\"\r\n          (blur)=\"onInputBlur()\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              [class.day-selected]=\"isSelectedMonth(i)\"\r\n              [disabled]=\"isMonthDisabled(i)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n</ui-input-wrapper>", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--disabled-color)}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
+                    ], template: "<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp \" >\r\n      <div  class=\"fakeinput \" \r\n        [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n        @if (internalIcon) {\r\n        <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n        }\r\n        <input\r\n          type=\"text\"\r\n          [disabled]=\"disabled\"\r\n          [placeholder]=\"inputPlaceholder\"\r\n          [value]=\"displayValue\"\r\n          inputmode=\"numeric\"\r\n          autocomplete=\"off\"\r\n          (input)=\"onInputChange($event)\"\r\n          (blur)=\"onInputBlur()\"\r\n          (keydown)=\"onInputKeydown($event)\"\r\n          (click)=\"openCalendar()\"\r\n        />\r\n      </div>\r\n      <!-- Overlay Template -->\r\n      <ng-template #calendarTemplate>\r\n        <div class=\"calendar\">\r\n          <div class=\"calendar-header\">\r\n            <span (click)=\"changeView()\">\r\n              @if (view === 'days') {\r\n              {{ monthName }} de {{ selectedYear }}\r\n              } @else if (view === 'months') {\r\n              {{ selectedYear }}\r\n              } @else {\r\n              {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n              }\r\n            </span>\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-up-line\"\r\n              (click)=\"prev()\"\r\n              >&lt;</ui-button\r\n            >\r\n            <ui-button\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              [iconOnly]=\"true\"\r\n              icon=\"ri-arrow-drop-down-line\"\r\n              (click)=\"next()\"\r\n              >&gt;</ui-button\r\n            >\r\n          </div>\r\n          <!-- Vista Days -->\r\n          @if (view === 'days') {\r\n          <div class=\"calendar-grid\">\r\n            @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n            <div class=\"weekday\">{{ d }}</div>\r\n            } @for (week of monthWeeks; track $index) { @for (day of week;\r\n            track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [disabled]=\"\r\n                (minDate && day ? day < minDate : false) ||\r\n                (maxDate && day ? day > maxDate : false)\r\n              \"\r\n              [class.today]=\"isToday(day)\"\r\n              [class.day-selected]=\"isPainted(day)\"\r\n              [class.empty]=\"!day\"\r\n              (click)=\"day && selectDate(day)\"\r\n            >\r\n              {{ day?.getDate() }}\r\n            </button>\r\n            } }\r\n          </div>\r\n          }\r\n          <!-- Vista Months -->\r\n          @if (view === 'months') {\r\n          <div class=\"calendar-grid months\">\r\n            @for (m of months; let i = $index; track i) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"isThisMonth(m)\"\r\n              [class.day-selected]=\"isSelectedMonth(i)\"\r\n              [disabled]=\"isMonthDisabled(i)\"\r\n              (click)=\"selectMonth(i)\"\r\n            >\r\n              {{ m }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Vista Years -->\r\n          @if (view === 'years') {\r\n          <div class=\"calendar-grid years\">\r\n            @for (y of decadeRange; track $index) {\r\n            <button\r\n              class=\"day\"\r\n              [class.today]=\"y == currentYear\"\r\n              (click)=\"selectYear(y)\"\r\n            >\r\n              {{ y }}\r\n            </button>\r\n            }\r\n          </div>\r\n          }\r\n          <div class=\"calendar-footer\">\r\n            <ui-button\r\n              color=\"red\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"cleanInput()\"\r\n              >Limpiar</ui-button\r\n            >\r\n            <ui-button\r\n              color=\"blue\"\r\n              size=\"s\"\r\n              type=\"ghost\"\r\n              (click)=\"pickToday()\"\r\n              >Hoy</ui-button\r\n            >\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n</ui-input-wrapper>", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -1001,7 +1029,7 @@ class UicPoolOptionsComponent extends base$5 {
                 useExisting: forwardRef(() => UicPoolOptionsComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper \">\n    @if (icon) {\n        <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\n    }\n    <div  class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\n        @if (label) {\n        <div class=\"label  inputlabel\"  [class.font-error]=\"error\">{{label}} </div>\n        }\n        <div>\n            <div class=\"pool-wrapper\" > \n                @for (opt of options; track opt.id) {\n                    <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\"  [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\n                }\n    \n            </div>\n            <!-- BLOQUE DE LISTTA DETALLADA -->\n            @if(enabledListView && selectedValues.length > 0){\n                <h2 class=\"pool-selected-title\">{{listViewTitle}}</h2>\n                <div>\n                    @for (item of selectedValues; track item.id) {\n                        @if ( !disabled || item.detail  ){\n\n                            <div class=\"pool-selected\"> \n                                <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\n                                <div class=\"pool-selected-input\">\n                                    <ui-input [disabled]=\"disabled\">\n                                        <input [disabled]=\"disabled\" placeholder=\"Detalle\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\n                                    </ui-input>\n                                    @if (!disabled) {\n                                        <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\n                                            <i class=\"ri-delete-bin-5-line\" ></i>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n            }\n        </div>\n        <!-- ALERTS -->\n        @if (error) {\n            <div class=\"fakeinput-alert f-red\">{{error}}</div>\n        }\n        @if (tip) {\n            <div class=\"fakeinput-alert tip\">{{tip}}</div>\n        }\n    </div>\n</div>\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n    @if (icon) {\r\n        <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n    }\r\n    <div  class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n        @if (label) {\r\n        <div class=\"label  inputlabel\"  [class.font-error]=\"error\">{{label}} </div>\r\n        }\r\n        <div>\r\n            <div class=\"pool-wrapper\" > \r\n                @for (opt of options; track opt.id) {\r\n                    <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\"  [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n                }\r\n    \r\n            </div>\r\n            <!-- BLOQUE DE LISTTA DETALLADA -->\r\n            @if(enabledListView && selectedValues.length > 0){\r\n                <h2 class=\"pool-selected-title\">{{listViewTitle}}</h2>\r\n                <div>\r\n                    @for (item of selectedValues; track item.id) {\r\n                        @if ( !disabled || item.detail  ){\r\n\r\n                            <div class=\"pool-selected\"> \r\n                                <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n                                <div class=\"pool-selected-input\">\r\n                                    <ui-input [disabled]=\"disabled\">\r\n                                        <input [disabled]=\"disabled\" placeholder=\"Detalle\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n                                    </ui-input>\r\n                                    @if (!disabled) {\r\n                                        <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n                                            <i class=\"ri-delete-bin-5-line\" ></i>\r\n                                        </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n        <!-- ALERTS -->\r\n        @if (error) {\r\n            <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n        }\r\n        @if (tip) {\r\n            <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPoolOptionsComponent, decorators: [{
             type: Component,
@@ -1011,7 +1039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicPoolOptionsComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"input-wrapper \">\n    @if (icon) {\n        <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\n    }\n    <div  class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\n        @if (label) {\n        <div class=\"label  inputlabel\"  [class.font-error]=\"error\">{{label}} </div>\n        }\n        <div>\n            <div class=\"pool-wrapper\" > \n                @for (opt of options; track opt.id) {\n                    <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\"  [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\n                }\n    \n            </div>\n            <!-- BLOQUE DE LISTTA DETALLADA -->\n            @if(enabledListView && selectedValues.length > 0){\n                <h2 class=\"pool-selected-title\">{{listViewTitle}}</h2>\n                <div>\n                    @for (item of selectedValues; track item.id) {\n                        @if ( !disabled || item.detail  ){\n\n                            <div class=\"pool-selected\"> \n                                <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\n                                <div class=\"pool-selected-input\">\n                                    <ui-input [disabled]=\"disabled\">\n                                        <input [disabled]=\"disabled\" placeholder=\"Detalle\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\n                                    </ui-input>\n                                    @if (!disabled) {\n                                        <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\n                                            <i class=\"ri-delete-bin-5-line\" ></i>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n            }\n        </div>\n        <!-- ALERTS -->\n        @if (error) {\n            <div class=\"fakeinput-alert f-red\">{{error}}</div>\n        }\n        @if (tip) {\n            <div class=\"fakeinput-alert tip\">{{tip}}</div>\n        }\n    </div>\n</div>\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
+                    ], template: "<div class=\"input-wrapper \">\r\n    @if (icon) {\r\n        <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n    }\r\n    <div  class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n        @if (label) {\r\n        <div class=\"label  inputlabel\"  [class.font-error]=\"error\">{{label}} </div>\r\n        }\r\n        <div>\r\n            <div class=\"pool-wrapper\" > \r\n                @for (opt of options; track opt.id) {\r\n                    <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\"  [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n                }\r\n    \r\n            </div>\r\n            <!-- BLOQUE DE LISTTA DETALLADA -->\r\n            @if(enabledListView && selectedValues.length > 0){\r\n                <h2 class=\"pool-selected-title\">{{listViewTitle}}</h2>\r\n                <div>\r\n                    @for (item of selectedValues; track item.id) {\r\n                        @if ( !disabled || item.detail  ){\r\n\r\n                            <div class=\"pool-selected\"> \r\n                                <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n                                <div class=\"pool-selected-input\">\r\n                                    <ui-input [disabled]=\"disabled\">\r\n                                        <input [disabled]=\"disabled\" placeholder=\"Detalle\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n                                    </ui-input>\r\n                                    @if (!disabled) {\r\n                                        <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n                                            <i class=\"ri-delete-bin-5-line\" ></i>\r\n                                        </div>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n        <!-- ALERTS -->\r\n        @if (error) {\r\n            <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n        }\r\n        @if (tip) {\r\n            <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -2104,7 +2132,7 @@ class UicFileInputComponent extends base {
                 useExisting: forwardRef(() => UicFileInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<ui-input-wrapper\n    [icon]=\"icon\"\n    [iconColor]=\"iconColor\"\n    [label]=\"label\"\n    [error]=\"error\"\n    [tip]=\"tip\"\n    [disabled]=\"disabled\">\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\n        <input\n            #fileInput\n            class=\"fileinput-native\"\n            type=\"file\"\n            (change)=\"onNativeInputChange($event)\"\n            [attr.multiple]=\"multy ? '' : null\"\n            [attr.accept]=\"acceptAttribute\"\n            [disabled]=\"disabled || loading\"\n        />\n        @if (internalIcon) {\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\n        }\n        <div class=\"fileinput-content\" >\n            @if (!disabled && !loading) {\n                <ui-button\n                    type=\"bordered\"\n                    color=\"black\"\n                    size=\"s\"\n                    (click)=\"openFileBrowser()\"\n                >Seleccionar</ui-button>\n            }\n            <div\n                class=\"fileinput-reel\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event)\"\n            >\n                @if (!files.length) {\n                    <div class=\"fileinput-empty\">\n                        Aun no hay archivos\n                    </div>\n                } @else {\n                    @for (item of files; track $index) {\n                        <div class=\"fileinput-item\">\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\n                            <span class=\"fileinput-item__name\">{{item.name}}</span>\n                            <ui-button\n                                size=\"s\"\n                                [iconOnly]=\"true\"\n                                type=\"ghost\"\n                                icon=\"ri-close-line\"\n                                (click)=\"removeFile($index)\"\n                                [disabled]=\"disabled || loading\"\n                            ></ui-button>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\r\n            #fileInput\r\n            class=\"fileinput-native\"\r\n            type=\"file\"\r\n            (change)=\"onNativeInputChange($event)\"\r\n            [attr.multiple]=\"multy ? '' : null\"\r\n            [attr.accept]=\"acceptAttribute\"\r\n            [disabled]=\"disabled || loading\"\r\n        />\r\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, decorators: [{
             type: Component,
@@ -2114,7 +2142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicFileInputComponent),
                             multi: true
                         }
-                    ], template: "\n<ui-input-wrapper\n    [icon]=\"icon\"\n    [iconColor]=\"iconColor\"\n    [label]=\"label\"\n    [error]=\"error\"\n    [tip]=\"tip\"\n    [disabled]=\"disabled\">\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\n        <input\n            #fileInput\n            class=\"fileinput-native\"\n            type=\"file\"\n            (change)=\"onNativeInputChange($event)\"\n            [attr.multiple]=\"multy ? '' : null\"\n            [attr.accept]=\"acceptAttribute\"\n            [disabled]=\"disabled || loading\"\n        />\n        @if (internalIcon) {\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\n        }\n        <div class=\"fileinput-content\" >\n            @if (!disabled && !loading) {\n                <ui-button\n                    type=\"bordered\"\n                    color=\"black\"\n                    size=\"s\"\n                    (click)=\"openFileBrowser()\"\n                >Seleccionar</ui-button>\n            }\n            <div\n                class=\"fileinput-reel\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event)\"\n            >\n                @if (!files.length) {\n                    <div class=\"fileinput-empty\">\n                        Aun no hay archivos\n                    </div>\n                } @else {\n                    @for (item of files; track $index) {\n                        <div class=\"fileinput-item\">\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\n                            <span class=\"fileinput-item__name\">{{item.name}}</span>\n                            <ui-button\n                                size=\"s\"\n                                [iconOnly]=\"true\"\n                                type=\"ghost\"\n                                icon=\"ri-close-line\"\n                                (click)=\"removeFile($index)\"\n                                [disabled]=\"disabled || loading\"\n                            ></ui-button>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
+                    ], template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\r\n            #fileInput\r\n            class=\"fileinput-native\"\r\n            type=\"file\"\r\n            (change)=\"onNativeInputChange($event)\"\r\n            [attr.multiple]=\"multy ? '' : null\"\r\n            [attr.accept]=\"acceptAttribute\"\r\n            [disabled]=\"disabled || loading\"\r\n        />\r\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -2215,7 +2243,7 @@ class UicDynamicFormComponent {
             return "";
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], 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", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        <ui-input \r\n          #inpCont\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIconColor]=\"getInputColor(field,inp.value) \"\r\n          [internalIcon]=\"field.internalIcon??getIconByColor(field,inpCont.internalIconColor)\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input #inp\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [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.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          [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 === '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: 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: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch"] }, { 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", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        <ui-input \r\n          #inpCont\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIconColor]=\"getInputColor(field,inp.value) \"\r\n          [internalIcon]=\"field.internalIcon??getIconByColor(field,inpCont.internalIconColor)\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input #inp\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [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.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 === '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: 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: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch"] }, { 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,
@@ -2232,7 +2260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicInputComponent,
                         UicCheckboxComponent,
                         UicPhoneInputComponent,
-                        FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        <ui-input \r\n          #inpCont\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIconColor]=\"getInputColor(field,inp.value) \"\r\n          [internalIcon]=\"field.internalIcon??getIconByColor(field,inpCont.internalIconColor)\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input #inp\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [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.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          [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 === '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)  ) {\r\n        <ui-input \r\n          #inpCont\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIconColor]=\"getInputColor(field,inp.value) \"\r\n          [internalIcon]=\"field.internalIcon??getIconByColor(field,inpCont.internalIconColor)\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input #inp\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [step]=\"field.step\"\r\n              [minLength]=\"field.minLength||null\"\r\n              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n              }\r\n        </ui-input>\r\n      }\r\n       @if ( field.type === 'textarea' ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'black'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <textarea #ta\r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [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.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 === '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"] }]
         }], propDecorators: { fields: [{
                 type: Input
             }], form: [{
@@ -2400,6 +2428,34 @@ class UicFormWrapperComponent {
     updateFieldValue(name, value) {
         this.form.get(name)?.patchValue(value, { emitEvent: false });
     }
+    updateFieldConfig(name, config) {
+        if (!this.schema?.blocks?.length)
+            return;
+        for (const block of this.schema.blocks) {
+            const index = block.fields.findIndex(field => field.name === name);
+            if (index === -1)
+                continue;
+            const current = block.fields[index];
+            const restConfig = { ...(config ?? {}) };
+            delete restConfig.name;
+            delete restConfig.type;
+            const updatedField = {
+                ...current,
+                ...restConfig,
+                name: current.name,
+                type: current.type,
+            };
+            block.fields[index] = updatedField;
+            block.fields = [...block.fields];
+            this.schema.blocks = [...this.schema.blocks];
+            const control = this.form.get(name);
+            if (control) {
+                control.setValidators(this.mapValidatorsFromField(updatedField));
+                control.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+            }
+            return;
+        }
+    }
     // ACTUALIZAR EL ESTADO DE DISABLED DE UN CAMPO
     updateFieldDisabled(name, disabled) {
         const control = this.form.get(name);
@@ -2648,7 +2704,7 @@ class UicStepsFormComponent {
             return false;
         }
         else {
-            this.completedForms.set(title, result.form);
+            this.completedForms.set(title, result.form ?? {});
             return true;
         }
     }
@@ -2687,6 +2743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+const DROPDOWN_OVERLAY_CONTROLS = new InjectionToken('DROPDOWN_OVERLAY_CONTROLS');
 const DEFAULT_POSITIONS = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
     { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
@@ -2695,6 +2752,7 @@ const DEFAULT_POSITIONS = [
 ];
 class UicDropdownContainerComponent {
     _disabled = false;
+    host = inject((ElementRef));
     buttonLabel = 'Abrir';
     get disabled() {
         return this._disabled;
@@ -2710,7 +2768,6 @@ class UicDropdownContainerComponent {
     width;
     minWidth;
     maxWidth;
-    panelClass;
     backdropClass = 'cdk-overlay-transparent-backdrop';
     hasBackdrop = true;
     closeOnBackdropClick = true;
@@ -2720,15 +2777,14 @@ class UicDropdownContainerComponent {
     offsetY = 4;
     push = false;
     flexibleDimensions = true;
-    opened = new EventEmitter();
     closed = new EventEmitter();
-    triggerButton;
     contentTemplate;
     projectedTemplate;
     overlayRef;
     overlay = inject(Overlay);
     vcr = inject(ViewContainerRef);
-    destroyRef = inject(DestroyRef);
+    overlaySubscriptions = new Subscription();
+    contentClickHandler;
     get isOpen() {
         return !!this.overlayRef;
     }
@@ -2739,26 +2795,28 @@ class UicDropdownContainerComponent {
         if (this.disabled || this.overlayRef) {
             return;
         }
-        if (!this.triggerButton || !this.contentTemplate) {
+        if (!this.contentTemplate) {
             console.warn('ui-dropdown-container: Falta definir contenido para el dropdown.');
             return;
         }
-        const origin = this.triggerButton.nativeElement;
+        const origin = this.host.nativeElement.querySelector('.triggerButton');
+        if (!origin) {
+            console.warn('ui-dropdown-container: No se encontró el trigger para posicionar el overlay.');
+            return;
+        }
         const positionStrategy = this.createPositionStrategy(origin);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             hasBackdrop: this.hasBackdrop,
             backdropClass: this.backdropClass,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            panelClass: this.panelClass,
-            width: this.resolveDimension(this.width, this.matchTriggerWidth ? origin.getBoundingClientRect().width : undefined),
+            width: this.resolveDimension(this.width, this.matchTriggerWidth ? origin.offsetWidth : undefined),
             minWidth: this.resolveDimension(this.minWidth),
             maxWidth: this.resolveDimension(this.maxWidth),
         });
         const portal = new TemplatePortal(this.contentTemplate, this.vcr);
         this.overlayRef.attach(portal);
-        this.attachOverlayListeners();
-        this.opened.emit();
+        this.bindOverlayEvents(this.overlayRef);
     }
     close() {
         if (!this.overlayRef)
@@ -2791,35 +2849,15 @@ class UicDropdownContainerComponent {
             .withDefaultOffsetX(this.offsetX)
             .withDefaultOffsetY(this.offsetY);
     }
-    attachOverlayListeners() {
-        if (!this.overlayRef)
-            return;
-        if (this.hasBackdrop && this.closeOnBackdropClick) {
-            this.overlayRef.backdropClick()
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this.close());
-        }
-        if (this.closeOnEscape) {
-            this.overlayRef.keydownEvents()
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(event => {
-                if (event.key === 'Escape') {
-                    event.preventDefault();
-                    this.close();
-                }
-            });
-        }
-        if (this.closeOnContentClick) {
-            const element = this.overlayRef.overlayElement;
-            element.addEventListener('click', this.overlayContentClick, { once: true });
-        }
-    }
-    overlayContentClick = () => this.close();
     destroyOverlay() {
         if (!this.overlayRef)
             return;
-        const element = this.overlayRef.overlayElement;
-        element.removeEventListener('click', this.overlayContentClick);
+        this.overlaySubscriptions.unsubscribe();
+        this.overlaySubscriptions = new Subscription();
+        if (this.contentClickHandler) {
+            this.overlayRef.overlayElement.removeEventListener('click', this.contentClickHandler);
+            this.contentClickHandler = undefined;
+        }
         this.overlayRef.dispose();
         this.overlayRef = undefined;
     }
@@ -2829,12 +2867,36 @@ class UicDropdownContainerComponent {
         }
         return value;
     }
+    bindOverlayEvents(ref) {
+        this.overlaySubscriptions.unsubscribe();
+        this.overlaySubscriptions = new Subscription();
+        if (this.hasBackdrop && this.closeOnBackdropClick) {
+            this.overlaySubscriptions.add(ref.backdropClick().subscribe(() => this.close()));
+        }
+        if (this.closeOnEscape) {
+            this.overlaySubscriptions.add(ref.keydownEvents().pipe(filter(event => event.key === 'Escape')).subscribe(() => this.close()));
+        }
+        if (this.closeOnContentClick) {
+            this.contentClickHandler = () => this.close();
+            ref.overlayElement.addEventListener('click', this.contentClickHandler);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicDropdownContainerComponent, isStandalone: true, selector: "ui-dropdown-container", inputs: { buttonLabel: "buttonLabel", disabled: "disabled", positions: "positions", matchTriggerWidth: "matchTriggerWidth", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", panelClass: "panelClass", backdropClass: "backdropClass", hasBackdrop: "hasBackdrop", closeOnBackdropClick: "closeOnBackdropClick", closeOnEscape: "closeOnEscape", closeOnContentClick: "closeOnContentClick", offsetX: "offsetX", offsetY: "offsetY", push: "push", flexibleDimensions: "flexibleDimensions" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, static: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "<ui-button\r\n  #triggerButton\r\n  class=\"ui-dropdown-button\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"onTriggerClick($event)\">\r\n  {{ buttonLabel }}\r\n</ui-button>\r\n\r\n<ng-template #contentTemplate>\r\n  <div class=\"ui-dropdown-panel\">\r\n    <ng-container *ngIf=\"projectedTemplate; else defaultProjection\">\r\n      <ng-container *ngTemplateOutlet=\"projectedTemplate\"></ng-container>\r\n    </ng-container>\r\n    <ng-template #defaultProjection>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}.ui-dropdown-panel{background-color:#fff;box-shadow:0 16px 40px #0f172a24;border-radius:.75rem;margin:0;padding:0;overflow:hidden}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicDropdownContainerComponent, isStandalone: true, selector: "ui-dropdown-container", inputs: { buttonLabel: "buttonLabel", disabled: "disabled", positions: "positions", matchTriggerWidth: "matchTriggerWidth", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", backdropClass: "backdropClass", hasBackdrop: "hasBackdrop", closeOnBackdropClick: "closeOnBackdropClick", closeOnEscape: "closeOnEscape", closeOnContentClick: "closeOnContentClick", offsetX: "offsetX", offsetY: "offsetY", push: "push", flexibleDimensions: "flexibleDimensions" }, outputs: { closed: "closed" }, providers: [
+            {
+                provide: DROPDOWN_OVERLAY_CONTROLS,
+                useExisting: forwardRef(() => UicDropdownContainerComponent),
+            },
+        ], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n  <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n  <div  class=\"ui-dropdown-panel\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-dropdown-container', imports: [UicButtonComponent, CommonModule], template: "<ui-button\r\n  #triggerButton\r\n  class=\"ui-dropdown-button\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"onTriggerClick($event)\">\r\n  {{ buttonLabel }}\r\n</ui-button>\r\n\r\n<ng-template #contentTemplate>\r\n  <div class=\"ui-dropdown-panel\">\r\n    <ng-container *ngIf=\"projectedTemplate; else defaultProjection\">\r\n      <ng-container *ngTemplateOutlet=\"projectedTemplate\"></ng-container>\r\n    </ng-container>\r\n    <ng-template #defaultProjection>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}.ui-dropdown-panel{background-color:#fff;box-shadow:0 16px 40px #0f172a24;border-radius:.75rem;margin:0;padding:0;overflow:hidden}\n"] }]
+            args: [{ selector: 'ui-dropdown-container', imports: [CommonModule], providers: [
+                        {
+                            provide: DROPDOWN_OVERLAY_CONTROLS,
+                            useExisting: forwardRef(() => UicDropdownContainerComponent),
+                        },
+                    ], template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n  <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n  <div  class=\"ui-dropdown-panel\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
         }], propDecorators: { buttonLabel: [{
                 type: Input
             }], disabled: [{
@@ -2849,8 +2911,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], maxWidth: [{
                 type: Input
-            }], panelClass: [{
-                type: Input
             }], backdropClass: [{
                 type: Input
             }], hasBackdrop: [{
@@ -2869,13 +2929,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], flexibleDimensions: [{
                 type: Input
-            }], opened: [{
-                type: Output
             }], closed: [{
                 type: Output
-            }], triggerButton: [{
-                type: ViewChild,
-                args: ['triggerButton', { static: true }]
             }], contentTemplate: [{
                 type: ViewChild,
                 args: ['contentTemplate', { static: true }]
@@ -2884,6 +2939,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [TemplateRef]
             }] } });
 
+class UiDropdownCloseDirective {
+    dropdown = inject(UicDropdownContainerComponent);
+    handleClick() {
+        this.dropdown.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiDropdownCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: UiDropdownCloseDirective, isStandalone: true, selector: "[uiDropdownClose]", host: { listeners: { "click": "handleClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UiDropdownCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiDropdownClose]',
+                    standalone: true,
+                }]
+        }], propDecorators: { handleClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 const fadeAndRise = trigger('fadeAndRise', [
     transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
     transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
@@ -3900,5 +3974,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
+export { DROPDOWN_OVERLAY_CONTROLS, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map