@tedi-design-system/angular 10.0.0-rc.3 → 10.0.0-rc.4
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.
|
@@ -7308,11 +7308,11 @@ class CalendarDayGridComponent {
|
|
|
7308
7308
|
return new Date(day.getFullYear(), day.getMonth(), day.getDate()).getTime();
|
|
7309
7309
|
}
|
|
7310
7310
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarDayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7311
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarDayGridComponent, isStandalone: true, selector: "tedi-calendar-day-grid", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: true, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daySelect: "daySelect", hoveredDate: "hoveredDateChange" }, ngImport: i0, template: "<table\n class=\"tedi-calendar-day-grid\"\n [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n role=\"grid\"\n [attr.aria-label]=\"gridAriaLabel()\"\n [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n <thead>\n <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n @if (showWeekNumbers()) {\n <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n </th>\n }\n @for (name of weekdayNames(); track $index; let i = $index) {\n <th\n class=\"tedi-calendar-day-grid__weekday\"\n role=\"columnheader\"\n scope=\"col\"\n [attr.aria-label]=\"weekdayFullNames()[i]\"\n >\n {{ name }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of grid(); track rowKey(row, $index)) {\n <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n @if (showWeekNumbers()) {\n <th\n class=\"tedi-calendar-day-grid__week-number\"\n role=\"rowheader\"\n scope=\"row\"\n [attr.aria-label]=\"weekNumberLabel(row)\"\n >\n {{ weekNumber(row) }}\n </th>\n }\n @for (day of row; track cellKey(day, $index)) {\n <td\n class=\"tedi-calendar-day-grid__cell\"\n [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n >\n @if (day) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [class]=\"cellState(day)\"\n [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n [attr.aria-label]=\"ariaLabelForDay(day)\"\n [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n [attr.data-date-key]=\"day.getTime()\"\n (click)=\"handleClick(day)\"\n (mouseenter)=\"handleMouseEnter(day)\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus(day)\"\n (blur)=\"handleBlur($event)\"\n >\n {{ day.getDate() }}\n @let status = statusForDay(day);\n @if (status) {\n <tedi-status-indicator\n class=\"tedi-calendar-day-grid__status\"\n [type]=\"status.type\"\n size=\"sm\"\n [hasBorder]=\"true\"\n />\n }\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatusIndicatorComponent, selector: "tedi-status-indicator", inputs: ["label", "type", "size", "hasBorder", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7311
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarDayGridComponent, isStandalone: true, selector: "tedi-calendar-day-grid", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: true, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daySelect: "daySelect", hoveredDate: "hoveredDateChange" }, ngImport: i0, template: "<table\n class=\"tedi-calendar-day-grid\"\n [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n role=\"grid\"\n [attr.aria-label]=\"gridAriaLabel()\"\n [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n <thead>\n <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n @if (showWeekNumbers()) {\n <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n </th>\n }\n @for (name of weekdayNames(); track $index; let i = $index) {\n <th\n class=\"tedi-calendar-day-grid__weekday\"\n role=\"columnheader\"\n scope=\"col\"\n [attr.aria-label]=\"weekdayFullNames()[i]\"\n >\n {{ name }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of grid(); track rowKey(row, $index)) {\n <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n @if (showWeekNumbers()) {\n <th\n class=\"tedi-calendar-day-grid__week-number\"\n role=\"rowheader\"\n scope=\"row\"\n [attr.aria-label]=\"weekNumberLabel(row)\"\n >\n {{ weekNumber(row) }}\n </th>\n }\n @for (day of row; track cellKey(day, $index)) {\n <td\n class=\"tedi-calendar-day-grid__cell\"\n [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n >\n @if (day) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [class]=\"cellState(day)\"\n [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n [attr.aria-label]=\"ariaLabelForDay(day)\"\n [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n [attr.data-date-key]=\"day.getTime()\"\n (click)=\"handleClick(day)\"\n (mouseenter)=\"handleMouseEnter(day)\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus(day)\"\n (blur)=\"handleBlur($event)\"\n >\n {{ day.getDate() }}\n @let status = statusForDay(day);\n @if (status) {\n <tedi-status-indicator\n class=\"tedi-calendar-day-grid__status\"\n [type]=\"status.type\"\n size=\"sm\"\n [hasBorder]=\"true\"\n />\n }\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}.tedi-calendar--full-width .tedi-calendar-day-grid{width:100%}.tedi-calendar--full-width .tedi-calendar-day-grid__header,.tedi-calendar--full-width .tedi-calendar-day-grid__row{grid-template-columns:repeat(7,minmax(var(--form-calendar-date-width),1fr))}.tedi-calendar--full-width .tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar--full-width .tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,minmax(var(--form-calendar-date-width),1fr))}.tedi-calendar--full-width .tedi-calendar-day-grid__weekday,.tedi-calendar--full-width .tedi-calendar-day-grid__week-number-header,.tedi-calendar--full-width .tedi-calendar-day-grid__week-number,.tedi-calendar--full-width .tedi-calendar-day-grid__day{width:100%;height:auto;aspect-ratio:1}\n"], dependencies: [{ kind: "component", type: StatusIndicatorComponent, selector: "tedi-status-indicator", inputs: ["label", "type", "size", "hasBorder", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7312
7312
|
}
|
|
7313
7313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarDayGridComponent, decorators: [{
|
|
7314
7314
|
type: Component,
|
|
7315
|
-
args: [{ selector: "tedi-calendar-day-grid", standalone: true, imports: [StatusIndicatorComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n class=\"tedi-calendar-day-grid\"\n [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n role=\"grid\"\n [attr.aria-label]=\"gridAriaLabel()\"\n [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n <thead>\n <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n @if (showWeekNumbers()) {\n <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n </th>\n }\n @for (name of weekdayNames(); track $index; let i = $index) {\n <th\n class=\"tedi-calendar-day-grid__weekday\"\n role=\"columnheader\"\n scope=\"col\"\n [attr.aria-label]=\"weekdayFullNames()[i]\"\n >\n {{ name }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of grid(); track rowKey(row, $index)) {\n <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n @if (showWeekNumbers()) {\n <th\n class=\"tedi-calendar-day-grid__week-number\"\n role=\"rowheader\"\n scope=\"row\"\n [attr.aria-label]=\"weekNumberLabel(row)\"\n >\n {{ weekNumber(row) }}\n </th>\n }\n @for (day of row; track cellKey(day, $index)) {\n <td\n class=\"tedi-calendar-day-grid__cell\"\n [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n >\n @if (day) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [class]=\"cellState(day)\"\n [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n [attr.aria-label]=\"ariaLabelForDay(day)\"\n [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n [attr.data-date-key]=\"day.getTime()\"\n (click)=\"handleClick(day)\"\n (mouseenter)=\"handleMouseEnter(day)\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus(day)\"\n (blur)=\"handleBlur($event)\"\n >\n {{ day.getDate() }}\n @let status = statusForDay(day);\n @if (status) {\n <tedi-status-indicator\n class=\"tedi-calendar-day-grid__status\"\n [type]=\"status.type\"\n size=\"sm\"\n [hasBorder]=\"true\"\n />\n }\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}\n"] }]
|
|
7315
|
+
args: [{ selector: "tedi-calendar-day-grid", standalone: true, imports: [StatusIndicatorComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n class=\"tedi-calendar-day-grid\"\n [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n role=\"grid\"\n [attr.aria-label]=\"gridAriaLabel()\"\n [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n <thead>\n <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n @if (showWeekNumbers()) {\n <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n </th>\n }\n @for (name of weekdayNames(); track $index; let i = $index) {\n <th\n class=\"tedi-calendar-day-grid__weekday\"\n role=\"columnheader\"\n scope=\"col\"\n [attr.aria-label]=\"weekdayFullNames()[i]\"\n >\n {{ name }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of grid(); track rowKey(row, $index)) {\n <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n @if (showWeekNumbers()) {\n <th\n class=\"tedi-calendar-day-grid__week-number\"\n role=\"rowheader\"\n scope=\"row\"\n [attr.aria-label]=\"weekNumberLabel(row)\"\n >\n {{ weekNumber(row) }}\n </th>\n }\n @for (day of row; track cellKey(day, $index)) {\n <td\n class=\"tedi-calendar-day-grid__cell\"\n [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n >\n @if (day) {\n <button\n type=\"button\"\n role=\"gridcell\"\n [class]=\"cellState(day)\"\n [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n [attr.aria-label]=\"ariaLabelForDay(day)\"\n [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n [attr.data-date-key]=\"day.getTime()\"\n (click)=\"handleClick(day)\"\n (mouseenter)=\"handleMouseEnter(day)\"\n (mouseleave)=\"handleMouseLeave()\"\n (focus)=\"handleFocus(day)\"\n (blur)=\"handleBlur($event)\"\n >\n {{ day.getDate() }}\n @let status = statusForDay(day);\n @if (status) {\n <tedi-status-indicator\n class=\"tedi-calendar-day-grid__status\"\n [type]=\"status.type\"\n size=\"sm\"\n [hasBorder]=\"true\"\n />\n }\n </button>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}.tedi-calendar--full-width .tedi-calendar-day-grid{width:100%}.tedi-calendar--full-width .tedi-calendar-day-grid__header,.tedi-calendar--full-width .tedi-calendar-day-grid__row{grid-template-columns:repeat(7,minmax(var(--form-calendar-date-width),1fr))}.tedi-calendar--full-width .tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar--full-width .tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,minmax(var(--form-calendar-date-width),1fr))}.tedi-calendar--full-width .tedi-calendar-day-grid__weekday,.tedi-calendar--full-width .tedi-calendar-day-grid__week-number-header,.tedi-calendar--full-width .tedi-calendar-day-grid__week-number,.tedi-calendar--full-width .tedi-calendar-day-grid__day{width:100%;height:auto;aspect-ratio:1}\n"] }]
|
|
7316
7316
|
}], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: true }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], dayStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStatus", required: false }] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], hoveredDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoveredDate", required: false }] }, { type: i0.Output, args: ["hoveredDateChange"] }] } });
|
|
7317
7317
|
|
|
7318
7318
|
class CalendarMonthGridComponent {
|
|
@@ -7604,7 +7604,7 @@ class CalendarHeaderComponent {
|
|
|
7604
7604
|
return true;
|
|
7605
7605
|
}
|
|
7606
7606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7607
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarHeaderComponent, isStandalone: true, selector: "tedi-calendar-header", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, isMonthDisabled: { classPropertyName: "isMonthDisabled", publicName: "isMonthDisabled", isSignal: true, isRequired: false, transformFunction: null }, isYearDisabled: { classPropertyName: "isYearDisabled", publicName: "isYearDisabled", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, yearPageStart: { classPropertyName: "yearPageStart", publicName: "yearPageStart", isSignal: true, isRequired: false, transformFunction: null }, yearPageSize: { classPropertyName: "yearPageSize", publicName: "yearPageSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", monthChange: "monthChange", yearChange: "yearChange", viewChange: "viewChange" }, ngImport: i0, template: "<div\n class=\"tedi-calendar-header\"\n role=\"group\"\n [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n [attr.aria-label]=\"navAriaLabel()\"\n>\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"prevAriaLabel()\"\n [disabled]=\"prevDisabled()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n }\n\n <div class=\"tedi-calendar-header__title\">\n @switch (view()) {\n @case (\"days\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentMonthIndex().toString()\"\n (valueChange)=\"handleMonthSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentMonthLabel() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n >\n @for (option of monthOptions(); track option.index) {\n <li\n tedi-dropdown-item\n [value]=\"option.index.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleMonthLabelClick()\"\n >\n {{ currentMonthLabel() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentMonthLabel() }}\n </span>\n }\n\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n position=\"bottom-end\"\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"months\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"years\") {\n <span class=\"tedi-calendar-header__static-label\">\n {{ yearRangeLabel() }}\n </span>\n }\n }\n </div>\n\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [disabled]=\"nextDisabled()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n }\n\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ captionAnnouncement() }}\n </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:space-between}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-left:var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7607
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarHeaderComponent, isStandalone: true, selector: "tedi-calendar-header", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, isMonthDisabled: { classPropertyName: "isMonthDisabled", publicName: "isMonthDisabled", isSignal: true, isRequired: false, transformFunction: null }, isYearDisabled: { classPropertyName: "isYearDisabled", publicName: "isYearDisabled", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, yearPageStart: { classPropertyName: "yearPageStart", publicName: "yearPageStart", isSignal: true, isRequired: false, transformFunction: null }, yearPageSize: { classPropertyName: "yearPageSize", publicName: "yearPageSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", monthChange: "monthChange", yearChange: "yearChange", viewChange: "viewChange" }, ngImport: i0, template: "<div\n class=\"tedi-calendar-header\"\n role=\"group\"\n [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n [attr.aria-label]=\"navAriaLabel()\"\n>\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"prevAriaLabel()\"\n [disabled]=\"prevDisabled()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n }\n\n <div class=\"tedi-calendar-header__title\">\n @switch (view()) {\n @case (\"days\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentMonthIndex().toString()\"\n (valueChange)=\"handleMonthSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentMonthLabel() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n >\n @for (option of monthOptions(); track option.index) {\n <li\n tedi-dropdown-item\n [value]=\"option.index.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleMonthLabelClick()\"\n >\n {{ currentMonthLabel() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentMonthLabel() }}\n </span>\n }\n\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n position=\"bottom-end\"\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"months\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"years\") {\n <span class=\"tedi-calendar-header__static-label\">\n {{ yearRangeLabel() }}\n </span>\n }\n }\n </div>\n\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [disabled]=\"nextDisabled()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n }\n\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ captionAnnouncement() }}\n </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:center}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding:0 0 0 var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "interactiveContent", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7608
7608
|
}
|
|
7609
7609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
|
|
7610
7610
|
type: Component,
|
|
@@ -7615,7 +7615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
7615
7615
|
DropdownTriggerDirective,
|
|
7616
7616
|
DropdownContentComponent,
|
|
7617
7617
|
DropdownItemComponent,
|
|
7618
|
-
], template: "<div\n class=\"tedi-calendar-header\"\n role=\"group\"\n [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n [attr.aria-label]=\"navAriaLabel()\"\n>\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"prevAriaLabel()\"\n [disabled]=\"prevDisabled()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n }\n\n <div class=\"tedi-calendar-header__title\">\n @switch (view()) {\n @case (\"days\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentMonthIndex().toString()\"\n (valueChange)=\"handleMonthSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentMonthLabel() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n >\n @for (option of monthOptions(); track option.index) {\n <li\n tedi-dropdown-item\n [value]=\"option.index.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleMonthLabelClick()\"\n >\n {{ currentMonthLabel() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentMonthLabel() }}\n </span>\n }\n\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n position=\"bottom-end\"\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"months\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"years\") {\n <span class=\"tedi-calendar-header__static-label\">\n {{ yearRangeLabel() }}\n </span>\n }\n }\n </div>\n\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [disabled]=\"nextDisabled()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n }\n\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ captionAnnouncement() }}\n </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:
|
|
7618
|
+
], template: "<div\n class=\"tedi-calendar-header\"\n role=\"group\"\n [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n [attr.aria-label]=\"navAriaLabel()\"\n>\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"prevAriaLabel()\"\n [disabled]=\"prevDisabled()\"\n (click)=\"handlePrev()\"\n >\n <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n </button>\n }\n\n <div class=\"tedi-calendar-header__title\">\n @switch (view()) {\n @case (\"days\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentMonthIndex().toString()\"\n (valueChange)=\"handleMonthSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentMonthLabel() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n >\n @for (option of monthOptions(); track option.index) {\n <li\n tedi-dropdown-item\n [value]=\"option.index.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectMonthLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleMonthLabelClick()\"\n >\n {{ currentMonthLabel() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentMonthLabel() }}\n </span>\n }\n\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n position=\"bottom-end\"\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"months\") {\n @if (monthYearSelectType() === \"dropdown\") {\n <tedi-dropdown\n [value]=\"currentYear().toString()\"\n (valueChange)=\"handleYearSelect($event)\"\n >\n <button\n tedi-dropdown-trigger\n type=\"button\"\n ariaHaspopup=\"listbox\"\n class=\"tedi-calendar-header__select\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n >\n {{ currentYear() }}\n <tedi-icon\n name=\"arrow_drop_down\"\n class=\"tedi-calendar-header__select-arrow\"\n color=\"inherit\"\n size=\"inherit\"\n />\n </button>\n <tedi-dropdown-content\n dropdownRole=\"listbox\"\n class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n >\n @for (option of yearOptions(); track option.year) {\n <li\n tedi-dropdown-item\n [value]=\"option.year.toString()\"\n [disabled]=\"option.disabled\"\n >\n {{ option.year }}\n </li>\n }\n </tedi-dropdown-content>\n </tedi-dropdown>\n } @else if (monthYearSelectType() === \"grid\") {\n <button\n type=\"button\"\n class=\"tedi-calendar-header__label-button\"\n [attr.aria-label]=\"selectYearLabel()\"\n [disabled]=\"inputDisabled()\"\n (click)=\"handleYearLabelClick()\"\n >\n {{ currentYear() }}\n </button>\n } @else {\n <span class=\"tedi-calendar-header__static-label\">\n {{ currentYear() }}\n </span>\n }\n }\n @case (\"years\") {\n <span class=\"tedi-calendar-header__static-label\">\n {{ yearRangeLabel() }}\n </span>\n }\n }\n </div>\n\n @if (showNavigation()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-calendar-header__nav-button\"\n [attr.aria-label]=\"nextAriaLabel()\"\n [disabled]=\"nextDisabled()\"\n (click)=\"handleNext()\"\n >\n <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n </button>\n }\n\n <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ captionAnnouncement() }}\n </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:center}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding:0 0 0 var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"] }]
|
|
7619
7619
|
}], propDecorators: { currentMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMonth", required: true }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], isMonthDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMonthDisabled", required: false }] }], isYearDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isYearDisabled", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], yearPageStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPageStart", required: false }] }], yearPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPageSize", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], prevClick: [{ type: i0.Output, args: ["prevClick"] }], nextClick: [{ type: i0.Output, args: ["nextClick"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], yearChange: [{ type: i0.Output, args: ["yearChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
|
|
7620
7620
|
|
|
7621
7621
|
const YEAR_PAGE_SIZE = 12;
|
|
@@ -7666,6 +7666,11 @@ class CalendarComponent {
|
|
|
7666
7666
|
* DateField overlay).
|
|
7667
7667
|
*/
|
|
7668
7668
|
bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
|
|
7669
|
+
/**
|
|
7670
|
+
* Grow to fill the container's width instead of a fixed width; cells keep a
|
|
7671
|
+
* square aspect ratio. Wrap in a sized container to control the scale.
|
|
7672
|
+
*/
|
|
7673
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
7669
7674
|
/**
|
|
7670
7675
|
* Matchers that mark dates as disabled. Each matcher can be a `Date`, `Date[]`,
|
|
7671
7676
|
* `{ before }`, `{ after }`, `{ before, after }`, `{ from, to? }`,
|
|
@@ -7762,12 +7767,13 @@ class CalendarComponent {
|
|
|
7762
7767
|
this.destroyRef.onDestroy(() => observer.disconnect());
|
|
7763
7768
|
});
|
|
7764
7769
|
// Re-measure after every render that changes the month count, the
|
|
7765
|
-
// week-number column, the
|
|
7766
|
-
// custom property imperatively (not via a
|
|
7767
|
-
// never re-triggers change detection.
|
|
7770
|
+
// week-number column, the full-width layout, the active view, or the
|
|
7771
|
+
// viewport. We write the CSS custom property imperatively (not via a
|
|
7772
|
+
// template binding) so updating it never re-triggers change detection.
|
|
7768
7773
|
afterRenderEffect(() => {
|
|
7769
7774
|
this.numberOfMonths();
|
|
7770
7775
|
this.showWeekNumbers();
|
|
7776
|
+
this.fullWidth();
|
|
7771
7777
|
this.view();
|
|
7772
7778
|
this.viewportWidth();
|
|
7773
7779
|
this.updateFitColumns();
|
|
@@ -8196,13 +8202,13 @@ class CalendarComponent {
|
|
|
8196
8202
|
return value.from instanceof Date ? value.from : null;
|
|
8197
8203
|
}
|
|
8198
8204
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarComponent, isStandalone: true, selector: "tedi-calendar", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", currentMonth: "currentMonthChange", value: "valueChange", select: "select" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.tedi-calendar--disabled": "effectiveDisabled()", "class.tedi-calendar--multi-month": "numberOfMonths() > 1", "class.tedi-calendar--with-week-numbers": "showWeekNumbers()", "class.tedi-calendar--bordered": "bordered()", "style.--_tedi-calendar-month-count": "numberOfMonths()" }, classAttribute: "tedi-calendar" }, providers: [
|
|
8205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarComponent, isStandalone: true, selector: "tedi-calendar", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", currentMonth: "currentMonthChange", value: "valueChange", select: "select" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "class.tedi-calendar--disabled": "effectiveDisabled()", "class.tedi-calendar--multi-month": "numberOfMonths() > 1", "class.tedi-calendar--with-week-numbers": "showWeekNumbers()", "class.tedi-calendar--bordered": "bordered()", "class.tedi-calendar--full-width": "fullWidth()", "style.--_tedi-calendar-month-count": "numberOfMonths()" }, classAttribute: "tedi-calendar" }, providers: [
|
|
8200
8206
|
{
|
|
8201
8207
|
provide: NG_VALUE_ACCESSOR,
|
|
8202
8208
|
useExisting: forwardRef(() => CalendarComponent),
|
|
8203
8209
|
multi: true,
|
|
8204
8210
|
},
|
|
8205
|
-
], ngImport: i0, template: "@switch (view()) {\n @case (\"days\") {\n <div class=\"tedi-calendar__months\">\n @for (monthDate of monthDates(); track $index; let i = $index) {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"monthDate\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event, i)\"\n (yearChange)=\"handleHeaderYearChange($event, i)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-day-grid\n [month]=\"monthDate\"\n [mode]=\"mode()\"\n [value]=\"value()\"\n [localeCode]=\"localeCode()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [disabledMatchers]=\"disabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [dayStatus]=\"dayStatus()\"\n [inputDisabled]=\"effectiveDisabled()\"\n [(hoveredDate)]=\"hoveredDay\"\n (daySelect)=\"handleDaySelect($event)\"\n />\n </div>\n }\n </div>\n }\n @case (\"months\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-month-grid\n [year]=\"currentMonth().getFullYear()\"\n [selectedMonth]=\"selectedSingle()\"\n [localeCode]=\"localeCode()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (monthSelect)=\"handleMonthSelect($event)\"\n />\n </div>\n }\n @case (\"years\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-year-grid\n [pageStart]=\"yearPageStart()\"\n [pageSize]=\"yearPageSize\"\n [selectedYear]=\"selectedSingle()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (yearSelect)=\"handleYearSelect($event)\"\n />\n </div>\n }\n}\n\n<div class=\"tedi-calendar__footer\">\n <ng-content select=\"[tediCalendarFooter]\" />\n</div>\n", styles: [".tedi-calendar{--_tedi-calendar-day-columns: 7;--_tedi-calendar-month-width: calc( var(--_tedi-calendar-day-columns) * var(--form-calendar-date-width) + 2 * var(--card-padding-md-default) );display:flex;flex-direction:column;width:calc(var(--_tedi-calendar-fit-columns, var(--_tedi-calendar-month-count, 1)) * var(--_tedi-calendar-month-width));min-width:var(--_tedi-calendar-month-width);height:fit-content;background:var(--card-background-primary)}.tedi-calendar--with-week-numbers{--_tedi-calendar-day-columns: 8}.tedi-calendar__months{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.tedi-calendar__month{display:flex;flex-direction:column;padding:var(--card-padding-md-default)}.tedi-calendar__footer{padding-top:var(--layout-grid-gutters-08);margin:0 var(--card-padding-md-default) var(--card-padding-xs);border-top:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar__footer:empty{display:none}.tedi-calendar--bordered{border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-calendar--disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "tedi-calendar-header", inputs: ["currentMonth", "view", "localeCode", "showNavigation", "monthYearSelectType", "disabledMatchers", "isMonthDisabled", "isYearDisabled", "minYear", "maxYear", "yearPageStart", "yearPageSize", "numberOfMonths", "inputDisabled"], outputs: ["prevClick", "nextClick", "monthChange", "yearChange", "viewChange"] }, { kind: "component", type: CalendarDayGridComponent, selector: "tedi-calendar-day-grid", inputs: ["month", "mode", "value", "localeCode", "firstDayOfWeek", "showOutsideDays", "showWeekNumbers", "disabledMatchers", "availableDays", "unavailableDays", "inputDisabled", "dayStatus", "hoveredDate"], outputs: ["daySelect", "hoveredDateChange"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "tedi-calendar-month-grid", inputs: ["year", "selectedMonth", "localeCode", "monthNameFormat", "isMonthDisabled", "inputDisabled"], outputs: ["monthSelect"] }, { kind: "component", type: CalendarYearGridComponent, selector: "tedi-calendar-year-grid", inputs: ["pageStart", "pageSize", "selectedYear", "isYearDisabled", "inputDisabled"], outputs: ["yearSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8211
|
+
], ngImport: i0, template: "@switch (view()) {\n @case (\"days\") {\n <div class=\"tedi-calendar__months\">\n @for (monthDate of monthDates(); track $index; let i = $index) {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"monthDate\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event, i)\"\n (yearChange)=\"handleHeaderYearChange($event, i)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-day-grid\n [month]=\"monthDate\"\n [mode]=\"mode()\"\n [value]=\"value()\"\n [localeCode]=\"localeCode()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [disabledMatchers]=\"disabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [dayStatus]=\"dayStatus()\"\n [inputDisabled]=\"effectiveDisabled()\"\n [(hoveredDate)]=\"hoveredDay\"\n (daySelect)=\"handleDaySelect($event)\"\n />\n </div>\n }\n </div>\n }\n @case (\"months\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-month-grid\n [year]=\"currentMonth().getFullYear()\"\n [selectedMonth]=\"selectedSingle()\"\n [localeCode]=\"localeCode()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (monthSelect)=\"handleMonthSelect($event)\"\n />\n </div>\n }\n @case (\"years\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-year-grid\n [pageStart]=\"yearPageStart()\"\n [pageSize]=\"yearPageSize\"\n [selectedYear]=\"selectedSingle()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (yearSelect)=\"handleYearSelect($event)\"\n />\n </div>\n }\n}\n\n<div class=\"tedi-calendar__footer\">\n <ng-content select=\"[tediCalendarFooter]\" />\n</div>\n", styles: [".tedi-calendar{--_tedi-calendar-day-columns: 7;--_tedi-calendar-month-width: calc( var(--_tedi-calendar-day-columns) * var(--form-calendar-date-width) + 2 * var(--card-padding-md-default) );display:flex;flex-direction:column;width:calc(var(--_tedi-calendar-fit-columns, var(--_tedi-calendar-month-count, 1)) * var(--_tedi-calendar-month-width));min-width:var(--_tedi-calendar-month-width);height:fit-content;background:var(--card-background-primary)}.tedi-calendar--with-week-numbers{--_tedi-calendar-day-columns: 8}.tedi-calendar--full-width{box-sizing:border-box;width:100%}.tedi-calendar--full-width .tedi-calendar__month{flex:1 1 var(--_tedi-calendar-month-width);min-width:min(100%,var(--_tedi-calendar-month-width));max-width:none}.tedi-calendar__months{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.tedi-calendar__month{box-sizing:border-box;display:flex;flex-direction:column;max-width:var(--_tedi-calendar-month-width);padding:var(--card-padding-md-default)}.tedi-calendar__footer{padding-top:var(--layout-grid-gutters-08);margin:0 var(--card-padding-md-default) var(--card-padding-xs);border-top:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar__footer:empty{display:none}.tedi-calendar--bordered{border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-calendar--disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "tedi-calendar-header", inputs: ["currentMonth", "view", "localeCode", "showNavigation", "monthYearSelectType", "disabledMatchers", "isMonthDisabled", "isYearDisabled", "minYear", "maxYear", "yearPageStart", "yearPageSize", "numberOfMonths", "inputDisabled"], outputs: ["prevClick", "nextClick", "monthChange", "yearChange", "viewChange"] }, { kind: "component", type: CalendarDayGridComponent, selector: "tedi-calendar-day-grid", inputs: ["month", "mode", "value", "localeCode", "firstDayOfWeek", "showOutsideDays", "showWeekNumbers", "disabledMatchers", "availableDays", "unavailableDays", "inputDisabled", "dayStatus", "hoveredDate"], outputs: ["daySelect", "hoveredDateChange"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "tedi-calendar-month-grid", inputs: ["year", "selectedMonth", "localeCode", "monthNameFormat", "isMonthDisabled", "inputDisabled"], outputs: ["monthSelect"] }, { kind: "component", type: CalendarYearGridComponent, selector: "tedi-calendar-year-grid", inputs: ["pageStart", "pageSize", "selectedYear", "isYearDisabled", "inputDisabled"], outputs: ["yearSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8206
8212
|
}
|
|
8207
8213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
8208
8214
|
type: Component,
|
|
@@ -8223,9 +8229,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
8223
8229
|
"[class.tedi-calendar--multi-month]": "numberOfMonths() > 1",
|
|
8224
8230
|
"[class.tedi-calendar--with-week-numbers]": "showWeekNumbers()",
|
|
8225
8231
|
"[class.tedi-calendar--bordered]": "bordered()",
|
|
8232
|
+
"[class.tedi-calendar--full-width]": "fullWidth()",
|
|
8226
8233
|
"[style.--_tedi-calendar-month-count]": "numberOfMonths()",
|
|
8227
|
-
}, template: "@switch (view()) {\n @case (\"days\") {\n <div class=\"tedi-calendar__months\">\n @for (monthDate of monthDates(); track $index; let i = $index) {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"monthDate\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event, i)\"\n (yearChange)=\"handleHeaderYearChange($event, i)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-day-grid\n [month]=\"monthDate\"\n [mode]=\"mode()\"\n [value]=\"value()\"\n [localeCode]=\"localeCode()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [disabledMatchers]=\"disabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [dayStatus]=\"dayStatus()\"\n [inputDisabled]=\"effectiveDisabled()\"\n [(hoveredDate)]=\"hoveredDay\"\n (daySelect)=\"handleDaySelect($event)\"\n />\n </div>\n }\n </div>\n }\n @case (\"months\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-month-grid\n [year]=\"currentMonth().getFullYear()\"\n [selectedMonth]=\"selectedSingle()\"\n [localeCode]=\"localeCode()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (monthSelect)=\"handleMonthSelect($event)\"\n />\n </div>\n }\n @case (\"years\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-year-grid\n [pageStart]=\"yearPageStart()\"\n [pageSize]=\"yearPageSize\"\n [selectedYear]=\"selectedSingle()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (yearSelect)=\"handleYearSelect($event)\"\n />\n </div>\n }\n}\n\n<div class=\"tedi-calendar__footer\">\n <ng-content select=\"[tediCalendarFooter]\" />\n</div>\n", styles: [".tedi-calendar{--_tedi-calendar-day-columns: 7;--_tedi-calendar-month-width: calc( var(--_tedi-calendar-day-columns) * var(--form-calendar-date-width) + 2 * var(--card-padding-md-default) );display:flex;flex-direction:column;width:calc(var(--_tedi-calendar-fit-columns, var(--_tedi-calendar-month-count, 1)) * var(--_tedi-calendar-month-width));min-width:var(--_tedi-calendar-month-width);height:fit-content;background:var(--card-background-primary)}.tedi-calendar--with-week-numbers{--_tedi-calendar-day-columns: 8}.tedi-calendar__months{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.tedi-calendar__month{display:flex;flex-direction:column;padding:var(--card-padding-md-default)}.tedi-calendar__footer{padding-top:var(--layout-grid-gutters-08);margin:0 var(--card-padding-md-default) var(--card-padding-xs);border-top:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar__footer:empty{display:none}.tedi-calendar--bordered{border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-calendar--disabled{pointer-events:none;opacity:.6}\n"] }]
|
|
8228
|
-
}], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], currentMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMonth", required: false }] }, { type: i0.Output, args: ["currentMonthChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], dayStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStatus", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], handleKeydown: [{
|
|
8234
|
+
}, template: "@switch (view()) {\n @case (\"days\") {\n <div class=\"tedi-calendar__months\">\n @for (monthDate of monthDates(); track $index; let i = $index) {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"monthDate\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event, i)\"\n (yearChange)=\"handleHeaderYearChange($event, i)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-day-grid\n [month]=\"monthDate\"\n [mode]=\"mode()\"\n [value]=\"value()\"\n [localeCode]=\"localeCode()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [disabledMatchers]=\"disabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [dayStatus]=\"dayStatus()\"\n [inputDisabled]=\"effectiveDisabled()\"\n [(hoveredDate)]=\"hoveredDay\"\n (daySelect)=\"handleDaySelect($event)\"\n />\n </div>\n }\n </div>\n }\n @case (\"months\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-month-grid\n [year]=\"currentMonth().getFullYear()\"\n [selectedMonth]=\"selectedSingle()\"\n [localeCode]=\"localeCode()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (monthSelect)=\"handleMonthSelect($event)\"\n />\n </div>\n }\n @case (\"years\") {\n <div class=\"tedi-calendar__month\">\n <tedi-calendar-header\n [currentMonth]=\"currentMonth()\"\n [view]=\"view()\"\n [localeCode]=\"localeCode()\"\n [showNavigation]=\"showNavigation()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [disabledMatchers]=\"computedDisabledMatchers()\"\n [minYear]=\"resolvedMinYear()\"\n [maxYear]=\"resolvedMaxYear()\"\n [isMonthDisabled]=\"effectiveIsMonthDisabled()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [yearPageStart]=\"yearPageStart()\"\n [yearPageSize]=\"yearPageSize\"\n [numberOfMonths]=\"numberOfMonths()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (prevClick)=\"handlePrev()\"\n (nextClick)=\"handleNext()\"\n (monthChange)=\"handleHeaderMonthChange($event)\"\n (yearChange)=\"handleHeaderYearChange($event)\"\n (viewChange)=\"handleHeaderViewChange($event)\"\n />\n <tedi-calendar-year-grid\n [pageStart]=\"yearPageStart()\"\n [pageSize]=\"yearPageSize\"\n [selectedYear]=\"selectedSingle()\"\n [isYearDisabled]=\"effectiveIsYearDisabled()\"\n [inputDisabled]=\"effectiveDisabled()\"\n (yearSelect)=\"handleYearSelect($event)\"\n />\n </div>\n }\n}\n\n<div class=\"tedi-calendar__footer\">\n <ng-content select=\"[tediCalendarFooter]\" />\n</div>\n", styles: [".tedi-calendar{--_tedi-calendar-day-columns: 7;--_tedi-calendar-month-width: calc( var(--_tedi-calendar-day-columns) * var(--form-calendar-date-width) + 2 * var(--card-padding-md-default) );display:flex;flex-direction:column;width:calc(var(--_tedi-calendar-fit-columns, var(--_tedi-calendar-month-count, 1)) * var(--_tedi-calendar-month-width));min-width:var(--_tedi-calendar-month-width);height:fit-content;background:var(--card-background-primary)}.tedi-calendar--with-week-numbers{--_tedi-calendar-day-columns: 8}.tedi-calendar--full-width{box-sizing:border-box;width:100%}.tedi-calendar--full-width .tedi-calendar__month{flex:1 1 var(--_tedi-calendar-month-width);min-width:min(100%,var(--_tedi-calendar-month-width));max-width:none}.tedi-calendar__months{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.tedi-calendar__month{box-sizing:border-box;display:flex;flex-direction:column;max-width:var(--_tedi-calendar-month-width);padding:var(--card-padding-md-default)}.tedi-calendar__footer{padding-top:var(--layout-grid-gutters-08);margin:0 var(--card-padding-md-default) var(--card-padding-xs);border-top:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar__footer:empty{display:none}.tedi-calendar--bordered{border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-calendar--disabled{pointer-events:none;opacity:.6}\n"] }]
|
|
8235
|
+
}], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], currentMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMonth", required: false }] }, { type: i0.Output, args: ["currentMonthChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], dayStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStatus", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], handleKeydown: [{
|
|
8229
8236
|
type: HostListener,
|
|
8230
8237
|
args: ["keydown", ["$event"]]
|
|
8231
8238
|
}] } });
|
|
@@ -16115,51 +16122,7 @@ class DateFieldModalComponent {
|
|
|
16115
16122
|
this.confirm();
|
|
16116
16123
|
}
|
|
16117
16124
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16118
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: DateFieldModalComponent, isStandalone: true, selector: "tedi-date-field-modal", ngImport: i0, template:
|
|
16119
|
-
<tedi-modal class="tedi-date-field-modal">
|
|
16120
|
-
<tedi-modal-header>
|
|
16121
|
-
<h2>{{ "date-field.modal-title" | tediTranslate }}</h2>
|
|
16122
|
-
</tedi-modal-header>
|
|
16123
|
-
<tedi-modal-content class="tedi-date-field-modal__content">
|
|
16124
|
-
<tedi-calendar
|
|
16125
|
-
[bordered]="false"
|
|
16126
|
-
[value]="draft()"
|
|
16127
|
-
[currentMonth]="month()"
|
|
16128
|
-
[mode]="data.mode"
|
|
16129
|
-
[selectionLevel]="data.selectionLevel"
|
|
16130
|
-
[localeCode]="data.localeCode"
|
|
16131
|
-
[showOutsideDays]="data.showOutsideDays"
|
|
16132
|
-
[showWeekNumbers]="data.showWeekNumbers"
|
|
16133
|
-
[numberOfMonths]="data.numberOfMonths"
|
|
16134
|
-
[monthYearSelectType]="data.monthYearSelectType"
|
|
16135
|
-
[required]="data.required"
|
|
16136
|
-
[disabledMatchers]="data.disabledMatchers"
|
|
16137
|
-
[availableDays]="data.availableDays"
|
|
16138
|
-
[unavailableDays]="data.unavailableDays"
|
|
16139
|
-
[shouldDisableMonth]="data.shouldDisableMonth"
|
|
16140
|
-
[shouldDisableYear]="data.shouldDisableYear"
|
|
16141
|
-
[minYear]="data.minYear"
|
|
16142
|
-
[maxYear]="data.maxYear"
|
|
16143
|
-
(valueChange)="draft.set($event)"
|
|
16144
|
-
(currentMonthChange)="month.set($event)"
|
|
16145
|
-
(select)="handleSelect()"
|
|
16146
|
-
/>
|
|
16147
|
-
</tedi-modal-content>
|
|
16148
|
-
<tedi-modal-footer>
|
|
16149
|
-
<button
|
|
16150
|
-
tedi-button
|
|
16151
|
-
type="button"
|
|
16152
|
-
variant="secondary"
|
|
16153
|
-
(click)="cancel()"
|
|
16154
|
-
>
|
|
16155
|
-
{{ "date-field.cancel" | tediTranslate }}
|
|
16156
|
-
</button>
|
|
16157
|
-
<button tedi-button type="button" (click)="confirm()">
|
|
16158
|
-
{{ "date-field.confirm" | tediTranslate }}
|
|
16159
|
-
</button>
|
|
16160
|
-
</tedi-modal-footer>
|
|
16161
|
-
</tedi-modal>
|
|
16162
|
-
`, isInline: true, styles: [".tedi-date-field-modal{--_tedi-modal-body-padding: 0}.tedi-date-field-modal__content{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: ModalComponent, selector: "tedi-modal", inputs: ["open", "size", "width", "position", "closeOnBackdropClick", "ariaLabel", "ariaLabelledBy"], outputs: ["openChange"] }, { kind: "component", type: ModalContentComponent, selector: "tedi-modal-content" }, { kind: "component", type: ModalFooterComponent, selector: "tedi-modal-footer" }, { kind: "component", type: ModalHeaderComponent, selector: "tedi-modal-header", inputs: ["showClose", "closeButtonSize"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16125
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: DateFieldModalComponent, isStandalone: true, selector: "tedi-date-field-modal", ngImport: i0, template: "<tedi-modal\n class=\"tedi-date-field-modal\"\n [class.tedi-date-field-modal--full-width]=\"data.calendarFullWidth\"\n>\n <tedi-modal-header>\n <h2>{{ \"date-field.modal-title\" | tediTranslate }}</h2>\n </tedi-modal-header>\n <tedi-modal-content class=\"tedi-date-field-modal__content\">\n <tedi-calendar\n [bordered]=\"false\"\n [value]=\"draft()\"\n [currentMonth]=\"month()\"\n [mode]=\"data.mode\"\n [selectionLevel]=\"data.selectionLevel\"\n [localeCode]=\"data.localeCode\"\n [showOutsideDays]=\"data.showOutsideDays\"\n [showWeekNumbers]=\"data.showWeekNumbers\"\n [numberOfMonths]=\"data.numberOfMonths\"\n [fullWidth]=\"data.calendarFullWidth\"\n [monthYearSelectType]=\"data.monthYearSelectType\"\n [required]=\"data.required\"\n [disabledMatchers]=\"data.disabledMatchers\"\n [availableDays]=\"data.availableDays\"\n [unavailableDays]=\"data.unavailableDays\"\n [shouldDisableMonth]=\"data.shouldDisableMonth\"\n [shouldDisableYear]=\"data.shouldDisableYear\"\n [minYear]=\"data.minYear\"\n [maxYear]=\"data.maxYear\"\n (valueChange)=\"draft.set($event)\"\n (currentMonthChange)=\"month.set($event)\"\n (select)=\"handleSelect()\"\n />\n </tedi-modal-content>\n <tedi-modal-footer>\n <button tedi-button type=\"button\" variant=\"secondary\" (click)=\"cancel()\">\n {{ \"date-field.cancel\" | tediTranslate }}\n </button>\n <button tedi-button type=\"button\" (click)=\"confirm()\">\n {{ \"date-field.confirm\" | tediTranslate }}\n </button>\n </tedi-modal-footer>\n</tedi-modal>\n", styles: [".tedi-date-field-modal{--_tedi-modal-body-padding: 0}.tedi-date-field-modal__content{display:flex;align-items:center;justify-content:center}.tedi-date-field-modal--full-width .tedi-date-field-modal__content{align-items:stretch;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "fullWidth", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: ModalComponent, selector: "tedi-modal", inputs: ["open", "size", "width", "position", "closeOnBackdropClick", "ariaLabel", "ariaLabelledBy"], outputs: ["openChange"] }, { kind: "component", type: ModalContentComponent, selector: "tedi-modal-content" }, { kind: "component", type: ModalFooterComponent, selector: "tedi-modal-footer" }, { kind: "component", type: ModalHeaderComponent, selector: "tedi-modal-header", inputs: ["showClose", "closeButtonSize"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16163
16126
|
}
|
|
16164
16127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldModalComponent, decorators: [{
|
|
16165
16128
|
type: Component,
|
|
@@ -16171,51 +16134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
16171
16134
|
ModalFooterComponent,
|
|
16172
16135
|
ModalHeaderComponent,
|
|
16173
16136
|
TediTranslationPipe,
|
|
16174
|
-
], template:
|
|
16175
|
-
<tedi-modal class="tedi-date-field-modal">
|
|
16176
|
-
<tedi-modal-header>
|
|
16177
|
-
<h2>{{ "date-field.modal-title" | tediTranslate }}</h2>
|
|
16178
|
-
</tedi-modal-header>
|
|
16179
|
-
<tedi-modal-content class="tedi-date-field-modal__content">
|
|
16180
|
-
<tedi-calendar
|
|
16181
|
-
[bordered]="false"
|
|
16182
|
-
[value]="draft()"
|
|
16183
|
-
[currentMonth]="month()"
|
|
16184
|
-
[mode]="data.mode"
|
|
16185
|
-
[selectionLevel]="data.selectionLevel"
|
|
16186
|
-
[localeCode]="data.localeCode"
|
|
16187
|
-
[showOutsideDays]="data.showOutsideDays"
|
|
16188
|
-
[showWeekNumbers]="data.showWeekNumbers"
|
|
16189
|
-
[numberOfMonths]="data.numberOfMonths"
|
|
16190
|
-
[monthYearSelectType]="data.monthYearSelectType"
|
|
16191
|
-
[required]="data.required"
|
|
16192
|
-
[disabledMatchers]="data.disabledMatchers"
|
|
16193
|
-
[availableDays]="data.availableDays"
|
|
16194
|
-
[unavailableDays]="data.unavailableDays"
|
|
16195
|
-
[shouldDisableMonth]="data.shouldDisableMonth"
|
|
16196
|
-
[shouldDisableYear]="data.shouldDisableYear"
|
|
16197
|
-
[minYear]="data.minYear"
|
|
16198
|
-
[maxYear]="data.maxYear"
|
|
16199
|
-
(valueChange)="draft.set($event)"
|
|
16200
|
-
(currentMonthChange)="month.set($event)"
|
|
16201
|
-
(select)="handleSelect()"
|
|
16202
|
-
/>
|
|
16203
|
-
</tedi-modal-content>
|
|
16204
|
-
<tedi-modal-footer>
|
|
16205
|
-
<button
|
|
16206
|
-
tedi-button
|
|
16207
|
-
type="button"
|
|
16208
|
-
variant="secondary"
|
|
16209
|
-
(click)="cancel()"
|
|
16210
|
-
>
|
|
16211
|
-
{{ "date-field.cancel" | tediTranslate }}
|
|
16212
|
-
</button>
|
|
16213
|
-
<button tedi-button type="button" (click)="confirm()">
|
|
16214
|
-
{{ "date-field.confirm" | tediTranslate }}
|
|
16215
|
-
</button>
|
|
16216
|
-
</tedi-modal-footer>
|
|
16217
|
-
</tedi-modal>
|
|
16218
|
-
`, styles: [".tedi-date-field-modal{--_tedi-modal-body-padding: 0}.tedi-date-field-modal__content{display:flex;align-items:center;justify-content:center}\n"] }]
|
|
16137
|
+
], template: "<tedi-modal\n class=\"tedi-date-field-modal\"\n [class.tedi-date-field-modal--full-width]=\"data.calendarFullWidth\"\n>\n <tedi-modal-header>\n <h2>{{ \"date-field.modal-title\" | tediTranslate }}</h2>\n </tedi-modal-header>\n <tedi-modal-content class=\"tedi-date-field-modal__content\">\n <tedi-calendar\n [bordered]=\"false\"\n [value]=\"draft()\"\n [currentMonth]=\"month()\"\n [mode]=\"data.mode\"\n [selectionLevel]=\"data.selectionLevel\"\n [localeCode]=\"data.localeCode\"\n [showOutsideDays]=\"data.showOutsideDays\"\n [showWeekNumbers]=\"data.showWeekNumbers\"\n [numberOfMonths]=\"data.numberOfMonths\"\n [fullWidth]=\"data.calendarFullWidth\"\n [monthYearSelectType]=\"data.monthYearSelectType\"\n [required]=\"data.required\"\n [disabledMatchers]=\"data.disabledMatchers\"\n [availableDays]=\"data.availableDays\"\n [unavailableDays]=\"data.unavailableDays\"\n [shouldDisableMonth]=\"data.shouldDisableMonth\"\n [shouldDisableYear]=\"data.shouldDisableYear\"\n [minYear]=\"data.minYear\"\n [maxYear]=\"data.maxYear\"\n (valueChange)=\"draft.set($event)\"\n (currentMonthChange)=\"month.set($event)\"\n (select)=\"handleSelect()\"\n />\n </tedi-modal-content>\n <tedi-modal-footer>\n <button tedi-button type=\"button\" variant=\"secondary\" (click)=\"cancel()\">\n {{ \"date-field.cancel\" | tediTranslate }}\n </button>\n <button tedi-button type=\"button\" (click)=\"confirm()\">\n {{ \"date-field.confirm\" | tediTranslate }}\n </button>\n </tedi-modal-footer>\n</tedi-modal>\n", styles: [".tedi-date-field-modal{--_tedi-modal-body-padding: 0}.tedi-date-field-modal__content{display:flex;align-items:center;justify-content:center}.tedi-date-field-modal--full-width .tedi-date-field-modal__content{align-items:stretch;justify-content:flex-start}\n"] }]
|
|
16219
16138
|
}] });
|
|
16220
16139
|
|
|
16221
16140
|
class DateFieldComponent {
|
|
@@ -16418,6 +16337,8 @@ class DateFieldComponent {
|
|
|
16418
16337
|
modal = input(false, ...(ngDevMode ? [{ debugName: "modal" }] : []));
|
|
16419
16338
|
/** Make the modal fullscreen: `true` always, `false` never, breakpoint name → fullscreen below that breakpoint. Only applies when the calendar actually opens as a modal. */
|
|
16420
16339
|
fullscreen = input(false, ...(ngDevMode ? [{ debugName: "fullscreen" }] : []));
|
|
16340
|
+
/** Stretch the calendar across the modal body, scaling its cells (Calendar `fullWidth`). Only applies in modal mode. */
|
|
16341
|
+
calendarFullWidth = input(false, ...(ngDevMode ? [{ debugName: "calendarFullWidth" }] : []));
|
|
16421
16342
|
/**
|
|
16422
16343
|
* Custom formatter for the input's display string. Overrides the locale-aware
|
|
16423
16344
|
* default. Receives the `DateFieldValue` and returns a string.
|
|
@@ -16889,6 +16810,7 @@ class DateFieldComponent {
|
|
|
16889
16810
|
showOutsideDays: this.showOutsideDays(),
|
|
16890
16811
|
showWeekNumbers: this.showWeekNumbers(),
|
|
16891
16812
|
numberOfMonths: this.numberOfMonthsResolved(),
|
|
16813
|
+
calendarFullWidth: this.calendarFullWidth(),
|
|
16892
16814
|
monthYearSelectType: this.monthYearSelectType(),
|
|
16893
16815
|
required: this.required(),
|
|
16894
16816
|
disabledMatchers: this.resolvedDisabledMatchers(),
|
|
@@ -16910,7 +16832,9 @@ class DateFieldComponent {
|
|
|
16910
16832
|
// month count so a multi-month calendar fits side by side, and add the
|
|
16911
16833
|
// modal's two outer borders so the border-box content leaves room for
|
|
16912
16834
|
// it without a 2px horizontal scroll.
|
|
16913
|
-
maxWidth:
|
|
16835
|
+
maxWidth: this.calendarFullWidth()
|
|
16836
|
+
? undefined
|
|
16837
|
+
: `calc(${this.numberOfMonthsResolved()} * var(--tedi-containers-03) + 2 * var(--tedi-borders-01))`,
|
|
16914
16838
|
});
|
|
16915
16839
|
this.modalRef = ref;
|
|
16916
16840
|
ref.closed.subscribe((result) => {
|
|
@@ -17039,7 +16963,7 @@ class DateFieldComponent {
|
|
|
17039
16963
|
return host.querySelector(".tedi-date-input__input");
|
|
17040
16964
|
}
|
|
17041
16965
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17042
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--invalid": "paintsSurface() && invalid()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-field-surface--disabled": "paintsSurface() && disabled()", "class.tedi-date-field--small": "resolvedSize() === 'small'", "class.tedi-date-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-date-field" }, providers: [
|
|
16966
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, calendarFullWidth: { classPropertyName: "calendarFullWidth", publicName: "calendarFullWidth", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--invalid": "paintsSurface() && invalid()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-field-surface--disabled": "paintsSurface() && disabled()", "class.tedi-date-field--small": "resolvedSize() === 'small'", "class.tedi-date-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-date-field" }, providers: [
|
|
17043
16967
|
{
|
|
17044
16968
|
provide: NG_VALUE_ACCESSOR,
|
|
17045
16969
|
useExisting: forwardRef(() => DateFieldComponent),
|
|
@@ -17054,7 +16978,7 @@ class DateFieldComponent {
|
|
|
17054
16978
|
useFactory: (field) => field.childContext,
|
|
17055
16979
|
deps: [forwardRef(() => DateFieldComponent)],
|
|
17056
16980
|
},
|
|
17057
|
-
], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"inputText()\"\n [ariaDescribedby]=\"describedBy.attribute()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable() && valueEditable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"handleOverlayDetached()\"\n >\n <div\n class=\"tedi-date-field__overlay\"\n role=\"dialog\"\n [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n cdkTrapFocus\n (keydown)=\"handleOverlayKeydown($event)\"\n >\n <tedi-calendar\n #calendar\n [bordered]=\"false\"\n [value]=\"value()\"\n [currentMonth]=\"currentMonth()\"\n [mode]=\"mode()\"\n [selectionLevel]=\"selectionLevel()\"\n [localeCode]=\"localeCode()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [numberOfMonths]=\"numberOfMonthsResolved()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [required]=\"required()\"\n [disabledMatchers]=\"resolvedDisabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [shouldDisableMonth]=\"shouldDisableMonth()\"\n [shouldDisableYear]=\"shouldDisableYear()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [inputDisabled]=\"fieldDisabled()\"\n (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n (select)=\"handleCalendarSelect()\"\n >\n <!--\n Footer projection forwards into the overlay-mounted calendar.\n Modal mode (modal-below-breakpoint) does NOT receive projected\n footers \u2014 the modal opens via ModalService.open() with a data\n hash, which has no projection mechanism. If footer-in-modal is\n ever required, refactor to pass a TemplateRef through the modal's\n data injection.\n -->\n <ng-content select=\"[tediCalendarFooter]\" />\n </tedi-calendar>\n </div>\n </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "name", "ariaDescribedby", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16981
|
+
], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"inputText()\"\n [ariaDescribedby]=\"describedBy.attribute()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable() && valueEditable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"handleOverlayDetached()\"\n >\n <div\n class=\"tedi-date-field__overlay\"\n role=\"dialog\"\n [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n cdkTrapFocus\n (keydown)=\"handleOverlayKeydown($event)\"\n >\n <tedi-calendar\n #calendar\n [bordered]=\"false\"\n [value]=\"value()\"\n [currentMonth]=\"currentMonth()\"\n [mode]=\"mode()\"\n [selectionLevel]=\"selectionLevel()\"\n [localeCode]=\"localeCode()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [numberOfMonths]=\"numberOfMonthsResolved()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [required]=\"required()\"\n [disabledMatchers]=\"resolvedDisabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [shouldDisableMonth]=\"shouldDisableMonth()\"\n [shouldDisableYear]=\"shouldDisableYear()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [inputDisabled]=\"fieldDisabled()\"\n (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n (select)=\"handleCalendarSelect()\"\n >\n <!--\n Footer projection forwards into the overlay-mounted calendar.\n Modal mode (modal-below-breakpoint) does NOT receive projected\n footers \u2014 the modal opens via ModalService.open() with a data\n hash, which has no projection mechanism. If footer-in-modal is\n ever required, refactor to pass a TemplateRef through the modal's\n data injection.\n -->\n <ng-content select=\"[tediCalendarFooter]\" />\n </tedi-calendar>\n </div>\n </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "fullWidth", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "name", "ariaDescribedby", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
17058
16982
|
}
|
|
17059
16983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, decorators: [{
|
|
17060
16984
|
type: Component,
|
|
@@ -17088,7 +17012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
17088
17012
|
"[class.tedi-date-field--small]": "resolvedSize() === 'small'",
|
|
17089
17013
|
"[class.tedi-date-field--large]": "resolvedSize() === 'large'",
|
|
17090
17014
|
}, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"inputText()\"\n [ariaDescribedby]=\"describedBy.attribute()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable() && valueEditable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"handleOverlayDetached()\"\n >\n <div\n class=\"tedi-date-field__overlay\"\n role=\"dialog\"\n [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n cdkTrapFocus\n (keydown)=\"handleOverlayKeydown($event)\"\n >\n <tedi-calendar\n #calendar\n [bordered]=\"false\"\n [value]=\"value()\"\n [currentMonth]=\"currentMonth()\"\n [mode]=\"mode()\"\n [selectionLevel]=\"selectionLevel()\"\n [localeCode]=\"localeCode()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [numberOfMonths]=\"numberOfMonthsResolved()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [required]=\"required()\"\n [disabledMatchers]=\"resolvedDisabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [shouldDisableMonth]=\"shouldDisableMonth()\"\n [shouldDisableYear]=\"shouldDisableYear()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [inputDisabled]=\"fieldDisabled()\"\n (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n (select)=\"handleCalendarSelect()\"\n >\n <!--\n Footer projection forwards into the overlay-mounted calendar.\n Modal mode (modal-below-breakpoint) does NOT receive projected\n footers \u2014 the modal opens via ModalService.open() with a data\n hash, which has no projection mechanism. If footer-in-modal is\n ever required, refactor to pass a TemplateRef through the modal's\n data injection.\n -->\n <ng-content select=\"[tediCalendarFooter]\" />\n </tedi-calendar>\n </div>\n </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"] }]
|
|
17091
|
-
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
|
|
17015
|
+
}], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], calendarFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarFullWidth", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
|
|
17092
17016
|
|
|
17093
17017
|
class DatePickerHeaderComponent {
|
|
17094
17018
|
/** Unique ID for ARIA controls */
|