ui-core-abv 0.5.2 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/ui-core-abv.mjs +393 -39
  2. package/fesm2022/ui-core-abv.mjs.map +1 -1
  3. package/lib/components/tree-admin/tree-admin.component.d.ts +75 -0
  4. package/package.json +1 -1
  5. package/public-api.d.ts +1 -0
package/fesm2022/ui-core-abv.mjs CHANGED
@@ -101,11 +101,11 @@ class InputWrapperComponent {
101
101
  tip = '';
102
102
  disabled = false;
103
103
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
104
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InputWrapperComponent, isStandalone: true, selector: "ui-input-wrapper", inputs: { icon: "icon", iconColor: "iconColor", label: "label", error: "error", tip: "tip", disabled: "disabled" }, 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 \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n <ng-content></ng-content>\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: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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 }] });
104
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InputWrapperComponent, isStandalone: true, selector: "ui-input-wrapper", inputs: { icon: "icon", iconColor: "iconColor", label: "label", error: "error", tip: "tip", disabled: "disabled" }, 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 \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n <ng-content></ng-content>\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: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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 }] });
105
105
  }
106
106
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputWrapperComponent, decorators: [{
107
107
  type: Component,
108
- args: [{ selector: 'ui-input-wrapper', imports: [CommonModule], 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 \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n <ng-content></ng-content>\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: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
108
+ args: [{ selector: 'ui-input-wrapper', imports: [CommonModule], 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 \r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">\r\n {{label}} \r\n </div>\r\n }\r\n <ng-content></ng-content>\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: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
109
109
  }], propDecorators: { icon: [{
110
110
  type: Input
111
111
  }], iconColor: [{
@@ -143,7 +143,7 @@ class UicCheckboxComponent extends base$c {
143
143
  useExisting: forwardRef(() => UicCheckboxComponent),
144
144
  multi: true
145
145
  }
146
- ], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div [class.check-form-container]=\"!noPadding\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='checkbox') {\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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
146
+ ], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div [class.check-form-container]=\"!noPadding\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='checkbox') {\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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
147
147
  }
148
148
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
149
149
  type: Component,
@@ -153,7 +153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
153
153
  useExisting: forwardRef(() => UicCheckboxComponent),
154
154
  multi: true
155
155
  }
156
- ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div [class.check-form-container]=\"!noPadding\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='checkbox') {\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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
156
+ ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div [class.check-form-container]=\"!noPadding\">\r\n <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n @if (type=='checkbox') {\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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
157
157
  }], propDecorators: { icon: [{
158
158
  type: Input
159
159
  }], iconColor: [{
@@ -187,11 +187,11 @@ class UicSwichComponent {
187
187
  this.checkedChange.emit(this.checked);
188
188
  }
189
189
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
190
- 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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] });
190
+ 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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] });
191
191
  }
192
192
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
193
193
  type: Component,
194
- 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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
194
+ 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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
195
195
  }], propDecorators: { checked: [{
196
196
  type: Input
197
197
  }], checkedChange: [{
@@ -288,7 +288,7 @@ class UicSelectComponent extends base$b {
288
288
  useExisting: forwardRef(() => UicSelectComponent),
289
289
  multi: true
290
290
  }
291
- ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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 || nonSelectedText)}}</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;\" >{{noneText}}</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\">{{emptyText}}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n \r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { 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"] }] });
291
+ ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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 || nonSelectedText)}}</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;\" >{{noneText}}</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\">{{emptyText}}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n \r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { 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"] }] });
292
292
  }
293
293
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
294
294
  type: Component,
@@ -298,7 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
298
298
  useExisting: forwardRef(() => UicSelectComponent),
299
299
  multi: true
300
300
  }
301
- ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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 || nonSelectedText)}}</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;\" >{{noneText}}</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\">{{emptyText}}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n \r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
301
+ ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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 || nonSelectedText)}}</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;\" >{{noneText}}</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\">{{emptyText}}</div>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n \r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
302
302
  }], propDecorators: { icon: [{
303
303
  type: Input
304
304
  }], iconColor: [{
@@ -359,11 +359,11 @@ class UicInputComponent {
359
359
  }, 200);
360
360
  }
361
361
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
362
- 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", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"> \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></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\" style=\"padding-top: 1px;\" >\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
362
+ 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", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"> \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{iconColor}}\" ></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\" style=\"padding-top: 1px;\" >\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
363
363
  }
364
364
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
365
365
  type: Component,
366
- args: [{ selector: 'ui-input', imports: [CommonModule, InputWrapperComponent], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"> \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></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\" style=\"padding-top: 1px;\" >\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
366
+ args: [{ selector: 'ui-input', imports: [CommonModule, InputWrapperComponent], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\"> \r\n <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}} f-{{iconColor}}\" ></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\" style=\"padding-top: 1px;\" >\r\n <ng-content select=\"[counter]\"></ng-content>\r\n </span>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
367
367
  }], propDecorators: { icon: [{
368
368
  type: Input
369
369
  }], iconColor: [{
@@ -424,7 +424,7 @@ class UicRadioComponent extends base$a {
424
424
  useExisting: forwardRef(() => UicRadioComponent),
425
425
  multi: true,
426
426
  },
427
- ], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [error]=\"error\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"radio-group\"\r\n role=\"radiogroup\"\r\n [class.loading-input]=\"loading\"\r\n [class.disabled]=\"disabled || loading\"\r\n [class.direction-row]=\"direction === 'row'\"\r\n [attr.aria-disabled]=\"disabled || loading ? true : null\"\r\n >\r\n @if (options.length) {\r\n @for (option of options; track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"radio-option\"\r\n [disabled]=\"disabled || loading\"\r\n [class.selected]=\"isSelected(option)\"\r\n [attr.aria-checked]=\"isSelected(option)\"\r\n (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\"\r\n (keydown.space)=\"selectOption(option)\"\r\n >\r\n <span class=\"radio-control\" aria-hidden=\"true\">\r\n <span class=\"radio-dot\"></span>\r\n </span>\r\n <span class=\"radio-texts\">\r\n <span class=\"radio-label\">{{ option.text }}</span>\r\n @if (option.detail) {\r\n <span class=\"radio-detail\">{{ option.detail }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"radio-empty\">{{ emptyText }}</div>\r\n }\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".radio-group{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0;width:100%}.radio-group.direction-row{flex-direction:row;flex-wrap:wrap}.radio-group.disabled .radio-option{cursor:not-allowed;opacity:.7}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;width:100%;border:none;border-radius:6px;background:transparent;cursor:pointer;text-align:left;transition:background-color .2s ease,color .2s ease}.radio-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha)}.radio-option:hover:not(:disabled){background-color:var(--grey-50)}.radio-option:disabled{cursor:not-allowed;opacity:.7}.direction-row .radio-option{flex:1 1 calc(50% - .5rem)}.radio-control{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);border-radius:50%;border:2px solid var(--primary-400);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:calc(var(--design-size-ref) * 2.2 / 2.2);height:calc(var(--design-size-ref) * 2.2 / 2.2);border-radius:50%;background-color:transparent;transform:scale(0);transition:transform .2s ease,background-color .2s ease}.radio-option.selected{color:var(--grey-900)}.radio-option.selected .radio-control{border-color:var(--primary-500)}.radio-option.selected .radio-dot{background-color:var(--primary-500);transform:scale(1)}.radio-texts{display:flex;flex-direction:column;gap:2px}.radio-label{font-size:.875rem;color:var(--grey-950)}.radio-detail{font-size:.75rem;color:var(--grey-500)}.radio-empty{width:100%;padding:.5rem;text-align:center;border:1px dashed var(--grey-200);border-radius:6px;color:var(--disabled-color);font-size:.875rem}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
427
+ ], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [error]=\"error\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"radio-group\"\r\n role=\"radiogroup\"\r\n [class.loading-input]=\"loading\"\r\n [class.disabled]=\"disabled || loading\"\r\n [class.direction-row]=\"direction === 'row'\"\r\n [attr.aria-disabled]=\"disabled || loading ? true : null\"\r\n >\r\n @if (options.length) {\r\n @for (option of options; track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"radio-option\"\r\n [disabled]=\"disabled || loading\"\r\n [class.selected]=\"isSelected(option)\"\r\n [attr.aria-checked]=\"isSelected(option)\"\r\n (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\"\r\n (keydown.space)=\"selectOption(option)\"\r\n >\r\n <span class=\"radio-control\" aria-hidden=\"true\">\r\n <span class=\"radio-dot\"></span>\r\n </span>\r\n <span class=\"radio-texts\">\r\n <span class=\"radio-label\">{{ option.text }}</span>\r\n @if (option.detail) {\r\n <span class=\"radio-detail\">{{ option.detail }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"radio-empty\">{{ emptyText }}</div>\r\n }\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".radio-group{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0;width:100%}.radio-group.direction-row{flex-direction:row;flex-wrap:wrap}.radio-group.disabled .radio-option{cursor:not-allowed;opacity:.7}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;width:100%;border:none;border-radius:6px;background:transparent;cursor:pointer;text-align:left;transition:background-color .2s ease,color .2s ease}.radio-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha)}.radio-option:hover:not(:disabled){background-color:var(--grey-50)}.radio-option:disabled{cursor:not-allowed;opacity:.7}.direction-row .radio-option{flex:1 1 calc(50% - .5rem)}.radio-control{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);border-radius:50%;border:2px solid var(--primary-400);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:calc(var(--design-size-ref) * 2.2 / 2.2);height:calc(var(--design-size-ref) * 2.2 / 2.2);border-radius:50%;background-color:transparent;transform:scale(0);transition:transform .2s ease,background-color .2s ease}.radio-option.selected{color:var(--grey-900)}.radio-option.selected .radio-control{border-color:var(--primary-500)}.radio-option.selected .radio-dot{background-color:var(--primary-500);transform:scale(1)}.radio-texts{display:flex;flex-direction:column;gap:2px}.radio-label{font-size:.875rem;color:var(--grey-950)}.radio-detail{font-size:.75rem;color:var(--grey-500)}.radio-empty{width:100%;padding:.5rem;text-align:center;border:1px dashed var(--grey-200);border-radius:6px;color:var(--disabled-color);font-size:.875rem}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
428
428
  }
