ui-core-abv 0.5.1 → 0.5.3

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 (7) hide show
  1. package/fesm2022/ui-core-abv.mjs +309 -52
  2. package/fesm2022/ui-core-abv.mjs.map +1 -1
  3. package/lib/components/tree-admin/tree-admin.component.d.ts +68 -0
  4. package/lib/components/work-panel/work-panel.component.d.ts +2 -4
  5. package/package.json +1 -1
  6. package/public-api.d.ts +1 -0
  7. package/src/lib/styles/_tokens.scss +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]
@@ -4509,7 +4537,7 @@ class UicTableComponent {
4509
4537
  }
4510
4538
  }
4511
4539
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4512
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" >\r\n </uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else {\r\n <ui-item-value\r\n [disabled]=\"disabled\"\r\n [key]=\"header.key\"\r\n [type]=\"header.type??'text'\"\r\n [row]=\"row\"\r\n [alignment]=\"alignment\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n ></ui-item-value>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.8) 20px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\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: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
4540
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" >\r\n </uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else {\r\n <ui-item-value\r\n [disabled]=\"disabled\"\r\n [key]=\"header.key\"\r\n [type]=\"header.type??'text'\"\r\n [row]=\"row\"\r\n [alignment]=\"alignment\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n ></ui-item-value>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.8) 20px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\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: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
4513
4541
  }
4514
4542
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
4515
4543
  type: Component,
@@ -4522,7 +4550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
4522
4550
  UicTablePaginationComponent,
4523
4551
  UicToolTipDirective,
4524
4552
  UicCheckboxComponent,
