npm - @litigiovirtual/ius-design-components - Versions diffs - 1.0.45 → 1.0.47 - Mend

@litigiovirtual/ius-design-components 1.0.45 → 1.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

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

@@ -1668,47 +1668,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 class DatePickerComponent {
-    openCalendar() {
-        this.calendarOpen = true;
-        setTimeout(() => this.positionCalendarOverlay(), 0);
-    }
-    positionCalendarOverlay() {
-        if (!this.inputField || !this.calendarOverlay)
-            return;
-        const inputRect = this.inputField.nativeElement.getBoundingClientRect();
-        const overlay = this.calendarOverlay.nativeElement;
-        const overlayHeight = overlay.offsetHeight;
-        const spaceBelow = window.innerHeight - inputRect.bottom;
-        const spaceAbove = inputRect.top;
-        let top = inputRect.bottom;
-        let maxHeight = '';
-        if (spaceBelow >= overlayHeight) {
-            // Mostrar hacia abajo normalmente
-            top = inputRect.bottom;
-            maxHeight = `${Math.max(spaceBelow - 10, 150)}px`; // mínimo 150px
-        }
-        else if (spaceAbove >= overlayHeight) {
-            // Mostrar hacia arriba
-            top = inputRect.top - overlayHeight;
-            maxHeight = `${Math.max(spaceAbove - 10, 150)}px`;
-        }
-        else if (spaceBelow > spaceAbove) {
-            // Mostrar hacia abajo pero con scroll interno
-            top = inputRect.bottom;
-            maxHeight = `${Math.max(spaceBelow - 10, 150)}px`;
-        }
-        else {
-            // Mostrar hacia arriba pero con scroll interno
-            top = 10; // margen superior mínimo
-            maxHeight = `${Math.max(spaceAbove - 10, 150)}px`;
-        }
-        overlay.style.position = 'fixed';
-        overlay.style.right = '0px';
-        overlay.style.top = `${top}px`;
-        overlay.style.zIndex = '99999';
-        overlay.style.maxHeight = maxHeight;
-        overlay.style.overflowY = 'auto';
-    }
     constructor(elRef) {
         this.elRef = elRef;
         this.label = 'Fecha';
@@ -1742,9 +1701,6 @@ class DatePickerComponent {
         }
         this.focused = true;
         this.calendarOpen = !this.calendarOpen;
-        if (this.calendarOpen) {
-            setTimeout(() => this.positionCalendarOverlay(), 0);
-        }
     }
     goToToday() {
         const today = new Date();
@@ -1832,7 +1788,7 @@ class DatePickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DatePickerComponent, isStandalone: true, selector: "ius-date-picker", inputs: { label: "label", placeholder: "placeholder", error: "error", iconHelp: "iconHelp", helpText: "helpText", helpTextError: "helpTextError", disabled: "disabled", isRequired: "isRequired" }, outputs: { dateSelected: "dateSelected" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, 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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -1841,7 +1797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         IconMdComponent,
                         SimpleDividerComponent,
                         ButtonStandardTertiaryComponent,
-                    ], template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n  <div class=\"text\">\r\n    @if (isRequired) {\r\n    <div class=\"required\"></div>\r\n    }\r\n\r\n    <label class=\"label\">{{ label }}</label>\r\n\r\n    @if (iconHelp) {\r\n    <div class=\"help-icon\">\r\n      <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n    </div>\r\n    }\r\n\r\n    <label class=\"label\">:</label>\r\n  </div>\r\n\r\n  <div class=\"input-wrapper\">\r\n    <div\r\n      class=\"container-textfield\"\r\n      [ngClass]=\"{\r\n        disabled: disabled,\r\n        focused: calendarOpen || focused,\r\n        alert: !calendarOpen && error && !disabled,\r\n        selected: selectedDate\r\n      }\"\r\n      (click)=\"toggleCalendar()\"\r\n    >\r\n      <div class=\"input\">\r\n        <input #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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1860,18 +1816,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], dateSelected: [{
                 type: Output
-            }], calendarOverlay: [{
-                type: ViewChild,
-                args: ['calendarOverlay']
-            }], inputField: [{
-                type: ViewChild,
-                args: ['inputField']
             }], handleOutsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
 class DateHourPickerComponent {
+    openCalendar() {
+        this.calendarOpen = true;
+        setTimeout(() => this.positionCalendarOverlay(), 0);
+    }
+    positionCalendarOverlay() {
+        const inputRect = this.inputField.nativeElement.getBoundingClientRect();
+        const overlay = this.calendarOverlay.nativeElement;
+        const overlayHeight = overlay.offsetHeight;
+        const spaceBelow = window.innerHeight - inputRect.bottom;
+        const spaceAbove = inputRect.top;
+        let top = inputRect.bottom;
+        if (spaceBelow < overlayHeight && spaceAbove > overlayHeight) {
+            // Mostrar hacia arriba
+            top = inputRect.top - overlayHeight;
+        }
+        overlay.style.position = 'fixed';
+        overlay.style.right = '0px';
+        overlay.style.top = `${top}px`;
+        overlay.style.zIndex = '99999';
+    }
     constructor(elRef) {
         this.elRef = elRef;
         this.label = 'Fecha y hora';
@@ -1927,6 +1897,9 @@ class DateHourPickerComponent {
         }
         this.focused = true;
         this.calendarOpen = !this.calendarOpen;
+        if (this.calendarOpen) {
+            setTimeout(() => this.positionCalendarOverlay(), 0);
+        }
     }
     goToToday() {
         const now = new Date();
@@ -2100,7 +2073,7 @@ class DateHourPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateHourPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateHourPickerComponent, isStandalone: true, selector: "ius-date-hour-picker", inputs: { label: "label", placeholder: "placeholder", error: "error", helpText: "helpText", helpTextError: "helpTextError", disabled: "disabled", iconHelp: "iconHelp", isRequired: "isRequired", mode: "mode" }, 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 ? getDisplayValue() : ''\"\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\r\n      class=\"calendar-overlay\"\r\n      [class.time-only]=\"mode === 'time-only'\"\r\n      [class.date-only]=\"mode === 'date-only'\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <div class=\"calendar-content\">\r\n        @if (mode !== 'time-only') {\r\n        <div class=\"calendar-side\">\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()) }}\r\n              {{ 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]=\"\r\n                  selectedDate && isSameDate(date, selectedDate)\r\n                \"\r\n                [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n                (click)=\"selectDate(date, true)\"\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        } @if (mode !== 'date-only') {\r\n        <div class=\"time-selector\">\r\n          <button class=\"time-title\">\r\n            <span>\r\n              {{ selectedHour | number : \"2.0\" }}:{{\r\n                selectedMinute === 0 ? \"00\" : (selectedMinute | number : \"2.0\")\r\n              }}\r\n              {{ selectedPeriod }}\r\n            </span>\r\n          </button>\r\n          <ius-simple-divider></ius-simple-divider>\r\n          <div class=\"time-columns\">\r\n            <div class=\"column scrollable\">\r\n              @for (h of hours; track h) {\r\n              <div\r\n                [class.selected]=\"h === selectedHour\"\r\n                (click)=\"\r\n                  selectedHour = h;\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, true)\r\n                \"\r\n              >\r\n                {{ h | number : \"2.0\" }}\r\n              </div>\r\n              }\r\n            </div>\r\n            <div class=\"divider\"></div>\r\n            <div class=\"column scrollable\">\r\n              @for (m of minutes; track m) {\r\n              <div\r\n                [class.selected]=\"m === selectedMinute\"\r\n                (click)=\"\r\n                  selectedMinute = m;\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, true)\r\n                \"\r\n              >\r\n                {{ m | number : \"2.0\" }}\r\n              </div>\r\n              }\r\n            </div>\r\n            <div class=\"divider\"></div>\r\n            <div class=\"column\">\r\n              <div\r\n                [class.selected]=\"'AM' === selectedPeriod\"\r\n                (click)=\"\r\n                  selectedPeriod = 'AM';\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, false)\r\n                \"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                [class.selected]=\"'PM' === selectedPeriod\"\r\n                (click)=\"\r\n                  selectedPeriod = 'PM';\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, false)\r\n                \"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <button class=\"today\" (click)=\"goToToday()\">\r\n        @if (mode === 'date-only') { Fecha actual } @else if (mode ===\r\n        'time-only') { Hora actual } @else { Fecha y hora actual }\r\n      </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  } @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%;position:relative;display:flex;flex-direction:column}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{margin:0 4px;color:#333;font-family:Rubik,sans-serif;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 .help-icon{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-content{display:flex;flex-direction:row;width:auto;max-width:none}.date-picker .calendar-side{padding:12px;flex:1;min-width:260px}.date-picker .calendar-overlay{display:flex;flex-direction:column;align-items:stretch;border-radius:8px;border:1px solid #f5f5f5;background:#fff;min-width:500px;width:100%;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.date-picker .calendar-overlay.time-only{min-width:200px;width:auto}.date-picker .calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.date-picker .calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.date-picker .calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.date-picker .calendar-overlay.time-only .time-selector .column{height:150px}.date-picker .calendar-overlay.date-only{min-width:280px;width:auto}.date-picker .calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.date-picker .calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.date-picker .calendar-overlay .mes{display:flex;flex-direction:column;align-items:flex-start;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;margin:0 10px}.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}.date-picker .calendar-overlay .today:hover{background-color:#edf6ff;border-radius:4px}.time-selector{border-left:1px solid #f0f0f0;padding:12px 8px;display:flex;flex-direction:column;gap:8px;min-width:150px}.time-selector .time-columns{display:flex;gap:4px;justify-content:center}.time-selector .time-title{display:flex;padding:8px;justify-content:center;align-items:center;gap:4px;align-self:stretch;border-radius:4px;border:none;background-color:#fff}.time-selector .time-title span{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-style:normal;font-weight:500;line-height:22px}.time-selector .divider{background-color:#b6b4b430;height:100%;width:1px}.time-selector .column{overflow-y:auto;display:flex;height:218px;flex-direction:column;align-items:flex-start;margin:0 2px}.time-selector .column .list{display:flex;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;align-self:stretch}.time-selector .column::-webkit-scrollbar{width:4px}.time-selector .column::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4px}.time-selector .column div{display:flex;height:28px;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;flex-shrink:0;align-self:stretch;background:#fff;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.time-selector .column div:hover{cursor:pointer}.time-selector .column div.selected{display:flex;padding:4px 8px;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch;border-radius:8px;background:#2167ff;color:#fff}.time-selector .today{margin-top:8px;padding:8px;text-align:center;font-weight:500;color:#333}.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.DecimalPipe, name: "number" }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateHourPickerComponent, isStandalone: true, selector: "ius-date-hour-picker", inputs: { label: "label", placeholder: "placeholder", error: "error", helpText: "helpText", helpTextError: "helpTextError", disabled: "disabled", iconHelp: "iconHelp", isRequired: "isRequired", mode: "mode" }, 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 #inputField class=\"input\">\r\n        <input\r\n          [placeholder]=\"placeholder\"\r\n          [value]=\"selectedDate ? getDisplayValue() : ''\"\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\r\n      #calendarOverlay\r\n      class=\"calendar-overlay\"\r\n      [class.time-only]=\"mode === 'time-only'\"\r\n      [class.date-only]=\"mode === 'date-only'\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <div class=\"calendar-content\">\r\n        @if (mode !== 'time-only') {\r\n        <div class=\"calendar-side\">\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()) }}\r\n              {{ 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]=\"\r\n                  selectedDate && isSameDate(date, selectedDate)\r\n                \"\r\n                [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n                (click)=\"selectDate(date, true)\"\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        } @if (mode !== 'date-only') {\r\n        <div class=\"time-selector\">\r\n          <button class=\"time-title\">\r\n            <span>\r\n              {{ selectedHour | number : \"2.0\" }}:{{\r\n                selectedMinute === 0 ? \"00\" : (selectedMinute | number : \"2.0\")\r\n              }}\r\n              {{ selectedPeriod }}\r\n            </span>\r\n          </button>\r\n          <ius-simple-divider></ius-simple-divider>\r\n          <div class=\"time-columns\">\r\n            <div class=\"column scrollable\">\r\n              @for (h of hours; track h) {\r\n              <div\r\n                [class.selected]=\"h === selectedHour\"\r\n                (click)=\"\r\n                  selectedHour = h;\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, true)\r\n                \"\r\n              >\r\n                {{ h | number : \"2.0\" }}\r\n              </div>\r\n              }\r\n            </div>\r\n            <div class=\"divider\"></div>\r\n            <div class=\"column scrollable\">\r\n              @for (m of minutes; track m) {\r\n              <div\r\n                [class.selected]=\"m === selectedMinute\"\r\n                (click)=\"\r\n                  selectedMinute = m;\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, true)\r\n                \"\r\n              >\r\n                {{ m | number : \"2.0\" }}\r\n              </div>\r\n              }\r\n            </div>\r\n            <div class=\"divider\"></div>\r\n            <div class=\"column\">\r\n              <div\r\n                [class.selected]=\"'AM' === selectedPeriod\"\r\n                (click)=\"\r\n                  selectedPeriod = 'AM';\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, false)\r\n                \"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                [class.selected]=\"'PM' === selectedPeriod\"\r\n                (click)=\"\r\n                  selectedPeriod = 'PM';\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, false)\r\n                \"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <button class=\"today\" (click)=\"goToToday()\">\r\n        @if (mode === 'date-only') { Fecha actual } @else if (mode ===\r\n        'time-only') { Hora actual } @else { Fecha y hora actual }\r\n      </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  } @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%;position:relative;display:flex;flex-direction:column}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{margin:0 4px;color:#333;font-family:Rubik,sans-serif;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 .help-icon{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-content{display:flex;flex-direction:row;width:auto;max-width:none}.date-picker .calendar-side{padding:12px;flex:1;min-width:260px}.date-picker .calendar-overlay{display:flex;flex-direction:column;align-items:stretch;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.time-only{min-width:200px;width:auto}.date-picker .calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.date-picker .calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.date-picker .calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.date-picker .calendar-overlay.time-only .time-selector .column{height:150px}.date-picker .calendar-overlay.date-only{min-width:280px;width:auto}.date-picker .calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.date-picker .calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.date-picker .calendar-overlay .mes{display:flex;flex-direction:column;align-items:flex-start;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;margin:0 10px}.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}.date-picker .calendar-overlay .today:hover{background-color:#edf6ff;border-radius:4px}.time-selector{border-left:1px solid #f0f0f0;padding:12px 8px;display:flex;flex-direction:column;gap:8px;min-width:150px}.time-selector .time-columns{display:flex;gap:4px;justify-content:center}.time-selector .time-title{display:flex;padding:8px;justify-content:center;align-items:center;gap:4px;align-self:stretch;border-radius:4px;border:none;background-color:#fff}.time-selector .time-title span{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-style:normal;font-weight:500;line-height:22px}.time-selector .divider{background-color:#b6b4b430;height:100%;width:1px}.time-selector .column{overflow-y:auto;display:flex;height:218px;flex-direction:column;align-items:flex-start;margin:0 2px}.time-selector .column .list{display:flex;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;align-self:stretch}.time-selector .column::-webkit-scrollbar{width:4px}.time-selector .column::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4px}.time-selector .column div{display:flex;height:28px;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;flex-shrink:0;align-self:stretch;background:#fff;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.time-selector .column div:hover{cursor:pointer}.time-selector .column div.selected{display:flex;padding:4px 8px;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch;border-radius:8px;background:#2167ff;color:#fff}.time-selector .today{margin-top:8px;padding:8px;text-align:center;font-weight:500;color:#333}.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.DecimalPipe, name: "number" }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "component", type: SimpleDividerComponent, selector: "ius-simple-divider" }, { kind: "component", type: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateHourPickerComponent, decorators: [{
             type: Component,
@@ -2109,7 +2082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         IconMdComponent,
                         SimpleDividerComponent,
                         ButtonStandardTertiaryComponent,
-                    ], template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n  <div class=\"text\">\r\n    @if (isRequired) {\r\n    <div class=\"required\"></div>\r\n    }\r\n\r\n    <label class=\"label\">{{ label }}</label>\r\n\r\n    @if (iconHelp) {\r\n    <div class=\"help-icon\">\r\n      <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n    </div>\r\n    }\r\n\r\n    <label class=\"label\">:</label>\r\n  </div>\r\n\r\n  <div class=\"input-wrapper\">\r\n    <div\r\n      class=\"container-textfield\"\r\n      [ngClass]=\"{\r\n        disabled: disabled,\r\n        focused: calendarOpen || focused,\r\n        alert: !calendarOpen && error && !disabled,\r\n        selected: selectedDate\r\n      }\"\r\n      (click)=\"toggleCalendar()\"\r\n    >\r\n      <div class=\"input\">\r\n        <input\r\n          [placeholder]=\"placeholder\"\r\n          [value]=\"selectedDate ? getDisplayValue() : ''\"\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\r\n      class=\"calendar-overlay\"\r\n      [class.time-only]=\"mode === 'time-only'\"\r\n      [class.date-only]=\"mode === 'date-only'\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <div class=\"calendar-content\">\r\n        @if (mode !== 'time-only') {\r\n        <div class=\"calendar-side\">\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()) }}\r\n              {{ 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]=\"\r\n                  selectedDate && isSameDate(date, selectedDate)\r\n                \"\r\n                [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n                (click)=\"selectDate(date, true)\"\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        } @if (mode !== 'date-only') {\r\n        <div class=\"time-selector\">\r\n          <button class=\"time-title\">\r\n            <span>\r\n              {{ selectedHour | number : \"2.0\" }}:{{\r\n                selectedMinute === 0 ? \"00\" : (selectedMinute | number : \"2.0\")\r\n              }}\r\n              {{ selectedPeriod }}\r\n            </span>\r\n          </button>\r\n          <ius-simple-divider></ius-simple-divider>\r\n          <div class=\"time-columns\">\r\n            <div class=\"column scrollable\">\r\n              @for (h of hours; track h) {\r\n              <div\r\n                [class.selected]=\"h === selectedHour\"\r\n                (click)=\"\r\n                  selectedHour = h;\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, true)\r\n                \"\r\n              >\r\n                {{ h | number : \"2.0\" }}\r\n              </div>\r\n              }\r\n            </div>\r\n            <div class=\"divider\"></div>\r\n            <div class=\"column scrollable\">\r\n              @for (m of minutes; track m) {\r\n              <div\r\n                [class.selected]=\"m === selectedMinute\"\r\n                (click)=\"\r\n                  selectedMinute = m;\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, true)\r\n                \"\r\n              >\r\n                {{ m | number : \"2.0\" }}\r\n              </div>\r\n              }\r\n            </div>\r\n            <div class=\"divider\"></div>\r\n            <div class=\"column\">\r\n              <div\r\n                [class.selected]=\"'AM' === selectedPeriod\"\r\n                (click)=\"\r\n                  selectedPeriod = 'AM';\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, false)\r\n                \"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                [class.selected]=\"'PM' === selectedPeriod\"\r\n                (click)=\"\r\n                  selectedPeriod = 'PM';\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, false)\r\n                \"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <button class=\"today\" (click)=\"goToToday()\">\r\n        @if (mode === 'date-only') { Fecha actual } @else if (mode ===\r\n        'time-only') { Hora actual } @else { Fecha y hora actual }\r\n      </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  } @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%;position:relative;display:flex;flex-direction:column}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{margin:0 4px;color:#333;font-family:Rubik,sans-serif;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 .help-icon{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-content{display:flex;flex-direction:row;width:auto;max-width:none}.date-picker .calendar-side{padding:12px;flex:1;min-width:260px}.date-picker .calendar-overlay{display:flex;flex-direction:column;align-items:stretch;border-radius:8px;border:1px solid #f5f5f5;background:#fff;min-width:500px;width:100%;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.date-picker .calendar-overlay.time-only{min-width:200px;width:auto}.date-picker .calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.date-picker .calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.date-picker .calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.date-picker .calendar-overlay.time-only .time-selector .column{height:150px}.date-picker .calendar-overlay.date-only{min-width:280px;width:auto}.date-picker .calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.date-picker .calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.date-picker .calendar-overlay .mes{display:flex;flex-direction:column;align-items:flex-start;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;margin:0 10px}.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}.date-picker .calendar-overlay .today:hover{background-color:#edf6ff;border-radius:4px}.time-selector{border-left:1px solid #f0f0f0;padding:12px 8px;display:flex;flex-direction:column;gap:8px;min-width:150px}.time-selector .time-columns{display:flex;gap:4px;justify-content:center}.time-selector .time-title{display:flex;padding:8px;justify-content:center;align-items:center;gap:4px;align-self:stretch;border-radius:4px;border:none;background-color:#fff}.time-selector .time-title span{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-style:normal;font-weight:500;line-height:22px}.time-selector .divider{background-color:#b6b4b430;height:100%;width:1px}.time-selector .column{overflow-y:auto;display:flex;height:218px;flex-direction:column;align-items:flex-start;margin:0 2px}.time-selector .column .list{display:flex;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;align-self:stretch}.time-selector .column::-webkit-scrollbar{width:4px}.time-selector .column::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4px}.time-selector .column div{display:flex;height:28px;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;flex-shrink:0;align-self:stretch;background:#fff;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.time-selector .column div:hover{cursor:pointer}.time-selector .column div.selected{display:flex;padding:4px 8px;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch;border-radius:8px;background:#2167ff;color:#fff}.time-selector .today{margin-top:8px;padding:8px;text-align:center;font-weight:500;color:#333}.help-text{display:flex;align-items:center;gap:10px;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;align-items:center;gap:10px;color:#931224;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
+                    ], template: "<div class=\"date-picker\" [class.disabled]=\"disabled\">\r\n  <div class=\"text\">\r\n    @if (isRequired) {\r\n    <div class=\"required\"></div>\r\n    }\r\n\r\n    <label class=\"label\">{{ label }}</label>\r\n\r\n    @if (iconHelp) {\r\n    <div class=\"help-icon\">\r\n      <ius-icon-md iconName=\"icon-help\"></ius-icon-md>\r\n    </div>\r\n    }\r\n\r\n    <label class=\"label\">:</label>\r\n  </div>\r\n\r\n  <div class=\"input-wrapper\">\r\n    <div\r\n      class=\"container-textfield\"\r\n      [ngClass]=\"{\r\n        disabled: disabled,\r\n        focused: calendarOpen || focused,\r\n        alert: !calendarOpen && error && !disabled,\r\n        selected: selectedDate\r\n      }\"\r\n      (click)=\"toggleCalendar()\"\r\n    >\r\n      <div #inputField class=\"input\">\r\n        <input\r\n          [placeholder]=\"placeholder\"\r\n          [value]=\"selectedDate ? getDisplayValue() : ''\"\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\r\n      #calendarOverlay\r\n      class=\"calendar-overlay\"\r\n      [class.time-only]=\"mode === 'time-only'\"\r\n      [class.date-only]=\"mode === 'date-only'\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <div class=\"calendar-content\">\r\n        @if (mode !== 'time-only') {\r\n        <div class=\"calendar-side\">\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()) }}\r\n              {{ 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]=\"\r\n                  selectedDate && isSameDate(date, selectedDate)\r\n                \"\r\n                [class.out-of-range]=\"date.getMonth() !== viewDate.getMonth()\"\r\n                (click)=\"selectDate(date, true)\"\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        } @if (mode !== 'date-only') {\r\n        <div class=\"time-selector\">\r\n          <button class=\"time-title\">\r\n            <span>\r\n              {{ selectedHour | number : \"2.0\" }}:{{\r\n                selectedMinute === 0 ? \"00\" : (selectedMinute | number : \"2.0\")\r\n              }}\r\n              {{ selectedPeriod }}\r\n            </span>\r\n          </button>\r\n          <ius-simple-divider></ius-simple-divider>\r\n          <div class=\"time-columns\">\r\n            <div class=\"column scrollable\">\r\n              @for (h of hours; track h) {\r\n              <div\r\n                [class.selected]=\"h === selectedHour\"\r\n                (click)=\"\r\n                  selectedHour = h;\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, true)\r\n                \"\r\n              >\r\n                {{ h | number : \"2.0\" }}\r\n              </div>\r\n              }\r\n            </div>\r\n            <div class=\"divider\"></div>\r\n            <div class=\"column scrollable\">\r\n              @for (m of minutes; track m) {\r\n              <div\r\n                [class.selected]=\"m === selectedMinute\"\r\n                (click)=\"\r\n                  selectedMinute = m;\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, true)\r\n                \"\r\n              >\r\n                {{ m | number : \"2.0\" }}\r\n              </div>\r\n              }\r\n            </div>\r\n            <div class=\"divider\"></div>\r\n            <div class=\"column\">\r\n              <div\r\n                [class.selected]=\"'AM' === selectedPeriod\"\r\n                (click)=\"\r\n                  selectedPeriod = 'AM';\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, false)\r\n                \"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                [class.selected]=\"'PM' === selectedPeriod\"\r\n                (click)=\"\r\n                  selectedPeriod = 'PM';\r\n                  mode === 'time-only'\r\n                    ? selectTime()\r\n                    : selectDate(viewDate, false)\r\n                \"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <ius-simple-divider></ius-simple-divider>\r\n      <button class=\"today\" (click)=\"goToToday()\">\r\n        @if (mode === 'date-only') { Fecha actual } @else if (mode ===\r\n        'time-only') { Hora actual } @else { Fecha y hora actual }\r\n      </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  } @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%;position:relative;display:flex;flex-direction:column}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{margin:0 4px;color:#333;font-family:Rubik,sans-serif;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 .help-icon{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-content{display:flex;flex-direction:row;width:auto;max-width:none}.date-picker .calendar-side{padding:12px;flex:1;min-width:260px}.date-picker .calendar-overlay{display:flex;flex-direction:column;align-items:stretch;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.time-only{min-width:200px;width:auto}.date-picker .calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.date-picker .calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.date-picker .calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.date-picker .calendar-overlay.time-only .time-selector .column{height:150px}.date-picker .calendar-overlay.date-only{min-width:280px;width:auto}.date-picker .calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.date-picker .calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.date-picker .calendar-overlay .mes{display:flex;flex-direction:column;align-items:flex-start;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;margin:0 10px}.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}.date-picker .calendar-overlay .today:hover{background-color:#edf6ff;border-radius:4px}.time-selector{border-left:1px solid #f0f0f0;padding:12px 8px;display:flex;flex-direction:column;gap:8px;min-width:150px}.time-selector .time-columns{display:flex;gap:4px;justify-content:center}.time-selector .time-title{display:flex;padding:8px;justify-content:center;align-items:center;gap:4px;align-self:stretch;border-radius:4px;border:none;background-color:#fff}.time-selector .time-title span{color:#333;font-family:Roboto,sans-serif;font-size:1rem;font-style:normal;font-weight:500;line-height:22px}.time-selector .divider{background-color:#b6b4b430;height:100%;width:1px}.time-selector .column{overflow-y:auto;display:flex;height:218px;flex-direction:column;align-items:flex-start;margin:0 2px}.time-selector .column .list{display:flex;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;align-self:stretch}.time-selector .column::-webkit-scrollbar{width:4px}.time-selector .column::-webkit-scrollbar-thumb{background-color:#fff;border-radius:4px}.time-selector .column div{display:flex;height:28px;padding:4px 8px;justify-content:flex-end;align-items:flex-start;gap:8px;flex-shrink:0;align-self:stretch;background:#fff;color:#595959;font-family:Rubik,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.28px}.time-selector .column div:hover{cursor:pointer}.time-selector .column div.selected{display:flex;padding:4px 8px;justify-content:flex-end;align-items:center;gap:8px;align-self:stretch;border-radius:8px;background:#2167ff;color:#fff}.time-selector .today{margin-top:8px;padding:8px;text-align:center;font-weight:500;color:#333}.help-text{display:flex;align-items:center;gap:10px;color:#595959;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;align-items:center;gap:10px;color:#931224;font-family:Rubik,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -2130,6 +2103,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], dateSelected: [{
                 type: Output
+            }], calendarOverlay: [{
+                type: ViewChild,
+                args: ['calendarOverlay']
+            }], inputField: [{
+                type: ViewChild,
+                args: ['inputField']
             }], handleOutsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]