429
429
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRadioComponent, decorators: [{
430
430
  type: Component,
@@ -434,7 +434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
434
434
  useExisting: forwardRef(() => UicRadioComponent),
435
435
  multi: true,
436
436
  },
437
- ], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [error]=\"error\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"radio-group\"\r\n role=\"radiogroup\"\r\n [class.loading-input]=\"loading\"\r\n [class.disabled]=\"disabled || loading\"\r\n [class.direction-row]=\"direction === 'row'\"\r\n [attr.aria-disabled]=\"disabled || loading ? true : null\"\r\n >\r\n @if (options.length) {\r\n @for (option of options; track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"radio-option\"\r\n [disabled]=\"disabled || loading\"\r\n [class.selected]=\"isSelected(option)\"\r\n [attr.aria-checked]=\"isSelected(option)\"\r\n (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\"\r\n (keydown.space)=\"selectOption(option)\"\r\n >\r\n <span class=\"radio-control\" aria-hidden=\"true\">\r\n <span class=\"radio-dot\"></span>\r\n </span>\r\n <span class=\"radio-texts\">\r\n <span class=\"radio-label\">{{ option.text }}</span>\r\n @if (option.detail) {\r\n <span class=\"radio-detail\">{{ option.detail }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"radio-empty\">{{ emptyText }}</div>\r\n }\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".radio-group{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0;width:100%}.radio-group.direction-row{flex-direction:row;flex-wrap:wrap}.radio-group.disabled .radio-option{cursor:not-allowed;opacity:.7}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;width:100%;border:none;border-radius:6px;background:transparent;cursor:pointer;text-align:left;transition:background-color .2s ease,color .2s ease}.radio-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha)}.radio-option:hover:not(:disabled){background-color:var(--grey-50)}.radio-option:disabled{cursor:not-allowed;opacity:.7}.direction-row .radio-option{flex:1 1 calc(50% - .5rem)}.radio-control{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);border-radius:50%;border:2px solid var(--primary-400);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:calc(var(--design-size-ref) * 2.2 / 2.2);height:calc(var(--design-size-ref) * 2.2 / 2.2);border-radius:50%;background-color:transparent;transform:scale(0);transition:transform .2s ease,background-color .2s ease}.radio-option.selected{color:var(--grey-900)}.radio-option.selected .radio-control{border-color:var(--primary-500)}.radio-option.selected .radio-dot{background-color:var(--primary-500);transform:scale(1)}.radio-texts{display:flex;flex-direction:column;gap:2px}.radio-label{font-size:.875rem;color:var(--grey-950)}.radio-detail{font-size:.75rem;color:var(--grey-500)}.radio-empty{width:100%;padding:.5rem;text-align:center;border:1px dashed var(--grey-200);border-radius:6px;color:var(--disabled-color);font-size:.875rem}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
437
+ ], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [tip]=\"tip\"\r\n [error]=\"error\"\r\n [disabled]=\"disabled\"\r\n>\r\n <div\r\n class=\"radio-group\"\r\n role=\"radiogroup\"\r\n [class.loading-input]=\"loading\"\r\n [class.disabled]=\"disabled || loading\"\r\n [class.direction-row]=\"direction === 'row'\"\r\n [attr.aria-disabled]=\"disabled || loading ? true : null\"\r\n >\r\n @if (options.length) {\r\n @for (option of options; track option.id) {\r\n <button\r\n type=\"button\"\r\n class=\"radio-option\"\r\n [disabled]=\"disabled || loading\"\r\n [class.selected]=\"isSelected(option)\"\r\n [attr.aria-checked]=\"isSelected(option)\"\r\n (click)=\"selectOption(option)\"\r\n (keydown.enter)=\"selectOption(option)\"\r\n (keydown.space)=\"selectOption(option)\"\r\n >\r\n <span class=\"radio-control\" aria-hidden=\"true\">\r\n <span class=\"radio-dot\"></span>\r\n </span>\r\n <span class=\"radio-texts\">\r\n <span class=\"radio-label\">{{ option.text }}</span>\r\n @if (option.detail) {\r\n <span class=\"radio-detail\">{{ option.detail }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"radio-empty\">{{ emptyText }}</div>\r\n }\r\n </div>\r\n</ui-input-wrapper>\r\n", styles: [".radio-group{display:flex;flex-direction:column;gap:.25rem;padding:.25rem 0;width:100%}.radio-group.direction-row{flex-direction:row;flex-wrap:wrap}.radio-group.disabled .radio-option{cursor:not-allowed;opacity:.7}.radio-option{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .5rem;width:100%;border:none;border-radius:6px;background:transparent;cursor:pointer;text-align:left;transition:background-color .2s ease,color .2s ease}.radio-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha)}.radio-option:hover:not(:disabled){background-color:var(--grey-50)}.radio-option:disabled{cursor:not-allowed;opacity:.7}.direction-row .radio-option{flex:1 1 calc(50% - .5rem)}.radio-control{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);border-radius:50%;border:2px solid var(--primary-400);display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,background-color .2s ease}.radio-dot{width:calc(var(--design-size-ref) * 2.2 / 2.2);height:calc(var(--design-size-ref) * 2.2 / 2.2);border-radius:50%;background-color:transparent;transform:scale(0);transition:transform .2s ease,background-color .2s ease}.radio-option.selected{color:var(--grey-900)}.radio-option.selected .radio-control{border-color:var(--primary-500)}.radio-option.selected .radio-dot{background-color:var(--primary-500);transform:scale(1)}.radio-texts{display:flex;flex-direction:column;gap:2px}.radio-label{font-size:.875rem;color:var(--grey-950)}.radio-detail{font-size:.75rem;color:var(--grey-500)}.radio-empty{width:100%;padding:.5rem;text-align:center;border:1px dashed var(--grey-200);border-radius:6px;color:var(--disabled-color);font-size:.875rem}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
438
438
  }], propDecorators: { icon: [{
439
439
  type: Input
440
440
  }], iconColor: [{
@@ -517,7 +517,7 @@ class UicSliderComponent extends base$9 {
517
517
  useExisting: forwardRef(() => UicSliderComponent),
518
518
  multi: true
519
519
  }
520
- ], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
520
+ ], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
521
521
  }
