@litigiovirtual/ius-design-components 1.0.43 → 1.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/esm2022/lib/custom-dropdown/custom-dropdown.component.mjs +141 -0
  2. package/esm2022/lib/custom-dropdown/index.mjs +2 -0
  3. package/esm2022/lib/date-picker/date-picker.component.mjs +54 -4
  4. package/esm2022/lib/input-select/input-select.component.mjs +3 -3
  5. package/esm2022/lib/option/option.component.mjs +1 -1
  6. package/esm2022/public-api.mjs +2 -1
  7. package/fesm2022/litigiovirtual-ius-design-components.mjs +188 -6
  8. package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
  9. package/lib/custom-dropdown/custom-dropdown.component.d.ts +37 -0
  10. package/lib/custom-dropdown/index.d.ts +1 -0
  11. package/lib/date-picker/date-picker.component.d.ts +4 -0
  12. package/package.json +1 -1
  13. package/public-api.d.ts +1 -0
package/fesm2022/litigiovirtual-ius-design-components.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Input, Component, EventEmitter, Output, HostListener } from '@angular/core';
2
+ import { Input, Component, EventEmitter, Output, HostListener, ViewChild } from '@angular/core';
3
3
  import * as i1$1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i1 from '@angular/platform-browser';
@@ -1668,6 +1668,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1668
1668
  }] });
1669
1669
 
1670
1670
  class DatePickerComponent {
1671
+ openCalendar() {
1672
+ this.calendarOpen = true;
1673
+ setTimeout(() => this.positionCalendarOverlay(), 0);
1674
+ }
1675
+ positionCalendarOverlay() {
1676
+ if (!this.inputField || !this.calendarOverlay)
1677
+ return;
1678
+ const inputRect = this.inputField.nativeElement.getBoundingClientRect();
1679
+ const overlay = this.calendarOverlay.nativeElement;
1680
+ const overlayHeight = overlay.offsetHeight;
1681
+ const spaceBelow = window.innerHeight - inputRect.bottom;
1682
+ const spaceAbove = inputRect.top;
1683
+ let top = inputRect.bottom;
1684
+ let maxHeight = '';
1685
+ if (spaceBelow >= overlayHeight) {
1686
+ // Mostrar hacia abajo normalmente
1687
+ top = inputRect.bottom;
1688
+ maxHeight = `${Math.max(spaceBelow - 10, 150)}px`; // mínimo 150px
1689
+ }
1690
+ else if (spaceAbove >= overlayHeight) {
1691
+ // Mostrar hacia arriba
1692
+ top = inputRect.top - overlayHeight;
1693
+ maxHeight = `${Math.max(spaceAbove - 10, 150)}px`;
1694
+ }
1695
+ else if (spaceBelow > spaceAbove) {
1696
+ // Mostrar hacia abajo pero con scroll interno
1697
+ top = inputRect.bottom;
1698
+ maxHeight = `${Math.max(spaceBelow - 10, 150)}px`;
1699
+ }
1700
+ else {
1701
+ // Mostrar hacia arriba pero con scroll interno
1702
+ top = 10; // margen superior mínimo
1703
+ maxHeight = `${Math.max(spaceAbove - 10, 150)}px`;
1704
+ }
1705
+ overlay.style.position = 'fixed';
1706
+ overlay.style.right = '0px';
1707
+ overlay.style.top = `${top}px`;
1708
+ overlay.style.zIndex = '99999';
1709
+ overlay.style.maxHeight = maxHeight;
1710
+ overlay.style.overflowY = 'auto';
1711
+ }
1671
1712
  constructor(elRef) {
1672
1713
  this.elRef = elRef;
1673
1714
  this.label = 'Fecha';
@@ -1701,6 +1742,9 @@ class DatePickerComponent {
1701
1742
  }
1702
1743
  this.focused = true;
1703
1744
  this.calendarOpen = !this.calendarOpen;
1745
+ if (this.calendarOpen) {
1746
+ setTimeout(() => this.positionCalendarOverlay(), 0);
1747
+ }
1704
1748
  }
1705
1749
  goToToday() {
1706
1750
  const today = new Date();
@@ -1788,7 +1832,7 @@ class DatePickerComponent {
1788
1832
  }
1789
1833
  }
1790
1834
  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 }); }
1791
- 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"] }] }); }
1835
+ 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"] }] }); }
1792
1836
  }
1793
1837
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
1794
1838
  type: Component,
@@ -1797,7 +1841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1797
1841
  IconMdComponent,
1798
1842
  SimpleDividerComponent,
1799
1843
  ButtonStandardTertiaryComponent,
1800
- ], 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"] }]
1844
+ ], 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"] }]
1801
1845
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
1802
1846
  type: Input
1803
1847
  }], placeholder: [{
@@ -1816,6 +1860,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1816
1860
  type: Input
1817
1861
  }], dateSelected: [{
1818
1862
  type: Output
1863
+ }], calendarOverlay: [{
1864
+ type: ViewChild,
1865
+ args: ['calendarOverlay']
1866
+ }], inputField: [{
1867
+ type: ViewChild,
1868
+ args: ['inputField']
1819
1869
  }], handleOutsideClick: [{
1820
1870
  type: HostListener,
1821
1871
  args: ['document:click', ['$event']]
@@ -2352,11 +2402,11 @@ class InputSelectComponent {
2352
2402
  this.isAlertText = false;
2353
2403
  }
2354
2404
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2355
- 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"] }] }); }
2405
+ 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"] }] }); }
2356
2406
  }
2357
2407
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
2358
2408
  type: Component,
2359
- 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"] }]
2409
+ 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"] }]
2360
2410
  }], propDecorators: { componentId: [{
2361
2411
  type: Input,
2362
2412
  args: [{ required: true }]
@@ -2862,6 +2912,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2862
2912
  type: Output
2863
2913
  }] } });
