ui-core-abv 0.1.5 → 0.1.7

package/fesm2022/ui-core-abv.mjs

@@ -1,5 +1,5 @@
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } 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, createComponent, Pipe, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
 import * as i2 from '@angular/forms';
@@ -87,8 +87,8 @@ function createValueAccessor() {
     return BaseValueAccessor;
 }
 
-const base$6 = createValueAccessor();
-class UicCheckboxComponent extends base$6 {
+const base$8 = createValueAccessor();
+class UicCheckboxComponent extends base$8 {
     icon = ''; // Icono externo
     iconColor = 'black';
     label = '';
@@ -110,7 +110,7 @@ class UicCheckboxComponent extends base$6 {
                 useExisting: forwardRef(() => UicCheckboxComponent),
                 multi: true
             }
-        ], usesInheritance: 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\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div [class.check-form-container]=\"!noPadding\">\r\n      <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n        @if (type=='check') {\r\n          <button\r\n            type=\"button\"\r\n            class=\"checkbox\"\r\n            [disabled]=\"disabled\"\r\n            [class.checked]=\"value\"\r\n            [class.placeholder-space]=\"placeholder!=''\"\r\n            [disabled]=\"disabled\"\r\n            (keydown.enter)=\"toggle()\"\r\n            (keydown.space)=\"toggle()\"\r\n          >\r\n            <span class=\"icon\">\r\n              @if (value) {\r\n                  \u2714\r\n              }@else {\r\n                  \u2212\r\n              }\r\n            </span>\r\n          </button>\r\n        }@else{\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n          >\r\n            <span class=\"thumb\"></span>\r\n          </button>\r\n        }\r\n        @if (placeholder) {\r\n          <span class=\"check-placeholder\">{{placeholder}}</span>\r\n        }\r\n        \r\n        <ng-content></ng-content> \r\n      </div>\r\n    </div>\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n    \r\n  </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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"] });
+        ], usesInheritance: 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\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div [class.check-form-container]=\"!noPadding\">\r\n      <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n        @if (type=='check') {\r\n          <button\r\n            type=\"button\"\r\n            class=\"checkbox\"\r\n            [disabled]=\"disabled\"\r\n            [class.checked]=\"value\"\r\n            [class.placeholder-space]=\"placeholder!=''\"\r\n            [disabled]=\"disabled\"\r\n            (keydown.enter)=\"toggle()\"\r\n            (keydown.space)=\"toggle()\"\r\n          >\r\n            <span class=\"icon\">\r\n              @if (value) {\r\n                  \u2714\r\n              }@else {\r\n                  \u2212\r\n              }\r\n            </span>\r\n          </button>\r\n        }@else{\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n          >\r\n            <span class=\"thumb\"></span>\r\n          </button>\r\n        }\r\n        @if (placeholder) {\r\n          <span class=\"check-placeholder\">{{placeholder}}</span>\r\n        }\r\n        \r\n        <ng-content></ng-content> \r\n      </div>\r\n    </div>\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n    \r\n  </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
             type: Component,
@@ -120,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicCheckboxComponent),
                             multi: true
                         }
-                    ], 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\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div [class.check-form-container]=\"!noPadding\">\r\n      <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n        @if (type=='check') {\r\n          <button\r\n            type=\"button\"\r\n            class=\"checkbox\"\r\n            [disabled]=\"disabled\"\r\n            [class.checked]=\"value\"\r\n            [class.placeholder-space]=\"placeholder!=''\"\r\n            [disabled]=\"disabled\"\r\n            (keydown.enter)=\"toggle()\"\r\n            (keydown.space)=\"toggle()\"\r\n          >\r\n            <span class=\"icon\">\r\n              @if (value) {\r\n                  \u2714\r\n              }@else {\r\n                  \u2212\r\n              }\r\n            </span>\r\n          </button>\r\n        }@else{\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n          >\r\n            <span class=\"thumb\"></span>\r\n          </button>\r\n        }\r\n        @if (placeholder) {\r\n          <span class=\"check-placeholder\">{{placeholder}}</span>\r\n        }\r\n        \r\n        <ng-content></ng-content> \r\n      </div>\r\n    </div>\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n    \r\n  </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div [class.check-form-container]=\"!noPadding\">\r\n      <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n        @if (type=='check') {\r\n          <button\r\n            type=\"button\"\r\n            class=\"checkbox\"\r\n            [disabled]=\"disabled\"\r\n            [class.checked]=\"value\"\r\n            [class.placeholder-space]=\"placeholder!=''\"\r\n            [disabled]=\"disabled\"\r\n            (keydown.enter)=\"toggle()\"\r\n            (keydown.space)=\"toggle()\"\r\n          >\r\n            <span class=\"icon\">\r\n              @if (value) {\r\n                  \u2714\r\n              }@else {\r\n                  \u2212\r\n              }\r\n            </span>\r\n          </button>\r\n        }@else{\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n          >\r\n            <span class=\"thumb\"></span>\r\n          </button>\r\n        }\r\n        @if (placeholder) {\r\n          <span class=\"check-placeholder\">{{placeholder}}</span>\r\n        }\r\n        \r\n        <ng-content></ng-content> \r\n      </div>\r\n    </div>\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n    \r\n  </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-placeholder{margin-left:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: [{
@@ -154,11 +154,11 @@ class UicSwichComponent {
         this.checkedChange.emit(this.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder", label: "label" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"toggle\"\r\n  [class.checked]=\"checked\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"toggle()\"\r\n>\r\n  <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder", label: "label" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"toggle\"\r\n  [class.checked]=\"checked\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"toggle()\"\r\n>\r\n  <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-switch', imports: [], template: "<button\r\n  type=\"button\"\r\n  class=\"toggle\"\r\n  [class.checked]=\"checked\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"toggle()\"\r\n>\r\n  <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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"] }]
+            args: [{ selector: 'ui-switch', imports: [], template: "<button\r\n  type=\"button\"\r\n  class=\"toggle\"\r\n  [class.checked]=\"checked\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"toggle()\"\r\n>\r\n  <span class=\"thumb\"></span>\r\n</button>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--disabled-color)}.toggle{position:relative;width:calc(var(--design-size-ref) * 4.4);height:calc(var(--design-size-ref) * 2.2);border:none;border-radius:calc(var(--design-size-ref) * 2.2);background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--disabled-background);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(calc(var(--design-size-ref) * 4.4 - var(--design-size-ref) * 2.2))}.toggle .thumb{width:calc(var(--design-size-ref) * 2.2 - 4px);height:calc(var(--design-size-ref) * 2.2 - 4px);background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: { checked: [{
                 type: Input
             }], checkedChange: [{
@@ -171,10 +171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-const base$5 = createValueAccessor();
-class UicSelectComponent extends base$5 {
+const base$7 = createValueAccessor();
+class UicSelectComponent extends base$7 {
     icon = ''; // Icono externo
-    iconColor = 'primary'; //color de ícono externo
+    iconColor = 'black';
     internalIcon = ''; //Icono interno
     size = 'm'; // tamaño general del input
     // TEXT
@@ -236,6 +236,7 @@ class UicSelectComponent extends base$5 {
     }
     closeList() {
         if (this.overlayRef) {
+            this.onTouched();
             this.overlayRef.dispose();
             this.overlayRef = null;
         }
@@ -251,7 +252,7 @@ class UicSelectComponent extends base$5 {
                 useExisting: forwardRef(() => UicSelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], 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 class=\"fakeinput-wrapp\" > \r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n                [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text || emptyText)}}</div>\r\n                @if (!disabled && !loading) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n            <ng-template #dropdownTemplate >\r\n                 <div class=\"input-options\">\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                            <div class=\"option-divider\"></div>\r\n                        }\r\n\r\n                        \r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\" >\r\n                                    <div class=\"f-medium\" >{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n                                        {{option.detail}}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            @if ( $index < (options.length - 1) ) {\r\n                                <span class=\"option-divider\"></span>\r\n                            }\r\n                            \r\n                        }\r\n\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\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>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], 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 class=\"fakeinput-wrapp\" > \r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n                [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text || emptyText)}}</div>\r\n                @if (!disabled && !loading) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n            <ng-template #dropdownTemplate >\r\n                 <div class=\"input-options\">\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                            <div class=\"option-divider\"></div>\r\n                        }\r\n\r\n                        \r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\" >\r\n                                    <div class=\"f-medium\" >{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n                                        {{option.detail}}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            @if ( $index < (options.length - 1) ) {\r\n                                <span class=\"option-divider\"></span>\r\n                            }\r\n                            \r\n                        }\r\n\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\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>", 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
             type: Component,
@@ -261,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicSelectComponent),
                             multi: true
                         }
-                    ], 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 class=\"fakeinput-wrapp\" > \r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n                [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text || emptyText)}}</div>\r\n                @if (!disabled && !loading) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n            <ng-template #dropdownTemplate >\r\n                 <div class=\"input-options\">\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                            <div class=\"option-divider\"></div>\r\n                        }\r\n\r\n                        \r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\" >\r\n                                    <div class=\"f-medium\" >{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n                                        {{option.detail}}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            @if ( $index < (options.length - 1) ) {\r\n                                <span class=\"option-divider\"></span>\r\n                            }\r\n                            \r\n                        }\r\n\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\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>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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 class=\"fakeinput-wrapp\" > \r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n                [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >{{(selectedOption?.text || emptyText)}}</div>\r\n                @if (!disabled && !loading) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n            <ng-template #dropdownTemplate >\r\n                 <div class=\"input-options\">\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                            <div class=\"option-divider\"></div>\r\n                        }\r\n\r\n                        \r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\" >\r\n                                    <div class=\"f-medium\" >{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n                                        {{option.detail}}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            @if ( $index < (options.length - 1) ) {\r\n                                <span class=\"option-divider\"></span>\r\n                            }\r\n                            \r\n                        }\r\n\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\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>", 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: [{
@@ -313,11 +314,11 @@ class UicInputComponent {
         }, 200);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container pad-{{size}}\" >\r\n                <ng-content class=\"myinput\"></ng-content>\r\n            </div>     \r\n        </div>\r\n        <span class=\"char-counter\">\r\n            <ng-content select=\"[counter]\"></ng-content>\r\n        </span>\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        \r\n    </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <ng-content class=\"myinput\"></ng-content>\r\n            </div>     \r\n        </div>\r\n        <span class=\"char-counter\">\r\n            <ng-content select=\"[counter]\"></ng-content>\r\n        </span>\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        \r\n    </div>\r\n</div>\r\n", 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-input', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container pad-{{size}}\" >\r\n                <ng-content class=\"myinput\"></ng-content>\r\n            </div>     \r\n        </div>\r\n        <span class=\"char-counter\">\r\n            <ng-content select=\"[counter]\"></ng-content>\r\n        </span>\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        \r\n    </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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"] }]
+            args: [{ selector: 'ui-input', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <ng-content class=\"myinput\"></ng-content>\r\n            </div>     \r\n        </div>\r\n        <span class=\"char-counter\">\r\n            <ng-content select=\"[counter]\"></ng-content>\r\n        </span>\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        \r\n    </div>\r\n</div>\r\n", 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: [{
@@ -340,8 +341,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
-const base$4 = createValueAccessor();
-class UicSliderComponent extends base$4 {
+const base$6 = createValueAccessor();
+class UicSliderComponent extends base$6 {
     icon = ''; // Icono externo
     iconColor = 'black';
     label = '';
@@ -400,7 +401,7 @@ class UicSliderComponent extends base$4 {
                 useExisting: forwardRef(() => UicSliderComponent),
                 multi: true
             }
-        ], usesInheritance: 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\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div class=\"slider-wrapper\">\r\n      <div class=\"slider\" #track\r\n           (click)=\"updateFromClientX($event.clientX, track)\">\r\n        <!-- barra -->\r\n        <div class=\"slider-track\"></div>\r\n        <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n      \r\n        <!-- thumb -->\r\n        <div class=\"slider-thumb\"\r\n             [style.left.%]=\"percent\"\r\n             [class.disabled-thumb]=\"disabled\"\r\n             (mousedown)=\"onMouseDown($event, track)\"\r\n             #thumb>\r\n             <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n            </div>\r\n      \r\n        <!-- markers -->\r\n        <div class=\"slider-markers\">\r\n          @for(m of markers; track $index){\r\n              <div class=\"marker\" \r\n                   [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n                {{ m }}\r\n              </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\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: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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"] });
+        ], usesInheritance: 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\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div class=\"slider-wrapper\">\r\n      <div class=\"slider\" #track\r\n           (click)=\"updateFromClientX($event.clientX, track)\">\r\n        <!-- barra -->\r\n        <div class=\"slider-track\"></div>\r\n        <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n      \r\n        <!-- thumb -->\r\n        <div class=\"slider-thumb\"\r\n             [style.left.%]=\"percent\"\r\n             [class.disabled-thumb]=\"disabled\"\r\n             (mousedown)=\"onMouseDown($event, track)\"\r\n             #thumb>\r\n             <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n            </div>\r\n      \r\n        <!-- markers -->\r\n        <div class=\"slider-markers\">\r\n          @for(m of markers; track $index){\r\n              <div class=\"marker\" \r\n                   [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n                {{ m }}\r\n              </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\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: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSliderComponent, decorators: [{
             type: Component,
@@ -410,7 +411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicSliderComponent),
                             multi: true
                         }
-                    ], 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\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div class=\"slider-wrapper\">\r\n      <div class=\"slider\" #track\r\n           (click)=\"updateFromClientX($event.clientX, track)\">\r\n        <!-- barra -->\r\n        <div class=\"slider-track\"></div>\r\n        <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n      \r\n        <!-- thumb -->\r\n        <div class=\"slider-thumb\"\r\n             [style.left.%]=\"percent\"\r\n             [class.disabled-thumb]=\"disabled\"\r\n             (mousedown)=\"onMouseDown($event, track)\"\r\n             #thumb>\r\n             <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n            </div>\r\n      \r\n        <!-- markers -->\r\n        <div class=\"slider-markers\">\r\n          @for(m of markers; track $index){\r\n              <div class=\"marker\" \r\n                   [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n                {{ m }}\r\n              </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\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: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div class=\"slider-wrapper\">\r\n      <div class=\"slider\" #track\r\n           (click)=\"updateFromClientX($event.clientX, track)\">\r\n        <!-- barra -->\r\n        <div class=\"slider-track\"></div>\r\n        <div class=\"slider-filled\" [style.width.%]=\"percent\" [class.disabled-bar]=\"disabled\"></div>\r\n      \r\n        <!-- thumb -->\r\n        <div class=\"slider-thumb\"\r\n             [style.left.%]=\"percent\"\r\n             [class.disabled-thumb]=\"disabled\"\r\n             (mousedown)=\"onMouseDown($event, track)\"\r\n             #thumb>\r\n             <div class=\"slider-thumb-legend\" [class.disabled-legend]=\"disabled\">{{value}}</div>\r\n            </div>\r\n      \r\n        <!-- markers -->\r\n        <div class=\"slider-markers\">\r\n          @for(m of markers; track $index){\r\n              <div class=\"marker\" \r\n                   [style.left.%]=\"((m - min) / (max - min)) * 100\">\r\n                {{ m }}\r\n              </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\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: [".slider-wrapper{width:100%;padding:0 8px 10px;height:calc(4 * var(--form-ref));display:flex;align-items:center}.slider{position:relative;width:100%;height:16px;-webkit-user-select:none;user-select:none}.slider-track{position:absolute;top:50%;left:0;width:100%;height:4px;background:#ccc;transform:translateY(-50%);border-radius:2px}.slider-filled{position:absolute;top:50%;left:0;height:4px;background:var(--primary-500);transform:translateY(-50%);border-radius:2px}.slider-thumb{position:absolute;top:50%;padding:0;margin:0;width:16px;height:16px;background:var(--white);border:4px solid var(--primary-500);border-radius:50%;transform:translate(-50%,-50%);transition:transform .1s ease;cursor:pointer}.slider-thumb:hover{box-shadow:0 0 0 3px var(--secondary-alpha);transform:translate(-50%,-50%) scale(1.2)}.slider-thumb:focus,.slider-thumb:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.slider-thumb-legend{background-color:var(--white);box-shadow:0 4px 12px #0003;border:solid 1px var(--primary-400);position:absolute;bottom:16px;font-size:.75rem;line-height:.75rem;padding:2px 4px;left:50%;border-radius:2px;transform:translate(-50%,25%);white-space:nowrap}.slider-markers{position:absolute;top:100%;width:100%;font-size:12px}.marker{position:absolute;transform:translate(-50%)}.disabled-thumb{border-color:var(--grey-300);box-shadow:none}.disabled-thumb:hover{box-shadow:none;cursor:not-allowed;transform:translate(-50%,-50%)}.disabled-legend{box-shadow:none;border-color:var(--grey-300);background-color:var(--grey-100)}.disabled-bar{background-color:var(--grey-500)}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: [{
@@ -441,8 +442,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['document:mouseup']
             }] } });
 