4525
- FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" >\r\n </uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else {\r\n <ui-item-value\r\n [disabled]=\"disabled\"\r\n [key]=\"header.key\"\r\n [type]=\"header.type??'text'\"\r\n [row]=\"row\"\r\n [alignment]=\"alignment\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n ></ui-item-value>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.8) 20px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"] }]
4553
+ FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" >\r\n </uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr>\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" \r\n [class.ui-tr-highlighted]=\"row.highlighted\"\r\n [class.clickable-row]=\"rowClickable\"\r\n (click)=\"clickRow(row.id)\"\r\n >\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\"\r\n [class.noshow-small]=\"header.hideOn == 'small'\"\r\n [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key,$event)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else {\r\n <ui-item-value\r\n [disabled]=\"disabled\"\r\n [key]=\"header.key\"\r\n [type]=\"header.type??'text'\"\r\n [row]=\"row\"\r\n [alignment]=\"alignment\"\r\n [switchValidation]=\"switchValidation\"\r\n (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n ></ui-item-value>\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n @if (fullViewRows.includes(row.id)) {\r\n <tr style=\"border-top: none ;\">\r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"full-space-row\">\r\n <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [nextButtonText]=\"nextButtonText\"\r\n [previousButtonText]=\"previousButtonText\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.8) 20px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"] }]
4526
4554
  }], propDecorators: { columns: [{
4527
4555
  type: Input
4528
4556
  }], data: [{
@@ -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: [{
@@ -4847,7 +4875,6 @@ class UicWorkPanelComponent {
4847
4875
  tabClosed = new EventEmitter();
4848
4876
  tabSelected = new EventEmitter();
4849
4877
  tabAdded = new EventEmitter();
4850
- addTabRequest = new EventEmitter();
4851
4878
  fullViewChange = new EventEmitter();
4852
4879
  minPosition = 1;
4853
4880
  showAddButton = true;
@@ -4867,7 +4894,6 @@ class UicWorkPanelComponent {
4867
4894
  this.initialized = true;
4868
4895
  this.initializeTabs();
4869
4896
  this.renderActiveTab();
4870
- // Evita ExpressionChanged en el primer ciclo al crear dinamicamente.
4871
4897
  this.cdr.detectChanges();
4872
4898
  }
4873
4899
  initializeTabs() {
@@ -4906,9 +4932,6 @@ class UicWorkPanelComponent {
4906
4932
  this.tabSelected.emit(instance.id);
4907
4933
  return instance.id;
4908
4934
  }
4909
- requestNewTab() {
4910
- this.addTabRequest.emit();
4911
- }
4912
4935
  selectTab(id) {
4913
4936
  this.isMinimized = false;
4914
4937
  if (this.activeTabId === id) {
@@ -4919,9 +4942,11 @@ class UicWorkPanelComponent {
4919
4942
  this.renderActiveTab();
4920
4943
  this.tabSelected.emit(id);
4921
4944
  }
4922
- close(omitWarning = false) {
4923
- if (this.activeTabId)
4945
+ closeActiveTab(omitWarning = false) {
4946
+ if (this.activeTabId) {
4924
4947
  this.closeTab(this.activeTabId, omitWarning);
4948
+ }
4949
+ return this.activeTabId;
4925
4950
  }
4926
4951
  closeTab(id, omitWarning = false) {
4927
4952
  if (this.closeWarning && !omitWarning) {
@@ -5001,11 +5026,11 @@ class UicWorkPanelComponent {
5001
5026
  return !(this.isMinimized || !this.activeTabId) && this.fullView;
5002
5027
  }
5003
5028
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
5004
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
5029
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
5005
5030
  }
5006
5031
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
5007
5032
  type: Component,
5008
- args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
5033
+ args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
5009
5034
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
5010
5035
  type: ViewChild,
5011
5036
  args: ['host', { read: ViewContainerRef, static: true }]
@@ -5029,8 +5054,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
5029
5054
  type: Output
5030
5055
  }], tabAdded: [{
5031
5056
  type: Output
5032
- }], addTabRequest: [{
5033
- type: Output
5034
5057
  }], fullViewChange: [{
5035
5058
  type: Output
5036
5059
  }], minPosition: [{
@@ -5148,6 +5171,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
5148
5171
  type: Output
5149
5172
  }] } });
5150
5173
 
5174
+ class UicTreeAdminComponent {
5175
+ loading = false;
5176
+ createSubcategoryFn;
5177
+ edit = new EventEmitter();
5178
+ remove = new EventEmitter();
5179
+ deactivate = new EventEmitter();
5180
+ nameChange = new EventEmitter();
5181
+ tree = [
5182
+ {
5183
+ id: 1,
5184
+ name: 'Equipo A',
5185
+ enabled: true,
5186
+ children: [
5187
+ {
5188
+ id: 10,
5189
+ enabled: true,
5190
+ name: 'Miembro 1'
5191
+ },
5192
+ {
5193
+ id: 11,
5194
+ enabled: true,
5195
+ name: 'Miembro 3'
5196
+ },
5197
+ {
5198
+ id: 12,
5199
+ enabled: true,
5200
+ name: 'Miembro 5'
5201
+ },
5202
+ {
5203
+ id: 13,
5204
+ enabled: true,
5205
+ name: 'Miembro 10'
5206
+ },
5207
+ {
5208
+ id: 14,
5209
+ enabled: true,
5210
+ name: 'Miembro 9'
5211
+ }
5212
+ ]
5213
+ },
5214
+ {
5215
+ id: 2,
5216
+ name: 'Team B',
5217
+ enabled: true,
5218
+ children: [
5219
+ {
5220
+ id: 20,
5221
+ enabled: true,
5222
+ name: 'Person 1'
5223
+ },
5224
+ {
5225
+ id: 21,
5226
+ enabled: true,
5227
+ name: 'Person 3'
5228
+ }
5229
+ ]
5230
+ }
5231
+ ];
5232
+ childNameInputs;
5233
+ parentNameInputs;
5234
+ collapsedIds = new Set();
5235
+ editingParentId = null;
5236
+ editingChildId = null;
5237
+ pendingFocusParentId = null;
5238
+ pendingFocusChildId = null;
5239
+ creatingChildIds = new Set();
5240
+ tempId = 0;
5241
+ ngAfterViewChecked() {
5242
+ if (this.pendingFocusParentId !== null) {
5243
+ const targetId = String(this.pendingFocusParentId);
5244
+ const target = this.parentNameInputs?.find((input) => input.nativeElement.dataset['id'] === targetId);
5245
+ if (target) {
5246
+ target.nativeElement.focus();
5247
+ target.nativeElement.select();
5248
+ this.pendingFocusParentId = null;
5249
+ }
5250
+ }
5251
+ if (this.pendingFocusChildId !== null) {
5252
+ const targetId = String(this.pendingFocusChildId);
5253
+ const target = this.childNameInputs?.find((input) => input.nativeElement.dataset['id'] === targetId);
5254
+ if (target) {
5255
+ target.nativeElement.focus();
5256
+ target.nativeElement.select();
5257
+ this.pendingFocusChildId = null;
5258
+ }
5259
+ }
5260
+ }
5261
+ isExpanded(item) {
5262
+ return !this.collapsedIds.has(item.id);
5263
+ }
5264
+ toggleItem(item) {
5265
+ if (this.collapsedIds.has(item.id)) {
5266
+ this.collapsedIds.delete(item.id);
5267
+ }
5268
+ else {
5269
+ this.collapsedIds.add(item.id);
5270
+ }
5271
+ }
5272
+ startEditParent(item, event) {
5273
+ event?.stopPropagation();
5274
+ this.editingParentId = item.id;
5275
+ this.pendingFocusParentId = item.id;
5276
+ }
5277
+ stopEditParent() {
5278
+ this.editingParentId = null;
5279
+ }
5280
+ isEditingParent(item) {
5281
+ return this.editingParentId === item.id;
5282
+ }
5283
+ startEditChild(subitem, event) {
5284
+ event?.stopPropagation();
5285
+ this.editingChildId = subitem.id;
5286
+ this.pendingFocusChildId = subitem.id;
5287
+ }
5288
+ stopEditChild() {
5289
+ this.editingChildId = null;
5290
+ }
5291
+ isEditingChild(subitem) {
5292
+ return this.editingChildId === subitem.id;
5293
+ }
5294
+ updateParentName(item, event) {
5295
+ item.name = event.target.value;
5296
+ this.nameChange.emit({ kind: 'parent', id: item.id, name: item.name });
5297
+ }
5298
+ updateChildName(parent, subitem, event) {
5299
+ subitem.name = event.target.value;
5300
+ this.nameChange.emit({ kind: 'child', parentId: parent.id, id: subitem.id, name: subitem.name });
5301
+ }
5302
+ async finalizeChildEdit(parent, subitem) {
5303
+ const trimmed = subitem.name.trim();
5304
+ if (!trimmed) {
5305
+ this.removeChild(parent, subitem);
5306
+ return;
5307
+ }
5308
+ subitem.name = trimmed;
5309
+ this.nameChange.emit({ kind: 'child', parentId: parent.id, id: subitem.id, name: subitem.name });
5310
+ if (this.isTempId(subitem.id) && this.createSubcategoryFn) {
5311
+ const tempId = subitem.id;
5312
+ this.creatingChildIds.add(tempId);
5313
+ try {
5314
+ const result = await Promise.resolve(this.createSubcategoryFn({ parentId: Number(parent.id), name: trimmed }));
5315
+ if (result?.id !== undefined) {
5316
+ subitem.id = result.id;
5317
+ }
5318
+ }
5319
+ finally {
5320
+ this.creatingChildIds.delete(tempId);
5321
+ }
5322
+ }
5323
+ this.stopEditChild();
5324
+ }
5325
+ addSubItem(item, event) {
5326
+ event?.stopPropagation();
5327
+ if (!item.children) {
5328
+ item.children = [];
5329
+ }
5330
+ const newId = `new-${Date.now()}-${this.tempId++}`;
5331
+ const newChild = { id: newId, name: '', enabled: true };
5332
+ item.children.unshift(newChild);
5333
+ this.collapsedIds.delete(item.id);
5334
+ this.editingChildId = newChild.id;
5335
+ this.pendingFocusChildId = newChild.id;
5336
+ }
5337
+ emitEditParent(item, event) {
5338
+ event?.stopPropagation();
5339
+ this.edit.emit({ kind: 'parent', id: item.id });
5340
+ this.startEditParent(item);
5341
+ }
5342
+ emitEditChild(parent, subitem, event) {
5343
+ event?.stopPropagation();
5344
+ this.edit.emit({ kind: 'child', parentId: parent.id, id: subitem.id });
5345
+ this.startEditChild(subitem);
5346
+ }
5347
+ emitDeleteParent(item, event) {
5348
+ event?.stopPropagation();
5349
+ this.remove.emit({ kind: 'parent', id: item.id });
5350
+ }
5351
+ emitDeleteChild(parent, subitem, event) {
5352
+ event?.stopPropagation();
5353
+ this.remove.emit({ kind: 'child', parentId: parent.id, id: subitem.id });
5354
+ }
5355
+ emitDeactivateParent(item, checked) {
5356
+ this.deactivate.emit({ kind: 'parent', id: item.id, checked });
5357
+ }
5358
+ emitDeactivateChild(parent, subitem, checked) {
5359
+ this.deactivate.emit({ kind: 'child', parentId: parent.id, id: subitem.id, checked });
5360
+ }
5361
+ isCreatingChild(subitem) {
5362
+ return this.creatingChildIds.has(subitem.id);
5363
+ }
5364
+ removeChild(parent, subitem) {
5365
+ if (!parent.children) {
5366
+ return;
5367
+ }
5368
+ parent.children = parent.children.filter((child) => child.id !== subitem.id);
5369
+ if (this.editingChildId === subitem.id) {
5370
+ this.editingChildId = null;
5371
+ }
5372
+ }
5373
+ isTempId(id) {
5374
+ return typeof id === 'string' && id.startsWith('new-');
5375
+ }
5376
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5377
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTreeAdminComponent, isStandalone: true, selector: "ui-tree-admin", inputs: { loading: "loading", createSubcategoryFn: "createSubcategoryFn", tree: "tree" }, outputs: { edit: "edit", remove: "remove", deactivate: "deactivate", nameChange: "nameChange" }, 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)=\"stopEditParent()\"\n (keydown.enter)=\"stopEditParent()\"\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 <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n </div>\n @if (item.children) {\n <div class=\"tree-body\">\n @for (subitem of item.children; track subitem.id) {\n <div class=\"tree-subitem\" [class.is-loading]=\"isCreatingChild(subitem)\">\n <div class=\"tree-subitem-name\">\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 (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <span class=\"tree-name-text\" (click)=\"startEditChild(subitem, $event)\">{{subitem.name}}</span>\n }\n </div>\n <div class=\"tree-subitem-actions\">\n @if (isCreatingChild(subitem)) {\n <div class=\"tree-subitem-loader\"></div>\n } @else {\n <ui-switch\n [checked]=\"subitem.enabled\"\n (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n ></ui-switch>\n <ui-button (click)=\"emitEditChild(item, subitem, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n <ui-button (click)=\"emitDeleteChild(item, subitem, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n }\n </div>\n </div>\n }\n </div>\n }\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-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}.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-loader{width:46px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 40%,var(--grey-200) 80%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}.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-loading{opacity:.8}.tree-subitem.is-loading .tree-subitem-actions{opacity:1;pointer-events:none;transform:translateY(0)}.tree-name-text{color:var(--grey-900);cursor:text}.tree-name-input{flex:1 1;min-width:0;width:300px;border:solid 1px var(--grey-300);border-radius:6px;padding:2px 6px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:1px 6px}.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)}@keyframes shimmer{0%{background-position:0% 0%}to{background-position:200% 0%}}\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"] }] });
5378
+ }
5379
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTreeAdminComponent, decorators: [{
5380
+ type: Component,
5381
+ args: [{ selector: 'ui-tree-admin', imports: [
5382
+ UicButtonComponent,
5383
+ UicSkeletonLoaderComponent,
5384
+ UicSwichComponent
5385
+ ], 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)=\"stopEditParent()\"\n (keydown.enter)=\"stopEditParent()\"\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 <ui-button (click)=\"emitDeleteParent(item, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n </div>\n @if (item.children) {\n <div class=\"tree-body\">\n @for (subitem of item.children; track subitem.id) {\n <div class=\"tree-subitem\" [class.is-loading]=\"isCreatingChild(subitem)\">\n <div class=\"tree-subitem-name\">\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 (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <span class=\"tree-name-text\" (click)=\"startEditChild(subitem, $event)\">{{subitem.name}}</span>\n }\n </div>\n <div class=\"tree-subitem-actions\">\n @if (isCreatingChild(subitem)) {\n <div class=\"tree-subitem-loader\"></div>\n } @else {\n <ui-switch\n [checked]=\"subitem.enabled\"\n (checkedChange)=\"emitDeactivateChild(item, subitem, $event)\"\n ></ui-switch>\n <ui-button (click)=\"emitEditChild(item, subitem, $event)\" icon=\"ri-edit-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n <ui-button (click)=\"emitDeleteChild(item, subitem, $event)\" icon=\"ri-delete-bin-line\" type=\"ghost\" [iconOnly]=\"true\" size=\"s\"></ui-button>\n }\n </div>\n </div>\n }\n </div>\n }\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-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}.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-loader{width:46px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 40%,var(--grey-200) 80%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}.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-loading{opacity:.8}.tree-subitem.is-loading .tree-subitem-actions{opacity:1;pointer-events:none;transform:translateY(0)}.tree-name-text{color:var(--grey-900);cursor:text}.tree-name-input{flex:1 1;min-width:0;width:300px;border:solid 1px var(--grey-300);border-radius:6px;padding:2px 6px;font-size:13px;color:var(--grey-900);background-color:var(--white);outline:none;transition:border-color .16s ease,box-shadow .16s ease}.tree-name-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f626}.tree-name-input--sub{font-size:12px;padding:1px 6px}.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)}@keyframes shimmer{0%{background-position:0% 0%}to{background-position:200% 0%}}\n"] }]
5386
+ }], propDecorators: { loading: [{
5387
+ type: Input
5388
+ }], createSubcategoryFn: [{
5389
+ type: Input
5390
+ }], edit: [{
5391
+ type: Output
5392
+ }], remove: [{
5393
+ type: Output
5394
+ }], deactivate: [{
5395
+ type: Output
5396
+ }], nameChange: [{
5397
+ type: Output
5398
+ }], tree: [{
5399
+ type: Input
5400
+ }], childNameInputs: [{
5401
+ type: ViewChildren,
5402
+ args: ['childNameInput']
5403
+ }], parentNameInputs: [{
5404
+ type: ViewChildren,
5405
+ args: ['parentNameInput']
5406
+ }] } });
5407
+
5151
5408
  const base = createValueAccessor();
5152
5409
  class UicTagSelectorComponent extends base {
5153
5410
  icon = ''; // Icono externo
@@ -5294,5 +5551,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
5294
5551
  * Generated bundle index. Do not edit.
5295
5552
  */
5296
5553
 
5297
- 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 };
5554
+ 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 };
5298
5555
  //# sourceMappingURL=ui-core-abv.mjs.map