2864
2914
 
2915
+ class CustomDropdownComponent {
2916
+ constructor() {
2917
+ this.isFocused = false;
2918
+ this.isAlertText = false;
2919
+ this.showList = false;
2920
+ this.hasClickedInside = false;
2921
+ this.selected = false;
2922
+ this.componentId = '';
2923
+ this.required = false;
2924
+ this.disabled = false;
2925
+ this.showHelpText = false;
2926
+ this.placeholderAddText = 'Digite una nueva';
2927
+ this.iconBtnAdd = 'icon-add';
2928
+ this.textBtnAdd = 'Agregar';
2929
+ this.textInput = '';
2930
+ this.element = '';
2931
+ this.onChangesValueEvent = new EventEmitter();
2932
+ this.onAddText = new EventEmitter();
2933
+ this.onAddElement = new EventEmitter();
2934
+ }
2935
+ onClickOutside(event) {
2936
+ if (!this.hasClickedInside)
2937
+ return;
2938
+ const target = event.target;
2939
+ const container = document.getElementById(this.componentId);
2940
+ if (container && !container.contains(target)) {
2941
+ this.isFocused = false;
2942
+ this.showList = false;
2943
+ this.isAlertText = !this.selected && !this.showList;
2944
+ }
2945
+ }
2946
+ onInput() {
2947
+ if (this.selected)
2948
+ this.selected = false;
2949
+ this.onChangesValueEvent.emit(this.textInput);
2950
+ }
2951
+ onFocus() {
2952
+ this.isFocused = true;
2953
+ this.showList = true;
2954
+ this.hasClickedInside = true;
2955
+ }
2956
+ onBlur() {
2957
+ this.isFocused = false;
2958
+ if (this.required) {
2959
+ this.isAlertText = this.textInput === '';
2960
+ }
2961
+ }
2962
+ onKeyPress(event) {
2963
+ if (event.key === 'Enter')
2964
+ this.addText();
2965
+ }
2966
+ onKeyPressAddElement(event) {
2967
+ if (event.key === 'Enter')
2968
+ this.addElementText();
2969
+ }
2970
+ onClickAddElement() {
2971
+ if (this.element.trim() !== '') {
2972
+ this.onAddElement.emit(this.element);
2973
+ this.element = '';
2974
+ }
2975
+ else {
2976
+ this.isAlertText = true;
2977
+ }
2978
+ }
2979
+ addElementText() {
2980
+ if (this.element.trim() !== '') {
2981
+ this.onAddElement.emit(this.element);
2982
+ this.element = '';
2983
+ }
2984
+ }
2985
+ addText() {
2986
+ if (this.textInput.trim() !== '') {
2987
+ this.onAddText.emit(this.textInput);
2988
+ this.textInput = '';
2989
+ }
2990
+ }
2991
+ onSelectOption() {
2992
+ this.isFocused = false;
2993
+ this.showList = false;
2994
+ this.isAlertText = false;
2995
+ this.selected = true;
2996
+ }
2997
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2998
+ 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"] }] }); }
2999
+ }
3000
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomDropdownComponent, decorators: [{
3001
+ type: Component,
3002
+ args: [{ selector: 'ius-custom-dropdown', standalone: true, imports: [
3003
+ IconMdComponent,
3004
+ FormsModule,
3005
+ CommonModule,
3006
+ SimpleDividerComponent,
3007
+ ButtonStandardTertiaryComponent
3008
+ ], 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"] }]
3009
+ }], propDecorators: { componentId: [{
3010
+ type: Input,
3011
+ args: [{ required: true }]
3012
+ }], required: [{
3013
+ type: Input
3014
+ }], disabled: [{
3015
+ type: Input
3016
+ }], showHelpText: [{
3017
+ type: Input
3018
+ }], labelSuperior: [{
3019
+ type: Input
3020
+ }], labelInferior: [{
3021
+ type: Input
3022
+ }], labelInput: [{
3023
+ type: Input
3024
+ }], iconInput: [{
3025
+ type: Input
3026
+ }], placeholderAddText: [{
3027
+ type: Input
3028
+ }], iconBtnAdd: [{
3029
+ type: Input
3030
+ }], textBtnAdd: [{
3031
+ type: Input
3032
+ }], textInput: [{
3033
+ type: Input
3034
+ }], element: [{
3035
+ type: Input
3036
+ }], onChangesValueEvent: [{
3037
+ type: Output
3038
+ }], onAddText: [{
3039
+ type: Output
3040
+ }], onAddElement: [{
3041
+ type: Output
3042
+ }], onClickOutside: [{
3043
+ type: HostListener,
3044
+ args: ['document:click', ['$event']]
3045
+ }] } });
3046
+
2865
3047
  class ChipUserComponent {
2866
3048
  constructor() {
2867
3049
  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 +3070,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2888
3070
  * Generated bundle index. Do not edit.
2889
3071
  */
2890
3072
 
2891
- 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 };
3073
+ 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 };
2892
3074
  //# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map