@litigiovirtual/ius-design-components 1.0.256 → 1.0.258
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.
|
@@ -363,6 +363,11 @@ const ICONS = {
|
|
|
363
363
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
364
364
|
<path d="M4.94577 22.8457C4.16361 22.8457 3.49644 22.5683 2.94427 22.0135C2.39227 21.4587 2.11627 20.7929 2.11627 20.0162V5.90174C2.11627 5.11957 2.39227 4.4524 2.94427 3.90024C3.49644 3.34824 4.16361 3.07224 4.94577 3.07224H5.18752V2.49724C5.18752 2.12824 5.32011 1.81215 5.58527 1.54899C5.85027 1.28582 6.16736 1.15424 6.53652 1.15424C6.91102 1.15424 7.22844 1.28582 7.48877 1.54899C7.74911 1.81215 7.87927 2.12824 7.87927 2.49724V3.07224H16.1208V2.49724C16.1208 2.12824 16.2519 1.81215 16.5143 1.54899C16.7764 1.28582 17.0939 1.15424 17.4665 1.15424C17.8392 1.15424 18.1567 1.28582 18.419 1.54899C18.6814 1.81215 18.8125 2.12824 18.8125 2.49724V3.07224H19.0543C19.8364 3.07224 20.5036 3.34824 21.0558 3.90024C21.6078 4.4524 21.8838 5.11957 21.8838 5.90174V20.0162C21.8838 20.7929 21.6078 21.4587 21.0558 22.0135C20.5036 22.5683 19.8364 22.8457 19.0543 22.8457H4.94577ZM4.94577 20.0162H19.0543V9.57174H4.94577V20.0162ZM12.003 14.174C11.6787 14.174 11.4014 14.0593 11.1713 13.83C10.9411 13.6007 10.826 13.3244 10.826 13.0012C10.826 12.6782 10.9411 12.4016 11.1713 12.1712C11.4014 11.9411 11.6787 11.826 12.003 11.826C12.3272 11.826 12.6034 11.9407 12.8318 12.17C13.0599 12.3993 13.174 12.6756 13.174 12.9987C13.174 13.3217 13.0599 13.5984 12.8318 13.8287C12.6034 14.0589 12.3272 14.174 12.003 14.174ZM8.00127 14.174C7.67827 14.174 7.40161 14.0593 7.17127 13.83C6.94111 13.6007 6.82602 13.3244 6.82602 13.0012C6.82602 12.6782 6.94069 12.4016 7.17002 12.1712C7.39936 11.9411 7.67561 11.826 7.99877 11.826C8.32177 11.826 8.59844 11.9407 8.82877 12.17C9.05894 12.3993 9.17402 12.6756 9.17402 12.9987C9.17402 13.3217 9.05936 13.5984 8.83002 13.8287C8.60069 14.0589 8.32444 14.174 8.00127 14.174ZM15.997 14.174C15.6784 14.174 15.4035 14.0593 15.1725 13.83C14.9415 13.6007 14.826 13.3244 14.826 13.0012C14.826 12.6782 14.9415 12.4016 15.1725 12.1712C15.4035 11.9411 15.6794 11.826 16 11.826C16.3207 11.826 16.5965 11.9407 16.8275 12.17C17.0585 12.3993 17.174 12.6756 17.174 12.9987C17.174 13.3217 17.0589 13.5984 16.8288 13.8287C16.5986 14.0589 16.3214 14.174 15.997 14.174ZM12.003 18.174C11.6787 18.174 11.4014 18.0585 11.1713 17.8275C10.9411 17.5965 10.826 17.3207 10.826 17C10.826 16.6793 10.9411 16.4035 11.1713 16.1725C11.4014 15.9415 11.6787 15.826 12.003 15.826C12.3272 15.826 12.6034 15.9411 12.8318 16.1712C13.0599 16.4014 13.174 16.6787 13.174 17.003C13.174 17.3217 13.0599 17.5965 12.8318 17.8275C12.6034 18.0585 12.3272 18.174 12.003 18.174ZM8.00127 18.174C7.67827 18.174 7.40161 18.0585 7.17127 17.8275C6.94111 17.5965 6.82602 17.3207 6.82602 17C6.82602 16.6793 6.94069 16.4035 7.17002 16.1725C7.39936 15.9415 7.67561 15.826 7.99877 15.826C8.32177 15.826 8.59844 15.9411 8.82877 16.1712C9.05894 16.4014 9.17402 16.6787 9.17402 17.003C9.17402 17.3217 9.05936 17.5965 8.83002 17.8275C8.60069 18.0585 8.32444 18.174 8.00127 18.174ZM15.997 18.174C15.6784 18.174 15.4035 18.0585 15.1725 17.8275C14.9415 17.5965 14.826 17.3207 14.826 17C14.826 16.6793 14.9415 16.4035 15.1725 16.1725C15.4035 15.9415 15.6794 15.826 16 15.826C16.3207 15.826 16.5965 15.9411 16.8275 16.1712C17.0585 16.4014 17.174 16.6787 17.174 17.003C17.174 17.3217 17.0589 17.5965 16.8288 17.8275C16.5986 18.0585 16.3214 18.174 15.997 18.174Z" fill="currentColor"/>
|
|
365
365
|
</svg>
|
|
366
|
+
`,
|
|
367
|
+
'icon-location-on': `
|
|
368
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
369
|
+
<path d="M13.6055 11.6055C14.0512 11.1598 14.274 10.6247 14.274 10C14.274 9.37533 14.0512 8.84016 13.6055 8.3945C13.1599 7.94883 12.6247 7.726 12 7.726C11.3754 7.726 10.8402 7.94883 10.3945 8.3945C9.94886 8.84016 9.72602 9.37533 9.72602 10C9.72602 10.6247 9.94886 11.1598 10.3945 11.6055C10.8402 12.0512 11.3754 12.274 12 12.274C12.6247 12.274 13.1599 12.0512 13.6055 11.6055ZM12 22.9087C8.98002 20.4134 6.74444 18.1386 5.29327 16.0842C3.84194 14.0299 3.11627 12.0395 3.11627 10.113C3.11627 7.56983 3.98761 5.43041 5.73027 3.69475C7.47277 1.95908 9.56269 1.09125 12 1.09125C14.4374 1.09125 16.5273 1.95908 18.2698 3.69475C20.0124 5.43041 20.8838 7.56983 20.8838 10.113C20.8838 12.0395 20.1581 14.0299 18.7068 16.0842C17.2556 18.1386 15.02 20.4134 12 22.9087Z" fill="currentColor"/>
|
|
370
|
+
</svg>
|
|
366
371
|
`,
|
|
367
372
|
'icon-block': `
|
|
368
373
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
@@ -2583,7 +2588,7 @@ class DateHourPickerComponent {
|
|
|
2583
2588
|
}
|
|
2584
2589
|
}
|
|
2585
2590
|
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 }); }
|
|
2586
|
-
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", errorText: "errorText", disabled: "disabled", iconHelp: "iconHelp", isRequired: "isRequired", mode: "mode" }, outputs: { dateSelected: "dateSelected", onBlurEvent: "onBlurEvent" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, 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-base\">{{ 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-base\">:</label>\r\n </div>\r\n\r\n <div class=\"input-wrapper\">\r\n <!-- Origen del overlay -->\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 || isAlertText) && !disabled,\r\n selected: selectedDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\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 <!-- ======== OVERLAY (CDK) ======== -->\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"calendarOpen\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayPanelClass]=\"'calendar-overlay-panel'\"\r\n >\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 >\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 </ng-template>\r\n <!-- ======== /OVERLAY (CDK) ======== -->\r\n </div>\r\n @if (helpText && focused && !error && !isAlertText) {\r\n <div class=\"help-text\">\r\n {{ helpText }}\r\n </div>\r\n } @if ((errorText || helpTextError) && (error || isAlertText)) {\r\n <div class=\"help-text-error\">\r\n {{ errorText ?? 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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center;margin-bottom:8px;gap:4px}.cdk-overlay-pane.calendar-overlay-panel{z-index:9000;position:absolute!important}.input-wrapper{position:relative;display:inline-block;width:100%}.date-picker{width:100%;position:relative;display:flex;flex-direction:column}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{color:#333}.date-picker .help-icon{color:#595959}.container-textfield{display:flex;position:relative;align-items:flex-start;gap:4px}.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}.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}.container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.container-textfield:hover .input,.container-textfield:hover .input input{background-color:#edf6ff}.container-textfield:hover .input .cnt-icon-right{color:#061b7a}.container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.container-textfield.focused .input input{background-color:#edf6ff;border:none}.container-textfield.focused .input .cnt-icon-right{color:#061b7a}.container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.alert .input input{background:#fff4f0}.container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.container-textfield.selected .input{background:#f5f5f5}.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}.container-textfield.selected .input .help-icon{color:#595959}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.calendar-overlay{display:inline-block;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.calendar-overlay.time-only{min-width:200px;width:auto}.calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.calendar-overlay.time-only .time-selector .column{height:150px}.calendar-overlay.date-only{min-width:280px;width:auto}.calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.calendar-content{display:flex;flex-direction:row;width:auto;max-width:none;max-height:60vh;overflow:hidden}.calendar-side{padding:12px;flex:1;min-width:260px}.calendar-header{display:flex;align-items:center;align-self:stretch}.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}.calendar-body{display:flex;flex-direction:column;gap:8px;margin:0 10px}.grid{display:grid;gap:8px}.grid.days{grid-template-columns:repeat(7,1fr)}.grid.months,.grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.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}.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}.grid .cell:hover{background:#edf6ff}.grid .cell.out-of-range{color:#bfbfbf}.grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.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}.today:hover{background-color:#edf6ff;border-radius:4px}.calendar-overlay .calendar-content{overflow-x:hidden}.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;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;margin-top:4px;color:#931224;font-family:Roboto,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: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: // ✅ CDK Overlay
|
|
2591
|
+
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", errorText: "errorText", disabled: "disabled", iconHelp: "iconHelp", isRequired: "isRequired", mode: "mode" }, outputs: { dateSelected: "dateSelected", onBlurEvent: "onBlurEvent" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, 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-base\">{{ 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-base\">:</label>\r\n </div>\r\n\r\n <div class=\"input-wrapper\">\r\n <!-- Origen del overlay -->\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 || isAlertText) && !disabled,\r\n selected: selectedDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\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 <!-- ======== OVERLAY (CDK) ======== -->\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"calendarOpen\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayPanelClass]=\"'calendar-overlay-panel'\"\r\n >\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 >\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 </ng-template>\r\n <!-- ======== /OVERLAY (CDK) ======== -->\r\n </div>\r\n @if (helpText && focused && !error && !isAlertText) {\r\n <div class=\"help-text\">\r\n {{ helpText }}\r\n </div>\r\n } @if ((errorText || helpTextError) && (error || isAlertText)) {\r\n <div class=\"help-text-error\">\r\n {{ errorText ?? 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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center;margin-bottom:8px;gap:4px}.cdk-overlay-pane.calendar-overlay-panel{z-index:9000;position:absolute!important}.input-wrapper{position:relative;display:inline-block;width:100%}.date-picker{width:100%;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{color:#333}.date-picker .help-icon{color:#595959}.container-textfield{display:flex;position:relative;align-items:flex-start;gap:4px}.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}.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}.container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.container-textfield:hover .input,.container-textfield:hover .input input{background-color:#edf6ff}.container-textfield:hover .input .cnt-icon-right{color:#061b7a}.container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.container-textfield.focused .input input{background-color:#edf6ff;border:none}.container-textfield.focused .input .cnt-icon-right{color:#061b7a}.container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.alert .input input{background:#fff4f0}.container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.container-textfield.selected .input{background:#f5f5f5}.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}.container-textfield.selected .input .help-icon{color:#595959}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.calendar-overlay{display:inline-block;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.calendar-overlay.time-only{min-width:200px;width:auto}.calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.calendar-overlay.time-only .time-selector .column{height:150px}.calendar-overlay.date-only{min-width:280px;width:auto}.calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.calendar-content{display:flex;flex-direction:row;width:auto;max-width:none;max-height:60vh;overflow:hidden}.calendar-side{padding:12px;flex:1;min-width:260px}.calendar-header{display:flex;align-items:center;align-self:stretch}.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}.calendar-body{display:flex;flex-direction:column;gap:8px;margin:0 10px}.grid{display:grid;gap:8px}.grid.days{grid-template-columns:repeat(7,1fr)}.grid.months,.grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.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}.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}.grid .cell:hover{background:#edf6ff}.grid .cell.out-of-range{color:#bfbfbf}.grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.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}.today:hover{background-color:#edf6ff;border-radius:4px}.calendar-overlay .calendar-content{overflow-x:hidden}.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;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;position:absolute;margin-top:4px;color:#931224;font-family:Roboto,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: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: // ✅ CDK Overlay
|
|
2587
2592
|
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"] }] }); }
|
|
2588
2593
|
}
|
|
2589
2594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateHourPickerComponent, decorators: [{
|
|
@@ -2594,7 +2599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2594
2599
|
IconMdComponent,
|
|
2595
2600
|
SimpleDividerComponent,
|
|
2596
2601
|
ButtonStandardTertiaryComponent,
|
|
2597
|
-
], 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-base\">{{ 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-base\">:</label>\r\n </div>\r\n\r\n <div class=\"input-wrapper\">\r\n <!-- Origen del overlay -->\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 || isAlertText) && !disabled,\r\n selected: selectedDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\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 <!-- ======== OVERLAY (CDK) ======== -->\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"calendarOpen\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayPanelClass]=\"'calendar-overlay-panel'\"\r\n >\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 >\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 </ng-template>\r\n <!-- ======== /OVERLAY (CDK) ======== -->\r\n </div>\r\n @if (helpText && focused && !error && !isAlertText) {\r\n <div class=\"help-text\">\r\n {{ helpText }}\r\n </div>\r\n } @if ((errorText || helpTextError) && (error || isAlertText)) {\r\n <div class=\"help-text-error\">\r\n {{ errorText ?? 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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center;margin-bottom:8px;gap:4px}.cdk-overlay-pane.calendar-overlay-panel{z-index:9000;position:absolute!important}.input-wrapper{position:relative;display:inline-block;width:100%}.date-picker{width:100%;position:relative;display:flex;flex-direction:column}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{color:#333}.date-picker .help-icon{color:#595959}.container-textfield{display:flex;position:relative;align-items:flex-start;gap:4px}.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}.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}.container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.container-textfield:hover .input,.container-textfield:hover .input input{background-color:#edf6ff}.container-textfield:hover .input .cnt-icon-right{color:#061b7a}.container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.container-textfield.focused .input input{background-color:#edf6ff;border:none}.container-textfield.focused .input .cnt-icon-right{color:#061b7a}.container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.alert .input input{background:#fff4f0}.container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.container-textfield.selected .input{background:#f5f5f5}.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}.container-textfield.selected .input .help-icon{color:#595959}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.calendar-overlay{display:inline-block;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.calendar-overlay.time-only{min-width:200px;width:auto}.calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.calendar-overlay.time-only .time-selector .column{height:150px}.calendar-overlay.date-only{min-width:280px;width:auto}.calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.calendar-content{display:flex;flex-direction:row;width:auto;max-width:none;max-height:60vh;overflow:hidden}.calendar-side{padding:12px;flex:1;min-width:260px}.calendar-header{display:flex;align-items:center;align-self:stretch}.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}.calendar-body{display:flex;flex-direction:column;gap:8px;margin:0 10px}.grid{display:grid;gap:8px}.grid.days{grid-template-columns:repeat(7,1fr)}.grid.months,.grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.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}.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}.grid .cell:hover{background:#edf6ff}.grid .cell.out-of-range{color:#bfbfbf}.grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.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}.today:hover{background-color:#edf6ff;border-radius:4px}.calendar-overlay .calendar-content{overflow-x:hidden}.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;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;margin-top:4px;color:#931224;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
|
|
2602
|
+
], 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-base\">{{ 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-base\">:</label>\r\n </div>\r\n\r\n <div class=\"input-wrapper\">\r\n <!-- Origen del overlay -->\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 || isAlertText) && !disabled,\r\n selected: selectedDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\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 <!-- ======== OVERLAY (CDK) ======== -->\r\n <ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"calendarOpen\"\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayPush]=\"true\"\r\n [cdkConnectedOverlayFlexibleDimensions]=\"false\"\r\n [cdkConnectedOverlayPanelClass]=\"'calendar-overlay-panel'\"\r\n >\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 >\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 </ng-template>\r\n <!-- ======== /OVERLAY (CDK) ======== -->\r\n </div>\r\n @if (helpText && focused && !error && !isAlertText) {\r\n <div class=\"help-text\">\r\n {{ helpText }}\r\n </div>\r\n } @if ((errorText || helpTextError) && (error || isAlertText)) {\r\n <div class=\"help-text-error\">\r\n {{ errorText ?? 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-base-1,.body-base-1-1{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;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;aspect-ratio:1/1;border-radius:50%;background-color:#ff4e3a}.text{display:flex;align-items:center;margin-bottom:8px;gap:4px}.cdk-overlay-pane.calendar-overlay-panel{z-index:9000;position:absolute!important}.input-wrapper{position:relative;display:inline-block;width:100%}.date-picker{width:100%;position:relative}.date-picker.disabled{opacity:.6;pointer-events:none}.date-picker .label{color:#333}.date-picker .help-icon{color:#595959}.container-textfield{display:flex;position:relative;align-items:flex-start;gap:4px}.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}.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}.container-textfield .cnt-icon-right{display:flex;align-items:center;justify-content:center;color:#333}.container-textfield:hover .input,.container-textfield:hover .input input{background-color:#edf6ff}.container-textfield:hover .input .cnt-icon-right{color:#061b7a}.container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.container-textfield.focused .input input{background-color:#edf6ff;border:none}.container-textfield.focused .input .cnt-icon-right{color:#061b7a}.container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.container-textfield.alert .input input{background:#fff4f0}.container-textfield.alert .input .cnt-icon-right{color:#db2e2a}.container-textfield.selected .input{background:#f5f5f5}.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}.container-textfield.selected .input .help-icon{color:#595959}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.disabled .cnt-icon-right{color:#bfbfbf}.calendar-overlay{display:inline-block;border-radius:8px;border:1px solid #f5f5f5;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a}.calendar-overlay.time-only{min-width:200px;width:auto}.calendar-overlay.time-only .calendar-content{flex-direction:column;align-items:center;padding:12px}.calendar-overlay.time-only .time-selector{border-left:none;border-top:1px solid #f0f0f0;padding:12px;min-width:180px;width:100%}.calendar-overlay.time-only .time-selector .time-columns{justify-content:center;gap:8px}.calendar-overlay.time-only .time-selector .column{height:150px}.calendar-overlay.date-only{min-width:280px;width:auto}.calendar-overlay.date-only .calendar-content{flex-direction:column;align-items:center}.calendar-overlay.date-only .calendar-side{min-width:260px;width:100%}.calendar-content{display:flex;flex-direction:row;width:auto;max-width:none;max-height:60vh;overflow:hidden}.calendar-side{padding:12px;flex:1;min-width:260px}.calendar-header{display:flex;align-items:center;align-self:stretch}.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}.calendar-body{display:flex;flex-direction:column;gap:8px;margin:0 10px}.grid{display:grid;gap:8px}.grid.days{grid-template-columns:repeat(7,1fr)}.grid.months,.grid.years{margin-left:27px;grid-template-columns:repeat(3,1fr)}.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}.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}.grid .cell:hover{background:#edf6ff}.grid .cell.out-of-range{color:#bfbfbf}.grid .cell.selected{border-radius:100px;border:1px solid #184FDB;background:#2167ff;color:#fff}.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}.today:hover{background-color:#edf6ff;border-radius:4px}.calendar-overlay .calendar-content{overflow-x:hidden}.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;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.help-text-error{display:flex;position:absolute;margin-top:4px;color:#931224;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}\n"] }]
|
|
2598
2603
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
2599
2604
|
type: Input
|
|
2600
2605
|
}], placeholder: [{
|