522
522
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSliderComponent, decorators: [{
523
523
  type: Component,
@@ -527,7 +527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
527
527
  useExisting: forwardRef(() => UicSliderComponent),
528
528
  multi: true
529
529
  }
530
- ], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
530
+ ], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
531
531
  }], propDecorators: { icon: [{
532
532
  type: Input
533
533
  }], iconColor: [{
@@ -984,7 +984,7 @@ class UicDatePickerComponent extends base$8 {
984
984
  useExisting: forwardRef(() => UicDatePickerComponent),
985
985
  multi: true
986
986
  }
987
- ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [value]=\"displayValue\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n >&lt;</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >&gt;</ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n [class.day-selected]=\"isSelectedMonth(i)\"\r\n [disabled]=\"isMonthDisabled(i)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >Limpiar</ui-button\r\n >\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >Hoy</ui-button\r\n >\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
987
+ ], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [value]=\"displayValue\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n >&lt;</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >&gt;</ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n [class.day-selected]=\"isSelectedMonth(i)\"\r\n [disabled]=\"isMonthDisabled(i)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >Limpiar</ui-button\r\n >\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >Hoy</ui-button\r\n >\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
988
988
  }
989
989
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDatePickerComponent, decorators: [{
990
990
  type: Component,
@@ -994,7 +994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
994
994
  useExisting: forwardRef(() => UicDatePickerComponent),
995
995
  multi: true
996
996
  }
997
- ], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [value]=\"displayValue\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n >&lt;</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >&gt;</ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n [class.day-selected]=\"isSelectedMonth(i)\"\r\n [disabled]=\"isMonthDisabled(i)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >Limpiar</ui-button\r\n >\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >Hoy</ui-button\r\n >\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
997
+ ], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp \" >\r\n <div class=\"fakeinput \" \r\n [ngClass]=\"{ 'errorinput': error, 'disabledinput': disabled }\">\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon-m {{ internalIcon }}\"></i>\r\n }\r\n <input\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [placeholder]=\"inputPlaceholder\"\r\n [value]=\"displayValue\"\r\n inputmode=\"numeric\"\r\n autocomplete=\"off\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (click)=\"openCalendar()\"\r\n />\r\n </div>\r\n <!-- Overlay Template -->\r\n <ng-template #calendarTemplate>\r\n <div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n <span (click)=\"changeView()\">\r\n @if (view === 'days') {\r\n {{ monthName }} de {{ selectedYear }}\r\n } @else if (view === 'months') {\r\n {{ selectedYear }}\r\n } @else {\r\n {{ decadeRange[0] }} - {{ decadeRange[decadeRange.length - 1] }}\r\n }\r\n </span>\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-up-line\"\r\n (click)=\"prev()\"\r\n >&lt;</ui-button\r\n >\r\n <ui-button\r\n size=\"s\"\r\n type=\"ghost\"\r\n [iconOnly]=\"true\"\r\n icon=\"ri-arrow-drop-down-line\"\r\n (click)=\"next()\"\r\n >&gt;</ui-button\r\n >\r\n </div>\r\n <!-- Vista Days -->\r\n @if (view === 'days') {\r\n <div class=\"calendar-grid\">\r\n @for (d of ['DO','LU','MA','MI','JU','VI','SA']; track $index) {\r\n <div class=\"weekday\">{{ d }}</div>\r\n } @for (week of monthWeeks; track $index) { @for (day of week;\r\n track $index) {\r\n <button\r\n class=\"day\"\r\n [disabled]=\"\r\n (minDate && day ? day < minDate : false) ||\r\n (maxDate && day ? day > maxDate : false)\r\n \"\r\n [class.today]=\"isToday(day)\"\r\n [class.day-selected]=\"isPainted(day)\"\r\n [class.empty]=\"!day\"\r\n (click)=\"day && selectDate(day)\"\r\n >\r\n {{ day?.getDate() }}\r\n </button>\r\n } }\r\n </div>\r\n }\r\n <!-- Vista Months -->\r\n @if (view === 'months') {\r\n <div class=\"calendar-grid months\">\r\n @for (m of months; let i = $index; track i) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"isThisMonth(m)\"\r\n [class.day-selected]=\"isSelectedMonth(i)\"\r\n [disabled]=\"isMonthDisabled(i)\"\r\n (click)=\"selectMonth(i)\"\r\n >\r\n {{ m }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- Vista Years -->\r\n @if (view === 'years') {\r\n <div class=\"calendar-grid years\">\r\n @for (y of decadeRange; track $index) {\r\n <button\r\n class=\"day\"\r\n [class.today]=\"y == currentYear\"\r\n (click)=\"selectYear(y)\"\r\n >\r\n {{ y }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n <div class=\"calendar-footer\">\r\n <ui-button\r\n color=\"red\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"cleanInput()\"\r\n >Limpiar</ui-button\r\n >\r\n <ui-button\r\n color=\"blue\"\r\n size=\"s\"\r\n type=\"ghost\"\r\n (click)=\"pickToday()\"\r\n >Hoy</ui-button\r\n >\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</ui-input-wrapper>", styles: [".date-picker{position:relative}.calendar{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--input-radius);box-shadow:0 2px 6px #00000026;padding:.5rem;width:250px}.calendar-header{display:flex;gap:5px;align-items:center;margin-bottom:8px}.calendar-header span{-webkit-user-select:none;user-select:none;flex:1 1;cursor:pointer;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:ease .3s;padding:.25rem;border-radius:6px;margin-right:3px}.calendar-header span:hover{background-color:var(--primary-100)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-grid.months{grid-template-columns:repeat(3,1fr)}.calendar-grid.years{grid-template-columns:repeat(4,1fr)}.calendar-grid .empty{visibility:hidden}.weekday{font-size:.875rem}.day{padding:6px;border:none;background:transparent;border-radius:var(--button-radius);cursor:pointer;transition:ease .5s}.day:enabled:hover{color:var(--grey-950);background:var(--secondary-300)}.day:disabled{color:var(--grey-400);cursor:not-allowed}.today{box-shadow:0 0 0 3px var(--secondary-alpha)}.day-selected{background-color:var(--secondary-500);color:var(--white)}.calendar-footer{display:flex;padding-top:.25rem;border-top:solid 1px var(--grey-200);justify-content:space-between}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
998
998
  }], propDecorators: { icon: [{
999
999
  type: Input
1000
1000
  }], iconColor: [{
@@ -1111,7 +1111,7 @@ class UicPoolOptionsComponent extends base$7 {
1111
1111
  useExisting: forwardRef(() => UicPoolOptionsComponent),
1112
1112
  multi: true
1113
1113
  }
1114
- ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h2 class=\"pool-selected-title\">{{listViewTitle}}</h2>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" placeholder=\"Detalle\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
1114
+ ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h2 class=\"pool-selected-title\">{{listViewTitle}}</h2>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" placeholder=\"Detalle\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
1115
1115
  }
1116
1116
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPoolOptionsComponent, decorators: [{
1117
1117
  type: Component,
@@ -1121,7 +1121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1121
1121
  useExisting: forwardRef(() => UicPoolOptionsComponent),
1122
1122
  multi: true
1123
1123
  }
1124
- ], template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h2 class=\"pool-selected-title\">{{listViewTitle}}</h2>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" placeholder=\"Detalle\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
1124
+ ], template: "<div class=\"input-wrapper \">\r\n @if (icon) {\r\n <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n }\r\n <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n @if (label) {\r\n <div class=\"label inputlabel\" [class.font-error]=\"error\">{{label}} </div>\r\n }\r\n <div>\r\n <div class=\"pool-wrapper\" > \r\n @for (opt of options; track opt.id) {\r\n <div (click)=\"updateOptions(opt.id??'')\" class=\"pool-option\" [class.disabled-opt]=\"disabled\" [class.active-opt]=\"isSelected(opt.id??'')\">{{opt.text}}</div>\r\n }\r\n \r\n </div>\r\n <!-- BLOQUE DE LISTTA DETALLADA -->\r\n @if(enabledListView && selectedValues.length > 0){\r\n <h2 class=\"pool-selected-title\">{{listViewTitle}}</h2>\r\n <div>\r\n @for (item of selectedValues; track item.id) {\r\n <div class=\"pool-selected\"> \r\n <div class=\"pool-selected-label\">{{getItemName(item.id)}} </div>\r\n <div class=\"pool-selected-input\">\r\n <ui-input [disabled]=\"disabled\">\r\n <input [disabled]=\"disabled\" placeholder=\"Detalle\" type=\"text\" [value]=\"item.detail ?? ''\" (input)=\"updateDetail(item.id, $any($event.target).value)\">\r\n </ui-input>\r\n @if (!disabled) {\r\n <div class=\"pool-selected-button\" (click)=\"updateOptions(item.id)\" >\r\n <i class=\"ri-delete-bin-5-line\" ></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <!-- ALERTS -->\r\n @if (error) {\r\n <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n }\r\n @if (tip) {\r\n <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".pool-wrapper{display:flex;gap:var(--design-size-ref);flex-wrap:wrap}.pool-option{border:solid 1px var(--grey-300);color:var(--secondary-400);background-color:var(--secondary-50);font-size:.875rem;line-height:1.25rem;font-weight:400;padding:.5rem 1rem;border-radius:1rem;transition:ease .3s;-webkit-user-select:none;user-select:none;cursor:pointer}.pool-option:hover{border-color:var(--secondary-400)}.pool-selected-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.pool-selected-label{margin-top:24px;font-size:.875rem;margin-bottom:.5rem}.pool-selected-input{display:flex;align-items:center;gap:16px}.pool-selected-button{height:calc(4 * var(--form-ref));aspect-ratio:1;border-radius:var(--button-radius);border:solid 1px var(--grey-300);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:ease .3s}.pool-selected-button:hover{border-color:var(--red-400);color:var(--red-600)}.disabled-opt{background-color:var(--grey-200);border:none;cursor:not-allowed}.active-opt{background-color:var(--secondary-100);border:solid 1px var(--primary-400)}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
1125
1125
  }], propDecorators: { icon: [{
1126
1126
  type: Input
1127
1127
  }], iconColor: [{
@@ -1290,7 +1290,7 @@ class UicSearcherComponent extends base$6 {
1290
1290
  useExisting: forwardRef(() => UicSearcherComponent),
1291
1291
  multi: true
1292
1292
  }
1293
- ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\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 [disabled]=\"disabled\"\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 (!disabled) {\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 }\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 }\r\n </ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
1293
+ ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\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 f-'+ internalIcon\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\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 (!disabled) {\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 }\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 }\r\n </ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
1294
1294
  }
1295
1295
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
1296
1296
  type: Component,
@@ -1300,7 +1300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1300
1300
  useExisting: forwardRef(() => UicSearcherComponent),
1301
1301
  multi: true
1302
1302
  }
1303
- ], template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\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 [disabled]=\"disabled\"\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 (!disabled) {\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 }\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 }\r\n </ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
1303
+ ], template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless || (!disabled && stateless)) {\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 f-'+ internalIcon\" ></i>\r\n }\r\n <div class=\"input-container\" >\r\n <input\r\n [disabled]=\"disabled\"\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 (!disabled) {\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 }\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 }\r\n </ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
1304
1304
  }], propDecorators: { icon: [{
1305
1305
  type: Input
1306
1306
  }], iconColor: [{
@@ -1447,7 +1447,7 @@ class UicMultySelectComponent extends base$5 {
1447
1447
  useExisting: forwardRef(() => UicMultySelectComponent),
1448
1448
  multi: true
1449
1449
  }
1450
- ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
1450
+ ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
1451
1451
  }
1452
1452
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicMultySelectComponent, decorators: [{
1453
1453
  type: Component,
@@ -1457,7 +1457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1457
1457
  useExisting: forwardRef(() => UicMultySelectComponent),
1458
1458
  multi: true
1459
1459
  }
1460
- ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
1460
+ ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"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</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
1461
1461
  }], propDecorators: { icon: [{
1462
1462
  type: Input
1463
1463
  }], iconColor: [{
@@ -1743,7 +1743,7 @@ class UicTimePickerComponent extends base$4 {
1743
1743
  useExisting: forwardRef(() => UicTimePickerComponent),
1744
1744
  multi: true,
1745
1745
  },
1746
- ], 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: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\">\r\n <div class=\"fakeinput\" [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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
1746
+ ], 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: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\">\r\n <div class=\"fakeinput\" [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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
1747
1747
  }
1748
1748
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTimePickerComponent, decorators: [{
1749
1749
  type: Component,
@@ -1753,7 +1753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1753
1753
  useExisting: forwardRef(() => UicTimePickerComponent),
1754
1754
  multi: true,
1755
1755
  },
1756
- ], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\">\r\n <div class=\"fakeinput\" [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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
1756
+ ], template: "<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fakeinput-wrapp\">\r\n <div class=\"fakeinput\" [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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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"] }]
1757
1757
  }], propDecorators: { icon: [{
1758
1758
  type: Input
1759
1759
  }], iconColor: [{
@@ -2067,7 +2067,7 @@ class UicPhoneInputComponent extends base$3 {
2067
2067
  useExisting: forwardRef(() => UicPhoneInputComponent),
2068
2068
  multi: true
2069
2069
  }
2070
- ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div\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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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,14px);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,14px);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"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
2070
+ ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div\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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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,14px);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,14px);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"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
2071
2071
  }
