@litigiovirtual/ius-design-components 1.0.87 → 1.0.89

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.
@@ -472,6 +472,26 @@ const ICONS = {
472
472
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
473
473
  <path d="M3.94577 20.8838C3.15894 20.8838 2.49069 20.6088 1.94102 20.059C1.39119 19.5093 1.11627 18.8411 1.11627 18.0543V5.94576C1.11627 5.15892 1.39119 4.49067 1.94102 3.94101C2.49069 3.39117 3.15894 3.11626 3.94577 3.11626H8.18427C8.55827 3.11626 8.91869 3.18692 9.26552 3.32826C9.61236 3.46959 9.91877 3.67517 10.1848 3.94501L12 5.76026H20.0543C20.8411 5.76026 21.5094 6.03517 22.059 6.58501C22.6089 7.13467 22.8838 7.80292 22.8838 8.58976V18.0543C22.8838 18.8411 22.6089 19.5093 22.059 20.059C21.5094 20.6088 20.8411 20.8838 20.0543 20.8838H3.94577ZM13.724 14.65V15.4408C13.724 15.8051 13.8532 16.117 14.1115 16.3765C14.3699 16.636 14.6824 16.7658 15.049 16.7658C15.4212 16.7658 15.735 16.6366 15.9905 16.3783C16.2462 16.1199 16.374 15.8074 16.374 15.4408V14.65H17.1828C17.5478 14.65 17.8599 14.5208 18.119 14.2625C18.378 14.0042 18.5075 13.6917 18.5075 13.325C18.5075 12.9583 18.3798 12.6458 18.1243 12.3875C17.8688 12.1292 17.5549 12 17.1825 12H16.374V11.2033C16.374 10.8389 16.2462 10.527 15.9905 10.2675C15.735 10.008 15.4222 9.87826 15.052 9.87826C14.6817 9.87826 14.3678 10.0074 14.1103 10.2658C13.8528 10.5241 13.724 10.8366 13.724 11.2033V12H12.921C12.556 12 12.244 12.1292 11.985 12.3875C11.7259 12.6458 11.5963 12.9583 11.5963 13.325C11.5963 13.6917 11.724 14.0042 11.9795 14.2625C12.235 14.5208 12.5489 14.65 12.9213 14.65H13.724Z" fill="currentColor"/>
474
474
  </svg>
475
+ `,
476
+ 'icon-new-proceso': `
477
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
478
+ <path d="M2 8.02813C2 7.73479 2.15333 7.46396 2.40417 7.31396L10.6225 2.38313C11.4733 1.87229 12.5283 1.87229 13.3783 2.38313L21.5958 7.31396C21.8467 7.46479 22 7.73563 22 8.02813C22 8.32063 21.8467 8.59229 21.5958 8.74229L13.3783 13.6731C12.9533 13.9281 12.4767 14.0548 12.0008 14.0556C11.5242 14.0556 11.0483 13.9281 10.6233 13.6731L2.40417 8.74313C2.15333 8.59229 2 8.32063 2 8.02813ZM21.1667 17.8365H19.5V16.1698C19.5 15.709 19.1267 15.3365 18.6667 15.3365C18.2067 15.3365 17.8333 15.709 17.8333 16.1698V17.8365H16.1667C15.7067 17.8365 15.3333 18.209 15.3333 18.6698C15.3333 19.1306 15.7067 19.5031 16.1667 19.5031H17.8333V21.1698C17.8333 21.6306 18.2067 22.0031 18.6667 22.0031C19.1267 22.0031 19.5 21.6306 19.5 21.1698V19.5031H21.1667C21.6267 19.5031 22 19.1306 22 18.6698C22 18.209 21.6267 17.8365 21.1667 17.8365ZM12.4292 20.2648L3.2625 14.7648C2.86667 14.5273 2.355 14.6556 2.11917 15.0506C1.8825 15.4456 2.01 15.9573 2.405 16.194L11.5717 21.694C11.7058 21.7748 11.8533 21.8131 12 21.8131C12.2833 21.8131 12.5592 21.669 12.715 21.409C12.9517 21.014 12.8242 20.5023 12.4292 20.2656V20.2648ZM20.7383 10.959L12.0008 16.2015L3.2625 10.959C2.86667 10.7215 2.355 10.849 2.11917 11.2448C1.8825 11.6398 2.01 12.1515 2.405 12.3881L11.5717 17.8881C11.7042 17.9673 11.8517 18.0073 12.0008 18.0073C12.15 18.0073 12.2975 17.9673 12.43 17.8881L21.5967 12.3881C21.9917 12.1515 22.1192 11.6398 21.8825 11.2448C21.6458 10.8498 21.1333 10.7223 20.7383 10.959Z" fill="currentColor"/>
479
+ </svg>
480
+ `,
481
+ 'icon-convertir-documento': `
482
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
483
+ <path d="M15.4583 2.25909C16.0101 2.47068 16.52 2.80059 16.9459 3.26436L19.8402 6.42268C20.2653 6.88645 20.5678 7.4435 20.7625 8.04459H16.25C15.813 8.04459 15.4583 7.65682 15.4583 7.18095V2.25909ZM16.25 9.77273C14.9406 9.77273 13.875 8.61027 13.875 7.18182V2H10.7083C8.96192 2 7.54167 3.54936 7.54167 5.45455V12.3636H12.3669L10.9403 10.8151C10.6308 10.4775 10.6308 9.93077 10.9403 9.59309C11.2498 9.25627 11.7502 9.25627 12.0597 9.59309L14.2756 12.0121C14.582 12.3464 14.7355 12.786 14.7355 13.2255C14.7355 13.2255 14.7355 13.2264 14.7355 13.2273C14.7355 13.6669 14.5828 14.1056 14.2764 14.4398L12.0597 16.8597C11.9053 17.0281 11.7027 17.1128 11.5 17.1128C11.2973 17.1128 11.0947 17.0281 10.9403 16.8597C10.6308 16.5229 10.6308 15.9762 10.9403 15.6385L12.359 14.09H7.54167V17.5446C7.54167 19.4498 8.96192 20.9991 10.7083 20.9991H17.8333C19.5798 20.9991 21 19.4498 21 17.5446V9.77186H16.25V9.77273ZM5.95833 17.5455V5.45455C5.95833 4.12627 6.42225 2.91805 7.1775 2H5.16667C3.42025 2 2 3.54936 2 5.45455V17.5455C2 19.4506 3.42025 21 5.16667 21H7.1775C6.42225 20.082 5.95833 18.8737 5.95833 17.5455Z" fill="currentColor"/>
484
+ </svg>
485
+ `,
486
+ 'icon-expand-all': `
487
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
488
+ <path d="M12 18.7065L15.6782 15.0343C15.9609 14.7556 16.2943 14.6194 16.6785 14.6258C17.0628 14.6321 17.3942 14.7766 17.6727 15.0592C17.9427 15.3379 18.0809 15.6662 18.0872 16.044C18.0936 16.4218 17.9554 16.7501 17.6727 17.0287L14.0005 20.701C13.448 21.2537 12.7812 21.53 12 21.53C11.2188 21.53 10.552 21.2537 9.9995 20.701L6.32724 17.0287C6.06124 16.7629 5.92724 16.4378 5.92524 16.0535C5.92324 15.6693 6.05724 15.3379 6.32724 15.0592C6.60574 14.7766 6.93716 14.6321 7.32149 14.6258C7.70566 14.6194 8.03908 14.7556 8.32174 15.0343L12 18.7065ZM12 5.2495L8.32174 8.92175C8.03908 9.20442 7.70566 9.34258 7.32149 9.33625C6.93716 9.32992 6.60375 9.18542 6.32125 8.90275C6.05525 8.62008 5.91908 8.29083 5.91274 7.915C5.90641 7.539 6.04458 7.20975 6.32724 6.92725L9.9995 3.255C10.552 2.70233 11.2188 2.426 12 2.426C12.7812 2.426 13.448 2.70233 14.0005 3.255L17.6727 6.92725C17.9427 7.19708 18.0777 7.52317 18.0777 7.9055C18.0777 8.28767 17.9447 8.62008 17.6787 8.90275C17.3962 9.18542 17.0628 9.32992 16.6785 9.33625C16.2943 9.34258 15.9609 9.20442 15.6782 8.92175L12 5.2495Z" fill="currentColor"/>
489
+ </svg>
490
+ `,
491
+ 'icon-collapse-all': `
492
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
493
+ <path d="M12 18.0195L8.30274 21.7167C8.03274 21.9827 7.70349 22.1157 7.31499 22.1157C6.92632 22.1157 6.59707 21.9827 6.32724 21.7167C6.05724 21.4469 5.92224 21.1167 5.92224 20.726C5.92224 20.3355 6.05724 20.0072 6.32724 19.7412L9.99949 16.069C10.552 15.5165 11.2188 15.2402 12 15.2402C12.7812 15.2402 13.448 15.5165 14.0005 16.069L17.6727 19.7412C17.9427 20.0072 18.0777 20.3355 18.0777 20.726C18.0777 21.1167 17.9427 21.4469 17.6727 21.7167C17.4029 21.9827 17.0737 22.1157 16.685 22.1157C16.2965 22.1157 15.9672 21.9827 15.6972 21.7167L12 18.0195ZM12 5.9425L15.6972 2.23925C15.9672 1.97325 16.2965 1.84025 16.685 1.84025C17.0737 1.84025 17.4029 1.97325 17.6727 2.23925C17.9427 2.50908 18.0777 2.83933 18.0777 3.23C18.0777 3.6205 17.9427 3.94875 17.6727 4.21475L14.0005 7.887C13.448 8.4395 12.7812 8.71575 12 8.71575C11.2188 8.71575 10.552 8.4395 9.99949 7.887L6.32724 4.21475C6.05724 3.94875 5.92224 3.6205 5.92224 3.23C5.92224 2.83933 6.05724 2.50908 6.32724 2.23925C6.59707 1.97325 6.92632 1.84025 7.31499 1.84025C7.70349 1.84025 8.03274 1.97325 8.30274 2.23925L12 5.9425Z" fill="currentColor"/>
494
+ </svg>
475
495
  `,
476
496
  'icon-currency-exchange': `
477
497
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24" fill="none">
@@ -2347,7 +2367,7 @@ class InputTextfieldComponent {
2347
2367
  this.labelInput = '';
2348
2368
  this.inputType = 'text';
2349
2369
  this.onChangesValueEvent = new EventEmitter();
2350
- this.onAddText = new EventEmitter();
2370
+ this.onEnterKey = new EventEmitter();
2351
2371
  }
2352
2372
  ngOnInit() {
2353
2373
  if (this.initialText) {
@@ -2378,12 +2398,9 @@ class InputTextfieldComponent {
2378
2398
  }
2379
2399
  onKeyPress(event) {
2380
2400
  if (event.key === 'Enter') {
2381
- this.addText();
2382
- }
2383
- }
2384
- addText() {
2385
- if (this.textInput.trim() !== '') {
2386
- this.onAddText.emit(this.textInput);
2401
+ if (this.textInput.trim() !== '') {
2402
+ this.onEnterKey.emit(this.textInput);
2403
+ }
2387
2404
  }
2388
2405
  }
2389
2406
  onDropBlock(event) {
@@ -2395,7 +2412,7 @@ class InputTextfieldComponent {
2395
2412
  event.preventDefault();
2396
2413
  }
2397
2414
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2398
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputTextfieldComponent, isStandalone: true, selector: "ius-input-textfield", inputs: { textInput: "textInput", required: "required", disabled: "disabled", isEnableClearText: "isEnableClearText", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", inputType: "inputType", maxlenght: "maxlenght", initialText: "initialText" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, ngImport: i0, template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n (input)=\"onInput()\" [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;transition:all .2s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
2415
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputTextfieldComponent, isStandalone: true, selector: "ius-input-textfield", inputs: { textInput: "textInput", required: "required", disabled: "disabled", isEnableClearText: "isEnableClearText", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", inputType: "inputType", maxlenght: "maxlenght", initialText: "initialText" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey" }, ngImport: i0, template: "<div class=\"container-general\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\"\r\n (input)=\"onInput()\" [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n @if (!disabled && textInput && isEnableClearText) {\r\n <button class=\"button-delete\" (click)=\"clearSearch()\">\r\n <ius-icon-md iconName=\"icon-cancel\" class=\"icon-color-cancel\"></ius-icon-md>\r\n </button>\r\n }\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px;transition:all .2s ease-in-out}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-color-cancel{color:#013169}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.button-delete{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#595959}.button-delete:hover{color:#013169}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
2399
2416
  }
2400
2417
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTextfieldComponent, decorators: [{
2401
2418
  type: Component,
@@ -2426,7 +2443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2426
2443
  type: Input
2427
2444
  }], onChangesValueEvent: [{
2428
2445
  type: Output
2429
- }], onAddText: [{
2446
+ }], onEnterKey: [{
2430
2447
  type: Output
2431
2448
  }] } });
2432
2449
 
@@ -2444,7 +2461,7 @@ class InputSelectComponent {
2444
2461
  this.textInput = '';
2445
2462
  this.inputType = 'text';
2446
2463
  this.onChangesValueEvent = new EventEmitter();
2447
- this.onAddText = new EventEmitter();
2464
+ this.onEnterKey = new EventEmitter();
2448
2465
  }
2449
2466
  //Esta funcion permite que el se cierre el listado si el usuario da click en otro lado fuera del componente
2450
2467
  onClickOutside(event) {
@@ -2497,13 +2514,9 @@ class InputSelectComponent {
2497
2514
  }
2498
2515
  onKeyPress(event) {
2499
2516
  if (event.key === 'Enter') {
2500
- this.addText();
2501
- }
2502
- }
2503
- addText() {
2504
- if (this.textInput.trim() !== '') {
2505
- this.onAddText.emit(this.textInput);
2506
- this.textInput = '';
2517
+ if (this.textInput.trim() !== '') {
2518
+ this.onEnterKey.emit(this.textInput);
2519
+ }
2507
2520
  }
2508
2521
  }
2509
2522
  onSelectOption() {
@@ -2521,11 +2534,11 @@ class InputSelectComponent {
2521
2534
  event.preventDefault();
2522
2535
  }
2523
2536
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2524
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput", maxlenght: "maxlenght", inputType: "inputType" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\" (click)=\"onFocus()\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n <div class=\"cnt-icon-right\">\r\n @if(!showList){\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n }@else{\r\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n @if (showList) {\r\n <div class=\"container-list scrollable-small\">\r\n <div (click)=\"onSelectOption()\">\r\n <ng-content selector=\"ius-option\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
2537
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput", maxlenght: "maxlenght", inputType: "inputType" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\" (click)=\"onFocus()\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
2525
2538
  }
2526
2539
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
2527
2540
  type: Component,
2528
- args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{\r\n 'disabled': disabled\r\n }\">\r\n @if(!disabled && required){\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span class=\"\">{{labelSuperior}}</span>\r\n @if(!disabled && showHelpText){\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n <div class=\"container-textfield\" [ngClass]=\"{\r\n 'disabled': disabled,\r\n 'focused': isFocused,\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\" (click)=\"onFocus()\">\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\r\n <div class=\"cnt-icon-right\">\r\n @if(!showList){\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n }@else{\r\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{labelInferior}}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{\r\n 'alert': !isFocused && isAlertText && !disabled\r\n }\">{{labelInferior}}</span>\r\n }\r\n @if (showList) {\r\n <div class=\"container-list scrollable-small\">\r\n <div (click)=\"onSelectOption()\">\r\n <ng-content selector=\"ius-option\"></ng-content>\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
2541
+ args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\" (click)=\"onFocus()\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input [type]=\"inputType\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n [maxlength]=\"maxlenght ?? null\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n (keypress)=\"onKeyPress($event)\" (drop)=\"onDropBlock($event)\" (dragover)=\"onDragOverBlock($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <div (click)=\"closeList($event)\" style=\"height: 20px;\">\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n </div>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;cursor:pointer;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{cursor:default;background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows,.container-textfield.disabled input{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.container-textfield .icon-arrows{pointer-events:none}.container-textfield .icon-arrows svg{pointer-events:none}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
2529
2542
  }], propDecorators: { componentId: [{
2530
2543
  type: Input,
2531
2544
  args: [{ required: true }]
@@ -2551,7 +2564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2551
2564
  type: Input
2552
2565
  }], onChangesValueEvent: [{
2553
2566
  type: Output
2554
- }], onAddText: [{
2567
+ }], onEnterKey: [{
2555
2568
  type: Output
2556
2569
  }], onClickOutside: [{
2557
2570
  type: HostListener,
@@ -3062,7 +3075,7 @@ class CustomDropdownComponent {
3062
3075
  this.textInput = '';
3063
3076
  this.element = '';
3064
3077
  this.onChangesValueEvent = new EventEmitter();
3065
- this.onAddText = new EventEmitter();
3078
+ this.onEnterKey = new EventEmitter();
3066
3079
  this.onAddElement = new EventEmitter();
3067
3080
  }
3068
3081
  onClickOutside(event) {
@@ -3117,8 +3130,7 @@ class CustomDropdownComponent {
3117
3130
  }
3118
3131
  addText() {
3119
3132
  if (this.textInput.trim() !== '') {
3120
- this.onAddText.emit(this.textInput);
3121
- this.textInput = '';
3133
+ this.onEnterKey.emit(this.textInput);
3122
3134
  }
3123
3135
  }
3124
3136
  onSelectOption() {
@@ -3128,7 +3140,7 @@ class CustomDropdownComponent {
3128
3140
  this.selected = true;
3129
3141
  }
3130
3142
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3131
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CustomDropdownComponent, isStandalone: true, selector: "ius-custom-dropdown", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", placeholderAddText: "placeholderAddText", iconBtnAdd: "iconBtnAdd", textBtnAdd: "textBtnAdd", textInput: "textInput", element: "element" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText", onAddElement: "onAddElement" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\r\n\r\n <!-- Label superior -->\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{ disabled: disabled }\">\r\n @if (!disabled && required) {\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span>{{ labelSuperior }}</span>\r\n @if (!disabled && showHelpText) {\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n\r\n <!-- Input principal -->\r\n <div\r\n class=\"container-textfield\"\r\n [ngClass]=\"{\r\n disabled: disabled,\r\n focused: isFocused,\r\n alert: !isFocused && isAlertText && !disabled\r\n }\"\r\n >\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"textInput\"\r\n [placeholder]=\"labelInput\"\r\n [disabled]=\"disabled\"\r\n (input)=\"onInput()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\"\r\n />\r\n <div class=\"cnt-icon-right\">\r\n @if (!showList) {\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n } @else {\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Label inferior -->\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{ labelInferior }}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{ alert: !isFocused && isAlertText && !disabled }\">\r\n {{ labelInferior }}\r\n </span>\r\n }\r\n\r\n <!-- Lista de opciones -->\r\n @if (showList) {\r\n <div class=\"container-options\">\r\n <div class=\"container-list scrollable-small\">\r\n <div (click)=\"onSelectOption()\">\r\n <ng-content selector=\"ius-option\"></ng-content>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"add-data\">\r\n <div class=\"container-text\">\r\n <input\r\n type=\"text\"\r\n class=\"input-text\"\r\n [(ngModel)]=\"element\"\r\n (keypress)=\"onKeyPressAddElement($event)\"\r\n [placeholder]=\"placeholderAddText\"\r\n />\r\n </div>\r\n <div class=\"button-add-option\">\r\n <ius-button-standard-tertiary\r\n [iconName]=\"iconBtnAdd\"\r\n (click)=\"onClickAddElement()\"\r\n >\r\n {{ textBtnAdd }}\r\n </ius-button-standard-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-arrows{color:#333}.icon-color-help{color:#8c8c8c}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-options{position:absolute;width:100%;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000}.container-list{max-height:144px;display:flex;flex-direction:column;margin-top:4px;overflow-y:auto}.add-data{display:flex;padding-top:8px;padding-bottom:8px;align-items:center;gap:10px;width:100%;background:#fff;border-radius:8px}.add-data .container-text{display:flex;width:60%;align-items:flex-start;gap:4px}.add-data .container-text .input-text{width:100%;display:flex;margin-left:10px;padding:12px;justify-content:center;align-items:flex-start;gap:4px;border-radius:8px;background:#f5f5f5}.add-data .button-add-option{margin-right:10px;width:40%}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
3143
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CustomDropdownComponent, isStandalone: true, selector: "ius-custom-dropdown", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", placeholderAddText: "placeholderAddText", iconBtnAdd: "iconBtnAdd", textBtnAdd: "textBtnAdd", textInput: "textInput", element: "element" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onEnterKey: "onEnterKey", onAddElement: "onAddElement" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\r\n\r\n <!-- Label superior -->\r\n @if (labelSuperior) {\r\n <div class=\"container-label-sup\" [ngClass]=\"{ disabled: disabled }\">\r\n @if (!disabled && required) {\r\n <div class=\"icon-dot\"></div>\r\n }\r\n <span>{{ labelSuperior }}</span>\r\n @if (!disabled && showHelpText) {\r\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\r\n }\r\n <span>:</span>\r\n </div>\r\n }\r\n\r\n <!-- Input principal -->\r\n <div\r\n class=\"container-textfield\"\r\n [ngClass]=\"{\r\n disabled: disabled,\r\n focused: isFocused,\r\n alert: !isFocused && isAlertText && !disabled\r\n }\"\r\n >\r\n @if (iconInput) {\r\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n }\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"textInput\"\r\n [placeholder]=\"labelInput\"\r\n [disabled]=\"disabled\"\r\n (input)=\"onInput()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (keypress)=\"onKeyPress($event)\"\r\n />\r\n <div class=\"cnt-icon-right\">\r\n @if (!showList) {\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\r\n } @else {\r\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Label inferior -->\r\n @if (labelInferior && isFocused) {\r\n <span class=\"label-inf\">{{ labelInferior }}</span>\r\n }\r\n @if (labelInferior && !isFocused && isAlertText) {\r\n <span class=\"label-inf\" [ngClass]=\"{ alert: !isFocused && isAlertText && !disabled }\">\r\n {{ labelInferior }}\r\n </span>\r\n }\r\n\r\n <!-- Lista de opciones -->\r\n @if (showList) {\r\n <div class=\"container-options\">\r\n <div class=\"container-list scrollable-small\">\r\n <div (click)=\"onSelectOption()\">\r\n <ng-content selector=\"ius-option\"></ng-content>\r\n </div>\r\n </div>\r\n <ius-simple-divider></ius-simple-divider>\r\n <div class=\"add-data\">\r\n <div class=\"container-text\">\r\n <input\r\n type=\"text\"\r\n class=\"input-text\"\r\n [(ngModel)]=\"element\"\r\n (keypress)=\"onKeyPressAddElement($event)\"\r\n [placeholder]=\"placeholderAddText\"\r\n />\r\n </div>\r\n <div class=\"button-add-option\">\r\n <ius-button-standard-tertiary\r\n [iconName]=\"iconBtnAdd\"\r\n (click)=\"onClickAddElement()\"\r\n >\r\n {{ textBtnAdd }}\r\n </ius-button-standard-tertiary>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-arrows{color:#333}.icon-color-help{color:#8c8c8c}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-options{position:absolute;width:100%;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000}.container-list{max-height:144px;display:flex;flex-direction:column;margin-top:4px;overflow-y:auto}.add-data{display:flex;padding-top:8px;padding-bottom:8px;align-items:center;gap:10px;width:100%;background:#fff;border-radius:8px}.add-data .container-text{display:flex;width:60%;align-items:flex-start;gap:4px}.add-data .container-text .input-text{width:100%;display:flex;margin-left:10px;padding:12px;justify-content:center;align-items:flex-start;gap:4px;border-radius:8px;background:#f5f5f5}.add-data .button-add-option{margin-right:10px;width:40%}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
3132
3144
  }
3133
3145
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
3134
3146
  type: Component,
@@ -3168,7 +3180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3168
3180
  type: Input
3169
3181
  }], onChangesValueEvent: [{
3170
3182
  type: Output
3171
- }], onAddText: [{
3183
+ }], onEnterKey: [{
3172
3184
  type: Output
3173
3185
  }], onAddElement: [{
3174
3186
  type: Output