@tedi-design-system/angular 10.0.0-rc.3 → 10.0.0-rc.5
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
|
}] } });
|
|
@@ -13844,6 +13851,9 @@ class TediTableComponent {
|
|
|
13844
13851
|
this.table.resetColumnFilters(true);
|
|
13845
13852
|
}
|
|
13846
13853
|
handleRowClick(event, row) {
|
|
13854
|
+
// Clicks on rows that are neither interactive nor expand on click are ignored.
|
|
13855
|
+
if (!this.interactive() && !this.rowExpandsOnClick(row))
|
|
13856
|
+
return;
|
|
13847
13857
|
// Clicks that land on an interactive control inside a cell (checkbox,
|
|
13848
13858
|
// link, button, form field, …) must not also activate the row or toggle
|
|
13849
13859
|
// its expansion — so consumers don't need to add `stopPropagation` by hand.
|
|
@@ -14908,7 +14918,7 @@ class TediTableComponent {
|
|
|
14908
14918
|
useFactory: (component) => component.contextValue,
|
|
14909
14919
|
deps: [TediTableComponent],
|
|
14910
14920
|
},
|
|
14911
|
-
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose", "padding"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14921
|
+
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"handleRowClick($event, row)\"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose", "padding"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14912
14922
|
}
|
|
14913
14923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
|
|
14914
14924
|
type: Component,
|
|
@@ -14942,7 +14952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
14942
14952
|
useFactory: (component) => component.contextValue,
|
|
14943
14953
|
deps: [TediTableComponent],
|
|
14944
14954
|
},
|
|
14945
|
-
], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}\n"] }]
|
|
14955
|
+
], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"handleRowClick($event, row)\"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <!-- No region role: one landmark per open row would pile up\n (axe landmark-unique). The toggle's aria-controls points here. -->\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}\n"] }]
|
|
14946
14956
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyLastColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyLastColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupDividers", required: false }] }], controlColumnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlColumnOrder", required: false }] }], filterModalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalBreakpoint", required: false }] }], filterModalFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalFullscreen", required: false }] }], filterPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopoverWidth", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ["scrollContainer", { isSignal: true }] }], tableElement: [{ type: i0.ViewChild, args: ["tableElement", { isSignal: true }] }] } });
|
|
14947
14957
|
|
|
14948
14958
|
class TediTableToolbarComponent {
|
|
@@ -16115,51 +16125,7 @@ class DateFieldModalComponent {
|
|
|
16115
16125
|
this.confirm();
|
|
16116
16126
|
}
|
|
16117
16127
|
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 });
|
|
16128
|
+
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
16129
|
}
|
|
16164
16130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldModalComponent, decorators: [{
|
|
16165
16131
|
type: Component,
|
|
@@ -16171,51 +16137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
16171
16137
|
ModalFooterComponent,
|
|
16172
16138
|
ModalHeaderComponent,
|
|
16173
16139
|
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"] }]
|
|
16140
|
+
], 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
16141
|
}] });
|
|
16220
16142
|
|
|
16221
16143
|
class DateFieldComponent {
|
|
@@ -16418,6 +16340,8 @@ class DateFieldComponent {
|
|
|
16418
16340
|
modal = input(false, ...(ngDevMode ? [{ debugName: "modal" }] : []));
|
|
16419
16341
|
/** 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
16342
|
fullscreen = input(false, ...(ngDevMode ? [{ debugName: "fullscreen" }] : []));
|
|
16343
|
+
/** Stretch the calendar across the modal body, scaling its cells (Calendar `fullWidth`). Only applies in modal mode. */
|
|
16344
|
+
calendarFullWidth = input(false, ...(ngDevMode ? [{ debugName: "calendarFullWidth" }] : []));
|
|
16421
16345
|
/**
|
|
16422
16346
|
* Custom formatter for the input's display string. Overrides the locale-aware
|
|
16423
16347
|
* default. Receives the `DateFieldValue` and returns a string.
|
|
@@ -16889,6 +16813,7 @@ class DateFieldComponent {
|
|
|
16889
16813
|
showOutsideDays: this.showOutsideDays(),
|
|
16890
16814
|
showWeekNumbers: this.showWeekNumbers(),
|
|
16891
16815
|
numberOfMonths: this.numberOfMonthsResolved(),
|
|
16816
|
+
calendarFullWidth: this.calendarFullWidth(),
|
|
16892
16817
|
monthYearSelectType: this.monthYearSelectType(),
|
|
16893
16818
|
required: this.required(),
|
|
16894
16819
|
disabledMatchers: this.resolvedDisabledMatchers(),
|
|
@@ -16910,7 +16835,9 @@ class DateFieldComponent {
|
|
|
16910
16835
|
// month count so a multi-month calendar fits side by side, and add the
|
|
16911
16836
|
// modal's two outer borders so the border-box content leaves room for
|
|
16912
16837
|
// it without a 2px horizontal scroll.
|
|
16913
|
-
maxWidth:
|
|
16838
|
+
maxWidth: this.calendarFullWidth()
|
|
16839
|
+
? undefined
|
|
16840
|
+
: `calc(${this.numberOfMonthsResolved()} * var(--tedi-containers-03) + 2 * var(--tedi-borders-01))`,
|
|
16914
16841
|
});
|
|
16915
16842
|
this.modalRef = ref;
|
|
16916
16843
|
ref.closed.subscribe((result) => {
|
|
@@ -17039,7 +16966,7 @@ class DateFieldComponent {
|
|
|
17039
16966
|
return host.querySelector(".tedi-date-input__input");
|
|
17040
16967
|
}
|
|
17041
16968
|
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: [
|
|
16969
|
+
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
16970
|
{
|
|
17044
16971
|
provide: NG_VALUE_ACCESSOR,
|
|
17045
16972
|
useExisting: forwardRef(() => DateFieldComponent),
|
|
@@ -17054,7 +16981,7 @@ class DateFieldComponent {
|
|
|
17054
16981
|
useFactory: (field) => field.childContext,
|
|
17055
16982
|
deps: [forwardRef(() => DateFieldComponent)],
|
|
17056
16983
|
},
|
|
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 });
|
|
16984
|
+
], 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
16985
|
}
|
|
17059
16986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, decorators: [{
|
|
17060
16987
|
type: Component,
|
|
@@ -17088,7 +17015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
17088
17015
|
"[class.tedi-date-field--small]": "resolvedSize() === 'small'",
|
|
17089
17016
|
"[class.tedi-date-field--large]": "resolvedSize() === 'large'",
|
|
17090
17017
|
}, 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 }] }] } });
|
|
17018
|
+
}], 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
17019
|
|
|
17093
17020
|
class DatePickerHeaderComponent {
|
|
17094
17021
|
/** Unique ID for ARIA controls */
|