2072
2072
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPhoneInputComponent, decorators: [{
2073
2073
  type: Component,
@@ -2077,7 +2077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
2077
2077
  useExisting: forwardRef(() => UicPhoneInputComponent),
2078
2078
  multi: true
2079
2079
  }
2080
- ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div\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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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,14px);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,14px);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"] }]
2080
+ ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div\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</ui-input-wrapper>\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:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.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,14px);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,14px);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"] }]
2081
2081
  }], ctorParameters: () => [], propDecorators: { icon: [{
2082
2082
  type: Input
2083
2083
  }], iconColor: [{
@@ -2211,10 +2211,13 @@ class UicFileInputComponent extends base$2 {
2211
2211
  writeValue(value) {
2212
2212
  const normalized = Array.isArray(value)
2213
2213
  ? value
2214
- .filter((item) => !!item && !!item.name && !!item.blob)
2214
+ .filter((item) => !!item && (!!item.blob || !!item.path))
2215
2215
  .map((item) => ({
2216
- name: item.name,
2216
+ name: item.name?.trim() ||
2217
+ item.path?.split('/').pop()?.split('\\').pop() ||
2218
+ 'file',
2217
2219
  blob: item.blob,
2220
+ path: item.path,
2218
2221
  }))
2219
2222
  : [];
2220
2223
  this.files = normalized;
@@ -2296,6 +2299,31 @@ class UicFileInputComponent extends base$2 {
2296
2299
  normalizedExtensionMatches);
2297
2300
  }
2298
2301
  downloadFile(item) {
2302
+ if (this.disabled || this.loading) {
2303
+ return;
2304
+ }
2305
+ if (item.blob) {
2306
+ const url = URL.createObjectURL(item.blob);
2307
+ const link = document.createElement('a');
2308
+ link.href = url;
2309
+ link.download = item.name || 'file';
2310
+ link.rel = 'noopener';
2311
+ document.body.appendChild(link);
2312
+ link.click();
2313
+ link.remove();
2314
+ setTimeout(() => URL.revokeObjectURL(url), 0);
2315
+ return;
2316
+ }
2317
+ if (item.path) {
2318
+ const link = document.createElement('a');
2319
+ link.href = item.path;
2320
+ link.target = '_blank';
2321
+ link.rel = 'noopener';
2322
+ link.download = item.name || 'file';
2323
+ document.body.appendChild(link);
2324
+ link.click();
2325
+ link.remove();
2326
+ }
2299
2327
  }
2300
2328
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2301
2329
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFileInputComponent, isStandalone: true, selector: "ui-file-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", internalIconColor: "internalIconColor", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", multy: "multy", fileTypes: "fileTypes" }, providers: [
@@ -2304,7 +2332,7 @@ class UicFileInputComponent extends base$2 {
2304
2332
  useExisting: forwardRef(() => UicFileInputComponent),
2305
2333
  multi: true
2306
2334
  }
2307
- ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
2335
+ ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
2308
2336
  }
2309
2337
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, decorators: [{
2310
2338
  type: Component,
@@ -2314,7 +2342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
2314
2342
  useExisting: forwardRef(() => UicFileInputComponent),
2315
2343
  multi: true
2316
2344
  }
2317
- ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
2345
+ ], template: "\r\n<ui-input-wrapper\r\n [icon]=\"icon\"\r\n [iconColor]=\"iconColor\"\r\n [label]=\"label\"\r\n [error]=\"error\"\r\n [tip]=\"tip\"\r\n [disabled]=\"disabled\">\r\n <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n <input\r\n #fileInput\r\n class=\"fileinput-native\"\r\n type=\"file\"\r\n (change)=\"onNativeInputChange($event)\"\r\n [attr.multiple]=\"multy ? '' : null\"\r\n [attr.accept]=\"acceptAttribute\"\r\n [disabled]=\"disabled || loading\"\r\n />\r\n @if (internalIcon) {\r\n <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n }\r\n <div class=\"fileinput-content\" >\r\n @if (!disabled && !loading) {\r\n <ui-button\r\n type=\"bordered\"\r\n color=\"black\"\r\n size=\"s\"\r\n (click)=\"openFileBrowser()\"\r\n >Seleccionar</ui-button>\r\n }\r\n <div\r\n class=\"fileinput-reel\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (!files.length) {\r\n <div class=\"fileinput-empty\">\r\n Aun no hay archivos\r\n </div>\r\n } @else {\r\n @for (item of files; track $index) {\r\n <div class=\"fileinput-item\">\r\n <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n <ui-button\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n type=\"ghost\"\r\n icon=\"ri-close-line\"\r\n (click)=\"removeFile($index)\"\r\n [disabled]=\"disabled || loading\"\r\n ></ui-button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</ui-input-wrapper>", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
2318
2346
  }], propDecorators: { icon: [{
2319
2347
  type: Input
2320
2348
  }], iconColor: [{
@@ -3270,7 +3298,7 @@ class UicDropdownContainerComponent {
3270
3298
  provide: DROPDOWN_OVERLAY_CONTROLS,
3271
3299
  useExisting: forwardRef(() => UicDropdownContainerComponent),
3272
3300
  },
3273
- ], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n <div class=\"ui-dropdown-panel\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
3301
+ ], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
3274
3302
  }
3275
3303
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
3276
3304
  type: Component,
@@ -3279,7 +3307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
3279
3307
  provide: DROPDOWN_OVERLAY_CONTROLS,
3280
3308
  useExisting: forwardRef(() => UicDropdownContainerComponent),
3281
3309
  },
