@litigiovirtual/ius-design-components 1.0.43 → 1.0.44

package/fesm2022/litigiovirtual-ius-design-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, HostListener } from '@angular/core';
+import { Input, Component, EventEmitter, Output, HostListener, ViewChild } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
@@ -1668,6 +1668,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 class DatePickerComponent {
+    openCalendar() {
+        this.calendarOpen = true;
+        setTimeout(() => this.positionCalendarOverlay(), 0);
+    }
+    positionCalendarOverlay() {
+        const inputRect = this.inputField.nativeElement.getBoundingClientRect();
+        const overlay = this.calendarOverlay.nativeElement;
+        const overlayHeight = overlay.offsetHeight;
+        const spaceBelow = window.innerHeight - inputRect.bottom;
+        const spaceAbove = inputRect.top;
+        let top = inputRect.bottom;
+        if (spaceBelow < overlayHeight && spaceAbove > overlayHeight) {
+            // Mostrar hacia arriba
+            top = inputRect.top - overlayHeight;
+        }
+        overlay.style.position = 'fixed';
+        overlay.style.right = '0px';
+        overlay.style.top = `${top}px`;
+        overlay.style.zIndex = '99999';
+    }
     constructor(elRef) {
         this.elRef = elRef;
         this.label = 'Fecha';
@@ -1701,6 +1721,9 @@ class DatePickerComponent {
         }
         this.focused = true;
         this.calendarOpen = !this.calendarOpen;
+        if (this.calendarOpen) {
+            setTimeout(() => this.positionCalendarOverlay(), 0);
+        }
     }
     goToToday() {
         const today = new Date();
@@ -1788,7 +1811,7 @@ class DatePickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DatePickerComponent, isStandalone: true, selector: "ius-date-picker", inputs: { label: "label", placeholder: "placeholder", error: "error", iconHelp: "iconHelp", helpText: "helpText", helpTextError: "helpTextError", disabled: "disabled", isRequired: "isRequired" }, outputs: { dateSelected: "dateSelected" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, ngImport: i0, template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n  <div class=\"text\">\r\n    @if (isRequired) {\r\n    <div class=\"required\"></div>\r\n    }\r\n\r\n    <label class=\"label\">{{ label }}</label>\r\n\r\n    @if (iconHelp) {\r\n    <div class=\"help-icon\">\r\n      <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n    </div>\r\n    }\r\n\r\n    <label class=\"label\">:</label>\r\n  </div>\r\n\r\n  <div class=\"input-wrapper\">\r\n    <div\r\n      class=\"container-textfield\"\r\n      [ngClass]=\"{\r\n        disabled: disabled,\r\n        focused: calendarOpen || focused,\r\n        alert: !calendarOpen && error && !disabled,\r\n        selected: selectedDate\r\n      }\"\r\n      (click)=\"toggleCalendar()\"\r\n    >\r\n      <div class=\"input\">\r\n        <input\r\n          [placeholder]=\"placeholder\"\r\n          [value]=\"selectedDate ? (selectedDate | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\r\n          [disabled]=\"disabled\"\r\n        />\r\n        <div class=\"cnt-icon-right\">\r\n          <ius-icon-md iconName=\"icon-calendar-today\"></ius-icon-md>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (calendarOpen) {\r\n    <div class=\"calendar-overlay\">\r\n      <div class=\"mes\">\r\n        <div class=\"calendar-header\">\r\n          <ius-button-standard-tertiary\r\n            iconName=\"icon-keyboard-arrow-left\"\r\n            (buttonClicked)=\"prev()\"\r\n          ></ius-button-standard-tertiary>\r\n\r\n          <span (click)=\"calendarView = nextView(calendarView)\">\r\n            @switch (calendarView) { @case ('day') {\r\n            {{ getMonthName(viewDate.getMonth()) }} {{ viewDate.getFullYear() }}\r\n            } @case ('month') {\r\n            {{ viewDate.getFullYear() }}\r\n            } @case ('year') {\r\n            {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}\r\n            } }\r\n          </span>\r\n\r\n          <ius-button-standard-tertiary\r\n            iconName=\"icon-keyboard-arrow-right\"\r\n            (buttonClicked)=\"next()\"\r\n          ></ius-button-standard-tertiary>\r\n        </div>\r\n\r\n        <div class=\"calendar-body\">\r\n          @switch (calendarView) { @case ('day') {\r\n          <div class=\"grid days\">\r\n            @for (day of dayLabels; track day) {\r\n            <div class=\"header\">{{ day }}</div>\r\n            } @for (date of calendarDays; track date) {\r\n            <div\r\n              class=\"cell\"\r\n              [class.selected]=\"selectedDate && isSameDate(date, selectedDate)\"\r\n              [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n              (click)=\"selectDate(date)\"\r\n            >\r\n              {{ date.getDate() }}\r\n            </div>\r\n            }\r\n          </div>\r\n          } @case ('month') {\r\n          <div class=\"grid months\">\r\n            @for (m of months; track m; let i = $index) {\r\n            <div class=\"cell\" (click)=\"setMonth(i)\">{{ m }}</div>\r\n            }\r\n          </div>\r\n          } @case ('year') {\r\n          <div class=\"grid years\">\r\n            @for (i of yearsArray; track i) {\r\n            <div\r\n              class=\"cell\"\r\n              [class.out-of-range]=\"i === 0 || i === 11\"\r\n              (click)=\"setYear(getDecadeStart() - 1 + i)\"\r\n            >\r\n              {{ getDecadeStart() - 1 + i }}\r\n            </div>\r\n            }\r\n          </div>\r\n          } }\r\n        </div>\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n\r\n      <button class=\"today\" (click)=\"goToToday()\">Fecha actual</button>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (helpText && focused && !error) {\r\n    <div class=\"help-text\">\r\n      {{helpText}}\r\n    </div>\r\n  }\r\n  @if (helpTextError && error) {\r\n    <div class=\"help-text-error\">\r\n      {{helpTextError}}\r\n    </div>\r\n  }\r\n</div>\r\n", 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}.required{width:4px;height:4px;margin-right:4px;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center}.date-picker{height:100%;display:flex;flex-direction:column;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{margin:0 4px;color:#333;font-family:Rubik;font-size:.875rem;font-weight:500;font-style:normal;line-height:20px;letter-spacing:.28px}.date-picker .help-icon{color:#595959}.date-picker .container-textfield{display:flex;align-items:flex-start;gap:4px}.date-picker .container-textfield .input{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.date-picker .container-textfield .input input{flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.date-picker .container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.date-picker .container-textfield:hover .input,.date-picker .container-textfield:hover .input input{background-color:#edf6ff}.date-picker .container-textfield:hover .input .cnt-icon-right{color:#061b7a}.date-picker .container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.date-picker .container-textfield.focused .input input{background-color:#edf6ff;border:none}.date-picker .container-textfield.focused .input .cnt-icon-right{color:#061b7a}.date-picker .container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.date-picker .container-textfield.alert .input input{background:#fff4f0}.date-picker .container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.date-picker .container-textfield.selected .input{background:#f5f5f5}.date-picker .container-textfield.selected .input input{background:#f5f5f5;border:none;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.date-picker .container-textfield.selected .input .cnt-icon-right{color:#595959}.date-picker .container-textfield.disabled{background:#f5f5f5}.date-picker .container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.date-picker .container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.date-picker .calendar-overlay{display:flex;flex-direction:column;align-items:center;align-self:stretch;min-width:300px;padding:0;gap:0;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.date-picker .calendar-overlay .mes{display:flex;flex-direction:column;padding:16px 12px}.date-picker .calendar-overlay .calendar-header{display:flex;align-items:center;align-self:stretch}.date-picker .calendar-overlay .calendar-header span{flex:1;display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.date-picker .calendar-overlay .calendar-body{display:flex;flex-direction:column;gap:8px}.date-picker .calendar-overlay .grid{display:grid;gap:8px}.date-picker .calendar-overlay .grid.days{grid-template-columns:repeat(7,1fr)}.date-picker .calendar-overlay .grid.months,.date-picker .calendar-overlay .grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.date-picker .calendar-overlay .grid .header{display:flex;align-items:center;height:30px;padding:2px 4px;gap:16px;color:#333;font-family:Rubik;font-size:.75rem;font-weight:500;font-style:normal;line-height:16px;letter-spacing:.24px}.date-picker .calendar-overlay .grid .cell{display:flex;width:24px;height:24px;min-width:24px;min-height:24px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1;background:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.date-picker .calendar-overlay .grid .cell:hover{background:#edf6ff}.date-picker .calendar-overlay .grid .cell.out-of-range{color:#bfbfbf}.date-picker .calendar-overlay .grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.date-picker .calendar-overlay .today{margin-top:8px;width:100%;padding:8px;border:none;background:transparent;display:flex;justify-content:center;align-items:center;gap:4px;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.help-text{display:flex;align-items:center;gap:10px;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;align-items:center;gap:10px;color:#931224;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DatePickerComponent, isStandalone: true, selector: "ius-date-picker", inputs: { label: "label", placeholder: "placeholder", error: "error", iconHelp: "iconHelp", helpText: "helpText", helpTextError: "helpTextError", disabled: "disabled", isRequired: "isRequired" }, outputs: { dateSelected: "dateSelected" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, viewQueries: [{ propertyName: "calendarOverlay", first: true, predicate: ["calendarOverlay"], descendants: true }, { propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }], ngImport: i0, template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n  <div class=\"text\">\r\n    @if (isRequired) {\r\n    <div class=\"required\"></div>\r\n    }\r\n\r\n    <label class=\"label\">{{ label }}</label>\r\n\r\n    @if (iconHelp) {\r\n    <div class=\"help-icon\">\r\n      <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n    </div>\r\n    }\r\n\r\n    <label class=\"label\">:</label>\r\n  </div>\r\n\r\n  <div class=\"input-wrapper\">\r\n    <div\r\n      class=\"container-textfield\"\r\n      [ngClass]=\"{\r\n        disabled: disabled,\r\n        focused: calendarOpen || focused,\r\n        alert: !calendarOpen && error && !disabled,\r\n        selected: selectedDate\r\n      }\"\r\n      (click)=\"toggleCalendar()\"\r\n    >\r\n      <div class=\"input\">\r\n        <input #inputField\r\n          [placeholder]=\"placeholder\"\r\n          [value]=\"selectedDate ? (selectedDate | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\r\n          [disabled]=\"disabled\"\r\n        />\r\n        <div class=\"cnt-icon-right\">\r\n          <ius-icon-md iconName=\"icon-calendar-today\"></ius-icon-md>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (calendarOpen) {\r\n    <div #calendarOverlay class=\"calendar-overlay\">\r\n      <div class=\"mes\">\r\n        <div class=\"calendar-header\">\r\n          <ius-button-standard-tertiary\r\n            iconName=\"icon-keyboard-arrow-left\"\r\n            (buttonClicked)=\"prev()\"\r\n          ></ius-button-standard-tertiary>\r\n\r\n          <span (click)=\"calendarView = nextView(calendarView)\">\r\n            @switch (calendarView) { @case ('day') {\r\n            {{ getMonthName(viewDate.getMonth()) }} {{ viewDate.getFullYear() }}\r\n            } @case ('month') {\r\n            {{ viewDate.getFullYear() }}\r\n            } @case ('year') {\r\n            {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}\r\n            } }\r\n          </span>\r\n\r\n          <ius-button-standard-tertiary\r\n            iconName=\"icon-keyboard-arrow-right\"\r\n            (buttonClicked)=\"next()\"\r\n          ></ius-button-standard-tertiary>\r\n        </div>\r\n\r\n        <div class=\"calendar-body\">\r\n          @switch (calendarView) { @case ('day') {\r\n          <div class=\"grid days\">\r\n            @for (day of dayLabels; track day) {\r\n            <div class=\"header\">{{ day }}</div>\r\n            } @for (date of calendarDays; track date) {\r\n            <div\r\n              class=\"cell\"\r\n              [class.selected]=\"selectedDate && isSameDate(date, selectedDate)\"\r\n              [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n              (click)=\"selectDate(date)\"\r\n            >\r\n              {{ date.getDate() }}\r\n            </div>\r\n            }\r\n          </div>\r\n          } @case ('month') {\r\n          <div class=\"grid months\">\r\n            @for (m of months; track m; let i = $index) {\r\n            <div class=\"cell\" (click)=\"setMonth(i)\">{{ m }}</div>\r\n            }\r\n          </div>\r\n          } @case ('year') {\r\n          <div class=\"grid years\">\r\n            @for (i of yearsArray; track i) {\r\n            <div\r\n              class=\"cell\"\r\n              [class.out-of-range]=\"i === 0 || i === 11\"\r\n              (click)=\"setYear(getDecadeStart() - 1 + i)\"\r\n            >\r\n              {{ getDecadeStart() - 1 + i }}\r\n            </div>\r\n            }\r\n          </div>\r\n          } }\r\n        </div>\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n\r\n      <button class=\"today\" (click)=\"goToToday()\">Fecha actual</button>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (helpText && focused && !error) {\r\n    <div class=\"help-text\">\r\n      {{helpText}}\r\n    </div>\r\n  }\r\n  @if (helpTextError && error) {\r\n    <div class=\"help-text-error\">\r\n      {{helpTextError}}\r\n    </div>\r\n  }\r\n</div>\r\n", 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}.required{width:4px;height:4px;margin-right:4px;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center}.date-picker{height:100%;display:flex;flex-direction:column;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{margin:0 4px;color:#333;font-family:Rubik;font-size:.875rem;font-weight:500;font-style:normal;line-height:20px;letter-spacing:.28px}.date-picker .help-icon{color:#595959}.date-picker .container-textfield{display:flex;align-items:flex-start;gap:4px}.date-picker .container-textfield .input{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.date-picker .container-textfield .input input{flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.date-picker .container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.date-picker .container-textfield:hover .input,.date-picker .container-textfield:hover .input input{background-color:#edf6ff}.date-picker .container-textfield:hover .input .cnt-icon-right{color:#061b7a}.date-picker .container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.date-picker .container-textfield.focused .input input{background-color:#edf6ff;border:none}.date-picker .container-textfield.focused .input .cnt-icon-right{color:#061b7a}.date-picker .container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.date-picker .container-textfield.alert .input input{background:#fff4f0}.date-picker .container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.date-picker .container-textfield.selected .input{background:#f5f5f5}.date-picker .container-textfield.selected .input input{background:#f5f5f5;border:none;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.date-picker .container-textfield.selected .input .cnt-icon-right{color:#595959}.date-picker .container-textfield.disabled{background:#f5f5f5}.date-picker .container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.date-picker .container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.date-picker .calendar-overlay{display:flex;flex-direction:column;align-items:center;align-self:stretch;min-width:300px;padding:0;gap:0;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;position:fixed;right:0;z-index:99999}.date-picker .calendar-overlay .mes{display:flex;flex-direction:column;padding:16px 12px}.date-picker .calendar-overlay .calendar-header{display:flex;align-items:center;align-self:stretch}.date-picker .calendar-overlay .calendar-header span{flex:1;display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.date-picker .calendar-overlay .calendar-body{display:flex;flex-direction:column;gap:8px}.date-picker .calendar-overlay .grid{display:grid;gap:8px}.date-picker .calendar-overlay .grid.days{grid-template-columns:repeat(7,1fr)}.date-picker .calendar-overlay .grid.months,.date-picker .calendar-overlay .grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.date-picker .calendar-overlay .grid .header{display:flex;align-items:center;height:30px;padding:2px 4px;gap:16px;color:#333;font-family:Rubik;font-size:.75rem;font-weight:500;font-style:normal;line-height:16px;letter-spacing:.24px}.date-picker .calendar-overlay .grid .cell{display:flex;width:24px;height:24px;min-width:24px;min-height:24px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1;background:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.date-picker .calendar-overlay .grid .cell:hover{background:#edf6ff}.date-picker .calendar-overlay .grid .cell.out-of-range{color:#bfbfbf}.date-picker .calendar-overlay .grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.date-picker .calendar-overlay .today{margin-top:8px;width:100%;padding:8px;border:none;background:transparent;display:flex;justify-content:center;align-items:center;gap:4px;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.help-text{display:flex;align-items:center;gap:10px;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;align-items:center;gap:10px;color:#931224;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -1797,7 +1820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         IconMdComponent,
                         SimpleDividerComponent,
                         ButtonStandardTertiaryComponent,
-                    ], template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n  <div class=\"text\">\r\n    @if (isRequired) {\r\n    <div class=\"required\"></div>\r\n    }\r\n\r\n    <label class=\"label\">{{ label }}</label>\r\n\r\n    @if (iconHelp) {\r\n    <div class=\"help-icon\">\r\n      <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n    </div>\r\n    }\r\n\r\n    <label class=\"label\">:</label>\r\n  </div>\r\n\r\n  <div class=\"input-wrapper\">\r\n    <div\r\n      class=\"container-textfield\"\r\n      [ngClass]=\"{\r\n        disabled: disabled,\r\n        focused: calendarOpen || focused,\r\n        alert: !calendarOpen && error && !disabled,\r\n        selected: selectedDate\r\n      }\"\r\n      (click)=\"toggleCalendar()\"\r\n    >\r\n      <div class=\"input\">\r\n        <input\r\n          [placeholder]=\"placeholder\"\r\n          [value]=\"selectedDate ? (selectedDate | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\r\n          [disabled]=\"disabled\"\r\n        />\r\n        <div class=\"cnt-icon-right\">\r\n          <ius-icon-md iconName=\"icon-calendar-today\"></ius-icon-md>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (calendarOpen) {\r\n    <div class=\"calendar-overlay\">\r\n      <div class=\"mes\">\r\n        <div class=\"calendar-header\">\r\n          <ius-button-standard-tertiary\r\n            iconName=\"icon-keyboard-arrow-left\"\r\n            (buttonClicked)=\"prev()\"\r\n          ></ius-button-standard-tertiary>\r\n\r\n          <span (click)=\"calendarView = nextView(calendarView)\">\r\n            @switch (calendarView) { @case ('day') {\r\n            {{ getMonthName(viewDate.getMonth()) }} {{ viewDate.getFullYear() }}\r\n            } @case ('month') {\r\n            {{ viewDate.getFullYear() }}\r\n            } @case ('year') {\r\n            {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}\r\n            } }\r\n          </span>\r\n\r\n          <ius-button-standard-tertiary\r\n            iconName=\"icon-keyboard-arrow-right\"\r\n            (buttonClicked)=\"next()\"\r\n          ></ius-button-standard-tertiary>\r\n        </div>\r\n\r\n        <div class=\"calendar-body\">\r\n          @switch (calendarView) { @case ('day') {\r\n          <div class=\"grid days\">\r\n            @for (day of dayLabels; track day) {\r\n            <div class=\"header\">{{ day }}</div>\r\n            } @for (date of calendarDays; track date) {\r\n            <div\r\n              class=\"cell\"\r\n              [class.selected]=\"selectedDate && isSameDate(date, selectedDate)\"\r\n              [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n              (click)=\"selectDate(date)\"\r\n            >\r\n              {{ date.getDate() }}\r\n            </div>\r\n            }\r\n          </div>\r\n          } @case ('month') {\r\n          <div class=\"grid months\">\r\n            @for (m of months; track m; let i = $index) {\r\n            <div class=\"cell\" (click)=\"setMonth(i)\">{{ m }}</div>\r\n            }\r\n          </div>\r\n          } @case ('year') {\r\n          <div class=\"grid years\">\r\n            @for (i of yearsArray; track i) {\r\n            <div\r\n              class=\"cell\"\r\n              [class.out-of-range]=\"i === 0 || i === 11\"\r\n              (click)=\"setYear(getDecadeStart() - 1 + i)\"\r\n            >\r\n              {{ getDecadeStart() - 1 + i }}\r\n            </div>\r\n            }\r\n          </div>\r\n          } }\r\n        </div>\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n\r\n      <button class=\"today\" (click)=\"goToToday()\">Fecha actual</button>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (helpText && focused && !error) {\r\n    <div class=\"help-text\">\r\n      {{helpText}}\r\n    </div>\r\n  }\r\n  @if (helpTextError && error) {\r\n    <div class=\"help-text-error\">\r\n      {{helpTextError}}\r\n    </div>\r\n  }\r\n</div>\r\n", 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}.required{width:4px;height:4px;margin-right:4px;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center}.date-picker{height:100%;display:flex;flex-direction:column;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{margin:0 4px;color:#333;font-family:Rubik;font-size:.875rem;font-weight:500;font-style:normal;line-height:20px;letter-spacing:.28px}.date-picker .help-icon{color:#595959}.date-picker .container-textfield{display:flex;align-items:flex-start;gap:4px}.date-picker .container-textfield .input{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.date-picker .container-textfield .input input{flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.date-picker .container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.date-picker .container-textfield:hover .input,.date-picker .container-textfield:hover .input input{background-color:#edf6ff}.date-picker .container-textfield:hover .input .cnt-icon-right{color:#061b7a}.date-picker .container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.date-picker .container-textfield.focused .input input{background-color:#edf6ff;border:none}.date-picker .container-textfield.focused .input .cnt-icon-right{color:#061b7a}.date-picker .container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.date-picker .container-textfield.alert .input input{background:#fff4f0}.date-picker .container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.date-picker .container-textfield.selected .input{background:#f5f5f5}.date-picker .container-textfield.selected .input input{background:#f5f5f5;border:none;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.date-picker .container-textfield.selected .input .cnt-icon-right{color:#595959}.date-picker .container-textfield.disabled{background:#f5f5f5}.date-picker .container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.date-picker .container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.date-picker .calendar-overlay{display:flex;flex-direction:column;align-items:center;align-self:stretch;min-width:300px;padding:0;gap:0;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.date-picker .calendar-overlay .mes{display:flex;flex-direction:column;padding:16px 12px}.date-picker .calendar-overlay .calendar-header{display:flex;align-items:center;align-self:stretch}.date-picker .calendar-overlay .calendar-header span{flex:1;display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.date-picker .calendar-overlay .calendar-body{display:flex;flex-direction:column;gap:8px}.date-picker .calendar-overlay .grid{display:grid;gap:8px}.date-picker .calendar-overlay .grid.days{grid-template-columns:repeat(7,1fr)}.date-picker .calendar-overlay .grid.months,.date-picker .calendar-overlay .grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.date-picker .calendar-overlay .grid .header{display:flex;align-items:center;height:30px;padding:2px 4px;gap:16px;color:#333;font-family:Rubik;font-size:.75rem;font-weight:500;font-style:normal;line-height:16px;letter-spacing:.24px}.date-picker .calendar-overlay .grid .cell{display:flex;width:24px;height:24px;min-width:24px;min-height:24px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1;background:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.date-picker .calendar-overlay .grid .cell:hover{background:#edf6ff}.date-picker .calendar-overlay .grid .cell.out-of-range{color:#bfbfbf}.date-picker .calendar-overlay .grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.date-picker .calendar-overlay .today{margin-top:8px;width:100%;padding:8px;border:none;background:transparent;display:flex;justify-content:center;align-items:center;gap:4px;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.help-text{display:flex;align-items:center;gap:10px;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;align-items:center;gap:10px;color:#931224;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
+                    ], template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n  <div class=\"text\">\r\n    @if (isRequired) {\r\n    <div class=\"required\"></div>\r\n    }\r\n\r\n    <label class=\"label\">{{ label }}</label>\r\n\r\n    @if (iconHelp) {\r\n    <div class=\"help-icon\">\r\n      <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n    </div>\r\n    }\r\n\r\n    <label class=\"label\">:</label>\r\n  </div>\r\n\r\n  <div class=\"input-wrapper\">\r\n    <div\r\n      class=\"container-textfield\"\r\n      [ngClass]=\"{\r\n        disabled: disabled,\r\n        focused: calendarOpen || focused,\r\n        alert: !calendarOpen && error && !disabled,\r\n        selected: selectedDate\r\n      }\"\r\n      (click)=\"toggleCalendar()\"\r\n    >\r\n      <div class=\"input\">\r\n        <input #inputField\r\n          [placeholder]=\"placeholder\"\r\n          [value]=\"selectedDate ? (selectedDate | date : 'dd/MM/yyyy') : ''\"\r\n          readonly\r\n          [disabled]=\"disabled\"\r\n        />\r\n        <div class=\"cnt-icon-right\">\r\n          <ius-icon-md iconName=\"icon-calendar-today\"></ius-icon-md>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (calendarOpen) {\r\n    <div #calendarOverlay class=\"calendar-overlay\">\r\n      <div class=\"mes\">\r\n        <div class=\"calendar-header\">\r\n          <ius-button-standard-tertiary\r\n            iconName=\"icon-keyboard-arrow-left\"\r\n            (buttonClicked)=\"prev()\"\r\n          ></ius-button-standard-tertiary>\r\n\r\n          <span (click)=\"calendarView = nextView(calendarView)\">\r\n            @switch (calendarView) { @case ('day') {\r\n            {{ getMonthName(viewDate.getMonth()) }} {{ viewDate.getFullYear() }}\r\n            } @case ('month') {\r\n            {{ viewDate.getFullYear() }}\r\n            } @case ('year') {\r\n            {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}\r\n            } }\r\n          </span>\r\n\r\n          <ius-button-standard-tertiary\r\n            iconName=\"icon-keyboard-arrow-right\"\r\n            (buttonClicked)=\"next()\"\r\n          ></ius-button-standard-tertiary>\r\n        </div>\r\n\r\n        <div class=\"calendar-body\">\r\n          @switch (calendarView) { @case ('day') {\r\n          <div class=\"grid days\">\r\n            @for (day of dayLabels; track day) {\r\n            <div class=\"header\">{{ day }}</div>\r\n            } @for (date of calendarDays; track date) {\r\n            <div\r\n              class=\"cell\"\r\n              [class.selected]=\"selectedDate && isSameDate(date, selectedDate)\"\r\n              [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n              (click)=\"selectDate(date)\"\r\n            >\r\n              {{ date.getDate() }}\r\n            </div>\r\n            }\r\n          </div>\r\n          } @case ('month') {\r\n          <div class=\"grid months\">\r\n            @for (m of months; track m; let i = $index) {\r\n            <div class=\"cell\" (click)=\"setMonth(i)\">{{ m }}</div>\r\n            }\r\n          </div>\r\n          } @case ('year') {\r\n          <div class=\"grid years\">\r\n            @for (i of yearsArray; track i) {\r\n            <div\r\n              class=\"cell\"\r\n              [class.out-of-range]=\"i === 0 || i === 11\"\r\n              (click)=\"setYear(getDecadeStart() - 1 + i)\"\r\n            >\r\n              {{ getDecadeStart() - 1 + i }}\r\n            </div>\r\n            }\r\n          </div>\r\n          } }\r\n        </div>\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n\r\n      <button class=\"today\" (click)=\"goToToday()\">Fecha actual</button>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (helpText && focused && !error) {\r\n    <div class=\"help-text\">\r\n      {{helpText}}\r\n    </div>\r\n  }\r\n  @if (helpTextError && error) {\r\n    <div class=\"help-text-error\">\r\n      {{helpTextError}}\r\n    </div>\r\n  }\r\n</div>\r\n", 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}.required{width:4px;height:4px;margin-right:4px;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center}.date-picker{height:100%;display:flex;flex-direction:column;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{margin:0 4px;color:#333;font-family:Rubik;font-size:.875rem;font-weight:500;font-style:normal;line-height:20px;letter-spacing:.28px}.date-picker .help-icon{color:#595959}.date-picker .container-textfield{display:flex;align-items:flex-start;gap:4px}.date-picker .container-textfield .input{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.date-picker .container-textfield .input input{flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.date-picker .container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.date-picker .container-textfield:hover .input,.date-picker .container-textfield:hover .input input{background-color:#edf6ff}.date-picker .container-textfield:hover .input .cnt-icon-right{color:#061b7a}.date-picker .container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.date-picker .container-textfield.focused .input input{background-color:#edf6ff;border:none}.date-picker .container-textfield.focused .input .cnt-icon-right{color:#061b7a}.date-picker .container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.date-picker .container-textfield.alert .input input{background:#fff4f0}.date-picker .container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.date-picker .container-textfield.selected .input{background:#f5f5f5}.date-picker .container-textfield.selected .input input{background:#f5f5f5;border:none;color:#333;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.date-picker .container-textfield.selected .input .cnt-icon-right{color:#595959}.date-picker .container-textfield.disabled{background:#f5f5f5}.date-picker .container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.date-picker .container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.date-picker .calendar-overlay{display:flex;flex-direction:column;align-items:center;align-self:stretch;min-width:300px;padding:0;gap:0;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;position:fixed;right:0;z-index:99999}.date-picker .calendar-overlay .mes{display:flex;flex-direction:column;padding:16px 12px}.date-picker .calendar-overlay .calendar-header{display:flex;align-items:center;align-self:stretch}.date-picker .calendar-overlay .calendar-header span{flex:1;display:flex;justify-content:center;align-items:center;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.date-picker .calendar-overlay .calendar-body{display:flex;flex-direction:column;gap:8px}.date-picker .calendar-overlay .grid{display:grid;gap:8px}.date-picker .calendar-overlay .grid.days{grid-template-columns:repeat(7,1fr)}.date-picker .calendar-overlay .grid.months,.date-picker .calendar-overlay .grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.date-picker .calendar-overlay .grid .header{display:flex;align-items:center;height:30px;padding:2px 4px;gap:16px;color:#333;font-family:Rubik;font-size:.75rem;font-weight:500;font-style:normal;line-height:16px;letter-spacing:.24px}.date-picker .calendar-overlay .grid .cell{display:flex;width:24px;height:24px;min-width:24px;min-height:24px;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1;background:#fff;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;font-style:normal;line-height:20px;letter-spacing:.28px;cursor:pointer}.date-picker .calendar-overlay .grid .cell:hover{background:#edf6ff}.date-picker .calendar-overlay .grid .cell.out-of-range{color:#bfbfbf}.date-picker .calendar-overlay .grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.date-picker .calendar-overlay .today{margin-top:8px;width:100%;padding:8px;border:none;background:transparent;display:flex;justify-content:center;align-items:center;gap:4px;color:#333;cursor:pointer;font-family:Roboto;font-size:1rem;font-weight:500;font-style:normal;line-height:22px}.help-text{display:flex;align-items:center;gap:10px;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;align-items:center;gap:10px;color:#931224;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1816,6 +1839,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], dateSelected: [{
                 type: Output
+            }], calendarOverlay: [{
+                type: ViewChild,
+                args: ['calendarOverlay']
+            }], inputField: [{
+                type: ViewChild,
+                args: ['inputField']
             }], handleOutsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -2352,11 +2381,11 @@ class InputSelectComponent {
         this.isAlertText = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText" }, 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    }\">\n    @if (iconInput) {\n    <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n    }\n    <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n      (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($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      <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\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;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}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}\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"] }] }); }
