@tedi-design-system/angular 8.0.0 → 8.0.1-rc.1
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.
|
@@ -13308,7 +13308,7 @@ class TimePickerComponent {
|
|
|
13308
13308
|
hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
|
|
13309
13309
|
minutes = computed(() => Array.from({ length: Math.ceil(60 / this.minuteStep()) }, (_, i) => String(i * this.minuteStep()).padStart(2, "0")), ...(ngDevMode ? [{ debugName: "minutes" }] : []));
|
|
13310
13310
|
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
13311
|
-
gridStyle = computed(() => `grid-template-columns: repeat(${this.columns()}, 1fr)`, ...(ngDevMode ? [{ debugName: "gridStyle" }] : []));
|
|
13311
|
+
gridStyle = computed(() => `display: grid; grid-template-columns: repeat(${this.columns()}, 1fr)`, ...(ngDevMode ? [{ debugName: "gridStyle" }] : []));
|
|
13312
13312
|
// With no value the wheel parks on 12:00 (display only — nothing is emitted).
|
|
13313
13313
|
selectedHourIndex = computed(() => this.selectedHour() ?? 12, ...(ngDevMode ? [{ debugName: "selectedHourIndex" }] : []));
|
|
13314
13314
|
selectedMinuteIndex = computed(() => {
|
|
@@ -13654,7 +13654,7 @@ class TimePickerComponent {
|
|
|
13654
13654
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
13655
13655
|
multi: true,
|
|
13656
13656
|
},
|
|
13657
|
-
], viewQueries: [{ propertyName: "hourColumns", predicate: ["hourColumn"], descendants: true, isSignal: true }, { propertyName: "minuteColumns", predicate: ["minuteColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'scroll') {\n <div class=\"tedi-time-picker__columns\" role=\"group\">\n <div\n #hourColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n [attr.aria-activedescendant]=\"hourActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'hour')\"\n (scroll)=\"onColumnScroll('hour')\"\n >\n @for (hour of hours; track hour; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"hourItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"highlightedHourIndex() === i\"\n [attr.aria-selected]=\"selectedHour() === +hour\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onHourClick(hour)\"\n >\n {{ hour }}\n </button>\n }\n </div>\n <div class=\"tedi-time-picker__separator\"></div>\n <div\n #minuteColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n [attr.aria-activedescendant]=\"minuteActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'minute')\"\n (scroll)=\"onColumnScroll('minute')\"\n >\n @for (minute of minutes(); track minute; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"minuteItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"highlightedMinuteIndex() === i\"\n [attr.aria-selected]=\"selectedMinute() === +minute\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onMinuteClick(minute)\"\n >\n {{ minute }}\n </button>\n }\n </div>\n </div>\n} @else if (variant() === 'dropdown') {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n } @else {\n <div\n class=\"tedi-time-picker__dropdown\"\n role=\"listbox\"\n [attr.aria-label]=\"'time-picker.times' | tediTranslate\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <div\n class=\"tedi-time-picker__dropdown-item\"\n role=\"option\"\n [class.tedi-time-picker__dropdown-item--selected]=\"isSlotSelected(slot)\"\n [attr.aria-selected]=\"isSlotSelected(slot)\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n (click)=\"!isDisabled() && selectSlot(slot)\"\n (keydown)=\"onDropdownKeydown($event)\"\n >\n {{ slot }}\n </div>\n }\n </div>\n }\n} @else if (variant() === 'slots') {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n } @else {\n <tedi-radio-card-group\n class=\"tedi-time-picker__grid\"\n role=\"radiogroup\"\n [style]=\"gridStyle()\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <label\n tedi-radio-card\n variant=\"secondary\"\n class=\"tedi-time-picker__slot\"\n [showIndicator]=\"showSlotIndicator()\"\n [for]=\"slotId(i)\"\n >\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"slotId(i)\"\n [name]=\"radioGroupName\"\n [value]=\"slot\"\n [checked]=\"isSlotSelected(slot)\"\n [disabled]=\"isDisabled()\"\n (change)=\"onRadioChange(slot)\"\n />\n {{ slot }}\n </label>\n }\n </tedi-radio-card-group>\n }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--disabled .tedi-time-picker__column,.tedi-time-picker--disabled .tedi-time-picker__dropdown{overflow:hidden}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{
|
|
13657
|
+
], viewQueries: [{ propertyName: "hourColumns", predicate: ["hourColumn"], descendants: true, isSignal: true }, { propertyName: "minuteColumns", predicate: ["minuteColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'scroll') {\n <div class=\"tedi-time-picker__columns\" role=\"group\">\n <div\n #hourColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n [attr.aria-activedescendant]=\"hourActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'hour')\"\n (scroll)=\"onColumnScroll('hour')\"\n >\n @for (hour of hours; track hour; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"hourItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"highlightedHourIndex() === i\"\n [attr.aria-selected]=\"selectedHour() === +hour\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onHourClick(hour)\"\n >\n {{ hour }}\n </button>\n }\n </div>\n <div class=\"tedi-time-picker__separator\"></div>\n <div\n #minuteColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n [attr.aria-activedescendant]=\"minuteActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'minute')\"\n (scroll)=\"onColumnScroll('minute')\"\n >\n @for (minute of minutes(); track minute; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"minuteItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"highlightedMinuteIndex() === i\"\n [attr.aria-selected]=\"selectedMinute() === +minute\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onMinuteClick(minute)\"\n >\n {{ minute }}\n </button>\n }\n </div>\n </div>\n} @else if (variant() === 'dropdown') {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n } @else {\n <div\n class=\"tedi-time-picker__dropdown\"\n role=\"listbox\"\n [attr.aria-label]=\"'time-picker.times' | tediTranslate\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <div\n class=\"tedi-time-picker__dropdown-item\"\n role=\"option\"\n [class.tedi-time-picker__dropdown-item--selected]=\"isSlotSelected(slot)\"\n [attr.aria-selected]=\"isSlotSelected(slot)\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n (click)=\"!isDisabled() && selectSlot(slot)\"\n (keydown)=\"onDropdownKeydown($event)\"\n >\n {{ slot }}\n </div>\n }\n </div>\n }\n} @else if (variant() === 'slots') {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n } @else {\n <tedi-radio-card-group\n class=\"tedi-time-picker__grid\"\n role=\"radiogroup\"\n [style]=\"gridStyle()\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <label\n tedi-radio-card\n variant=\"secondary\"\n class=\"tedi-time-picker__slot\"\n [showIndicator]=\"showSlotIndicator()\"\n [for]=\"slotId(i)\"\n >\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"slotId(i)\"\n [name]=\"radioGroupName\"\n [value]=\"slot\"\n [checked]=\"isSlotSelected(slot)\"\n [disabled]=\"isDisabled()\"\n (change)=\"onRadioChange(slot)\"\n />\n {{ slot }}\n </label>\n }\n </tedi-radio-card-group>\n }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--disabled .tedi-time-picker__column,.tedi-time-picker--disabled .tedi-time-picker__dropdown{overflow:hidden}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}\n"], dependencies: [{ kind: "component", type: RadioCardComponent, selector: "label[tedi-radio-card]", inputs: ["variant", "grouped", "showIndicator"] }, { kind: "component", type: RadioCardGroupComponent, selector: "tedi-radio-card-group", inputs: ["grouped"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
13658
13658
|
}
|
|
13659
13659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
13660
13660
|
type: Component,
|
|
@@ -13676,7 +13676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
13676
13676
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
13677
13677
|
multi: true,
|
|
13678
13678
|
},
|
|
13679
|
-
], template: "@if (variant() === 'scroll') {\n <div class=\"tedi-time-picker__columns\" role=\"group\">\n <div\n #hourColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n [attr.aria-activedescendant]=\"hourActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'hour')\"\n (scroll)=\"onColumnScroll('hour')\"\n >\n @for (hour of hours; track hour; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"hourItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"highlightedHourIndex() === i\"\n [attr.aria-selected]=\"selectedHour() === +hour\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onHourClick(hour)\"\n >\n {{ hour }}\n </button>\n }\n </div>\n <div class=\"tedi-time-picker__separator\"></div>\n <div\n #minuteColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n [attr.aria-activedescendant]=\"minuteActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'minute')\"\n (scroll)=\"onColumnScroll('minute')\"\n >\n @for (minute of minutes(); track minute; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"minuteItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"highlightedMinuteIndex() === i\"\n [attr.aria-selected]=\"selectedMinute() === +minute\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onMinuteClick(minute)\"\n >\n {{ minute }}\n </button>\n }\n </div>\n </div>\n} @else if (variant() === 'dropdown') {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n } @else {\n <div\n class=\"tedi-time-picker__dropdown\"\n role=\"listbox\"\n [attr.aria-label]=\"'time-picker.times' | tediTranslate\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <div\n class=\"tedi-time-picker__dropdown-item\"\n role=\"option\"\n [class.tedi-time-picker__dropdown-item--selected]=\"isSlotSelected(slot)\"\n [attr.aria-selected]=\"isSlotSelected(slot)\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n (click)=\"!isDisabled() && selectSlot(slot)\"\n (keydown)=\"onDropdownKeydown($event)\"\n >\n {{ slot }}\n </div>\n }\n </div>\n }\n} @else if (variant() === 'slots') {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n } @else {\n <tedi-radio-card-group\n class=\"tedi-time-picker__grid\"\n role=\"radiogroup\"\n [style]=\"gridStyle()\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <label\n tedi-radio-card\n variant=\"secondary\"\n class=\"tedi-time-picker__slot\"\n [showIndicator]=\"showSlotIndicator()\"\n [for]=\"slotId(i)\"\n >\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"slotId(i)\"\n [name]=\"radioGroupName\"\n [value]=\"slot\"\n [checked]=\"isSlotSelected(slot)\"\n [disabled]=\"isDisabled()\"\n (change)=\"onRadioChange(slot)\"\n />\n {{ slot }}\n </label>\n }\n </tedi-radio-card-group>\n }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--disabled .tedi-time-picker__column,.tedi-time-picker--disabled .tedi-time-picker__dropdown{overflow:hidden}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{
|
|
13679
|
+
], template: "@if (variant() === 'scroll') {\n <div class=\"tedi-time-picker__columns\" role=\"group\">\n <div\n #hourColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n [attr.aria-activedescendant]=\"hourActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'hour')\"\n (scroll)=\"onColumnScroll('hour')\"\n >\n @for (hour of hours; track hour; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"hourItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"highlightedHourIndex() === i\"\n [attr.aria-selected]=\"selectedHour() === +hour\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onHourClick(hour)\"\n >\n {{ hour }}\n </button>\n }\n </div>\n <div class=\"tedi-time-picker__separator\"></div>\n <div\n #minuteColumn\n class=\"tedi-time-picker__column\"\n role=\"listbox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n [attr.aria-activedescendant]=\"minuteActiveId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n (keydown)=\"onColumnKeydown($event, 'minute')\"\n (scroll)=\"onColumnScroll('minute')\"\n >\n @for (minute of minutes(); track minute; let i = $index) {\n <button\n type=\"button\"\n class=\"tedi-time-picker__item\"\n role=\"option\"\n [id]=\"minuteItemId(i)\"\n [class.tedi-time-picker__item--selected]=\"highlightedMinuteIndex() === i\"\n [attr.aria-selected]=\"selectedMinute() === +minute\"\n [disabled]=\"isDisabled()\"\n tabindex=\"-1\"\n (click)=\"onMinuteClick(minute)\"\n >\n {{ minute }}\n </button>\n }\n </div>\n </div>\n} @else if (variant() === 'dropdown') {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n } @else {\n <div\n class=\"tedi-time-picker__dropdown\"\n role=\"listbox\"\n [attr.aria-label]=\"'time-picker.times' | tediTranslate\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <div\n class=\"tedi-time-picker__dropdown-item\"\n role=\"option\"\n [class.tedi-time-picker__dropdown-item--selected]=\"isSlotSelected(slot)\"\n [attr.aria-selected]=\"isSlotSelected(slot)\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n (click)=\"!isDisabled() && selectSlot(slot)\"\n (keydown)=\"onDropdownKeydown($event)\"\n >\n {{ slot }}\n </div>\n }\n </div>\n }\n} @else if (variant() === 'slots') {\n @if (timeSlots().length === 0) {\n <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n } @else {\n <tedi-radio-card-group\n class=\"tedi-time-picker__grid\"\n role=\"radiogroup\"\n [style]=\"gridStyle()\"\n >\n @for (slot of timeSlots(); track slot; let i = $index) {\n <label\n tedi-radio-card\n variant=\"secondary\"\n class=\"tedi-time-picker__slot\"\n [showIndicator]=\"showSlotIndicator()\"\n [for]=\"slotId(i)\"\n >\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"slotId(i)\"\n [name]=\"radioGroupName\"\n [value]=\"slot\"\n [checked]=\"isSlotSelected(slot)\"\n [disabled]=\"isDisabled()\"\n (change)=\"onRadioChange(slot)\"\n />\n {{ slot }}\n </label>\n }\n </tedi-radio-card-group>\n }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--disabled .tedi-time-picker__column,.tedi-time-picker--disabled .tedi-time-picker__dropdown{overflow:hidden}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}\n"] }]
|
|
13680
13680
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], hourColumns: [{ type: i0.ViewChildren, args: ["hourColumn", { isSignal: true }] }], minuteColumns: [{ type: i0.ViewChildren, args: ["minuteColumn", { isSignal: true }] }] } });
|
|
13681
13681
|
|
|
13682
13682
|
class TimePickerModalComponent {
|