3282
- ], template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n <div class=\"ui-dropdown-panel\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
3310
+ ], template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
3283
3311
  }], propDecorators: { buttonLabel: [{
3284
3312
  type: Input
3285
3313
  }], disabled: [{
@@ -3846,11 +3874,11 @@ class UicModalComponent {
3846
3874
  this.modalRef.closeFloating(null);
3847
3875
  }
3848
3876
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
3849
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"uic_modal\" \r\n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"uic_modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
3877
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
3850
3878
  }
3851
3879
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
3852
3880
  type: Component,
3853
- args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"uic_modal\" \r\n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"uic_modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
3881
+ args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
3854
3882
  }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
3855
3883
  type: Inject,
3856
3884
  args: [UiModalRef]
@@ -4768,7 +4796,7 @@ class UicSignaturePadComponent extends base$1 {
4768
4796
  useExisting: forwardRef(() => UicSignaturePadComponent),
4769
4797
  multi: true,
4770
4798
  },
4771
- ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\r\n <canvas\r\n #canvas\r\n class=\"signature-canvas\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height\"\r\n (pointerdown)=\"startDraw($event)\"\r\n (pointermove)=\"draw($event)\"\r\n (pointerup)=\"endDraw($event)\"\r\n (pointerleave)=\"endDraw($event)\"\r\n ></canvas>\r\n <div class=\"signature-actions\">\r\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\r\n </div>\r\n</div>\r\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--grey-200, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
4799
+ ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\n <canvas\n #canvas\n class=\"signature-canvas\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n (pointerdown)=\"startDraw($event)\"\n (pointermove)=\"draw($event)\"\n (pointerup)=\"endDraw($event)\"\n (pointerleave)=\"endDraw($event)\"\n ></canvas>\n <div class=\"signature-actions\">\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\n </div>\n</div>\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--grey-200, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
4772
4800
  }
4773
4801
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSignaturePadComponent, decorators: [{
4774
4802
  type: Component,
@@ -4778,7 +4806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
4778
4806
  useExisting: forwardRef(() => UicSignaturePadComponent),
4779
4807
  multi: true,
4780
4808
  },
4781
- ], template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\r\n <canvas\r\n #canvas\r\n class=\"signature-canvas\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height\"\r\n (pointerdown)=\"startDraw($event)\"\r\n (pointermove)=\"draw($event)\"\r\n (pointerup)=\"endDraw($event)\"\r\n (pointerleave)=\"endDraw($event)\"\r\n ></canvas>\r\n <div class=\"signature-actions\">\r\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\r\n </div>\r\n</div>\r\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--grey-200, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"] }]
4809
+ ], template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\n <canvas\n #canvas\n class=\"signature-canvas\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n (pointerdown)=\"startDraw($event)\"\n (pointermove)=\"draw($event)\"\n (pointerup)=\"endDraw($event)\"\n (pointerleave)=\"endDraw($event)\"\n ></canvas>\n <div class=\"signature-actions\">\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\n </div>\n</div>\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--grey-200, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"] }]
4782
4810
  }], propDecorators: { width: [{
4783
4811
  type: Input
4784
4812
  }], height: [{
@@ -4820,11 +4848,11 @@ class UicTabsButtonComponent {
4820
4848
  this.activeTabChange.emit(this.activeTab);
4821
4849
  }
4822
4850
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4823
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n @if (tab.icon) {\r\n <i [class]=\"tab.icon\"></i> \r\n }\r\n {{tab.text}}</div>\r\n }\r\n</div>", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff}\n"] });
4851
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n @if (tab.icon) {\r\n <i [class]=\"tab.icon\"></i> \r\n }\r\n {{tab.text}}</div>\r\n }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff;box-shadow:0 0 18px #0000001a}\n"] });
4824
4852
  }