+    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" }, 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    }\">\r\n    @if (iconInput) {\r\n    <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n    }\r\n    <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n      (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($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      <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\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;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}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}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
-            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    }\">\n    @if (iconInput) {\n    <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n    }\n    <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n      (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($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      <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\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;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}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}\n"] }]
+            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    }\">\r\n    @if (iconInput) {\r\n    <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\r\n    }\r\n    <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\r\n      (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keypress)=\"onKeyPress($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      <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\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;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}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}\n"] }]
         }], propDecorators: { componentId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2862,6 +2891,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+class CustomDropdownComponent {
+    constructor() {
+        this.isFocused = false;
+        this.isAlertText = false;
+        this.showList = false;
+        this.hasClickedInside = false;
+        this.selected = false;
+        this.componentId = '';
+        this.required = false;
+        this.disabled = false;
+        this.showHelpText = false;
+        this.placeholderAddText = 'Digite una nueva';
+        this.iconBtnAdd = 'icon-add';
+        this.textBtnAdd = 'Agregar';
+        this.textInput = '';
+        this.element = '';
+        this.onChangesValueEvent = new EventEmitter();
+        this.onAddText = new EventEmitter();
+        this.onAddElement = new EventEmitter();
+    }
+    onClickOutside(event) {
+        if (!this.hasClickedInside)
+            return;
+        const target = event.target;
+        const container = document.getElementById(this.componentId);
+        if (container && !container.contains(target)) {
+            this.isFocused = false;
+            this.showList = false;
+            this.isAlertText = !this.selected && !this.showList;
+        }
+    }
+    onInput() {
+        if (this.selected)
+            this.selected = false;
+        this.onChangesValueEvent.emit(this.textInput);
+    }
+    onFocus() {
+        this.isFocused = true;
+        this.showList = true;
+        this.hasClickedInside = true;
+    }
+    onBlur() {
+        this.isFocused = false;
+        if (this.required) {
+            this.isAlertText = this.textInput === '';
+        }
+    }
+    onKeyPress(event) {
+        if (event.key === 'Enter')
+            this.addText();
+    }
+    onKeyPressAddElement(event) {
+        if (event.key === 'Enter')
+            this.addElementText();
+    }
+    onClickAddElement() {
+        if (this.element.trim() !== '') {
+            this.onAddElement.emit(this.element);
+            this.element = '';
+        }
+        else {
+            this.isAlertText = true;
+        }
+    }
+    addElementText() {
+        if (this.element.trim() !== '') {
+            this.onAddElement.emit(this.element);
+            this.element = '';
+        }
+    }
+    addText() {
+        if (this.textInput.trim() !== '') {
+            this.onAddText.emit(this.textInput);
+            this.textInput = '';
+        }
+    }
+    onSelectOption() {
+        this.isFocused = false;
+        this.showList = false;
+        this.isAlertText = false;
+        this.selected = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ius-custom-dropdown', standalone: true, imports: [
+                        IconMdComponent,
+                        FormsModule,
+                        CommonModule,
+                        SimpleDividerComponent,
+                        ButtonStandardTertiaryComponent
+                    ], 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"] }]
+        }], propDecorators: { componentId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showHelpText: [{
+                type: Input
+            }], labelSuperior: [{
+                type: Input
+            }], labelInferior: [{
+                type: Input
+            }], labelInput: [{
+                type: Input
+            }], iconInput: [{
+                type: Input
+            }], placeholderAddText: [{
+                type: Input
+            }], iconBtnAdd: [{
+                type: Input
+            }], textBtnAdd: [{
+                type: Input
+            }], textInput: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], onChangesValueEvent: [{
+                type: Output
+            }], onAddText: [{
+                type: Output
+            }], onAddElement: [{
+                type: Output
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 class ChipUserComponent {
     constructor() {
         this.imageUrl = 'https://media.istockphoto.com/id/1389348844/es/foto/foto-de-estudio-de-una-hermosa-joven-sonriendo-mientras-est%C3%A1-de-pie-sobre-un-fondo-gris.jpg?s=612x612&w=0&k=20&c=kUufmNoTnDcRbyeHhU1wRiip-fNjTWP9owjHf75frFQ=';
@@ -2888,5 +3049,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarIconComponent, BadgeComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, CategoriesComponent, ChipUserComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent };
+export { AvatarIconComponent, BadgeComponent, ButtonCircleSecondaryComponent, ButtonCircleTertiaryComponent, ButtonDynamicComponent, ButtonSquaredSecondaryComponent, ButtonSquaredTertiaryComponent, ButtonStandardPrimaryComponent, ButtonStandardSecondaryComponent, ButtonStandardTertiaryComponent, ButtonStandardTertiarySmallComponent, CardDynamicContentComponent, CardListMovimientosComponent, CategoriesComponent, ChipUserComponent, CustomDropdownComponent, DateHourPickerComponent, DatePickerComponent, DoubleDatePickerComponent, DrawerContainerRightComponent, DropdownComponent, DropdownOptionItemComponent, DropdownUserMenuComponent, IconLgComponent, IconMdComponent, IconSmComponent, IconXlComponent, IconXsComponent, IconXxlComponent, InputSelectComponent, InputSelectNumberComponent, InputTextfieldComponent, LinearProgressBarComponent, LoadingCircleComponent, MenuItemComponent, NavRailComponent, OptionComponent, SearchBarComponent, SectionCollapseDrawerChildComponent, SectionCollapseDrawerParentComponent, SimpleDividerComponent, SlideToggleComponent };
 //# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map