@tedi-design-system/angular 7.0.0-rc.5 → 7.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7074,7 +7074,7 @@ class CalendarHeaderComponent {
|
|
|
7074
7074
|
return true;
|
|
7075
7075
|
}
|
|
7076
7076
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7077
|
-
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: "<nav\n class=\"tedi-calendar-header\"\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</nav>\n", styles: [".tedi-calendar-header{display:flex;gap:var(--layout-grid-gutters-08);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", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7077
|
+
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: "<nav\n class=\"tedi-calendar-header\"\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</nav>\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", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7078
7078
|
}
|
|
7079
7079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
|
|
7080
7080
|
type: Component,
|
|
@@ -7085,7 +7085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
7085
7085
|
DropdownTriggerDirective,
|
|
7086
7086
|
DropdownContentComponent,
|
|
7087
7087
|
DropdownItemComponent,
|
|
7088
|
-
], template: "<nav\n class=\"tedi-calendar-header\"\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</nav>\n", styles: [".tedi-calendar-header{display:flex;
|
|
7088
|
+
], template: "<nav\n class=\"tedi-calendar-header\"\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</nav>\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"] }]
|
|
7089
7089
|
}], 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"] }] } });
|
|
7090
7090
|
|
|
7091
7091
|
const YEAR_PAGE_SIZE = 12;
|
|
@@ -9191,6 +9191,15 @@ class PopoverComponent {
|
|
|
9191
9191
|
if (!target || triggerEl.contains(target) || containerEl?.contains(target)) {
|
|
9192
9192
|
return;
|
|
9193
9193
|
}
|
|
9194
|
+
// Nested overlays opened from inside the popover (e.g. a month/year
|
|
9195
|
+
// dropdown in the date-picker header) render in their own pane within the
|
|
9196
|
+
// shared CDK overlay container, not inside this popover's overlayElement.
|
|
9197
|
+
// Interacting with — or focusing into — such a child overlay must not
|
|
9198
|
+
// dismiss the popover, so ignore events originating anywhere inside the
|
|
9199
|
+
// overlay container.
|
|
9200
|
+
if (target.closest(".cdk-overlay-container")) {
|
|
9201
|
+
return;
|
|
9202
|
+
}
|
|
9194
9203
|
this.hidePopover(true);
|
|
9195
9204
|
}
|
|
9196
9205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|