4825
4853
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, decorators: [{
4826
4854
  type: Component,
4827
- args: [{ selector: 'ui-tabs-button', imports: [], template: "<div class=\"tabs\">\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n @if (tab.icon) {\r\n <i [class]=\"tab.icon\"></i> \r\n }\r\n {{tab.text}}</div>\r\n }\r\n</div>", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff}\n"] }]
4855
+ args: [{ selector: 'ui-tabs-button', imports: [], template: "<div class=\"tabs\">\r\n @for (tab of tabs; track $index) {\r\n <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n @if (tab.icon) {\r\n <i [class]=\"tab.icon\"></i> \r\n }\r\n {{tab.text}}</div>\r\n }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff;box-shadow:0 0 18px #0000001a}\n"] }]
4828
4856
  }], propDecorators: { tabs: [{
4829
4857
  type: Input
4830
4858
  }], activeTab: [{
@@ -5143,6 +5171,332 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
5143
5171
  type: Output
5144
5172
  }] } });
5145
5173
 
5174
+ class UicTreeAdminComponent {
5175
+ loading = false;
5176
+ emptyMessage = 'Sin subcategorias';
5177
+ duplicateNameMessage = 'La subcategoria ya existe';
5178
+ edit = new EventEmitter();
5179
+ remove = new EventEmitter();
5180
+ deactivate = new EventEmitter();
5181
+ nameChange = new EventEmitter();
5182
+ create = new EventEmitter();
5183
+ tree = [
5184
+ {
5185
+ id: 0,
5186
+ name: 'Sin hijos',
5187
+ enabled: true
5188
+ },
5189
+ {
5190
+ id: 1,
5191
+ name: 'Equipo A',
5192
+ enabled: true,
5193
+ children: [
5194
+ {
5195
+ id: 10,
5196
+ enabled: true,
5197
+ name: 'Miembro 1'
5198
+ },
5199
+ {
5200
+ id: 11,
5201
+ enabled: true,
5202
+ name: 'Miembro 3'
5203
+ },
5204
+ {
5205
+ id: 12,
5206
+ enabled: true,
5207
+ name: 'Miembro 5'
5208
+ },
5209
+ {
5210
+ id: 13,
5211
+ enabled: true,
5212
+ name: 'Miembro 10'
5213
+ },
5214
+ {
5215
+ id: 14,
5216
+ enabled: true,
5217
+ name: 'Miembro 9'
5218
+ }
5219
+ ]
5220
+ },
5221
+ {
5222
+ id: 2,
5223
+ name: 'Team B',
5224
+ enabled: true,
5225
+ children: [
5226
+ {
5227
+ id: 20,
5228
+ enabled: true,
5229
+ name: 'Person 1'
5230
+ },
5231
+ {
5232
+ id: 21,
5233
+ enabled: true,
5234
+ name: 'Person 3'
5235
+ }
5236
+ ]
5237
+ }
5238
+ ];
5239
+ childNameInputs;
5240
+ parentNameInputs;
5241
+ pushAler = inject(UicPushAlertService);
5242
+ collapsedIds = new Set();
5243
+ editingParentId = null;
5244
+ editingChildId = null;
5245
+ pendingFocusParentId = null;
5246
+ pendingFocusChildId = null;
5247
+ pendingCreateIds = new Set();
5248
+ originalNames = new Map();
5249
+ tempId = 0;
5250
+ ngAfterViewChecked() {
5251
+ this.cleanupPendingCreateIds();
5252
+ if (this.pendingFocusParentId !== null) {
5253
+ const targetId = String(this.pendingFocusParentId);
5254
+ const target = this.parentNameInputs?.find((input) => input.nativeElement.dataset['id'] === targetId);
5255
+ if (target) {
5256
+ target.nativeElement.focus();
5257
+ target.nativeElement.select();
5258
+ this.pendingFocusParentId = null;
5259
+ }
5260
+ }
5261
+ if (this.pendingFocusChildId !== null) {
5262
+ const targetId = String(this.pendingFocusChildId);
5263
+ const target = this.childNameInputs?.find((input) => input.nativeElement.dataset['id'] === targetId);
5264
+ if (target) {
5265
+ target.nativeElement.focus();
5266
+ target.nativeElement.select();
5267
+ this.pendingFocusChildId = null;
5268
+ }
5269
+ }
5270
+ }
5271
+ isExpanded(item) {
5272
+ return !this.collapsedIds.has(item.id);
5273
+ }
5274
+ toggleItem(item) {
5275
+ if (this.collapsedIds.has(item.id)) {
5276
+ this.collapsedIds.delete(item.id);
5277
+ }
5278
+ else {
5279
+ this.collapsedIds.add(item.id);
5280
+ }
5281
+ }
5282
+ startEditParent(item, event) {
5283
+ event?.stopPropagation();
5284
+ this.editingParentId = item.id;
5285
+ this.pendingFocusParentId = item.id;
5286
+ if (!this.originalNames.has(item.id)) {
5287
+ this.originalNames.set(item.id, item.name);
5288
+ }
5289
+ }
5290
+ stopEditParent() {
5291
+ this.editingParentId = null;
5292
+ }
5293
+ isEditingParent(item) {
5294
+ return this.editingParentId === item.id;
5295
+ }
5296
+ startEditChild(subitem, event) {
5297
+ event?.stopPropagation();
5298
+ if (this.pendingCreateIds.has(subitem.id)) {
5299
+ return;
5300
+ }
5301
+ this.editingChildId = subitem.id;
5302
+ this.pendingFocusChildId = subitem.id;
5303
+ if (!this.originalNames.has(subitem.id)) {
5304
+ this.originalNames.set(subitem.id, subitem.name);
5305
+ }
5306
+ }
5307
+ stopEditChild() {
5308
+ this.editingChildId = null;
5309
+ }
5310
+ isEditingChild(subitem) {
5311
+ return this.editingChildId === subitem.id;
5312
+ }
5313
+ updateParentName(item, event) {
5314
+ item.name = event.target.value;
5315
+ }
5316
+ updateChildName(parent, subitem, event) {
5317
+ subitem.name = event.target.value;
5318
+ }
5319
+ finalizeParentEdit(item) {
5320
+ const original = this.originalNames.get(item.id);
5321
+ if (original === undefined || original !== item.name) {
5322
+ this.nameChange.emit({ kind: 'parent', id: item.id, name: item.name });
5323
+ }
5324
+ this.originalNames.delete(item.id);
5325
+ this.stopEditParent();
5326
+ }
5327
+ finalizeChildEdit(parent, subitem) {
5328
+ const trimmed = subitem.name.trim();
5329
+ if (!trimmed) {
5330
+ this.removeChild(parent, subitem);
5331
+ this.originalNames.delete(subitem.id);
5332
+ return;
5333
+ }
5334
+ subitem.name = trimmed;
5335
+ const original = this.originalNames.get(subitem.id);
5336
+ const isNew = this.isNewChild(subitem.id);
5337
+ if (isNew) {
5338
+ if (original !== undefined && original === subitem.name) {
5339
+ this.originalNames.delete(subitem.id);
5340
+ this.stopEditChild();
5341
+ return;
5342
+ }
5343
+ if (this.hasDuplicateChildName(parent, subitem)) {
5344
+ this.pushAler.warning(this.duplicateNameMessage);
5345
+ this.removeChild(parent, subitem);
5346
+ this.originalNames.delete(subitem.id);
5347
+ return;
5348
+ }
5349
+ this.pendingCreateIds.add(subitem.id);
5350
+ this.create.emit({ parentId: parent.id, name: subitem.name, tempId: subitem.id });
5351
+ }
5352
+ else {
5353
+ if (original === undefined || original !== subitem.name) {
5354
+ this.nameChange.emit({ kind: 'child', parentId: parent.id, id: subitem.id, name: subitem.name });
5355
+ }
5356
+ }
5357
+ this.originalNames.delete(subitem.id);
5358
+ this.stopEditChild();
5359
+ }
5360
+ cancelParentEdit(item) {
5361
+ const original = this.originalNames.get(item.id);
5362
+ if (original !== undefined) {
5363
+ item.name = original;
5364
+ }
5365
+ this.originalNames.delete(item.id);
5366
+ this.stopEditParent();
5367
+ }
5368
+ cancelChildEdit(parent, subitem) {
5369
+ const original = this.originalNames.get(subitem.id);
5370
+ if (original !== undefined) {
5371
+ subitem.name = original;
5372
+ }
5373
+ this.originalNames.delete(subitem.id);
5374
+ if (this.isNewChild(subitem.id) && !subitem.name.trim()) {
5375
+ this.removeChild(parent, subitem);
5376
+ return;
5377
+ }
5378
+ this.stopEditChild();
5379
+ }
5380
+ addSubItem(item, event) {
5381
+ event?.stopPropagation();
5382
+ if (!item.children) {
5383
+ item.children = [];
5384
+ }
5385
+ const newId = `new-${Date.now()}-${this.tempId++}`;
5386
+ const newChild = { id: newId, name: '', enabled: true };
5387
+ item.children.unshift(newChild);
5388
+ this.collapsedIds.delete(item.id);
5389
+ this.editingChildId = newChild.id;
5390
+ this.pendingFocusChildId = newChild.id;
5391
+ }
5392
+ emitEditParent(item, event) {
5393
+ event?.stopPropagation();
5394
+ this.edit.emit({ kind: 'parent', id: item.id });
5395
+ this.startEditParent(item);
5396
+ }
5397
+ emitEditChild(parent, subitem, event) {
5398
+ event?.stopPropagation();
5399
+ this.edit.emit({ kind: 'child', parentId: parent.id, id: subitem.id });
5400
+ }
5401
+ emitDeleteParent(item, event) {
5402
+ event?.stopPropagation();
5403
+ this.remove.emit({ kind: 'parent', id: item.id });
5404
+ }
5405
+ emitDeleteChild(parent, subitem, event) {
5406
+ event?.stopPropagation();
5407
+ this.remove.emit({ kind: 'child', parentId: parent.id, id: subitem.id });
5408
+ }
5409
+ emitDeactivateParent(item, checked) {
5410
+ item.enabled = checked;
5411
+ this.deactivate.emit({ kind: 'parent', id: item.id, checked });
5412
+ }
5413
+ emitDeactivateChild(parent, subitem, checked) {
5414
+ subitem.enabled = checked;
5415
+ this.deactivate.emit({ kind: 'child', parentId: parent.id, id: subitem.id, checked });
5416
+ }
5417
+ isPendingCreate(subitem) {
5418
+ return this.pendingCreateIds.has(subitem.id);
5419
+ }
5420
+ removeChild(parent, subitem) {
5421
+ if (!parent.children) {
5422
+ return;
5423
+ }
5424
+ parent.children = parent.children.filter((child) => child.id !== subitem.id);
5425
+ if (this.editingChildId === subitem.id) {
5426
+ this.editingChildId = null;
5427
+ }
5428
+ this.pendingCreateIds.delete(subitem.id);
5429
+ }
5430
+ isNewChild(id) {
5431
+ if (id === null || id === undefined) {
5432
+ return true;
5433
+ }
5434
+ if (typeof id === 'string') {
5435
+ return id.trim() === '' || id.startsWith('new-');
5436
+ }
5437
+ return id <= 0;
5438
+ }
5439
+ hasDuplicateChildName(parent, subitem) {
5440
+ const trimmed = subitem.name.trim().toLowerCase();
5441
+ if (!trimmed || !parent.children) {
5442
+ return false;
5443
+ }
5444
+ return parent.children.some((child) => child.id !== subitem.id && child.name.trim().toLowerCase() === trimmed);
5445
+ }
5446
+ cleanupPendingCreateIds() {
5447
+ if (!this.pendingCreateIds.size) {
5448
+ return;
5449
+ }
5450
+ const idsInTree = new Set();
5451
+ for (const parent of this.tree) {
5452
+ if (parent.children?.length) {
5453
+ for (const child of parent.children) {
5454
+ idsInTree.add(child.id);
5455
+ }
5456
+ }
5457
+ }
5458
+ for (const pendingId of Array.from(this.pendingCreateIds)) {
5459
+ if (!idsInTree.has(pendingId)) {
5460
+ this.pendingCreateIds.delete(pendingId);
5461
+ }
5462
+ }
5463
+ }
5464
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5465
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { loading: "loading", emptyMessage: "emptyMessage", duplicateNameMessage: "duplicateNameMessage", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange", create: "create" }, viewQueries: [{ propertyName: "childNameInputs", predicate: ["childNameInput"], descendants: true }, { propertyName: "parentNameInputs", predicate: ["parentNameInput"], descendants: true }], ngImport: i0, template: "@if (loading) {\n <div class=\"tree-skeleton\">\n <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\n </div>\n} @else {\n @for (item of tree; track item.id) {\n <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\n <div class=\"tree-header\" (click)=\"toggleItem(item)\">\n <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\n <div class=\"tree-header-name\">\n @if (isEditingParent(item)) {\n <input\n #parentNameInput\n class=\"tree-name-input\"\n [attr.data-id]=\"item.id\"\n [value]=\"item.name\"\n (input)=\"updateParentName(item, $event)\"\n (blur)=\"finalizeParentEdit(item)\"\n (keydown.enter)=\"finalizeParentEdit(item)\"\n (keydown.escape)=\"cancelParentEdit(item)\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\n {{item.name}}\n </div>\n }\n <span>{{item.children?.length || 0}}</span>\n </div>\n <div>\n <ui-switch\n [checked]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"\n (checkedChange)=\"emitDeactivateParent(item, $event)\"\n ></ui-switch>\n </div>\n <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n @if (!item.children?.length) {\n <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n }\n </div>\n <div class=\"tree-body\">\n @if (item.children?.length) {\n @for (subitem of item.children; track subitem.id) {\n <div\n class=\"tree-subitem\"\n [class.is-disabled]=\"!subitem.enabled\"\n [class.is-pending]=\"isPendingCreate(subitem)\"\n [class.is-parent-disabled]=\"!item.enabled\"\n >\n <div class=\"tree-subitem-name\">\n <i\n class=\"ri-circle-fill tree-subitem-status\"\n [class.is-enabled]=\"subitem.enabled\"\n [class.is-disabled]=\"!subitem.enabled\"\n ></i>\n @if (isEditingChild(subitem)) {\n <input\n #childNameInput\n class=\"tree-name-input tree-name-input--sub\"\n [attr.data-id]=\"subitem.id\"\n [value]=\"subitem.name\"\n (input)=\"updateChildName(item, subitem, $event)\"\n (blur)=\"finalizeChildEdit(item, subitem)\"\n (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\n (keydown.escape)=\"cancelChildEdit(item, subitem)\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <span\n class=\"tree-name-text\"\n (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\n >{{subitem.name}}</span>\n }\n </div>\n <div class=\"tree-subitem-actions\">\n <ui-switch\n [checked]=\"subitem.enabled\"\n [disabled]=\"isPendingCreate(subitem)\"\n (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n ></ui-switch>\n <ui-button\n (click)=\"emitEditChild(item, subitem, $event)\"\n [disabled]=\"isPendingCreate(subitem)\"\n icon=\"ri-edit-line\"\n type=\"ghost\"\n [iconOnly]=\"true\"\n size=\"s\"\n ></ui-button>\n <ui-button \n (click)=\"emitDeleteChild(item, subitem, $event)\" \n icon=\"ri-delete-bin-line\" \n [disabled]=\"isPendingCreate(subitem)\"\n type=\"ghost\" \n [iconOnly]=\"true\" size=\"s\"></ui-button>\n </div>\n </div>\n }\n } @else {\n <div class=\"tree-empty\">\n {{emptyMessage}}\n </div>\n }\n </div>\n </div>\n }\n}\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--blue-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{width:50%;color:var(--grey-900);cursor:text}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }] });
5466
+ }
5467
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, decorators: [{
5468
+ type: Component,
5469
+ args: [{ selector: 'ui-tree-admin', imports: [
5470
+ UicButtonComponent,
5471
+ UicSkeletonLoaderComponent,
5472
+ UicSwichComponent
5473
+ ], template: "@if (loading) {\n <div class=\"tree-skeleton\">\n <ui-skeleton-loader [inputs]=\"4\" [cols]=\"1\"></ui-skeleton-loader>\n </div>\n} @else {\n @for (item of tree; track item.id) {\n <div class=\"tree-item\" [class.is-collapsed]=\"!isExpanded(item)\">\n <div class=\"tree-header\" (click)=\"toggleItem(item)\">\n <i class=\"ri-arrow-down-s-line tree-arrow\" [class.is-collapsed]=\"!isExpanded(item)\"></i>\n <div class=\"tree-header-name\">\n @if (isEditingParent(item)) {\n <input\n #parentNameInput\n class=\"tree-name-input\"\n [attr.data-id]=\"item.id\"\n [value]=\"item.name\"\n (input)=\"updateParentName(item, $event)\"\n (blur)=\"finalizeParentEdit(item)\"\n (keydown.enter)=\"finalizeParentEdit(item)\"\n (keydown.escape)=\"cancelParentEdit(item)\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <div class=\"tree-name-text\" (click)=\"startEditParent(item, $event)\">\n {{item.name}}\n </div>\n }\n <span>{{item.children?.length || 0}}</span>\n </div>\n <div>\n <ui-switch\n [checked]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"\n (checkedChange)=\"emitDeactivateParent(item, $event)\"\n ></ui-switch>\n </div>\n <ui-button (click)=\"addSubItem(item, $event)\" icon=\"ri-add-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n <ui-button (click)=\"emitEditParent(item, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n @if (!item.children?.length) {\n <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n }\n </div>\n <div class=\"tree-body\">\n @if (item.children?.length) {\n @for (subitem of item.children; track subitem.id) {\n <div\n class=\"tree-subitem\"\n [class.is-disabled]=\"!subitem.enabled\"\n [class.is-pending]=\"isPendingCreate(subitem)\"\n [class.is-parent-disabled]=\"!item.enabled\"\n >\n <div class=\"tree-subitem-name\">\n <i\n class=\"ri-circle-fill tree-subitem-status\"\n [class.is-enabled]=\"subitem.enabled\"\n [class.is-disabled]=\"!subitem.enabled\"\n ></i>\n @if (isEditingChild(subitem)) {\n <input\n #childNameInput\n class=\"tree-name-input tree-name-input--sub\"\n [attr.data-id]=\"subitem.id\"\n [value]=\"subitem.name\"\n (input)=\"updateChildName(item, subitem, $event)\"\n (blur)=\"finalizeChildEdit(item, subitem)\"\n (keydown.enter)=\"finalizeChildEdit(item, subitem)\"\n (keydown.escape)=\"cancelChildEdit(item, subitem)\"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <span\n class=\"tree-name-text\"\n (click)=\"!isPendingCreate(subitem) && startEditChild(subitem, $event)\"\n >{{subitem.name}}</span>\n }\n </div>\n <div class=\"tree-subitem-actions\">\n <ui-switch\n [checked]=\"subitem.enabled\"\n [disabled]=\"isPendingCreate(subitem)\"\n (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n ></ui-switch>\n <ui-button\n (click)=\"emitEditChild(item, subitem, $event)\"\n [disabled]=\"isPendingCreate(subitem)\"\n icon=\"ri-edit-line\"\n type=\"ghost\"\n [iconOnly]=\"true\"\n size=\"s\"\n ></ui-button>\n <ui-button \n (click)=\"emitDeleteChild(item, subitem, $event)\" \n icon=\"ri-delete-bin-line\" \n [disabled]=\"isPendingCreate(subitem)\"\n type=\"ghost\" \n [iconOnly]=\"true\" size=\"s\"></ui-button>\n </div>\n </div>\n }\n } @else {\n <div class=\"tree-empty\">\n {{emptyMessage}}\n </div>\n }\n </div>\n </div>\n }\n}\n", styles: [":host{width:100%}.tree-item{border:solid 1px var(--grey-400);border-radius:10px;overflow:hidden;margin-bottom:4px;background:linear-gradient(180deg,var(--grey-100) 0%,var(--grey-50) 100%);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.tree-header{width:100%;display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:solid 1px var(--grey-400);background-color:var(--grey-100);cursor:pointer;transition:background-color .16s ease}.tree-header:hover{background-color:var(--grey-200)}.tree-header-name{flex:1 1;display:flex;align-items:center;gap:10px}.tree-header-name span{border-radius:10px;padding:2px 10px;font-size:10px;color:var(--blue-800);background-color:var(--blue-100)}.tree-arrow{transition:transform .18s ease}.tree-arrow.is-collapsed{transform:rotate(-90deg)}.tree-body{background-color:var(--white);padding:2px 16px;display:flex;flex-direction:column;gap:1px;max-height:600px;opacity:1;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}.tree-empty{padding:8px 10px;font-size:12px;color:var(--grey-500);background-color:var(--grey-50);border-radius:8px}.tree-subitem{color:var(--grey-700);border-radius:5px;padding:3px 15px;gap:5px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.tree-subitem-name{flex:1 1;display:inline-flex;align-items:center;gap:6px}.tree-subitem-status{font-size:10px;color:var(--grey-400)}.tree-subitem-status.is-enabled{color:var(--blue-500)}.tree-subitem-status.is-disabled{color:var(--grey-400)}.tree-subitem-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease,transform .16s ease}.tree-subitem:hover{background-color:var(--blue-100)}.tree-subitem:hover .tree-subitem-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.tree-subitem.is-disabled .tree-name-text,.tree-subitem.is-disabled .tree-name-input,.tree-subitem.is-parent-disabled .tree-name-text,.tree-subitem.is-parent-disabled .tree-name-input{color:var(--grey-500)}.tree-subitem.is-parent-disabled .tree-subitem-status{color:var(--grey-400)}.tree-subitem.is-pending .tree-name-text{cursor:default;color:var(--grey-500)}.tree-name-text{width:50%;color:var(--grey-900);cursor:text}.tree-name-input{flex:1 1;min-width:0;border:solid 1px var(--grey-300);border-radius:6px;padding:7px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease;width:300px}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:5px}.tree-item.is-collapsed .tree-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}.tree-skeleton{padding:8px;border:solid 1px var(--grey-400);border-radius:10px;background-color:var(--grey-50)}\n"] }]
5474
+ }], propDecorators: { loading: [{
5475
+ type: Input
5476
+ }], emptyMessage: [{
5477
+ type: Input
5478
+ }], duplicateNameMessage: [{
5479
+ type: Input
5480
+ }], edit: [{
5481
+ type: Output
5482
+ }], remove: [{
5483
+ type: Output
5484
+ }], deactivate: [{
5485
+ type: Output
5486
+ }], nameChange: [{
5487
+ type: Output
5488
+ }], create: [{
5489
+ type: Output
5490
+ }], tree: [{
5491
+ type: Input
5492
+ }], childNameInputs: [{
5493
+ type: ViewChildren,
5494
+ args: ['childNameInput']
5495
+ }], parentNameInputs: [{
5496
+ type: ViewChildren,
5497
+ args: ['parentNameInput']
5498
+ }] } });
5499
+
5146
5500
  const base = createValueAccessor();
5147
5501
  class UicTagSelectorComponent extends base {
5148
5502
  icon = ''; // Icono externo
@@ -5289,5 +5643,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
5289
5643
  * Generated bundle index. Do not edit.
5290
5644
  */
5291
5645
 
5292
- export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
5646
+ export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicTreeAdminComponent, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
5293
5647
  //# sourceMappingURL=ui-core-abv.mjs.map