@litigiovirtual/ius-design-components 1.0.28 → 1.0.30
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.
- package/esm2022/lib/button-standard-tertiary/button-standard-tertiary.component.mjs +3 -3
- package/esm2022/lib/date-hour-picker/date-hour-picker.component.mjs +3 -3
- package/esm2022/lib/double-date-picker/double-date-picker.component.mjs +3 -3
- package/esm2022/lib/drawer-container-right/drawer-container-right.component.mjs +3 -3
- package/esm2022/lib/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/lib/input-select/input-select.component.mjs +3 -3
- package/esm2022/lib/menu-item/menu-item.component.mjs +4 -5
- package/esm2022/lib/option/option.component.mjs +1 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +15 -16
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/lib/menu-item/menu-item.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1003,11 +1003,11 @@ class ButtonStandardTertiaryComponent {
|
|
|
1003
1003
|
}
|
|
1004
1004
|
}
|
|
1005
1005
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonStandardTertiaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1006
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonStandardTertiaryComponent, isStandalone: true, selector: "ius-button-standard-tertiary", inputs: { disabled: "disabled", iconName: "iconName" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n</button>\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}.icon-color{color:#333}.ius-btn{
|
|
1006
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonStandardTertiaryComponent, isStandalone: true, selector: "ius-button-standard-tertiary", inputs: { disabled: "disabled", iconName: "iconName" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n</button>\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}.icon-color{color:#333}.ius-btn{display:inline-flex;padding:8px 24px;justify-content:center;align-items:center;gap:4px;border-radius:14px;background-color:#fff;color:#333;border:none;cursor:pointer;letter-spacing:.28px;font-family:Rubik,sans-serif;font-size:.875rem;line-height:20px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#02457f;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn:disabled{color:#bfbfbf;background-color:#fff;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
1007
1007
|
}
|
|
1008
1008
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonStandardTertiaryComponent, decorators: [{
|
|
1009
1009
|
type: Component,
|
|
1010
|
-
args: [{ selector: 'ius-button-standard-tertiary', standalone: true, imports: [IconMdComponent], template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n</button>\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}.icon-color{color:#333}.ius-btn{
|
|
1010
|
+
args: [{ selector: 'ius-button-standard-tertiary', standalone: true, imports: [IconMdComponent], template: "<button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n</button>\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}.icon-color{color:#333}.ius-btn{display:inline-flex;padding:8px 24px;justify-content:center;align-items:center;gap:4px;border-radius:14px;background-color:#fff;color:#333;border:none;cursor:pointer;letter-spacing:.28px;font-family:Rubik,sans-serif;font-size:.875rem;line-height:20px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#02457f;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn:disabled{color:#bfbfbf;background-color:#fff;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}\n"] }]
|
|
1011
1011
|
}], propDecorators: { disabled: [{
|
|
1012
1012
|
type: Input
|
|
1013
1013
|
}], iconName: [{
|
|
@@ -1379,7 +1379,6 @@ class MenuItemComponent {
|
|
|
1379
1379
|
constructor() {
|
|
1380
1380
|
this.isActive = false;
|
|
1381
1381
|
this.iconName = '';
|
|
1382
|
-
this.hasAlerts = false;
|
|
1383
1382
|
this.buttonClicked = new EventEmitter();
|
|
1384
1383
|
}
|
|
1385
1384
|
onClick() {
|
|
@@ -1388,16 +1387,16 @@ class MenuItemComponent {
|
|
|
1388
1387
|
}
|
|
1389
1388
|
}
|
|
1390
1389
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { isActive: "isActive", iconName: "iconName",
|
|
1390
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { isActive: "isActive", iconName: "iconName", numberAlerts: "numberAlerts" }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <div class=\"content\">\r\n <ng-content></ng-content>\r\n </div>\r\n @if (numberAlerts) {\r\n <ius-badge class=\"badge\" [number]=\"numberAlerts\"></ius-badge>\r\n }\r\n</button>", 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}.icon-color{color:#9c3}.badge{margin-left:auto}.ius-btn{display:inline-flex;width:240px;padding:4px 16px;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;text-align:left;flex:1 0 0;min-width:0}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ius-badge", inputs: ["number"] }] }); }
|
|
1392
1391
|
}
|
|
1393
1392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
1394
1393
|
type: Component,
|
|
1395
|
-
args: [{ selector: 'ius-menu-item', standalone: true, imports: [IconMdComponent, CommonModule, BadgeComponent], template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <div class=\"content\">\r\n <ng-content></ng-content>\r\n </div>\r\n @if (
|
|
1394
|
+
args: [{ selector: 'ius-menu-item', standalone: true, imports: [IconMdComponent, CommonModule, BadgeComponent], template: "<button (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{'isActive': isActive}\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <div class=\"content\">\r\n <ng-content></ng-content>\r\n </div>\r\n @if (numberAlerts) {\r\n <ius-badge class=\"badge\" [number]=\"numberAlerts\"></ius-badge>\r\n }\r\n</button>", 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}.icon-color{color:#9c3}.badge{margin-left:auto}.ius-btn{display:inline-flex;width:240px;padding:4px 16px;align-items:center;justify-content:space-between;gap:12px;border-radius:8px;background-color:#fafafa;color:#333;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1rem;line-height:22px}.ius-btn:hover:not(:disabled){background-color:#eaeaea}.ius-btn:active:not(:disabled){background-color:#9c3;color:#fff}.ius-btn:active:not(:disabled) .icon-color{color:#fff}.ius-btn.isActive{background-color:#eaeaea}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;text-align:left;flex:1 0 0;min-width:0}\n"] }]
|
|
1396
1395
|
}], propDecorators: { isActive: [{
|
|
1397
1396
|
type: Input
|
|
1398
1397
|
}], iconName: [{
|
|
1399
1398
|
type: Input
|
|
1400
|
-
}],
|
|
1399
|
+
}], numberAlerts: [{
|
|
1401
1400
|
type: Input
|
|
1402
1401
|
}], buttonClicked: [{
|
|
1403
1402
|
type: Output
|
|
@@ -1597,11 +1596,11 @@ class DoubleDatePickerComponent {
|
|
|
1597
1596
|
}
|
|
1598
1597
|
}
|
|
1599
1598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DoubleDatePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DoubleDatePickerComponent, isStandalone: true, selector: "ius-double-date-picker", inputs: { label: "label", placeholder: "placeholder", placeholder2: "placeholder2", error: "error", iconHelp: "iconHelp", helpText: "helpText", helpTextError: "helpTextError", disabled: "disabled", isRequired: "isRequired" }, outputs: { dateRangeSelected: "dateRangeSelected" }, 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: startDate && endDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n >\r\n <div class=\"input\">\r\n <div class=\"fechas\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"startDate ? (startDate | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n </div>\r\n <div style=\"color: #595959;\">\r\n <ius-icon-md [iconName]=\"'icon-east'\" ></ius-icon-md>\r\n </div>\r\n <div class=\"fechas\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"endDate ? (endDate | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n </div>\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 iconName=\"icon-keyboard-arrow-left\" (buttonClicked)=\"prevLeft()\"></ius-button-standard-tertiary>\r\n \r\n <span (click)=\"nextView('left')\">\r\n @switch (calendarViewLeft) {\r\n @case ('day') { {{ getMonthName(viewDateLeft.getMonth()) }} {{ viewDateLeft.getFullYear() }} }\r\n @case ('month') { {{ viewDateLeft.getFullYear() }} }\r\n @case ('year') { {{ getDecadeStart(viewDateLeft) }}\u2013{{ getDecadeStart(viewDateLeft) + 9 }} }\r\n }\r\n </span>\r\n \r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-right\" (buttonClicked)=\"nextLeft()\"></ius-button-standard-tertiary>\r\n </div>\r\n \r\n <div class=\"calendar-body\">\r\n @switch (calendarViewLeft) {\r\n @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) { <div class=\"header\">{{ day }}</div> }\r\n @for (date of calendarDaysLeft; track date) {\r\n <div class=\"cell\"\r\n [class.selected]=\"isSameDate(date, startDate)\"\r\n [class.range]=\"isInRangeForView(date, viewDateLeft)\"\r\n [class.out-of-range]=\"isDateOutOfRange(date, viewDateLeft)\"\r\n (click)=\"selectDateFrom('left', date)\">\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n }\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('left', i, $event)\">{{ m }}</div>\r\n }\r\n </div>\r\n }\r\n @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear('left', getDecadeStart(viewDateLeft) - 1 + i, $event)\">\r\n {{ getDecadeStart(viewDateLeft) - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"mes\">\r\n <div class=\"calendar-header\">\r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-left\" (buttonClicked)=\"prevRight()\"></ius-button-standard-tertiary>\r\n \r\n <span (click)=\"nextView('right')\">\r\n @switch (calendarViewRight) {\r\n @case ('day') { {{ getMonthName(viewDateRight.getMonth()) }} {{ viewDateRight.getFullYear() }} }\r\n @case ('month') { {{ viewDateRight.getFullYear() }} }\r\n @case ('year') { {{ getDecadeStart(viewDateRight) }}\u2013{{ getDecadeStart(viewDateRight) + 9 }} }\r\n }\r\n </span>\r\n \r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-right\" (buttonClicked)=\"nextRight()\"></ius-button-standard-tertiary>\r\n </div>\r\n \r\n <div class=\"calendar-body\">\r\n @switch (calendarViewRight) {\r\n @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) { <div class=\"header\">{{ day }}</div> }\r\n @for (date of calendarDaysRight; track date) {\r\n <div class=\"cell\"\r\n [class.selected]=\"isSameDate(date, endDate)\"\r\n [class.range]=\"isInRangeForView(date, viewDateRight)\"\r\n [class.out-of-range]=\"isDateOutOfRange(date, viewDateRight)\"\r\n [class.disabled]=\"isDisabledDate(date, 'right')\"\r\n (click)=\"!isDisabledDate(date, 'right') && selectDateFrom('right', date)\">\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n }\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('right', i, $event)\">{{ m }}</div>\r\n }\r\n </div>\r\n }\r\n @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear('right', getDecadeStart(viewDateRight) - 1 + i, $event)\">\r\n {{ getDecadeStart(viewDateRight) - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\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>", 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{width:100%;align-items:flex-start;gap:4px}.date-picker .container-textfield .input{display:flex;justify-content:space-between;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.date-picker .container-textfield .input .fechas{width:30%}.date-picker .container-textfield .input .fechas input{max-width:100%;flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik;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;margin-left:3%;color:#333}.date-picker .container-textfield:hover .input,.date-picker .container-textfield:hover .input .fechas input{background-color:#edf6ff}.date-picker .container-textfield:hover .input .cnt-icon-right{color:#103ab7}.date-picker .container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.date-picker .container-textfield.focused .input .fechas input{background-color:#edf6ff;border:none}.date-picker .container-textfield.focused .input .cnt-icon-right{color:#103ab7}.date-picker .container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.date-picker .container-textfield.alert .input .fechas 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 .fechas 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{position:absolute;right:0;z-index:1;display:flex;align-items:center;align-self:stretch;min-width:540px;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 .calendars{display:flex}.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}.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;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:2px 4px;border-radius:10px;background:#fff;font-family:Rubik;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;pointer-events:none}.date-picker .calendar-overlay .grid .cell.disabled{pointer-events:none;color:#bfbfbf;background:#fafafa;opacity:.6}.date-picker .calendar-overlay .grid .cell.range{padding:0;border-radius:0;margin:0;background-color:#edf6ff;color:#333}.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}.cell.empty{pointer-events:none;background:transparent;border:none}.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: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
|
|
1599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DoubleDatePickerComponent, isStandalone: true, selector: "ius-double-date-picker", inputs: { label: "label", placeholder: "placeholder", placeholder2: "placeholder2", error: "error", iconHelp: "iconHelp", helpText: "helpText", helpTextError: "helpTextError", disabled: "disabled", isRequired: "isRequired" }, outputs: { dateRangeSelected: "dateRangeSelected" }, 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: startDate && endDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n >\r\n <div class=\"input\">\r\n <div class=\"fechas\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"startDate ? (startDate | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n </div>\r\n <div style=\"color: #595959;\">\r\n <ius-icon-md [iconName]=\"'icon-east'\" ></ius-icon-md>\r\n </div>\r\n <div class=\"fechas\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"endDate ? (endDate | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n </div>\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 iconName=\"icon-keyboard-arrow-left\" (buttonClicked)=\"prevLeft()\"></ius-button-standard-tertiary>\r\n \r\n <span (click)=\"nextView('left')\">\r\n @switch (calendarViewLeft) {\r\n @case ('day') { {{ getMonthName(viewDateLeft.getMonth()) }} {{ viewDateLeft.getFullYear() }} }\r\n @case ('month') { {{ viewDateLeft.getFullYear() }} }\r\n @case ('year') { {{ getDecadeStart(viewDateLeft) }}\u2013{{ getDecadeStart(viewDateLeft) + 9 }} }\r\n }\r\n </span>\r\n \r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-right\" (buttonClicked)=\"nextLeft()\"></ius-button-standard-tertiary>\r\n </div>\r\n \r\n <div class=\"calendar-body\">\r\n @switch (calendarViewLeft) {\r\n @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) { <div class=\"header\">{{ day }}</div> }\r\n @for (date of calendarDaysLeft; track date) {\r\n <div class=\"cell\"\r\n [class.selected]=\"isSameDate(date, startDate)\"\r\n [class.range]=\"isInRangeForView(date, viewDateLeft)\"\r\n [class.out-of-range]=\"isDateOutOfRange(date, viewDateLeft)\"\r\n (click)=\"selectDateFrom('left', date)\">\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n }\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('left', i, $event)\">{{ m }}</div>\r\n }\r\n </div>\r\n }\r\n @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear('left', getDecadeStart(viewDateLeft) - 1 + i, $event)\">\r\n {{ getDecadeStart(viewDateLeft) - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"mes\">\r\n <div class=\"calendar-header\">\r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-left\" (buttonClicked)=\"prevRight()\"></ius-button-standard-tertiary>\r\n \r\n <span (click)=\"nextView('right')\">\r\n @switch (calendarViewRight) {\r\n @case ('day') { {{ getMonthName(viewDateRight.getMonth()) }} {{ viewDateRight.getFullYear() }} }\r\n @case ('month') { {{ viewDateRight.getFullYear() }} }\r\n @case ('year') { {{ getDecadeStart(viewDateRight) }}\u2013{{ getDecadeStart(viewDateRight) + 9 }} }\r\n }\r\n </span>\r\n \r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-right\" (buttonClicked)=\"nextRight()\"></ius-button-standard-tertiary>\r\n </div>\r\n \r\n <div class=\"calendar-body\">\r\n @switch (calendarViewRight) {\r\n @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) { <div class=\"header\">{{ day }}</div> }\r\n @for (date of calendarDaysRight; track date) {\r\n <div class=\"cell\"\r\n [class.selected]=\"isSameDate(date, endDate)\"\r\n [class.range]=\"isInRangeForView(date, viewDateRight)\"\r\n [class.out-of-range]=\"isDateOutOfRange(date, viewDateRight)\"\r\n [class.disabled]=\"isDisabledDate(date, 'right')\"\r\n (click)=\"!isDisabledDate(date, 'right') && selectDateFrom('right', date)\">\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n }\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('right', i, $event)\">{{ m }}</div>\r\n }\r\n </div>\r\n }\r\n @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear('right', getDecadeStart(viewDateRight) - 1 + i, $event)\">\r\n {{ getDecadeStart(viewDateRight) - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\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>", 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{width:100%;align-items:flex-start;gap:4px}.date-picker .container-textfield .input{display:flex;justify-content:space-between;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.date-picker .container-textfield .input .fechas{width:30%}.date-picker .container-textfield .input .fechas input{max-width:100%;flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik;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;margin-left:3%;color:#333}.date-picker .container-textfield:hover .input,.date-picker .container-textfield:hover .input .fechas input{background-color:#edf6ff}.date-picker .container-textfield:hover .input .cnt-icon-right{color:#103ab7}.date-picker .container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.date-picker .container-textfield.focused .input .fechas input{background-color:#edf6ff;border:none}.date-picker .container-textfield.focused .input .cnt-icon-right{color:#103ab7}.date-picker .container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.date-picker .container-textfield.alert .input .fechas 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 .fechas 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;align-items:center;align-self:stretch;min-width:540px;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 .calendars{display:flex}.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}.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;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:2px 4px;border-radius:10px;background:#fff;font-family:Rubik;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;pointer-events:none}.date-picker .calendar-overlay .grid .cell.disabled{pointer-events:none;color:#bfbfbf;background:#fafafa;opacity:.6}.date-picker .calendar-overlay .grid .cell.range{padding:0;border-radius:0;margin:0;background-color:#edf6ff;color:#333}.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}.cell.empty{pointer-events:none;background:transparent;border:none}.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: ButtonStandardTertiaryComponent, selector: "ius-button-standard-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }] }); }
|
|
1601
1600
|
}
|
|
1602
1601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DoubleDatePickerComponent, decorators: [{
|
|
1603
1602
|
type: Component,
|
|
1604
|
-
args: [{ selector: 'ius-double-date-picker', standalone: true, imports: [CommonModule, IconMdComponent, 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: startDate && endDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n >\r\n <div class=\"input\">\r\n <div class=\"fechas\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"startDate ? (startDate | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n </div>\r\n <div style=\"color: #595959;\">\r\n <ius-icon-md [iconName]=\"'icon-east'\" ></ius-icon-md>\r\n </div>\r\n <div class=\"fechas\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"endDate ? (endDate | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n </div>\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 iconName=\"icon-keyboard-arrow-left\" (buttonClicked)=\"prevLeft()\"></ius-button-standard-tertiary>\r\n \r\n <span (click)=\"nextView('left')\">\r\n @switch (calendarViewLeft) {\r\n @case ('day') { {{ getMonthName(viewDateLeft.getMonth()) }} {{ viewDateLeft.getFullYear() }} }\r\n @case ('month') { {{ viewDateLeft.getFullYear() }} }\r\n @case ('year') { {{ getDecadeStart(viewDateLeft) }}\u2013{{ getDecadeStart(viewDateLeft) + 9 }} }\r\n }\r\n </span>\r\n \r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-right\" (buttonClicked)=\"nextLeft()\"></ius-button-standard-tertiary>\r\n </div>\r\n \r\n <div class=\"calendar-body\">\r\n @switch (calendarViewLeft) {\r\n @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) { <div class=\"header\">{{ day }}</div> }\r\n @for (date of calendarDaysLeft; track date) {\r\n <div class=\"cell\"\r\n [class.selected]=\"isSameDate(date, startDate)\"\r\n [class.range]=\"isInRangeForView(date, viewDateLeft)\"\r\n [class.out-of-range]=\"isDateOutOfRange(date, viewDateLeft)\"\r\n (click)=\"selectDateFrom('left', date)\">\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n }\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('left', i, $event)\">{{ m }}</div>\r\n }\r\n </div>\r\n }\r\n @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear('left', getDecadeStart(viewDateLeft) - 1 + i, $event)\">\r\n {{ getDecadeStart(viewDateLeft) - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"mes\">\r\n <div class=\"calendar-header\">\r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-left\" (buttonClicked)=\"prevRight()\"></ius-button-standard-tertiary>\r\n \r\n <span (click)=\"nextView('right')\">\r\n @switch (calendarViewRight) {\r\n @case ('day') { {{ getMonthName(viewDateRight.getMonth()) }} {{ viewDateRight.getFullYear() }} }\r\n @case ('month') { {{ viewDateRight.getFullYear() }} }\r\n @case ('year') { {{ getDecadeStart(viewDateRight) }}\u2013{{ getDecadeStart(viewDateRight) + 9 }} }\r\n }\r\n </span>\r\n \r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-right\" (buttonClicked)=\"nextRight()\"></ius-button-standard-tertiary>\r\n </div>\r\n \r\n <div class=\"calendar-body\">\r\n @switch (calendarViewRight) {\r\n @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) { <div class=\"header\">{{ day }}</div> }\r\n @for (date of calendarDaysRight; track date) {\r\n <div class=\"cell\"\r\n [class.selected]=\"isSameDate(date, endDate)\"\r\n [class.range]=\"isInRangeForView(date, viewDateRight)\"\r\n [class.out-of-range]=\"isDateOutOfRange(date, viewDateRight)\"\r\n [class.disabled]=\"isDisabledDate(date, 'right')\"\r\n (click)=\"!isDisabledDate(date, 'right') && selectDateFrom('right', date)\">\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n }\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('right', i, $event)\">{{ m }}</div>\r\n }\r\n </div>\r\n }\r\n @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear('right', getDecadeStart(viewDateRight) - 1 + i, $event)\">\r\n {{ getDecadeStart(viewDateRight) - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\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>", 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{width:100%;align-items:flex-start;gap:4px}.date-picker .container-textfield .input{display:flex;justify-content:space-between;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.date-picker .container-textfield .input .fechas{width:30%}.date-picker .container-textfield .input .fechas input{max-width:100%;flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik;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;margin-left:3%;color:#333}.date-picker .container-textfield:hover .input,.date-picker .container-textfield:hover .input .fechas input{background-color:#edf6ff}.date-picker .container-textfield:hover .input .cnt-icon-right{color:#103ab7}.date-picker .container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.date-picker .container-textfield.focused .input .fechas input{background-color:#edf6ff;border:none}.date-picker .container-textfield.focused .input .cnt-icon-right{color:#103ab7}.date-picker .container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.date-picker .container-textfield.alert .input .fechas 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 .fechas 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{position:absolute;right:0;z-index:1;display:flex;align-items:center;align-self:stretch;min-width:540px;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 .calendars{display:flex}.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}.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;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:2px 4px;border-radius:10px;background:#fff;font-family:Rubik;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;pointer-events:none}.date-picker .calendar-overlay .grid .cell.disabled{pointer-events:none;color:#bfbfbf;background:#fafafa;opacity:.6}.date-picker .calendar-overlay .grid .cell.range{padding:0;border-radius:0;margin:0;background-color:#edf6ff;color:#333}.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}.cell.empty{pointer-events:none;background:transparent;border:none}.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"] }]
|
|
1603
|
+
args: [{ selector: 'ius-double-date-picker', standalone: true, imports: [CommonModule, IconMdComponent, 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: startDate && endDate\r\n }\"\r\n (click)=\"toggleCalendar()\"\r\n >\r\n <div class=\"input\">\r\n <div class=\"fechas\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"startDate ? (startDate | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n </div>\r\n <div style=\"color: #595959;\">\r\n <ius-icon-md [iconName]=\"'icon-east'\" ></ius-icon-md>\r\n </div>\r\n <div class=\"fechas\">\r\n <input\r\n [placeholder]=\"placeholder\"\r\n [value]=\"endDate ? (endDate | date : 'dd/MM/yyyy') : ''\"\r\n readonly\r\n [disabled]=\"disabled\"\r\n />\r\n </div>\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 iconName=\"icon-keyboard-arrow-left\" (buttonClicked)=\"prevLeft()\"></ius-button-standard-tertiary>\r\n \r\n <span (click)=\"nextView('left')\">\r\n @switch (calendarViewLeft) {\r\n @case ('day') { {{ getMonthName(viewDateLeft.getMonth()) }} {{ viewDateLeft.getFullYear() }} }\r\n @case ('month') { {{ viewDateLeft.getFullYear() }} }\r\n @case ('year') { {{ getDecadeStart(viewDateLeft) }}\u2013{{ getDecadeStart(viewDateLeft) + 9 }} }\r\n }\r\n </span>\r\n \r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-right\" (buttonClicked)=\"nextLeft()\"></ius-button-standard-tertiary>\r\n </div>\r\n \r\n <div class=\"calendar-body\">\r\n @switch (calendarViewLeft) {\r\n @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) { <div class=\"header\">{{ day }}</div> }\r\n @for (date of calendarDaysLeft; track date) {\r\n <div class=\"cell\"\r\n [class.selected]=\"isSameDate(date, startDate)\"\r\n [class.range]=\"isInRangeForView(date, viewDateLeft)\"\r\n [class.out-of-range]=\"isDateOutOfRange(date, viewDateLeft)\"\r\n (click)=\"selectDateFrom('left', date)\">\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n }\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('left', i, $event)\">{{ m }}</div>\r\n }\r\n </div>\r\n }\r\n @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear('left', getDecadeStart(viewDateLeft) - 1 + i, $event)\">\r\n {{ getDecadeStart(viewDateLeft) - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"mes\">\r\n <div class=\"calendar-header\">\r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-left\" (buttonClicked)=\"prevRight()\"></ius-button-standard-tertiary>\r\n \r\n <span (click)=\"nextView('right')\">\r\n @switch (calendarViewRight) {\r\n @case ('day') { {{ getMonthName(viewDateRight.getMonth()) }} {{ viewDateRight.getFullYear() }} }\r\n @case ('month') { {{ viewDateRight.getFullYear() }} }\r\n @case ('year') { {{ getDecadeStart(viewDateRight) }}\u2013{{ getDecadeStart(viewDateRight) + 9 }} }\r\n }\r\n </span>\r\n \r\n <ius-button-standard-tertiary iconName=\"icon-keyboard-arrow-right\" (buttonClicked)=\"nextRight()\"></ius-button-standard-tertiary>\r\n </div>\r\n \r\n <div class=\"calendar-body\">\r\n @switch (calendarViewRight) {\r\n @case ('day') {\r\n <div class=\"grid days\">\r\n @for (day of dayLabels; track day) { <div class=\"header\">{{ day }}</div> }\r\n @for (date of calendarDaysRight; track date) {\r\n <div class=\"cell\"\r\n [class.selected]=\"isSameDate(date, endDate)\"\r\n [class.range]=\"isInRangeForView(date, viewDateRight)\"\r\n [class.out-of-range]=\"isDateOutOfRange(date, viewDateRight)\"\r\n [class.disabled]=\"isDisabledDate(date, 'right')\"\r\n (click)=\"!isDisabledDate(date, 'right') && selectDateFrom('right', date)\">\r\n {{ date.getDate() }}\r\n </div>\r\n }\r\n </div>\r\n }\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('right', i, $event)\">{{ m }}</div>\r\n }\r\n </div>\r\n }\r\n @case ('year') {\r\n <div class=\"grid years\">\r\n @for (i of yearsArray; track i) {\r\n <div class=\"cell\"\r\n [class.out-of-range]=\"i === 0 || i === 11\"\r\n (click)=\"setYear('right', getDecadeStart(viewDateRight) - 1 + i, $event)\">\r\n {{ getDecadeStart(viewDateRight) - 1 + i }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\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>", 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{width:100%;align-items:flex-start;gap:4px}.date-picker .container-textfield .input{display:flex;justify-content:space-between;gap:4px;padding:12px;border-radius:8px;background:#f5f5f5;cursor:pointer;border:none}.date-picker .container-textfield .input .fechas{width:30%}.date-picker .container-textfield .input .fechas input{max-width:100%;flex:1;outline:none;border:none;background:#f5f5f5;color:#8c8c8c;font-family:Rubik;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;margin-left:3%;color:#333}.date-picker .container-textfield:hover .input,.date-picker .container-textfield:hover .input .fechas input{background-color:#edf6ff}.date-picker .container-textfield:hover .input .cnt-icon-right{color:#103ab7}.date-picker .container-textfield.focused .input{border:1px solid #0581BC;background:#edf6ff}.date-picker .container-textfield.focused .input .fechas input{background-color:#edf6ff;border:none}.date-picker .container-textfield.focused .input .cnt-icon-right{color:#103ab7}.date-picker .container-textfield.alert .input{border-radius:8px;border:1px solid #DB2E2A;background:#fff4f0}.date-picker .container-textfield.alert .input .fechas 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 .fechas 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;align-items:center;align-self:stretch;min-width:540px;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 .calendars{display:flex}.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}.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;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:2px 4px;border-radius:10px;background:#fff;font-family:Rubik;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;pointer-events:none}.date-picker .calendar-overlay .grid .cell.disabled{pointer-events:none;color:#bfbfbf;background:#fafafa;opacity:.6}.date-picker .calendar-overlay .grid .cell.range{padding:0;border-radius:0;margin:0;background-color:#edf6ff;color:#333}.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}.cell.empty{pointer-events:none;background:transparent;border:none}.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"] }]
|
|
1605
1604
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
1606
1605
|
type: Input
|
|
1607
1606
|
}], placeholder: [{
|
|
@@ -1924,7 +1923,7 @@ class DateHourPickerComponent {
|
|
|
1924
1923
|
}
|
|
1925
1924
|
}
|
|
1926
1925
|
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 }); }
|
|
1927
|
-
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" }, 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]=\"\r\n selectedDate ? (selectedDate | date : 'dd/MM/yyyy hh:mm a') : ''\r\n \"\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\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"calendar-content\">\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 <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 [class.selected]=\"h === selectedHour\" (click)=\"selectedHour = h; selectDate(viewDate,true)\">\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 [class.selected]=\"m === selectedMinute\" (click)=\"selectedMinute = m; selectDate(viewDate, true)\">\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 [class.selected]=\"'AM' === selectedPeriod\" (click)=\"selectedPeriod = 'AM'; selectDate(viewDate, false)\"> AM </div>\r\n <div [class.selected]=\"'PM' === selectedPeriod\" (click)=\"selectedPeriod = 'PM'; selectDate(viewDate, false)\"> PM </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n <button class=\"today\" (click)=\"goToToday()\">Fecha y hora 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%;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{position:absolute;right:0;z-index:1;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 .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}.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: "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"] }] }); }
|
|
1926
|
+
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" }, 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]=\"\r\n selectedDate ? (selectedDate | date : 'dd/MM/yyyy hh:mm a') : ''\r\n \"\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\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"calendar-content\">\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 <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 [class.selected]=\"h === selectedHour\" (click)=\"selectedHour = h; selectDate(viewDate,true)\">\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 [class.selected]=\"m === selectedMinute\" (click)=\"selectedMinute = m; selectDate(viewDate, true)\">\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 [class.selected]=\"'AM' === selectedPeriod\" (click)=\"selectedPeriod = 'AM'; selectDate(viewDate, false)\"> AM </div>\r\n <div [class.selected]=\"'PM' === selectedPeriod\" (click)=\"selectedPeriod = 'PM'; selectDate(viewDate, false)\"> PM </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n <button class=\"today\" (click)=\"goToToday()\">Fecha y hora 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%;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 .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}.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: "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"] }] }); }
|
|
1928
1927
|
}
|
|
1929
1928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateHourPickerComponent, decorators: [{
|
|
1930
1929
|
type: Component,
|
|
@@ -1933,7 +1932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1933
1932
|
IconMdComponent,
|
|
1934
1933
|
SimpleDividerComponent,
|
|
1935
1934
|
ButtonStandardTertiaryComponent,
|
|
1936
|
-
], 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]=\"\r\n selectedDate ? (selectedDate | date : 'dd/MM/yyyy hh:mm a') : ''\r\n \"\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\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"calendar-content\">\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 <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 [class.selected]=\"h === selectedHour\" (click)=\"selectedHour = h; selectDate(viewDate,true)\">\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 [class.selected]=\"m === selectedMinute\" (click)=\"selectedMinute = m; selectDate(viewDate, true)\">\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 [class.selected]=\"'AM' === selectedPeriod\" (click)=\"selectedPeriod = 'AM'; selectDate(viewDate, false)\"> AM </div>\r\n <div [class.selected]=\"'PM' === selectedPeriod\" (click)=\"selectedPeriod = 'PM'; selectDate(viewDate, false)\"> PM </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n <button class=\"today\" (click)=\"goToToday()\">Fecha y hora 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%;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{position:absolute;right:0;z-index:1;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 .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}.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"] }]
|
|
1935
|
+
], 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]=\"\r\n selectedDate ? (selectedDate | date : 'dd/MM/yyyy hh:mm a') : ''\r\n \"\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\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"calendar-content\">\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 <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 [class.selected]=\"h === selectedHour\" (click)=\"selectedHour = h; selectDate(viewDate,true)\">\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 [class.selected]=\"m === selectedMinute\" (click)=\"selectedMinute = m; selectDate(viewDate, true)\">\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 [class.selected]=\"'AM' === selectedPeriod\" (click)=\"selectedPeriod = 'AM'; selectDate(viewDate, false)\"> AM </div>\r\n <div [class.selected]=\"'PM' === selectedPeriod\" (click)=\"selectedPeriod = 'PM'; selectDate(viewDate, false)\"> PM </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ius-simple-divider></ius-simple-divider>\r\n <button class=\"today\" (click)=\"goToToday()\">Fecha y hora 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%;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 .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}.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"] }]
|
|
1937
1936
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
1938
1937
|
type: Input
|
|
1939
1938
|
}], placeholder: [{
|
|
@@ -2224,11 +2223,11 @@ class InputSelectComponent {
|
|
|
2224
2223
|
this.selected = true;
|
|
2225
2224
|
}
|
|
2226
2225
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText", optionClick: "optionClick" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\
|
|
2226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InputSelectComponent, isStandalone: true, selector: "ius-input-select", inputs: { componentId: "componentId", required: "required", disabled: "disabled", showHelpText: "showHelpText", labelSuperior: "labelSuperior", labelInferior: "labelInferior", labelInput: "labelInput", iconInput: "iconInput", textInput: "textInput" }, outputs: { onChangesValueEvent: "onChangesValueEvent", onAddText: "onAddText", optionClick: "optionClick" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" type=\"text\" (keypress)=\"onKeyPress($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2228
2227
|
}
|
|
2229
2228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
2230
2229
|
type: Component,
|
|
2231
|
-
args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\
|
|
2230
|
+
args: [{ selector: 'ius-input-select', standalone: true, imports: [IconMdComponent, FormsModule, CommonModule], template: "<div class=\"container-general\" [id]=\"componentId\">\n @if (labelSuperior) {\n <div class=\"container-label-sup\" [ngClass]=\"{\n 'disabled': disabled\n }\">\n @if(!disabled && required){\n <div class=\"icon-dot\"></div>\n }\n <span class=\"\">{{labelSuperior}}</span>\n @if(!disabled && showHelpText){\n <ius-icon-md iconName=\"icon-help\" class=\"icon-color-help\"></ius-icon-md>\n }\n <span>:</span>\n </div>\n }\n <div class=\"container-textfield\" [ngClass]=\"{\n 'disabled': disabled,\n 'focused': isFocused,\n 'alert': !isFocused && isAlertText && !disabled\n }\">\n @if (iconInput) {\n <ius-icon-md [iconName]=\"iconInput\" class=\"icon-color\"></ius-icon-md>\n }\n <input type=\"text\" [(ngModel)]=\"textInput\" [placeholder]=\"labelInput\" [disabled]=\"disabled\" (input)=\"onInput()\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" type=\"text\" (keypress)=\"onKeyPress($event)\">\n <div class=\"cnt-icon-right\">\n @if(!showList){\n <ius-icon-md iconName=\"icon-keyboard-arrow-down\" class=\"icon-arrows\"></ius-icon-md>\n }@else{\n <ius-icon-md iconName=\"icon-keyboard-arrow-up\" class=\"icon-arrows\"></ius-icon-md>\n }\n </div>\n </div>\n @if (labelInferior && isFocused) {\n <span class=\"label-inf\">{{labelInferior}}</span>\n }\n @if (labelInferior && !isFocused && isAlertText) {\n <span class=\"label-inf\" [ngClass]=\"{\n 'alert': !isFocused && isAlertText && !disabled\n }\">{{labelInferior}}</span>\n }\n @if (showList) {\n <div class=\"container-list scrollable-small\">\n <div (click)=\"onSelectOption()\">\n <ng-content selector=\"ius-option\"></ng-content>\n </div>\n </div>\n }\n</div>", styles: [".h1{font-family:Roboto,sans-serif;font-size:2.375rem;font-weight:500;line-height:46px}.h2{font-family:Roboto,sans-serif;font-size:1.875rem;font-weight:700;line-height:38px}.h3{font-family:Roboto,sans-serif;font-size:1.5rem;font-weight:500;line-height:32px}.h4{font-family:Roboto,sans-serif;font-size:1.25rem;font-weight:700;line-height:26px}.h5{font-family:Roboto,sans-serif;font-size:1.125rem;font-weight:500;line-height:24px;letter-spacing:.18px}.label-large{font-family:Roboto,sans-serif;font-size:1rem;font-weight:500;line-height:22px}.body-large{font-family:Rubik,sans-serif;font-size:1rem;font-weight:400;line-height:22px}.label-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.body-base{font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;font-style:italic;letter-spacing:.28px}.body-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;letter-spacing:.28px}.body-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:400;line-height:16px;font-style:italic;letter-spacing:.28px}.caption-sm{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;letter-spacing:.28px}.caption-sm-italic{font-family:Rubik,sans-serif;font-size:.75rem;font-weight:500;line-height:16px;font-style:italic;letter-spacing:.28px}.container-general{position:relative;height:100%}.container-textfield{display:flex;padding:10px 12px;justify-content:center;align-items:flex-start;gap:4px;border:1px solid #f5f5f5;border-radius:8px;background:#f5f5f5;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.container-textfield:hover:not(.disabled):not(.focused):not(.alert){background:#edf6ff}.container-textfield.focused{border:1px solid #0581BC;background:#edf6ff}.container-textfield.disabled{background:#f5f5f5}.container-textfield.disabled .icon-color,.container-textfield.disabled .icon-arrows{color:#bfbfbf}.container-textfield.disabled input::placeholder{color:#bfbfbf;opacity:1}.container-textfield.alert{border:1px solid #DB2E2A;background:#fff4f0}.icon-color{color:#595959}.icon-arrows{color:#333}input{display:flex;align-items:center;flex:1 0 0;border:none;outline:none;background-color:transparent;font-family:Rubik,sans-serif;font-size:.875rem;font-weight:400;line-height:20px;letter-spacing:.28px}.cnt-icon-right{display:flex;align-items:center;justify-content:center;background:none;padding:0;color:#333}.container-label-sup{display:flex;align-items:center;gap:4px;margin-bottom:8px;color:#333;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500;line-height:20px;letter-spacing:.28px}.container-label-sup.disabled{color:#bfbfbf}.icon-dot{display:flex;align-items:center;width:4px;height:4px;aspect-ratio:1/1;background-color:#db2e2a;border-radius:100px}.icon-color-help{color:#8c8c8c}.label-inf{display:flex;position:absolute;margin-top:4px;color:#595959;font-family:Roboto,sans-serif;font-size:.75rem;font-style:italic;font-weight:500;line-height:16px;letter-spacing:.24px}.label-inf.alert{color:#931224}.container-list{position:absolute;max-height:144px;width:100%;display:flex;flex-direction:column;margin-top:4px;border-radius:8px;background:#fff;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;z-index:1000;overflow-y:auto}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:4px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
2232
2231
|
}], propDecorators: { componentId: [{
|
|
2233
2232
|
type: Input,
|
|
2234
2233
|
args: [{ required: true }]
|
|
@@ -2304,11 +2303,11 @@ class DropdownComponent {
|
|
|
2304
2303
|
this.optionSelected.emit(option);
|
|
2305
2304
|
}
|
|
2306
2305
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { isActive: "isActive", iconName: "iconName", disabled: "disabled", options: "options" }, outputs: { buttonClicked: "buttonClicked", optionSelected: "optionSelected" }, ngImport: i0, template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive || selectedIndex }\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n <ius-icon-sm\r\n class=\"arrow\"\r\n [iconName]=\"\r\n isOpen ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n ></ius-icon-sm>\r\n </button>\r\n \r\n @if (isOpen) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options; track option; let i = $index) {\r\n <div\r\n class=\"dropdown-option\"\r\n [ngClass]=\"{\r\n isDisabled: option.disabled,\r\n isSelected: selectedIndex === i\r\n }\"\r\n (click)=\"onSelectOption(i, option)\"\r\n >\r\n <ius-icon-md iconName=\"icon-docs-2\" class=\"icon-doc-color\"></ius-icon-md>\r\n <span>{{ option.label }}</span>\r\n @if (selectedIndex === i && !option.disabled) {\r\n <ius-icon-sm iconName=\"icon-check-circle\" class=\"selected-check\"></ius-icon-sm>\r\n }\r\n </div>\r\n }\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}.icon-color,.icon-doc-color{color:#5892ff}.arrow{margin-left:auto;padding-bottom:5px}.ius-btn{display:flex;width:232px;height:40px;padding:4px 8px;align-items:center;gap:8px;border-radius:8px;background-color:#f5f5f5;color:#595959;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1.125rem;line-height:24px;letter-spacing:.18px;justify-content:space-between}.ius-btn:hover:not(:disabled){background-color:#f0f0f0}.ius-btn:active:not(:disabled){background-color:#eaeaea}.ius-btn:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}.ius-btn.isActive{border:.5px solid #0A2893;background-color:#f5f5f5}.dropdown-container{position:relative;display:inline-block
|
|
2306
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { isActive: "isActive", iconName: "iconName", disabled: "disabled", options: "options" }, outputs: { buttonClicked: "buttonClicked", optionSelected: "optionSelected" }, ngImport: i0, template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive || selectedIndex }\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n <ius-icon-sm\r\n class=\"arrow\"\r\n [iconName]=\"\r\n isOpen ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n ></ius-icon-sm>\r\n </button>\r\n \r\n @if (isOpen) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options; track option; let i = $index) {\r\n <div\r\n class=\"dropdown-option\"\r\n [ngClass]=\"{\r\n isDisabled: option.disabled,\r\n isSelected: selectedIndex === i\r\n }\"\r\n (click)=\"onSelectOption(i, option)\"\r\n >\r\n <ius-icon-md iconName=\"icon-docs-2\" class=\"icon-doc-color\"></ius-icon-md>\r\n <span>{{ option.label }}</span>\r\n @if (selectedIndex === i && !option.disabled) {\r\n <ius-icon-sm iconName=\"icon-check-circle\" class=\"selected-check\"></ius-icon-sm>\r\n }\r\n </div>\r\n }\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}.icon-color,.icon-doc-color{color:#5892ff}.arrow{margin-left:auto;padding-bottom:5px}.ius-btn{display:flex;width:232px;height:40px;padding:4px 8px;align-items:center;gap:8px;border-radius:8px;background-color:#f5f5f5;color:#595959;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1.125rem;line-height:24px;letter-spacing:.18px;justify-content:space-between}.ius-btn:hover:not(:disabled){background-color:#f0f0f0}.ius-btn:active:not(:disabled){background-color:#eaeaea}.ius-btn:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}.ius-btn.isActive{border:.5px solid #0A2893;background-color:#f5f5f5}.dropdown-container{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;left:0;z-index:10;margin-top:4px;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;background-color:#fff;padding:4px;min-width:100%}.dropdown-option{display:flex;height:38px;padding:8px 20px 8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fafafa;font-family:Rubik,sans-serif;font-size:1rem;line-height:22px;font-weight:400;border:none;cursor:pointer}.dropdown-option:hover:not(:disabled){background-color:#f0f0f0}.dropdown-option:active:not(:disabled){background-color:#c4dfff}.dropdown-option.isDisabled{cursor:not-allowed;color:#bfbfbf}.dropdown-option.isDisabled .icon-doc-color{color:#bfbfbf}.dropdown-option.isSelected .selected-check{margin-left:auto;color:#2167ff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconSmComponent, selector: "ius-icon-sm", inputs: ["iconName", "color"] }, { kind: "component", type: IconMdComponent, selector: "ius-icon-md", inputs: ["iconName", "color"] }] }); }
|
|
2308
2307
|
}
|
|
2309
2308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
2310
2309
|
type: Component,
|
|
2311
|
-
args: [{ selector: 'ius-dropdown', standalone: true, imports: [CommonModule, IconSmComponent, IconMdComponent], template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive || selectedIndex }\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n <ius-icon-sm\r\n class=\"arrow\"\r\n [iconName]=\"\r\n isOpen ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n ></ius-icon-sm>\r\n </button>\r\n \r\n @if (isOpen) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options; track option; let i = $index) {\r\n <div\r\n class=\"dropdown-option\"\r\n [ngClass]=\"{\r\n isDisabled: option.disabled,\r\n isSelected: selectedIndex === i\r\n }\"\r\n (click)=\"onSelectOption(i, option)\"\r\n >\r\n <ius-icon-md iconName=\"icon-docs-2\" class=\"icon-doc-color\"></ius-icon-md>\r\n <span>{{ option.label }}</span>\r\n @if (selectedIndex === i && !option.disabled) {\r\n <ius-icon-sm iconName=\"icon-check-circle\" class=\"selected-check\"></ius-icon-sm>\r\n }\r\n </div>\r\n }\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}.icon-color,.icon-doc-color{color:#5892ff}.arrow{margin-left:auto;padding-bottom:5px}.ius-btn{display:flex;width:232px;height:40px;padding:4px 8px;align-items:center;gap:8px;border-radius:8px;background-color:#f5f5f5;color:#595959;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1.125rem;line-height:24px;letter-spacing:.18px;justify-content:space-between}.ius-btn:hover:not(:disabled){background-color:#f0f0f0}.ius-btn:active:not(:disabled){background-color:#eaeaea}.ius-btn:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}.ius-btn.isActive{border:.5px solid #0A2893;background-color:#f5f5f5}.dropdown-container{position:relative;display:inline-block
|
|
2310
|
+
args: [{ selector: 'ius-dropdown', standalone: true, imports: [CommonModule, IconSmComponent, IconMdComponent], template: "<div class=\"dropdown-container\">\r\n <button [disabled]=\"disabled\" (click)=\"onClick()\" class=\"ius-btn\" [ngClass]=\"{ isActive: isActive || selectedIndex }\">\r\n <ius-icon-md [iconName]=\"iconName\" class=\"icon-color\"></ius-icon-md>\r\n <ng-content></ng-content>\r\n <ius-icon-sm\r\n class=\"arrow\"\r\n [iconName]=\"\r\n isOpen ? 'icon-keyboard-arrow-up' : 'icon-keyboard-arrow-down'\r\n \"\r\n ></ius-icon-sm>\r\n </button>\r\n \r\n @if (isOpen) {\r\n <div class=\"dropdown-menu\">\r\n @for (option of options; track option; let i = $index) {\r\n <div\r\n class=\"dropdown-option\"\r\n [ngClass]=\"{\r\n isDisabled: option.disabled,\r\n isSelected: selectedIndex === i\r\n }\"\r\n (click)=\"onSelectOption(i, option)\"\r\n >\r\n <ius-icon-md iconName=\"icon-docs-2\" class=\"icon-doc-color\"></ius-icon-md>\r\n <span>{{ option.label }}</span>\r\n @if (selectedIndex === i && !option.disabled) {\r\n <ius-icon-sm iconName=\"icon-check-circle\" class=\"selected-check\"></ius-icon-sm>\r\n }\r\n </div>\r\n }\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}.icon-color,.icon-doc-color{color:#5892ff}.arrow{margin-left:auto;padding-bottom:5px}.ius-btn{display:flex;width:232px;height:40px;padding:4px 8px;align-items:center;gap:8px;border-radius:8px;background-color:#f5f5f5;color:#595959;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:1.125rem;line-height:24px;letter-spacing:.18px;justify-content:space-between}.ius-btn:hover:not(:disabled){background-color:#f0f0f0}.ius-btn:active:not(:disabled){background-color:#eaeaea}.ius-btn:disabled{color:#bfbfbf;background-color:#f5f5f5;cursor:not-allowed}.ius-btn:disabled .icon-color{color:#bfbfbf}.ius-btn.isActive{border:.5px solid #0A2893;background-color:#f5f5f5}.dropdown-container{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;left:0;z-index:10;margin-top:4px;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 2px 6px #00000024,0 1px 10px #0000001a;background-color:#fff;padding:4px;min-width:100%}.dropdown-option{display:flex;height:38px;padding:8px 20px 8px 12px;align-items:center;gap:8px;border-radius:8px;background-color:#fafafa;font-family:Rubik,sans-serif;font-size:1rem;line-height:22px;font-weight:400;border:none;cursor:pointer}.dropdown-option:hover:not(:disabled){background-color:#f0f0f0}.dropdown-option:active:not(:disabled){background-color:#c4dfff}.dropdown-option.isDisabled{cursor:not-allowed;color:#bfbfbf}.dropdown-option.isDisabled .icon-doc-color{color:#bfbfbf}.dropdown-option.isSelected .selected-check{margin-left:auto;color:#2167ff}\n"] }]
|
|
2312
2311
|
}], propDecorators: { isActive: [{
|
|
2313
2312
|
type: Input
|
|
2314
2313
|
}], iconName: [{
|
|
@@ -2484,7 +2483,7 @@ class DrawerContainerRightComponent {
|
|
|
2484
2483
|
this.onPressedDoneEvent.emit(null);
|
|
2485
2484
|
}
|
|
2486
2485
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DrawerContainerRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2487
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DrawerContainerRightComponent, isStandalone: true, selector: "ius-drawer-container-right", inputs: { titleDrawer: "titleDrawer", percentProgressBar: "percentProgressBar" }, outputs: { onPressedBackEvent: "onPressedBackEvent", onPressedDoneEvent: "onPressedDoneEvent", onDrawerClosed: "onDrawerClosed" }, ngImport: i0, template: "<div class=\"background-drawer\">\r\n @if (isVisible) {\r\n <div class=\"create-container\" @slideInOut (@slideInOut.done)=\"onAnimDone($event)\">\r\n <div class=\"header-drawer\">\r\n <div class=\"button-header-drawer\">\r\n <ius-button-circle-tertiary\r\n (buttonClicked)=\"close()\"\r\n iconName=\"icon-arrow-left-alt\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n <div class=\"title-header-drawer\">{{ titleDrawer }}</div>\r\n <div class=\"button-header-drawer\">\r\n <ius-button-circle-tertiary\r\n (buttonClicked)=\"done()\"\r\n iconName=\"icon-done-outline\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n </div>\r\n <ius-linear-progress-bar\r\n [porcentaje]=\"percentProgressBar\"\r\n ></ius-linear-progress-bar>\r\n <div\r\n class=\"scrollable-small\"\r\n style=\"height: calc(100% - 69px)\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\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}.background-drawer{position:absolute;top:0;left:0;display:flex;height:100%;width:100%;justify-content:center;background-color:#0003;transition:.2s ease-in-out;align-items:center;z-index:2000}.create-container{height:calc(100vh - 60px);position:absolute;z-index:1000;width:390px;top:60px;right:0;background-color:#fff;border-radius:8px 0 0 8px;box-shadow:0 2px 6px 3px #00000026,0 1px 3px #0000004d}.header-drawer{display:flex;padding:12px 16px}.title-header-drawer{width:100%;font-family:Roboto,sans-serif;font-size:1.25rem;color:#333;line-height:26px;letter-spacing:.2px;padding-top:10px;font-weight:700;display:flex;justify-content:center;overflow:hidden;white-space:normal;text-overflow:ellipsis}.button-header-drawer{margin-left:3px;margin-top:1px}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:8px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["porcentaje"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }], animations: [
|
|
2486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DrawerContainerRightComponent, isStandalone: true, selector: "ius-drawer-container-right", inputs: { titleDrawer: "titleDrawer", percentProgressBar: "percentProgressBar" }, outputs: { onPressedBackEvent: "onPressedBackEvent", onPressedDoneEvent: "onPressedDoneEvent", onDrawerClosed: "onDrawerClosed" }, ngImport: i0, template: "<div class=\"background-drawer\">\r\n @if (isVisible) {\r\n <div class=\"create-container\" @slideInOut (@slideInOut.done)=\"onAnimDone($event)\">\r\n <div class=\"header-drawer\">\r\n <div class=\"button-header-drawer\">\r\n <ius-button-circle-tertiary\r\n (buttonClicked)=\"close()\"\r\n iconName=\"icon-arrow-left-alt\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n <div class=\"title-header-drawer\">{{ titleDrawer }}</div>\r\n <div class=\"button-header-drawer\">\r\n <ius-button-circle-tertiary\r\n (buttonClicked)=\"done()\"\r\n iconName=\"icon-done-outline\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n </div>\r\n <ius-linear-progress-bar\r\n [porcentaje]=\"percentProgressBar\"\r\n ></ius-linear-progress-bar>\r\n <div\r\n class=\"scrollable-small\"\r\n style=\"overflow-y: auto; height: calc(100% - 69px)\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\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}.background-drawer{position:absolute;top:0;left:0;display:flex;height:100%;width:100%;justify-content:center;background-color:#0003;transition:.2s ease-in-out;align-items:center;z-index:2000}.create-container{height:calc(100vh - 60px);position:absolute;z-index:1000;width:390px;top:60px;right:0;background-color:#fff;border-radius:8px 0 0 8px;box-shadow:0 2px 6px 3px #00000026,0 1px 3px #0000004d}.header-drawer{display:flex;padding:12px 16px}.title-header-drawer{width:100%;font-family:Roboto,sans-serif;font-size:1.25rem;color:#333;line-height:26px;letter-spacing:.2px;padding-top:10px;font-weight:700;display:flex;justify-content:center;overflow:hidden;white-space:normal;text-overflow:ellipsis}.button-header-drawer{margin-left:3px;margin-top:1px}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:8px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"], dependencies: [{ kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["porcentaje"] }, { kind: "component", type: ButtonCircleTertiaryComponent, selector: "ius-button-circle-tertiary", inputs: ["disabled", "iconName"], outputs: ["buttonClicked"] }], animations: [
|
|
2488
2487
|
trigger('slideInOut', [
|
|
2489
2488
|
state('void', style({
|
|
2490
2489
|
transform: 'translateX(100%)',
|
|
@@ -2522,7 +2521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2522
2521
|
animate('300ms ease-out')
|
|
2523
2522
|
])
|
|
2524
2523
|
])
|
|
2525
|
-
], template: "<div class=\"background-drawer\">\r\n @if (isVisible) {\r\n <div class=\"create-container\" @slideInOut (@slideInOut.done)=\"onAnimDone($event)\">\r\n <div class=\"header-drawer\">\r\n <div class=\"button-header-drawer\">\r\n <ius-button-circle-tertiary\r\n (buttonClicked)=\"close()\"\r\n iconName=\"icon-arrow-left-alt\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n <div class=\"title-header-drawer\">{{ titleDrawer }}</div>\r\n <div class=\"button-header-drawer\">\r\n <ius-button-circle-tertiary\r\n (buttonClicked)=\"done()\"\r\n iconName=\"icon-done-outline\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n </div>\r\n <ius-linear-progress-bar\r\n [porcentaje]=\"percentProgressBar\"\r\n ></ius-linear-progress-bar>\r\n <div\r\n class=\"scrollable-small\"\r\n style=\"height: calc(100% - 69px)\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\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}.background-drawer{position:absolute;top:0;left:0;display:flex;height:100%;width:100%;justify-content:center;background-color:#0003;transition:.2s ease-in-out;align-items:center;z-index:2000}.create-container{height:calc(100vh - 60px);position:absolute;z-index:1000;width:390px;top:60px;right:0;background-color:#fff;border-radius:8px 0 0 8px;box-shadow:0 2px 6px 3px #00000026,0 1px 3px #0000004d}.header-drawer{display:flex;padding:12px 16px}.title-header-drawer{width:100%;font-family:Roboto,sans-serif;font-size:1.25rem;color:#333;line-height:26px;letter-spacing:.2px;padding-top:10px;font-weight:700;display:flex;justify-content:center;overflow:hidden;white-space:normal;text-overflow:ellipsis}.button-header-drawer{margin-left:3px;margin-top:1px}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:8px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
2524
|
+
], template: "<div class=\"background-drawer\">\r\n @if (isVisible) {\r\n <div class=\"create-container\" @slideInOut (@slideInOut.done)=\"onAnimDone($event)\">\r\n <div class=\"header-drawer\">\r\n <div class=\"button-header-drawer\">\r\n <ius-button-circle-tertiary\r\n (buttonClicked)=\"close()\"\r\n iconName=\"icon-arrow-left-alt\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n <div class=\"title-header-drawer\">{{ titleDrawer }}</div>\r\n <div class=\"button-header-drawer\">\r\n <ius-button-circle-tertiary\r\n (buttonClicked)=\"done()\"\r\n iconName=\"icon-done-outline\"\r\n ></ius-button-circle-tertiary>\r\n </div>\r\n </div>\r\n <ius-linear-progress-bar\r\n [porcentaje]=\"percentProgressBar\"\r\n ></ius-linear-progress-bar>\r\n <div\r\n class=\"scrollable-small\"\r\n style=\"overflow-y: auto; height: calc(100% - 69px)\"\r\n >\r\n <ng-content></ng-content>\r\n </div>\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}.background-drawer{position:absolute;top:0;left:0;display:flex;height:100%;width:100%;justify-content:center;background-color:#0003;transition:.2s ease-in-out;align-items:center;z-index:2000}.create-container{height:calc(100vh - 60px);position:absolute;z-index:1000;width:390px;top:60px;right:0;background-color:#fff;border-radius:8px 0 0 8px;box-shadow:0 2px 6px 3px #00000026,0 1px 3px #0000004d}.header-drawer{display:flex;padding:12px 16px}.title-header-drawer{width:100%;font-family:Roboto,sans-serif;font-size:1.25rem;color:#333;line-height:26px;letter-spacing:.2px;padding-top:10px;font-weight:700;display:flex;justify-content:center;overflow:hidden;white-space:normal;text-overflow:ellipsis}.button-header-drawer{margin-left:3px;margin-top:1px}.scrollable-small::-webkit-scrollbar{-webkit-appearance:none}.scrollable-small::-webkit-scrollbar:vertical{width:8px;height:32px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar:horizontal{height:5px;padding-top:2px;padding-bottom:2px}.scrollable-small::-webkit-scrollbar-thumb{background-color:#08a6db;border-radius:4px}\n"] }]
|
|
2526
2525
|
}], propDecorators: { titleDrawer: [{
|
|
2527
2526
|
type: Input
|
|
2528
2527
|
}], percentProgressBar: [{
|