-const base$3 = createValueAccessor();
-class UicDatePickerComponent extends base$3 {
+const base$5 = createValueAccessor();
+class UicDatePickerComponent extends base$5 {
     icon = ''; // Icono externo
     iconColor = 'black';
     internalIcon = ''; //Icono interno
@@ -454,6 +455,8 @@ class UicDatePickerComponent extends base$3 {
     // FUNCTIONS
     max = '';
     min = '';
+    justMonth = false;
+    monthDay = 'first';
     calendarTemplate;
     overlayRef;
     // Fijos
@@ -470,6 +473,10 @@ class UicDatePickerComponent extends base$3 {
     selectedMonth = null;
     monthWeeks = []; // Arreglo de fechas
     decadeRange = [];
+    displayValue = '';
+    get inputPlaceholder() {
+        return this.justMonth ? 'mm/yyyy' : 'dd/mm/yyyy';
+    }
     overlay = inject(Overlay);
     vcr = inject(ViewContainerRef);
     host = inject((ElementRef));
@@ -477,7 +484,7 @@ class UicDatePickerComponent extends base$3 {
         this.monthWeeks = this.getWeeks();
         this.minDate = this.parseDateLimits(this.min);
         this.maxDate = this.parseDateLimits(this.max);
-        this.paintedDate = this.parseDateLimits(this.value);
+        this.applyValue(this.value);
     }
     // --- Overlay ---
     overlayPositions = [
@@ -504,7 +511,10 @@ class UicDatePickerComponent extends base$3 {
         const portal = new TemplatePortal(this.calendarTemplate, this.vcr);
         this.overlayRef.attach(portal);
         this.overlayRef.backdropClick().subscribe(() => this.closeCalendar());
-        this.view = 'days';
+        this.view = this.justMonth ? 'months' : 'days';
+        if (this.justMonth) {
+            this.decadeRange = this.getDecadeRange();
+        }
     }
     closeCalendar() {
         if (this.overlayRef) {
@@ -582,7 +592,9 @@ class UicDatePickerComponent extends base$3 {
     // --- Cambio de vistas ---
     changeView() {
         if (this.view === 'days') {
-            this.view = 'months';
+            if (!this.justMonth) {
+                this.view = 'months';
+            }
         }
         else if (this.view === 'months') {
             this.view = 'years';
@@ -595,14 +607,34 @@ class UicDatePickerComponent extends base$3 {
         this.view = 'months';
     }
     selectMonth(monthIndex) {
+        if (this.justMonth) {
+            const monthDate = this.buildMonthDate(this.selectedYear, monthIndex);
+            if (!this.isWithinLimits(monthDate)) {
+                return;
+            }
+            this.selectedDate = new Date(this.selectedYear, monthIndex, 1);
+            this.value = this.toIsoString(monthDate);
+            this.displayValue = this.formatDisplay(monthDate);
+            this.paintedDate = monthDate;
+            this.setCurrentViewDate(monthDate);
+            this.notifyChange(this.value);
+            this.closeCalendar();
+            return;
+        }
         this.selectedDate = new Date(this.selectedYear, monthIndex, 1);
         this.monthWeeks = this.getWeeks();
         this.view = 'days';
     }
     selectDate(date) {
-        this.value = date.toISOString().split("T")[0];
+        if (this.justMonth) {
+            return;
+        }
+        const normalized = this.normalizeDate(date);
+        this.value = this.toIsoString(normalized);
+        this.displayValue = this.formatDisplay(normalized);
         this.notifyChange(this.value);
-        this.paintedDate = this.parseDateLimits(this.value);
+        this.paintedDate = normalized;
+        this.setCurrentViewDate(normalized);
         this.closeCalendar();
     }
     isToday(day) {
@@ -639,7 +671,7 @@ class UicDatePickerComponent extends base$3 {
                 return null;
             }
             else {
-                return parsed;
+                return this.normalizeDate(parsed);
             }
         }
         else {
@@ -647,36 +679,177 @@ class UicDatePickerComponent extends base$3 {
         }
     }
     cleanInput() {
-        this.value = '';
-        this.notifyChange(this.value);
-        this.paintedDate = null;
+        this.clearValue(true);
         this.closeCalendar();
     }
     pickToday() {
-        this.selectedDate = new Date();
-        this.value = this.selectedDate.toISOString().split("T")[0];
+        const today = this.normalizeDate(new Date());
+        const target = this.justMonth ? this.buildMonthDate(today.getFullYear(), today.getMonth()) : today;
+        this.value = this.toIsoString(target);
+        this.displayValue = this.formatDisplay(target);
         this.notifyChange(this.value);
-        this.paintedDate = this.parseDateLimits(this.value);
+        this.paintedDate = target;
+        this.setCurrentViewDate(target);
         this.closeCalendar();
     }
+    onInputChange(event) {
+        this.displayValue = event.target.value;
+    }
+    onInputBlur() {
+        this.onTouched();
+        const trimmed = this.displayValue.trim();
+        if (!trimmed) {
+            this.clearValue(true);
+            return;
+        }
+        const parsed = this.parseDisplay(trimmed);
+        if (!parsed || !this.isWithinLimits(parsed)) {
+            this.clearValue(true);
+            return;
+        }
+        const normalized = this.normalizeDate(parsed);
+        this.displayValue = this.formatDisplay(normalized);
+        this.value = this.toIsoString(normalized);
+        this.paintedDate = normalized;
+        this.setCurrentViewDate(normalized);
+        this.notifyChange(this.value);
+    }
+    onInputKeydown(event) {
+        if (event.key === 'Enter') {
+            event.target.blur();
+        }
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.applyValue(value);
+    }
+    applyValue(value) {
+        const parsed = this.parseDateLimits(value ?? '');
+        if (parsed) {
+            const effective = this.justMonth
+                ? this.buildMonthDate(parsed.getFullYear(), parsed.getMonth())
+                : parsed;
+            if (this.justMonth && value) {
+                this.value = this.toIsoString(effective);
+            }
+            this.displayValue = this.formatDisplay(effective);
+            this.paintedDate = effective;
+            this.setCurrentViewDate(effective);
+        }
+        else {
+            this.clearValue(false, false);
+        }
+    }
+    clearValue(emit = false, resetValue = true) {
+        this.displayValue = '';
+        this.paintedDate = null;
+        if (resetValue) {
+            this.value = '';
+        }
+        if (emit) {
+            this.notifyChange(this.value);
+        }
+    }
+    setCurrentViewDate(date) {
+        this.selectedYear = date.getFullYear();
+        this.selectedDate = new Date(date.getFullYear(), date.getMonth(), 1);
+        this.monthWeeks = this.getWeeks();
+        this.decadeRange = this.getDecadeRange();
+    }
+    formatDisplay(date) {
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        if (this.justMonth) {
+            return `${month}/${year}`;
+        }
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${day}/${month}/${year}`;
+    }
+    parseDisplay(text) {
+        const normalized = text.trim();
+        if (this.justMonth) {
+            const matchMonth = normalized.match(/^(\d{1,2})[\/\-.](\d{4})$/);
+            if (!matchMonth) {
+                return null;
+            }
+            const month = parseInt(matchMonth[1], 10);
+            const year = parseInt(matchMonth[2], 10);
+            if (month < 1 || month > 12)
+                return null;
+            return this.buildMonthDate(year, month - 1);
+        }
+        const match = normalized.match(/^(\d{1,2})[\/\-.](\d{1,2})[\/\-.](\d{4})$/);
+        if (!match) {
+            return null;
+        }
+        const day = parseInt(match[1], 10);
+        const month = parseInt(match[2], 10);
+        const year = parseInt(match[3], 10);
+        if (month < 1 || month > 12)
+            return null;
+        if (day < 1 || day > 31)
+            return null;
+        const candidate = new Date(year, month - 1, day);
+        if (candidate.getFullYear() !== year ||
+            candidate.getMonth() !== month - 1 ||
+            candidate.getDate() !== day) {
+            return null;
+        }
+        return candidate;
+    }
+    isWithinLimits(date) {
+        if (this.minDate && date < this.minDate) {
+            return false;
+        }
+        if (this.maxDate && date > this.maxDate) {
+            return false;
+        }
+        return true;
+    }
+    normalizeDate(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    toIsoString(date) {
+        return date.toISOString().split('T')[0];
+    }
+    buildMonthDate(year, monthIndex) {
+        const day = this.monthDay === 'last'
+            ? new Date(year, monthIndex + 1, 0).getDate()
+            : 1;
+        return this.normalizeDate(new Date(year, monthIndex, day));
+    }
+    isMonthDisabled(monthIndex) {
+        if (!this.justMonth) {
+            return false;
+        }
+        const candidate = this.buildMonthDate(this.selectedYear, monthIndex);
+        return !this.isWithinLimits(candidate);
+    }
+    isSelectedMonth(monthIndex) {
+        if (!this.paintedDate) {
+            return false;
+        }
+        return (this.paintedDate.getFullYear() === this.selectedYear &&
+            this.paintedDate.getMonth() === monthIndex);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDatePickerComponent, isStandalone: true, selector: "ui-date-picker", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", disabled: "disabled", label: "label", error: "error", tip: "tip", max: "max", min: "min" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDatePickerComponent, isStandalone: true, selector: "ui-date-picker", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", disabled: "disabled", label: "label", error: "error", tip: "tip", max: "max", min: "min", justMonth: "justMonth", monthDay: "monthDay" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UicDatePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: 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\r\n    class=\"input-elements\"\r\n    [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n  >\r\n    @if (label) {\r\n    <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n    }\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=\"dd-mm-yyyy\"\r\n          [value]=\"value ? (value | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\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              (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    <!-- 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: [".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;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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: "pipe", type: DatePipe, name: "date" }, { 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"] }] });
+        ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: 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\r\n    class=\"input-elements\"\r\n    [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n  >\r\n    @if (label) {\r\n    <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n    }\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    <!-- 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: [".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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-date-picker', imports: [DatePipe, CommonModule, UicButtonComponent], providers: [
+            args: [{ selector: 'ui-date-picker', imports: [CommonModule, UicButtonComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => UicDatePickerComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n  <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n  }\r\n  <div\r\n    class=\"input-elements\"\r\n    [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n  >\r\n    @if (label) {\r\n    <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n    }\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=\"dd-mm-yyyy\"\r\n          [value]=\"value ? (value | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\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              (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    <!-- 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: [".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;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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\r\n    class=\"input-elements\"\r\n    [style]=\"icon ? 'max-width: calc(100% - 34px);' : ''\"\r\n  >\r\n    @if (label) {\r\n    <div class=\"label inputlabel\" [class.font-error]=\"error\">{{ label }}</div>\r\n    }\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    <!-- 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: [".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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: [{
@@ -695,13 +868,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], min: [{
                 type: Input
+            }], justMonth: [{
+                type: Input
+            }], monthDay: [{
+                type: Input
             }], calendarTemplate: [{
                 type: ViewChild,
                 args: ['calendarTemplate']
             }] } });
 
-const base$2 = createValueAccessor();
-class UicPoolOptionsComponent extends base$2 {
+const base$4 = createValueAccessor();
+class UicPoolOptionsComponent extends base$4 {
     icon = ''; // Icono externo
     iconColor = 'primary'; //color de ícono externo
     size = 'm'; // tamaño general del input
@@ -713,42 +890,91 @@ class UicPoolOptionsComponent extends base$2 {
     disabled = false;
     loading = false;
     multy = true;
+    enabledListView = false;
+    listViewTitle = 'Seleccionados';
     options = [];
-    selectedSet = new Set();
+    selectedItems = new Map();
+    get selectedValues() {
+        return Array.from(this.selectedItems.values()).map(item => ({ ...item }));
+    }
     updateOptions(id) {
-        if (!this.multy) {
-            this.selectedSet = new Set([id]);
-        }
-        else if (this.selectedSet.has(id)) {
-            this.selectedSet.delete(id);
+        if (this.disabled)
+            return;
+        if (this.selectedItems.has(id)) {
+            this.selectedItems.delete(id);
         }
         else {
-            this.selectedSet.add(id);
+            if (!this.multy) {
+                this.selectedItems.clear();
+            }
+            this.selectedItems.set(id, { id });
         }
-        this.notifyChange([...this.selectedSet]);
+        this.emitSelectionChange();
     }
-    writeValue(value) {
-        super.writeValue(value);
-        this.selectedSet = new Set(value);
+    updateDetail(id, detail) {
+        if (!this.selectedItems.has(id)) {
+            return;
+        }
+        const updated = detail?.length ? { id, detail } : { id };
+        this.selectedItems.set(id, updated);
+        this.emitSelectionChange();
+    }
+    writeValue(value = []) {
+        const normalized = this.normalizeIncomingValue(value);
+        super.writeValue(normalized);
+        this.selectedItems = new Map(normalized.map(item => [item.id, item]));
+    }
+    ngOnChanges(changes) {
+        if (changes['options'] && this.value != null) {
+            this.selectedItems.clear();
+            this.emitSelectionChange();
+        }
+    }
+    isSelected(id) {
+        return this.selectedItems.has(id);
+    }
+    getItemName(id) {
+        return this.options.find(f => f.id == id)?.text ?? id;
+    }
+    emitSelectionChange() {
+        this.notifyChange(this.selectedValues);
+    }
+    normalizeIncomingValue(value) {
+        if (!Array.isArray(value)) {
+            return [];
+        }
+        return value
+            .map(item => {
+            if (item == null) {
+                return null;
+            }
+            if (typeof item === 'object' && 'id' in item) {
+                const normalizedItem = item;
+                const detail = normalizedItem.detail;
+                return detail?.length ? { id: normalizedItem.id, detail } : { id: normalizedItem.id };
+            }
+            return { id: item };
+        })
+            .filter((entry) => entry !== null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPoolOptionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPoolOptionsComponent, isStandalone: true, selector: "ui-pool-options", inputs: { icon: "icon", iconColor: "iconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", multy: "multy", options: "options" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPoolOptionsComponent, isStandalone: true, selector: "ui-pool-options", inputs: { icon: "icon", iconColor: "iconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", multy: "multy", enabledListView: "enabledListView", listViewTitle: "listViewTitle", options: "options" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UicPoolOptionsComponent),
                 multi: true
             }
-        ], usesInheritance: 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 class=\"pool-wrapper\" > \r\n            @for (opt of options; track opt.id) {\r\n                <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.active-opt]=\"selectedSet.has(opt.id??'')\">{{opt.text}}</div>\r\n            }\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>", 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}.pool-option:hover{cursor:pointer;border-color:var(--secondary-400)}.active-opt{background-color:var(--secondary-100)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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"] });
+        ], 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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", "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,
-            args: [{ selector: 'ui-pool-options', imports: [], providers: [
+            args: [{ selector: 'ui-pool-options', imports: [UicInputComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => UicPoolOptionsComponent),
                             multi: true
                         }
-                    ], 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 class=\"pool-wrapper\" > \r\n            @for (opt of options; track opt.id) {\r\n                <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.active-opt]=\"selectedSet.has(opt.id??'')\">{{opt.text}}</div>\r\n            }\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>", 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}.pool-option:hover{cursor:pointer;border-color:var(--secondary-400)}.active-opt{background-color:var(--secondary-100)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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 \">\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: [{
@@ -767,12 +993,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], multy: [{
                 type: Input
+            }], enabledListView: [{
+                type: Input
+            }], listViewTitle: [{
+                type: Input
             }], options: [{
                 type: Input
             }] } });
 
-const base$1 = createValueAccessor();
-class UicSearcherComponent extends base$1 {
+const base$3 = createValueAccessor();
+class UicSearcherComponent extends base$3 {
     icon = ''; // Icono externo
     iconColor = 'primary'; //color de ícono externo
     internalIcon = 'ri-search-2-line'; //Icono interno
@@ -807,93 +1037,806 @@ class UicSearcherComponent extends base$1 {
     watingApi = false;
     overlay = inject(Overlay);
     vcr = inject(ViewContainerRef);
-    host = inject((ElementRef));
-    onSearchChange(value) {
-        this.searchText = value;
-        if (!this.manualSearch) {
-            this.searchSubject.next(value);
+    host = inject((ElementRef));
+    onSearchChange(value) {
+        this.searchText = value;
+        if (!this.manualSearch) {
+            this.searchSubject.next(value);
+        }
+    }
+    triggerSearch() {
+        this.searchSubject.next(this.searchText);
+    }
+    selectItem(item) {
+        if (!this.itemIsEnabledFn || this.itemIsEnabledFn(item)) {
+            this.clearSearch();
+            this.closeList();
+            if (this.showSelected)
+                this.selectedOption = item;
+            this.notifyChange(item);
+        }
+    }
+    clearSearch() {
+        this.searchText = '';
+        this.searchSubject.next('');
+    }
+    unselect() {
+        this.selectedOption = null;
+        this.notifyChange(null);
+    }
+    // --- Overlay ---
+    dropdownTemplate;
+    overlayRef;
+    overlayPositions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    ];
+    openList() {
+        if (this.disabled || this.loading)
+            return;
+        if (this.overlayRef) {
+            this.closeList();
+        }
+        const input = this.host.nativeElement.querySelector('.fakeinput');
+        const width = input.offsetWidth;
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(input)
+            .withPositions(this.overlayPositions)
+            .withFlexibleDimensions(true)
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            width,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
+        this.overlayRef.attach(portal);
+        this.overlayRef.backdropClick().subscribe(() => this.closeList());
+    }
+    closeList() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.selectedOption = value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", loading: "loading", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UicSearcherComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<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 class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  tip=\"Limpiar\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\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      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, UicButtonComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UicSearcherComponent),
+                            multi: true
+                        }
+                    ], template: "\r\n<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 class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  tip=\"Limpiar\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\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      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: [{
+                type: Input
+            }], internalIcon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], showSubtitle: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], showSelected: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchFn: [{
+                type: Input
+            }], itemDisplayFn: [{
+                type: Input
+            }], itemIsEnabledFn: [{
+                type: Input
+            }], manualSearch: [{
+                type: Input
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate']
+            }] } });
+
+const base$2 = createValueAccessor();
+class UicMultySelectComponent extends base$2 {
+    icon = ''; // Icono externo
+    iconColor = 'primary'; //color de ícono externo
+    internalIcon = ''; //Icono interno
+    size = 'm'; // tamaño general del input
+    // TEXT
+    label = '';
+    error = '';
+    tip = '';
+    showSubtitle = false;
+    disabled = false;
+    emptyText = '- Seleccionar -';
+    // FUNCTIONS
+    loading = false;
+    options = [];
+    // MULTY
+    allSelected = false;
+    selectedSet = new Set();
+    toggleAll(checked) {
+        this.allSelected = checked;
+        this.selectedSet.clear();
+        if (checked) {
+            this.options.forEach(o => {
+                const key = o.id ?? o.text;
+                this.selectedSet.add(key);
+            });
+        }
+    }
+    toggleOption(id) {
+        if (this.selectedSet.has(id)) {
+            this.selectedSet.delete(id);
+        }
+        else {
+            this.selectedSet.add(id);
+        }
+        this.updateAllSelected();
+    }
+    updateAllSelected() {
+        this.allSelected = this.options.length > 0 && this.selectedSet.size === this.options.length;
+    }
+    applySelection() {
+        let result = [];
+        result = [...this.selectedSet];
+        this.notifyChange(result);
+        this.closeList();
+    }
+    dropdownTemplate;
+    overlayRef;
+    overlayPositions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    ];
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    host = inject((ElementRef));
+    ngOnChanges(changes) {
+        if (changes['options'] && this.value != null) {
+            // Resetear valor seleccionado
+            this.selectedSet = new Set();
+        }
+    }
+    // --- Overlay ---
+    openList() {
+        if (this.disabled || this.loading)
+            return;
+        if (this.overlayRef) {
+            this.closeList();
+        }
+        const input = this.host.nativeElement.querySelector('.fakeinput');
+        const width = input.offsetWidth;
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(input)
+            .withPositions(this.overlayPositions)
+            .withFlexibleDimensions(true)
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            width,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
+        this.overlayRef.attach(portal);
+        this.overlayRef.backdropClick().subscribe(() => this.closeList());
+    }
+    closeList() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.selectedSet = new Set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicMultySelectComponent, isStandalone: true, selector: "ui-multy-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", loading: "loading", options: "options" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UicMultySelectComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], 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 class=\"fakeinput-wrapp\" > \r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n                [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >TEXTO PENDIENTE</div>\r\n                @if (!disabled && !loading) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n            <ng-template #dropdownTemplate >\r\n                 <div class=\"input-options\">\r\n                    <div class=\"multyoptions-header\">\r\n                        <ui-checkbox [noPadding]=\"true\"\r\n                            [ngModel]=\"allSelected\" \r\n                            (ngModelChange)=\"toggleAll($event)\"\r\n                        placeholder=\"Todos\"></ui-checkbox>\r\n                    </div>\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">                    \r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"toggleOption(option.id??option.text)\"  class=\"input-multyoption\">\r\n                                <ui-checkbox \r\n                                    [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n                                    [noPadding]=\"true\" \r\n                                    [placeholder]=\"option.text\"></ui-checkbox>\r\n                            </div> \r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                     <!-- <div class=\"multyoptions-footer\">\r\n                        <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n                        <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n                    </div> -->\r\n                 </div>\r\n            </ng-template>\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>", 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-multy-select', imports: [CommonModule, UicCheckboxComponent, UicButtonComponent, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UicMultySelectComponent),
+                            multi: true
+                        }
+                    ], 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 class=\"fakeinput-wrapp\" > \r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n                [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >TEXTO PENDIENTE</div>\r\n                @if (!disabled && !loading) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n            <ng-template #dropdownTemplate >\r\n                 <div class=\"input-options\">\r\n                    <div class=\"multyoptions-header\">\r\n                        <ui-checkbox [noPadding]=\"true\"\r\n                            [ngModel]=\"allSelected\" \r\n                            (ngModelChange)=\"toggleAll($event)\"\r\n                        placeholder=\"Todos\"></ui-checkbox>\r\n                    </div>\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">                    \r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"toggleOption(option.id??option.text)\"  class=\"input-multyoption\">\r\n                                <ui-checkbox \r\n                                    [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n                                    [noPadding]=\"true\" \r\n                                    [placeholder]=\"option.text\"></ui-checkbox>\r\n                            </div> \r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                     <!-- <div class=\"multyoptions-footer\">\r\n                        <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n                        <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n                    </div> -->\r\n                 </div>\r\n            </ng-template>\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>", 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], internalIcon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], showSubtitle: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate']
+            }] } });
+
+const base$1 = createValueAccessor();
+class UicTimePickerComponent extends base$1 {
+    // Iconos y estado
+    icon = '';
+    iconColor = 'primary';
+    internalIcon = '';
+    disabled = false;
+    // Texto
+    label = '';
+    error = '';
+    tip = '';
+    // Configuracion
+    interval = 1; // paso de minutos en el overlay
+    // Entrada mostrada (12h) y valor (24h)
+    displayValue = '';
+    // Overlay
+    overlayTemplate;
+    hourOptions;
+    minuteOptions;
+    meridiemOptions;
+    overlayRef = null;
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    host = inject((ElementRef));
+    overlayPositions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    ];
+    // Listas para construir la hora
+    hours12 = Array.from({ length: 12 }, (_, i) => i + 1); // 1..12
+    minutes = [];
+    meridiems = ['am', 'pm'];
+    selectedHour12 = null;
+    selectedMinute = null;
+    selectedMeridiem = null;
+    ngOnInit() {
+        this.rebuildMinutes();
+        this.syncSelectionFromValue();
+    }
+    ngOnChanges(changes) {
+        if (changes['interval']) {
+            this.rebuildMinutes();
+            this.syncSelectionFromValue();
+        }
+    }
+    rebuildMinutes() {
+        const step = Math.max(1, Math.min(60, Math.floor(this.interval || 1)));
+        const mins = [];
+        for (let m = 0; m < 60; m += step) {
+            mins.push(m);
+        }
+        this.minutes = mins;
+    }
+    applySelection(parsed) {
+        if (!parsed) {
+            this.clearSelection();
+            return;
+        }
+        this.selectedHour12 = parsed.hour12;
+        this.selectedMinute = this.minutes.includes(parsed.minute) ? parsed.minute : null;
+        this.selectedMeridiem = parsed.meridiem;
+    }
+    clearSelection() {
+        this.selectedHour12 = null;
+        this.selectedMinute = null;
+        this.selectedMeridiem = null;
+    }
+    syncSelectionFromValue() {
+        const parsed = this.parseValue(this.value) || this.parseDisplay(this.displayValue);
+        this.applySelection(parsed);
+    }
+    // --- Overlay ---
+    openOverlay() {
+        if (this.disabled)
+            return;
+        if (this.overlayRef) {
+            this.closeOverlay();
+        }
+        const inputEl = this.host.nativeElement.querySelector('.fakeinput');
+        const width = inputEl?.clientWidth;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(inputEl)
+            .withPositions(this.overlayPositions)
+            .withFlexibleDimensions(false)
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width,
+        });
+        const portal = new TemplatePortal(this.overlayTemplate, this.vcr);
+        this.overlayRef.attach(portal);
+        this.overlayRef.backdropClick().subscribe(() => this.closeOverlay());
+        this.syncSelectionFromValue();
+        setTimeout(() => this.scrollToSelection(), 0);
+    }
+    closeOverlay() {
+        if (this.overlayRef) {
+            this.onTouched();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    // Selecciones desde overlay
+    pickHour(hour) {
+        this.selectedHour12 = hour;
+        this.commitOverlaySelection();
+    }
+    pickMinute(minute) {
+        this.selectedMinute = minute;
+        this.commitOverlaySelection();
+    }
+    pickMeridiem(meridiem) {
+        this.selectedMeridiem = meridiem;
+        this.commitOverlaySelection();
+    }
+    commitOverlaySelection() {
+        const base = this.parseDisplay(this.displayValue) ||
+            this.parseValue(this.value) || {
+            hour12: 12,
+            minute: 0,
+            meridiem: 'am',
+        };
+        const hour = this.selectedHour12 ?? base.hour12;
+        const minute = this.selectedMinute ?? base.minute;
+        const meridiem = this.selectedMeridiem ?? base.meridiem;
+        this.displayValue = this.format12(hour, minute, meridiem);
+        this.notifyChange(this.compose24(hour, minute, meridiem));
+    }
+    // --- Entrada manual ---
+    onInput(val) {
+        this.displayValue = val;
+    }
+    onBlur() {
+        const parsed = this.parseDisplay(this.displayValue);
+        if (parsed) {
+            this.displayValue = this.format12(parsed.hour12, parsed.minute, parsed.meridiem);
+            const value24 = this.compose24(parsed.hour12, parsed.minute, parsed.meridiem);
+            this.notifyChange(value24);
+            this.applySelection(parsed);
+        }
+        else {
+            this.displayValue = '';
+            this.notifyChange(null);
+            this.clearSelection();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            event.target.blur();
+        }
+    }
+    // --- ControlValueAccessor ---
+    writeValue(value) {
+        super.writeValue(value);
+        const parsed = this.parseValue(value || '');
+        if (parsed) {
+            this.displayValue = this.format12(parsed.hour12, parsed.minute, parsed.meridiem);
+            this.applySelection(parsed);
+        }
+        else {
+            this.displayValue = '';
+            this.clearSelection();
+        }
+    }
+    // --- Helpers de formato ---
+    format12(hour12, minute, meridiem) {
+        const hh = String(hour12).padStart(2, '0');
+        const mm = String(minute).padStart(2, '0');
+        return `${hh}:${mm} ${meridiem}`;
+    }
+    compose24(hour12, minute, meridiem) {
+        let h24 = hour12 % 12;
+        if (meridiem === 'pm')
+            h24 += 12;
+        const hh = String(h24).padStart(2, '0');
+        const mm = String(minute).padStart(2, '0');
+        return `${hh}:${mm}`;
+    }
+    parseDisplay(text) {
+        if (!text)
+            return null;
+        const match = text.trim().match(/^\s*(\d{1,2})\s*:\s*(\d{2})(?:\s*([aApP][mM]))?\s*$/);
+        if (!match)
+            return null;
+        const hour = parseInt(match[1], 10);
+        const minute = parseInt(match[2], 10);
+        const meridiem = (match[3] ? match[3].toLowerCase() : 'am');
+        if (hour < 1 || hour > 12)
+            return null;
+        if (minute < 0 || minute > 59)
+            return null;
+        return { hour12: hour, minute, meridiem };
+    }
+    parseValue(value24) {
+        if (!value24)
+            return null;
+        const match = value24.match(/^(\d{2}):(\d{2})$/);
+        if (!match)
+            return null;
+        const hour24 = parseInt(match[1], 10);
+        const minute = parseInt(match[2], 10);
+        if (hour24 < 0 || hour24 > 23)
+            return null;
+        if (minute < 0 || minute > 59)
+            return null;
+        const meridiem = hour24 < 12 ? 'am' : 'pm';
+        let hour12 = hour24 % 12;
+        if (hour12 === 0)
+            hour12 = 12;
+        return { hour12, minute, meridiem };
+    }
+    scrollToSelection(retries = 3) {
+        if (!this.overlayRef || !this.overlayRef.hasAttached()) {
+            return;
+        }
+        const hourScrolled = this.scrollColumn(this.hourOptions, this.hours12, this.selectedHour12);
+        const minuteScrolled = this.scrollColumn(this.minuteOptions, this.minutes, this.selectedMinute);
+        const meridiemScrolled = this.scrollColumn(this.meridiemOptions, this.meridiems, this.selectedMeridiem);
+        const hasSelection = this.selectedHour12 !== null || this.selectedMinute !== null || this.selectedMeridiem !== null;
+        if (hasSelection && !(hourScrolled || minuteScrolled || meridiemScrolled) && retries > 0) {
+            setTimeout(() => this.scrollToSelection(retries - 1), 50);
+        }
+    }
+    scrollColumn(query, values, selected) {
+        if (!query || selected === null) {
+            return false;
+        }
+        const index = values.findIndex((value) => value === selected);
+        if (index < 0) {
+            return false;
+        }
+        const elements = query.toArray();
+        const element = elements[index]?.nativeElement;
+        if (!element) {
+            return false;
+        }
+        try {
+            element.scrollIntoView({ block: 'center' });
+        }
+        catch {
+            element.scrollIntoView();
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTimePickerComponent, isStandalone: true, selector: "ui-time-picker", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", disabled: "disabled", label: "label", error: "error", tip: "tip", interval: "interval" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UicTimePickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "hourOptions", predicate: ["hourOption"], descendants: true }, { propertyName: "minuteOptions", predicate: ["minuteOption"], descendants: true }, { propertyName: "meridiemOptions", predicate: ["meridiemOption"], descendants: true }], 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 class=\"fakeinput-wrapp\">\r\n      <div class=\"fakeinput\" [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=\"hh:mm am/pm\"\r\n          [value]=\"displayValue\"\r\n          #timeInput\r\n          (input)=\"onInput(timeInput.value)\"\r\n          (blur)=\"onBlur()\"\r\n          (keydown)=\"onKeydown($event)\"\r\n        />\r\n        <ui-button class=\"side-button\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"s\" icon=\"ri-arrow-down-wide-line\" [disabled]=\"disabled\" (click)=\"openOverlay()\"></ui-button>\r\n      </div>\r\n\r\n      <!-- Overlay simple sin estilos: 3 columnas (hora, minuto, am/pm) -->\r\n      <ng-template #overlayTemplate>\r\n        <div class=\"input-options\">\r\n\r\n          <div class=\"time-overlay\">\r\n            <div class=\"time-col hours\">\r\n              @for (h of hours12; track $index) {\r\n                <div\r\n                  #hourOption\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"h === selectedHour12\"\r\n                  (click)=\"pickHour(h)\"\r\n                >\r\n                  {{ h }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"time-col minutes\">\r\n              @for (m of minutes; track $index) {\r\n                <div\r\n                  #minuteOption\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"m === selectedMinute\"\r\n                  (click)=\"pickMinute(m)\"\r\n                >\r\n                  {{ m < 10 ? ('0' + m) : m }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"time-col meridiem\">\r\n              @for (md of meridiems; track $index) {\r\n                <div\r\n                  #meridiemOption\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"md === selectedMeridiem\"\r\n                  (click)=\"pickMeridiem(md)\"\r\n                >\r\n                  {{ md }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\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: [".time-overlay{width:100%;padding:5px;display:flex;background-color:#fff}.time-col{height:140px;overflow:auto;width:33%;scrollbar-width:none}.time-item{padding:5px;border-bottom:solid 1px var(--grey-200);text-align:center;border-radius:5px;transition:ease .3s;cursor:pointer}.time-item:hover{background-color:var(--grey-100)}.time-item.selected{background-color:var(--primary-200)}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-time-picker', imports: [CommonModule, UicButtonComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UicTimePickerComponent),
+                            multi: true,
+                        },
+                    ], 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 class=\"fakeinput-wrapp\">\r\n      <div class=\"fakeinput\" [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=\"hh:mm am/pm\"\r\n          [value]=\"displayValue\"\r\n          #timeInput\r\n          (input)=\"onInput(timeInput.value)\"\r\n          (blur)=\"onBlur()\"\r\n          (keydown)=\"onKeydown($event)\"\r\n        />\r\n        <ui-button class=\"side-button\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"s\" icon=\"ri-arrow-down-wide-line\" [disabled]=\"disabled\" (click)=\"openOverlay()\"></ui-button>\r\n      </div>\r\n\r\n      <!-- Overlay simple sin estilos: 3 columnas (hora, minuto, am/pm) -->\r\n      <ng-template #overlayTemplate>\r\n        <div class=\"input-options\">\r\n\r\n          <div class=\"time-overlay\">\r\n            <div class=\"time-col hours\">\r\n              @for (h of hours12; track $index) {\r\n                <div\r\n                  #hourOption\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"h === selectedHour12\"\r\n                  (click)=\"pickHour(h)\"\r\n                >\r\n                  {{ h }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"time-col minutes\">\r\n              @for (m of minutes; track $index) {\r\n                <div\r\n                  #minuteOption\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"m === selectedMinute\"\r\n                  (click)=\"pickMinute(m)\"\r\n                >\r\n                  {{ m < 10 ? ('0' + m) : m }}\r\n                </div>\r\n              }\r\n            </div>\r\n            <div class=\"time-col meridiem\">\r\n              @for (md of meridiems; track $index) {\r\n                <div\r\n                  #meridiemOption\r\n                  class=\"time-item\"\r\n                  [class.selected]=\"md === selectedMeridiem\"\r\n                  (click)=\"pickMeridiem(md)\"\r\n                >\r\n                  {{ md }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n\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: [".time-overlay{width:100%;padding:5px;display:flex;background-color:#fff}.time-col{height:140px;overflow:auto;width:33%;scrollbar-width:none}.time-item{padding:5px;border-bottom:solid 1px var(--grey-200);text-align:center;border-radius:5px;transition:ease .3s;cursor:pointer}.time-item:hover{background-color:var(--grey-100)}.time-item.selected{background-color:var(--primary-200)}\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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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: [{
+                type: Input
+            }], internalIcon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], interval: [{
+                type: Input
+            }], overlayTemplate: [{
+                type: ViewChild,
+                args: ['overlayTemplate']
+            }], hourOptions: [{
+                type: ViewChildren,
+                args: ['hourOption']
+            }], minuteOptions: [{
+                type: ViewChildren,
+                args: ['minuteOption']
+            }], meridiemOptions: [{
+                type: ViewChildren,
+                args: ['meridiemOption']
+            }] } });
+
+const PHONE_COUNTRIES = [
+    { name: 'Argentina', iso2: 'ar', dialCode: '54' },
+    { name: 'Australia', iso2: 'au', dialCode: '61' },
+    { name: 'Bolivia', iso2: 'bo', dialCode: '591' },
+    { name: 'Brazil', iso2: 'br', dialCode: '55' },
+    { name: 'Canada', iso2: 'ca', dialCode: '1' },
+    { name: 'Chile', iso2: 'cl', dialCode: '56' },
+    { name: 'China', iso2: 'cn', dialCode: '86' },
+    { name: 'Colombia', iso2: 'co', dialCode: '57' },
+    { name: 'Costa Rica', iso2: 'cr', dialCode: '506' },
+    { name: 'Dominican Republic', iso2: 'do', dialCode: '1', areaCodes: ['809', '829', '849'] },
+    { name: 'Ecuador', iso2: 'ec', dialCode: '593' },
+    { name: 'El Salvador', iso2: 'sv', dialCode: '503' },
+    { name: 'France', iso2: 'fr', dialCode: '33' },
+    { name: 'Germany', iso2: 'de', dialCode: '49' },
+    { name: 'Guatemala', iso2: 'gt', dialCode: '502' },
+    { name: 'Honduras', iso2: 'hn', dialCode: '504' },
+    { name: 'Italy', iso2: 'it', dialCode: '39' },
+    { name: 'Japan', iso2: 'jp', dialCode: '81' },
+    { name: 'Mexico', iso2: 'mx', dialCode: '52' },
+    { name: 'Netherlands', iso2: 'nl', dialCode: '31' },
+    { name: 'New Zealand', iso2: 'nz', dialCode: '64' },
+    { name: 'Panama', iso2: 'pa', dialCode: '507' },
+    { name: 'Paraguay', iso2: 'py', dialCode: '595' },
+    { name: 'Peru', iso2: 'pe', dialCode: '51' },
+    { name: 'Portugal', iso2: 'pt', dialCode: '351' },
+    { name: 'Spain', iso2: 'es', dialCode: '34' },
+    { name: 'United Kingdom', iso2: 'gb', dialCode: '44' },
+    { name: 'United States', iso2: 'us', dialCode: '1' },
+    { name: 'Uruguay', iso2: 'uy', dialCode: '598' },
+    { name: 'Venezuela', iso2: 've', dialCode: '58' }
+];
+
+const base = createValueAccessor();
+class UicPhoneInputComponent extends base {
+    icon = '';
+    iconColor = 'black';
+    internalIcon = '';
+    size = 'm';
+    label = '';
+    error = '';
+    tip = '';
+    placeholder = 'Ingresa un numero';
+    disabled = false;
+    loading = false;
+    preferredCountries = ['pe', 'es', 'us'];
+    flagPath = 'https://flagcdn.com/{{code}}.svg';
+    set countries(value) {
+        this._countries = value?.length ? value : PHONE_COUNTRIES;
+        this.resetCountryLists();
+    }
+    get countries() {
+        return this._countries;
+    }
+    searchInput;
+    dropdownTemplate;
+    dropdownOpen = false;
+    searchTerm = '';
+    phoneNumber = '';
+    selectedCountry;
+    filteredCountries = [];
+    dropdownId = `phone-dropdown-${Math.random().toString(36).slice(2, 8)}`;
+    _countries = PHONE_COUNTRIES;
+    host = inject((ElementRef));
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    overlayRef;
+    overlayPositions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
+    ];
+    constructor() {
+        super();
+        this.resetCountryLists();
+    }
+    ngOnChanges(changes) {
+        if (changes['preferredCountries'] && !changes['preferredCountries'].firstChange) {
+            this.selectedCountry = this.getDefaultCountry();
+            this.emitValue();
+        }
+        if (changes['disabled'] && this.disabled && this.dropdownOpen) {
+            this.closeDropdown();
         }
     }
-    triggerSearch() {
-        this.searchSubject.next(this.searchText);
+    ngOnDestroy() {
+        this.closeDropdown();
     }
-    selectItem(item) {
-        if (!this.itemIsEnabledFn || this.itemIsEnabledFn(item)) {
-            this.clearSearch();
-            this.closeList();
-            if (this.showSelected)
-                this.selectedOption = item;
-            this.notifyChange(item);
+    writeValue(value) {
+        super.writeValue(value);
+        if (!value) {
+            this.phoneNumber = '';
+            this.selectedCountry = this.getDefaultCountry();
+            return;
+        }
+        const matchedCountry = this.countries.find(country => country.iso2 === value.countryIso2) ??
+            this.countries.find(country => country.dialCode === value.dialCode);
+        this.selectedCountry = matchedCountry ?? this.getDefaultCountry();
+        this.phoneNumber = (value.nationalNumber ?? '').replace(/\D/g, '');
+    }
+    toggleDropdown() {
+        if (this.disabled || this.loading)
+            return;
+        if (this.dropdownOpen) {
+            this.closeDropdown();
         }
+        else {
+            this.openDropdown();
+        }
+    }
+    selectCountry(country) {
+        this.selectedCountry = country;
+        this.closeDropdown();
+        this.emitValue();
+    }
+    onNumberInput(event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '');
+        this.phoneNumber = digits;
+        input.value = digits;
+        this.emitValue();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    onSearchChange(event) {
+        const term = event.target.value.trim().toLowerCase();
+        this.searchTerm = term;
+        if (!term) {
+            this.filteredCountries = [...this.countries];
+            return;
+        }
+        this.filteredCountries = this.countries.filter(country => {
+            const matchesName = country.name.toLowerCase().includes(term);
+            const matchesIso = country.iso2.toLowerCase().includes(term);
+            const matchesDial = country.dialCode.startsWith(term.replace('+', ''));
+            return matchesName || matchesIso || matchesDial;
+        });
     }
     clearSearch() {
-        this.searchText = '';
-        this.searchSubject.next('');
+        this.searchTerm = '';
+        this.filteredCountries = [...this.countries];
+        if (this.dropdownOpen) {
+            this.searchInput?.nativeElement.focus();
+        }
     }
-    unselect() {
-        this.selectedOption = null;
-        this.notifyChange(null);
+    getFlagUrl(iso) {
+        const code = iso.toLowerCase();
+        if (this.flagPath.includes('{{code}}')) {
+            return this.flagPath.replace('{{code}}', code);
+        }
+        const safeBase = this.flagPath.replace(/\/$/, '');
+        return `${safeBase}/${code}.svg`;
     }
-    // --- Overlay ---
-    dropdownTemplate;
-    overlayRef;
-    overlayPositions = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-    ];
-    openList() {
-        if (this.disabled || this.loading)
+    emitValue() {
+        if (!this.phoneNumber) {
+            this.notifyChange(null);
             return;
-        if (this.overlayRef) {
-            this.closeList();
         }
-        const input = this.host.nativeElement.querySelector('.fakeinput');
-        const width = input.offsetWidth;
-        const positionStrategy = this.overlay.position()
-            .flexibleConnectedTo(input)
+        const value = {
+            countryIso2: this.selectedCountry.iso2,
+            dialCode: this.selectedCountry.dialCode,
+            nationalNumber: this.phoneNumber,
+            internationalNumber: `+${this.selectedCountry.dialCode}${this.phoneNumber}`
+        };
+        this.notifyChange(value);
+    }
+    openDropdown() {
+        if (!this.dropdownTemplate) {
+            return;
+        }
+        const trigger = this.host.nativeElement.querySelector('.fakeinput');
+        const width = trigger?.getBoundingClientRect().width ?? undefined;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(trigger ?? this.host.nativeElement)
             .withPositions(this.overlayPositions)
-            .withFlexibleDimensions(true)
+            .withFlexibleDimensions(false)
             .withPush(false);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             width,
             hasBackdrop: true,
             backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
         });
         const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
         this.overlayRef.attach(portal);
-        this.overlayRef.backdropClick().subscribe(() => this.closeList());
+        this.filteredCountries = [...this.countries];
+        this.dropdownOpen = true;
+        this.overlayRef.backdropClick().subscribe(() => this.closeDropdown());
+        this.overlayRef.keydownEvents().subscribe(event => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeDropdown();
+            }
+        });
+        setTimeout(() => this.searchInput?.nativeElement.focus());
     }
-    closeList() {
+    closeDropdown() {
+        this.dropdownOpen = false;
+        this.resetSearch();
         if (this.overlayRef) {
             this.overlayRef.dispose();
-            this.overlayRef = null;
+            this.overlayRef = undefined;
         }
     }
-    writeValue(value) {
-        super.writeValue(value);
-        this.selectedOption = value;
+    resetSearch() {
+        this.searchTerm = '';
+        this.filteredCountries = [...this.countries];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", loading: "loading", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch" }, providers: [
+    resetCountryLists() {
+        this.filteredCountries = [...this.countries];
+        this.selectedCountry = this.getDefaultCountry();
+    }
+    getDefaultCountry() {
+        const preferred = this.preferredCountries
+            .map(code => this.countries.find(country => country.iso2 === code))
+            .find((country) => !!country);
+        return preferred ?? this.countries[0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPhoneInputComponent, isStandalone: true, selector: "ui-phone-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", placeholder: "placeholder", disabled: "disabled", loading: "loading", preferredCountries: "preferredCountries", flagPath: "flagPath", countries: "countries" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UicSearcherComponent),
+                useExisting: forwardRef(() => UicPhoneInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<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 class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  tip=\"Limpiar\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\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      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], 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\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\">\r\n        {{ label }}\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      class=\"fakeinput phone-input\"\r\n      [ngClass]=\"{\r\n        errorinput: error,\r\n        disabledinput: disabled,\r\n        'loading-input': loading,\r\n        open: dropdownOpen\r\n      }\"\r\n    >\r\n      @if (internalIcon) {\r\n        <i class=\"input-internalicon {{ internalIcon }}\"></i>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"phone-input__selector\"\r\n        (click)=\"toggleDropdown()\"\r\n        [disabled]=\"disabled || loading\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"dropdownOpen\"\r\n        [attr.aria-controls]=\"dropdownOpen ? dropdownId : null\"\r\n        [attr.aria-label]=\"selectedCountry.name + ' codigo ' + selectedCountry.dialCode\"\r\n      >\r\n        <img\r\n          class=\"phone-input__flag\"\r\n          [src]=\"getFlagUrl(selectedCountry.iso2)\"\r\n          [alt]=\"selectedCountry.name\"\r\n        />\r\n        <i class=\"ri-arrow-down-s-line phone-input__chevron\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <div class=\"phone-input__divider\" aria-hidden=\"true\"></div>\r\n      <div class=\"phone-input__dial\">+{{ selectedCountry.dialCode }}</div>\r\n\r\n\r\n      <input\r\n        type=\"tel\"\r\n        class=\"phone-input__field\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || loading\"\r\n        inputmode=\"tel\"\r\n        [value]=\"phoneNumber\"\r\n        (input)=\"onNumberInput($event)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n    </div>\r\n\r\n    @if (error) {\r\n      <div class=\"fakeinput-alert f-red\">{{ error }}</div>\r\n    }\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\r\n<ng-template #dropdownTemplate>\r\n  <datalist class=\"phone-input__dropdown\"  [attr.id]=\"dropdownId\">\r\n    <div class=\"phone-input__search\">\r\n      <i class=\"ri-search-line\"></i>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearchChange($event)\"\r\n        placeholder=\"Buscar pais o codigo\"\r\n        autocomplete=\"off\"\r\n      />\r\n      @if (searchTerm) {\r\n        <button type=\"button\" class=\"phone-input__clear\" (click)=\"clearSearch()\" aria-label=\"Limpiar busqueda\">\r\n          <i class=\"ri-close-line\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"phone-input__list\">\r\n      @for (country of filteredCountries; track country.iso2) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"phone-input__option\"\r\n          (click)=\"selectCountry(country)\"\r\n          [attr.aria-selected]=\"country.iso2 === selectedCountry.iso2\"\r\n          [attr.data-iso]=\"country.iso2\"\r\n          [attr.title]=\"country.name + ' +' + country.dialCode\"\r\n          [attr.aria-label]=\"country.name + ' +' + country.dialCode\"\r\n        >\r\n          <img\r\n            class=\"phone-input__flag\"\r\n            [src]=\"getFlagUrl(country.iso2)\"\r\n            [alt]=\"country.name\"\r\n          />\r\n          {{country.name}}\r\n          <span class=\"phone-input__dial\">(+{{ country.dialCode }})</span>\r\n        </button>\r\n      }\r\n\r\n      @if (filteredCountries.length === 0) {\r\n        <div class=\"phone-input__empty\">No se encontraron resultados</div>\r\n      }\r\n    </div>\r\n  </datalist>\r\n</ng-template>\r\n", 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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", ".phone-input{padding:0}.phone-input.open .phone-input__chevron{transform:rotate(180deg)}.phone-input__selector{display:flex;align-items:center;background:transparent;border:none;height:calc(4 * var(--form-ref));padding:0 0 0 3px;gap:2px;color:var(--grey-900);font-size:max(var(--form-ref) + 4px,13px);cursor:pointer;transition:.2s ease}.phone-input__selector:hover{background-color:var(--grey-100)}.phone-input__selector:disabled{cursor:not-allowed;color:var(--disabled-color)}.phone-input__selector:focus-visible{outline:none}.phone-input__flag{width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000000d}.phone-input__dial{padding:0 5px;font-weight:600;color:var(--grey-700)}.phone-input__chevron{font-size:1rem;color:var(--grey-500);transition:transform .2s ease}.phone-input__divider{width:1px;background-color:var(--grey-200);align-self:stretch}.phone-input__field{flex:1 1 auto;border:none;outline:none;padding:9px var(--form-ref);font-size:max(var(--form-ref) + 4px,13px);color:var(--grey-900);background:transparent}.phone-input__field::placeholder{color:var(--grey-400)}.phone-input__field:disabled{background-color:transparent;color:var(--disabled-color);cursor:not-allowed}.phone-input__dropdown{margin-top:4px;border-radius:var(--input-radius);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;border:1px solid var(--grey-200);background-color:var(--white);width:100%;max-height:280px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.phone-input__search{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--grey-200);gap:6px}.phone-input__search>i{color:var(--grey-500);font-size:1rem}.phone-input__search>input{flex:1;border:none;outline:none;font-size:.875rem;color:var(--grey-900);background:transparent}.phone-input__search>input::placeholder{color:var(--grey-400)}.phone-input__clear{border:none;background:transparent;cursor:pointer;color:var(--grey-400);padding:2px;display:inline-flex;align-items:center;justify-content:center}.phone-input__clear:hover{color:var(--grey-600)}.phone-input__clear:focus-visible{outline:none}.phone-input__list{max-height:220px;overflow-y:auto;display:flex;padding:5px;flex-direction:column}.phone-input__option{display:flex;gap:5px;width:100%;background:transparent;border:none;padding:5px 8px;cursor:pointer;font-size:.75rem;color:var(--grey-900);transition:background-color .2s ease;text-align:left}.phone-input__option:hover{background-color:var(--secondary-100)}.phone-input__option[aria-selected=true]{background-color:var(--primary-100);color:var(--primary-700)}.phone-input__option .phone-input__dial{font-weight:400;padding:0;color:var(--grey-500)}.phone-input__empty{padding:12px;font-size:.875rem;color:var(--grey-500);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPhoneInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, UicButtonComponent], providers: [
+            args: [{ selector: 'ui-phone-input', imports: [CommonModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UicSearcherComponent),
+                            useExisting: forwardRef(() => UicPhoneInputComponent),
                             multi: true
                         }
-                    ], template: "\r\n<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 class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  tip=\"Limpiar\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\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      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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: [{
+                    ], template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{ iconColor }} {{ icon }}\"></i>\r\n  }\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\">\r\n        {{ label }}\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      class=\"fakeinput phone-input\"\r\n      [ngClass]=\"{\r\n        errorinput: error,\r\n        disabledinput: disabled,\r\n        'loading-input': loading,\r\n        open: dropdownOpen\r\n      }\"\r\n    >\r\n      @if (internalIcon) {\r\n        <i class=\"input-internalicon {{ internalIcon }}\"></i>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"phone-input__selector\"\r\n        (click)=\"toggleDropdown()\"\r\n        [disabled]=\"disabled || loading\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"dropdownOpen\"\r\n        [attr.aria-controls]=\"dropdownOpen ? dropdownId : null\"\r\n        [attr.aria-label]=\"selectedCountry.name + ' codigo ' + selectedCountry.dialCode\"\r\n      >\r\n        <img\r\n          class=\"phone-input__flag\"\r\n          [src]=\"getFlagUrl(selectedCountry.iso2)\"\r\n          [alt]=\"selectedCountry.name\"\r\n        />\r\n        <i class=\"ri-arrow-down-s-line phone-input__chevron\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <div class=\"phone-input__divider\" aria-hidden=\"true\"></div>\r\n      <div class=\"phone-input__dial\">+{{ selectedCountry.dialCode }}</div>\r\n\r\n\r\n      <input\r\n        type=\"tel\"\r\n        class=\"phone-input__field\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [disabled]=\"disabled || loading\"\r\n        inputmode=\"tel\"\r\n        [value]=\"phoneNumber\"\r\n        (input)=\"onNumberInput($event)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n    </div>\r\n\r\n    @if (error) {\r\n      <div class=\"fakeinput-alert f-red\">{{ error }}</div>\r\n    }\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\r\n<ng-template #dropdownTemplate>\r\n  <datalist class=\"phone-input__dropdown\"  [attr.id]=\"dropdownId\">\r\n    <div class=\"phone-input__search\">\r\n      <i class=\"ri-search-line\"></i>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearchChange($event)\"\r\n        placeholder=\"Buscar pais o codigo\"\r\n        autocomplete=\"off\"\r\n      />\r\n      @if (searchTerm) {\r\n        <button type=\"button\" class=\"phone-input__clear\" (click)=\"clearSearch()\" aria-label=\"Limpiar busqueda\">\r\n          <i class=\"ri-close-line\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"phone-input__list\">\r\n      @for (country of filteredCountries; track country.iso2) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"phone-input__option\"\r\n          (click)=\"selectCountry(country)\"\r\n          [attr.aria-selected]=\"country.iso2 === selectedCountry.iso2\"\r\n          [attr.data-iso]=\"country.iso2\"\r\n          [attr.title]=\"country.name + ' +' + country.dialCode\"\r\n          [attr.aria-label]=\"country.name + ' +' + country.dialCode\"\r\n        >\r\n          <img\r\n            class=\"phone-input__flag\"\r\n            [src]=\"getFlagUrl(country.iso2)\"\r\n            [alt]=\"country.name\"\r\n          />\r\n          {{country.name}}\r\n          <span class=\"phone-input__dial\">(+{{ country.dialCode }})</span>\r\n        </button>\r\n      }\r\n\r\n      @if (filteredCountries.length === 0) {\r\n        <div class=\"phone-input__empty\">No se encontraron resultados</div>\r\n      }\r\n    </div>\r\n  </datalist>\r\n</ng-template>\r\n", 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:var(--form-ref);font-size:calc(2.5 * var(--form-ref))}.label{font-size:calc(max(var(--form-ref) + 4px,13px) - 1px);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;padding:9px 0;overflow:hidden;font-size:max(var(--form-ref) + 4px,13px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref))}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:0;font-size:max(var(--form-ref) + 4px,13px);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)}.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", ".phone-input{padding:0}.phone-input.open .phone-input__chevron{transform:rotate(180deg)}.phone-input__selector{display:flex;align-items:center;background:transparent;border:none;height:calc(4 * var(--form-ref));padding:0 0 0 3px;gap:2px;color:var(--grey-900);font-size:max(var(--form-ref) + 4px,13px);cursor:pointer;transition:.2s ease}.phone-input__selector:hover{background-color:var(--grey-100)}.phone-input__selector:disabled{cursor:not-allowed;color:var(--disabled-color)}.phone-input__selector:focus-visible{outline:none}.phone-input__flag{width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #0000000d}.phone-input__dial{padding:0 5px;font-weight:600;color:var(--grey-700)}.phone-input__chevron{font-size:1rem;color:var(--grey-500);transition:transform .2s ease}.phone-input__divider{width:1px;background-color:var(--grey-200);align-self:stretch}.phone-input__field{flex:1 1 auto;border:none;outline:none;padding:9px var(--form-ref);font-size:max(var(--form-ref) + 4px,13px);color:var(--grey-900);background:transparent}.phone-input__field::placeholder{color:var(--grey-400)}.phone-input__field:disabled{background-color:transparent;color:var(--disabled-color);cursor:not-allowed}.phone-input__dropdown{margin-top:4px;border-radius:var(--input-radius);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;border:1px solid var(--grey-200);background-color:var(--white);width:100%;max-height:280px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10}.phone-input__search{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--grey-200);gap:6px}.phone-input__search>i{color:var(--grey-500);font-size:1rem}.phone-input__search>input{flex:1;border:none;outline:none;font-size:.875rem;color:var(--grey-900);background:transparent}.phone-input__search>input::placeholder{color:var(--grey-400)}.phone-input__clear{border:none;background:transparent;cursor:pointer;color:var(--grey-400);padding:2px;display:inline-flex;align-items:center;justify-content:center}.phone-input__clear:hover{color:var(--grey-600)}.phone-input__clear:focus-visible{outline:none}.phone-input__list{max-height:220px;overflow-y:auto;display:flex;padding:5px;flex-direction:column}.phone-input__option{display:flex;gap:5px;width:100%;background:transparent;border:none;padding:5px 8px;cursor:pointer;font-size:.75rem;color:var(--grey-900);transition:background-color .2s ease;text-align:left}.phone-input__option:hover{background-color:var(--secondary-100)}.phone-input__option[aria-selected=true]{background-color:var(--primary-100);color:var(--primary-700)}.phone-input__option .phone-input__dial{font-weight:400;padding:0;color:var(--grey-500)}.phone-input__empty{padding:12px;font-size:.875rem;color:var(--grey-500);text-align:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
                 type: Input
@@ -907,24 +1850,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], tip: [{
                 type: Input
-            }], showSubtitle: [{
+            }], placeholder: [{
                 type: Input
             }], disabled: [{
                 type: Input
             }], loading: [{
                 type: Input
-            }], showSelected: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], searchFn: [{
-                type: Input
-            }], itemDisplayFn: [{
+            }], preferredCountries: [{
                 type: Input
-            }], itemIsEnabledFn: [{
+            }], flagPath: [{
                 type: Input
-            }], manualSearch: [{
+            }], countries: [{
                 type: Input
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
             }], dropdownTemplate: [{
                 type: ViewChild,
                 args: ['dropdownTemplate']
@@ -958,16 +1898,23 @@ class UicDynamicFormComponent {
         pattern: (_err, field) => `${field.label ?? field.name} no tiene el formato correcto.`
     };
     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          [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          [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              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span style=\"padding-top: 4px;\" 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          [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              cols=\"4\"\r\n              [placeholder]=\"field.placeholder??field.label\"></textarea>\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span style=\"padding-top: 4px;\" counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-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          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-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          [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 === '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 === '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.multyoption??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'checkbox') {\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        ></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 === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        >\r\n        </ui-checkbox>\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", "disabled", "label", "error", "tip", "max", "min"] }, { 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", "options"] }, { 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: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "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: "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          [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          [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              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span style=\"padding-top: 4px;\" 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          [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              cols=\"4\"\r\n              [placeholder]=\"field.placeholder??field.label\"></textarea>\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span style=\"padding-top: 4px;\" 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          [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          [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          [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          [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          [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 === '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.multyoption??false\"\r\n          [tip]=\"field.tip??''\"\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      @else if (field.type === 'checkbox') {\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        ></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 === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        >\r\n        </ui-checkbox>\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", "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", "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", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "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", "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,
-            args: [{ selector: 'ui-dynamic-form', imports: [CommonModule, UicDatePickerComponent,
-                        ReactiveFormsModule, UicSliderComponent,
+            args: [{ selector: 'ui-dynamic-form', imports: [CommonModule,
+                        UicDatePickerComponent,
+                        ReactiveFormsModule,
+                        UicSliderComponent,
                         UicPoolOptionsComponent,
+                        UicTimePickerComponent,
                         UicSearcherComponent,
-                        UicSelectComponent, UicInputComponent,
-                        UicCheckboxComponent, 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          [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          [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              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span style=\"padding-top: 4px;\" 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          [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              cols=\"4\"\r\n              [placeholder]=\"field.placeholder??field.label\"></textarea>\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span style=\"padding-top: 4px;\" counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n            }\r\n        </ui-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          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-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          [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 === '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 === '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.multyoption??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'checkbox') {\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        ></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 === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        >\r\n        </ui-checkbox>\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"] }]
+                        UicMultySelectComponent,
+                        UicSelectComponent,
+                        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          [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          [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              [maxlength]=\"field.maxLength||null\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n              @if (field.maxLength && field.showCounter) {\r\n                <span style=\"padding-top: 4px;\" 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          [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              cols=\"4\"\r\n              [placeholder]=\"field.placeholder??field.label\"></textarea>\r\n            @if (field.maxLength && field.showCounter) {\r\n              <span style=\"padding-top: 4px;\" 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          [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          [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          [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          [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          [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 === '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.multyoption??false\"\r\n          [tip]=\"field.tip??''\"\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      @else if (field.type === 'checkbox') {\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        ></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 === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        >\r\n        </ui-checkbox>\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: [{
@@ -1112,7 +2059,7 @@ class UicFormWrapperComponent {
     // UTILITARIOS
     updateFieldOptions(block) {
         return block.fields.map(f => {
-            if (f.type === 'select') {
+            if (f.type === 'select' || f.type == 'pool' || f.type == 'multyselect') {
                 let options = f.options ?? [];
                 Object.keys(this.externalData).forEach(key => {
                     if (key === f.name) {
@@ -1246,7 +2193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
-class StepTabsComponent {
+class UicStepTabsComponent {
     tabs = [];
     currentTab = '';
     navigationEnabled = true;
@@ -1260,10 +2207,10 @@ class StepTabsComponent {
             this.currentTabChange.emit(newTab);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: StepTabsComponent, isStandalone: true, selector: "ui-step-tabs", inputs: { tabs: "tabs", currentTab: "currentTab", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle" }, outputs: { currentTabChange: "currentTabChange" }, ngImport: i0, template: "<div class=\"tabs-wrapper\">\r\n    @for (tab of tabs; track tab) {\r\n        <div class=\"form-tab\" \r\n            [class.selected-tab]=\"tab == currentTab\" \r\n            [class.tab-hover]=\"navigationEnabled && tab != currentTab\"\r\n            (click)=\"changeTab(tab)\">\r\n            <div class=\"form-tab-title\">{{tab}}</div>\r\n            <div class=\"form-tab-bar\"></div>\r\n        </div>\r\n    }\r\n</div>\r\n@if (showStepTitle) {\r\n    <h1 class=\"tab-title\"> {{currentIndex + \". \" + currentTab}} </h1>\r\n}", styles: [".tabs-wrapper{display:flex;gap:16px;margin-bottom:32px;align-items:flex-end}.form-tab{color:var(--white);transition:ease .3s;width:70px;overflow:hidden;-webkit-user-select:none;user-select:none;font-weight:600;font-size:14px;white-space:nowrap}.form-tab-title{padding:8px 33px 8px 0}.form-tab-bar{width:100%;height:6px;border-radius:20px;background-color:var(--grey-300)}.selected-tab{color:var(--grey-900);width:fit-content}.selected-tab .form-tab-bar{background-color:var(--grey-800)}.tab-hover:hover{width:fit-content;cursor:pointer;color:var(--grey-400)}.tab-title{font-size:32px;font-weight:600;line-height:38px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepTabsComponent, isStandalone: true, selector: "ui-step-tabs", inputs: { tabs: "tabs", currentTab: "currentTab", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle" }, outputs: { currentTabChange: "currentTabChange" }, ngImport: i0, template: "<div class=\"tabs-wrapper\">\r\n    @for (tab of tabs; track tab) {\r\n        <div class=\"form-tab\" \r\n            [class.selected-tab]=\"tab == currentTab\" \r\n            [class.tab-hover]=\"navigationEnabled && tab != currentTab\"\r\n            (click)=\"changeTab(tab)\">\r\n            <div class=\"form-tab-title\">{{tab}}</div>\r\n            <div class=\"form-tab-bar\"></div>\r\n        </div>\r\n    }\r\n</div>\r\n@if (showStepTitle) {\r\n    <h1 class=\"tab-title\"> {{currentIndex + \". \" + currentTab}} </h1>\r\n}", styles: [".tabs-wrapper{display:flex;gap:16px;margin-bottom:32px;align-items:flex-end}.form-tab{color:var(--white);transition:ease .3s;width:70px;overflow:hidden;-webkit-user-select:none;user-select:none;font-weight:600;font-size:14px;white-space:nowrap}.form-tab-title{padding:8px 33px 8px 0}.form-tab-bar{width:100%;height:6px;border-radius:20px;background-color:var(--grey-300)}.selected-tab{color:var(--grey-900);width:fit-content}.selected-tab .form-tab-bar{background-color:var(--grey-800)}.tab-hover:hover{width:fit-content;cursor:pointer;color:var(--grey-400)}.tab-title{font-size:32px;font-weight:600;line-height:38px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-step-tabs', imports: [], template: "<div class=\"tabs-wrapper\">\r\n    @for (tab of tabs; track tab) {\r\n        <div class=\"form-tab\" \r\n            [class.selected-tab]=\"tab == currentTab\" \r\n            [class.tab-hover]=\"navigationEnabled && tab != currentTab\"\r\n            (click)=\"changeTab(tab)\">\r\n            <div class=\"form-tab-title\">{{tab}}</div>\r\n            <div class=\"form-tab-bar\"></div>\r\n        </div>\r\n    }\r\n</div>\r\n@if (showStepTitle) {\r\n    <h1 class=\"tab-title\"> {{currentIndex + \". \" + currentTab}} </h1>\r\n}", styles: [".tabs-wrapper{display:flex;gap:16px;margin-bottom:32px;align-items:flex-end}.form-tab{color:var(--white);transition:ease .3s;width:70px;overflow:hidden;-webkit-user-select:none;user-select:none;font-weight:600;font-size:14px;white-space:nowrap}.form-tab-title{padding:8px 33px 8px 0}.form-tab-bar{width:100%;height:6px;border-radius:20px;background-color:var(--grey-300)}.selected-tab{color:var(--grey-900);width:fit-content}.selected-tab .form-tab-bar{background-color:var(--grey-800)}.tab-hover:hover{width:fit-content;cursor:pointer;color:var(--grey-400)}.tab-title{font-size:32px;font-weight:600;line-height:38px}\n"] }]
         }], propDecorators: { tabs: [{
@@ -1355,11 +2302,11 @@ class UicStepsFormComponent {
         return this.currentIdx === this.steps.length - 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >Volver</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?'Enviar':'Siguiente'}}</ui-button>\r\n    </div>\r\n}", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: StepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "externalData", "loading", "disabled", "initialValues"], outputs: ["formSubmit", "formChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >Volver</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?'Enviar':'Siguiente'}}</ui-button>\r\n    </div>\r\n}", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "externalData", "loading", "disabled", "initialValues"], outputs: ["formSubmit", "formChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-steps-form', imports: [StepTabsComponent, UicButtonComponent, UicFormWrapperComponent], template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >Volver</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?'Enviar':'Siguiente'}}</ui-button>\r\n    </div>\r\n}", styles: [".hidden-form{display:none}\n"] }]
+            args: [{ selector: 'ui-steps-form', imports: [UicStepTabsComponent, UicButtonComponent, UicFormWrapperComponent], template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >Volver</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?'Enviar':'Siguiente'}}</ui-button>\r\n    </div>\r\n}", styles: [".hidden-form{display:none}\n"] }]
         }], propDecorators: { allForms: [{
                 type: ViewChildren,
                 args: [UicFormWrapperComponent]
@@ -1377,148 +2324,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
-const base = createValueAccessor();
-class UicMultySelectComponent extends base {
-    icon = ''; // Icono externo
-    iconColor = 'primary'; //color de ícono externo
-    internalIcon = ''; //Icono interno
-    size = 'm'; // tamaño general del input
-    // TEXT
-    label = '';
-    error = '';
-    tip = '';
-    showSubtitle = false;
-    disabled = false;
-    emptyText = '- Seleccionar -';
-    // FUNCTIONS
-    loading = false;
-    options = [];
-    // MULTY
-    allSelected = false;
-    selectedSet = new Set();
-    toggleAll(checked) {
-        this.allSelected = checked;
-        this.selectedSet.clear();
-        if (checked) {
-            this.options.forEach(o => {
-                const key = o.id ?? o.text;
-                this.selectedSet.add(key);
-            });
-        }
-    }
-    toggleOption(id) {
-        if (this.selectedSet.has(id)) {
-            this.selectedSet.delete(id);
-        }
-        else {
-            this.selectedSet.add(id);
-        }
-        this.updateAllSelected();
-    }
-    updateAllSelected() {
-        this.allSelected = this.options.length > 0 && this.selectedSet.size === this.options.length;
-    }
-    applySelection() {
-        let result = [];
-        result = [...this.selectedSet];
-        this.notifyChange(result);
-        this.closeList();
-    }
-    dropdownTemplate;
-    overlayRef;
-    overlayPositions = [
-        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-    ];
-    overlay = inject(Overlay);
-    vcr = inject(ViewContainerRef);
-    host = inject((ElementRef));
-    ngOnChanges(changes) {
-        if (changes['options'] && this.value != null) {
-            // Resetear valor seleccionado
-            this.selectedSet = new Set();
-        }
-    }
-    // --- Overlay ---
-    openList() {
-        if (this.disabled || this.loading)
-            return;
-        if (this.overlayRef) {
-            this.closeList();
-        }
-        const input = this.host.nativeElement.querySelector('.fakeinput');
-        const width = input.offsetWidth;
-        const positionStrategy = this.overlay.position()
-            .flexibleConnectedTo(input)
-            .withPositions(this.overlayPositions)
-            .withFlexibleDimensions(true)
-            .withPush(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            width,
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-        });
-        const portal = new TemplatePortal(this.dropdownTemplate, this.vcr);
-        this.overlayRef.attach(portal);
-        this.overlayRef.backdropClick().subscribe(() => this.closeList());
-    }
-    closeList() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-    }
-    writeValue(value) {
-        super.writeValue(value);
-        this.selectedSet = new Set(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicMultySelectComponent, isStandalone: true, selector: "ui-multy-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", showSubtitle: "showSubtitle", disabled: "disabled", loading: "loading", options: "options" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UicMultySelectComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], 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 class=\"fakeinput-wrapp\" > \r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n                [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >TEXTO PENDIENTE</div>\r\n                @if (!disabled && !loading) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n            <ng-template #dropdownTemplate >\r\n                 <div class=\"input-options\">\r\n                    <div class=\"multyoptions-header\">\r\n                        <ui-checkbox [noPadding]=\"true\"\r\n                            [ngModel]=\"allSelected\" \r\n                            (ngModelChange)=\"toggleAll($event)\"\r\n                        placeholder=\"Todos\"></ui-checkbox>\r\n                    </div>\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">                    \r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"toggleOption(option.id??option.text)\"  class=\"input-multyoption\">\r\n                                <ui-checkbox \r\n                                    [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n                                    [noPadding]=\"true\" \r\n                                    [placeholder]=\"option.text\"></ui-checkbox>\r\n                            </div> \r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                     <!-- <div class=\"multyoptions-footer\">\r\n                        <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n                        <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n                    </div> -->\r\n                 </div>\r\n            </ng-template>\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>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-multy-select', imports: [CommonModule, UicCheckboxComponent, UicButtonComponent, FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UicMultySelectComponent),
-                            multi: true
-                        }
-                    ], 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 class=\"fakeinput-wrapp\" > \r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n                [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled\" >TEXTO PENDIENTE</div>\r\n                @if (!disabled && !loading) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n            <ng-template #dropdownTemplate >\r\n                 <div class=\"input-options\">\r\n                    <div class=\"multyoptions-header\">\r\n                        <ui-checkbox [noPadding]=\"true\"\r\n                            [ngModel]=\"allSelected\" \r\n                            (ngModelChange)=\"toggleAll($event)\"\r\n                        placeholder=\"Todos\"></ui-checkbox>\r\n                    </div>\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">                    \r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"toggleOption(option.id??option.text)\"  class=\"input-multyoption\">\r\n                                <ui-checkbox \r\n                                    [ngModel]=\"selectedSet.has(option.id??option.text)\"\r\n                                    [noPadding]=\"true\" \r\n                                    [placeholder]=\"option.text\"></ui-checkbox>\r\n                            </div> \r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                     <!-- <div class=\"multyoptions-footer\">\r\n                        <ui-button (click)=\"closeList()\" color=\"black\" type=\"bordered\" size=\"s\">Cancelar</ui-button>\r\n                        <ui-button (click)=\"applySelection()\" color=\"black\" size=\"s\">Aplicar</ui-button>\r\n                    </div> -->\r\n                 </div>\r\n            </ng-template>\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>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;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-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;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;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size: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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.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", ".input-multyoption{display:flex;align-items:center;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-multyoption-focused{background-color:var(--primary-500)}.input-multyoption:hover{background-color:var(--secondary-100);cursor:pointer}.multyoptions-header{display:flex;align-items:center;gap:10px;padding:5px 3px;border-bottom:solid 1px var(--grey-300)}.multyoptions-footer{display:flex;padding:4px;justify-content:space-around;border-top:solid 1px var(--grey-300)}\n"] }]
-        }], propDecorators: { icon: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], internalIcon: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], tip: [{
-                type: Input
-            }], showSubtitle: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], dropdownTemplate: [{
-                type: ViewChild,
-                args: ['dropdownTemplate']
-            }] } });
-
 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 }))])
@@ -1616,11 +2421,11 @@ class UicTableUicSearcherComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n    <div class=\"fakeinput\">\r\n        <i class=\"ri-search-line\"></i>\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    @if (showSearchButton) {\r\n        <ui-button tip=\"Buscar\" [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n    }\r\n    <ui-button tip=\"Limpiar\" [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n    <div style=\"width: 300px;\">\r\n        <ui-input internalIcon=\"ri-search-line\">\r\n            <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n        </ui-input>\r\n    </div>\r\n    @if (showSearchButton) {\r\n        <ui-button tip=\"Buscar\" [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n    }\r\n    <ui-button tip=\"Limpiar\" [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective], template: "\r\n<div class=\"searcher\">\r\n    <div class=\"fakeinput\">\r\n        <i class=\"ri-search-line\"></i>\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    @if (showSearchButton) {\r\n        <ui-button tip=\"Buscar\" [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n    }\r\n    <ui-button tip=\"Limpiar\" [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
+            args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"searcher\">\r\n    <div style=\"width: 300px;\">\r\n        <ui-input internalIcon=\"ri-search-line\">\r\n            <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n        </ui-input>\r\n    </div>\r\n    @if (showSearchButton) {\r\n        <ui-button tip=\"Buscar\" [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n    }\r\n    <ui-button tip=\"Limpiar\" [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], label: [{
@@ -1740,11 +2545,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class UicTableUserComponent {
     user;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:14px}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:12px;line-height:16px}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:14px}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:12px;line-height:16px}\n"] }]
+            args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"] }]
         }], propDecorators: { user: [{
                 type: Input
             }] } });
@@ -1912,9 +2717,6 @@ class UicTableComponent {
     sortAsc = true;
     filter = '';
     page = 1;
-    ngOnInit() {
-        console.log(this.columns);
-    }
     getValue(data, key) {
         const col = data.find(col => col.key == key);
         return col?.value?.toString() ?? '';
@@ -2384,11 +3186,11 @@ class UicSideModalComponent {
         this.modal.triggerSave();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"] }]
+            args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -2528,5 +3330,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, StepTabsComponent, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicMultySelectComponent, UicNameInitsPipe, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
+export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, 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