@tedi-design-system/angular 6.2.0-rc.16 → 6.2.0-rc.18

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -3849,7 +3849,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__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);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;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);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;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-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\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: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__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);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;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);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;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-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\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: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -3872,7 +3872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true,
                         },
-                    ], template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__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);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;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);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;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-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"] }]
+                    ], template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__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);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;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);color:var(--general-text-tertiary);border-right:var(--borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;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-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"] }]
         }], ctorParameters: () => [] });
 
 class FeedbackTextComponent {
@@ -4444,7 +4444,7 @@ class TextGroupComponent {
         });
     });
     classes = computed(() => {
-        const classList = [`tedi-text-group--${this.breakpointInputs().type}`];
+        const classList = ['tedi-text-group', `tedi-text-group--${this.breakpointInputs().type}`];
         return classList.join(" ");
     });
     ngAfterContentChecked() {
@@ -4457,22 +4457,22 @@ class TextGroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;flex-shrink:0;width:var(--_label-width)}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-text-group", imports: [
                         LabelComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;flex-shrink:0;width:var(--_label-width)}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
         }] });
 
 class TextGroupValueComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextGroupValueComponent, isStandalone: true, selector: "tedi-text-group-value", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;flex-shrink:0;width:var(--_label-width)}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextGroupValueComponent, isStandalone: true, selector: "tedi-text-group-value", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}tedi-text-group-label{display:flex;flex-shrink:0;width:var(--_label-width)}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
+            args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
         }] });
 
 class CarouselSlideDirective {
@@ -5446,13 +5446,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class HeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n    <ng-content></ng-content>\n</div>", styles: [".tedi-header{display:flex}.tedi-header__main{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--layout-header-min-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left);background:var(--header-background);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-header__link-button{display:inline-flex;align-items:center;padding:0;font-size:var(--body-regular-size);background-color:transparent;border:0}.tedi-header__link-button:hover span{text-decoration:underline!important}.tedi-header__link-button span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n    <ng-content></ng-content>\n</div>", styles: [".tedi-header{display:flex}.tedi-header__main{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left);background:var(--header-background);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-header__link-button{display:inline-flex;align-items:center;padding:0;font-size:var(--body-regular-size);background-color:transparent;border:0}.tedi-header__link-button:hover span{text-decoration:underline!important}.tedi-header__link-button span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: "header[tedi-header]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         "class": "tedi-header"
-                    }, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n    <ng-content></ng-content>\n</div>", styles: [".tedi-header{display:flex}.tedi-header__main{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--layout-header-min-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left);background:var(--header-background);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-header__link-button{display:inline-flex;align-items:center;padding:0;font-size:var(--body-regular-size);background-color:transparent;border:0}.tedi-header__link-button:hover span{text-decoration:underline!important}.tedi-header__link-button span{text-decoration:none!important}\n"] }]
+                    }, template: "<ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n<div class=\"tedi-header__main\">\n    <ng-content></ng-content>\n</div>", styles: [".tedi-header{display:flex}.tedi-header__main{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--layout-header-height);padding:var(--layout-header-padding-y) var(--layout-header-padding-right) var(--layout-header-padding-y) var(--layout-header-padding-left);background:var(--header-background);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-header__link-button{display:inline-flex;align-items:center;padding:0;font-size:var(--body-regular-size);background-color:transparent;border:0}.tedi-header__link-button:hover span{text-decoration:underline!important}.tedi-header__link-button span{text-decoration:none!important}\n"] }]
         }] });
 
 class HeaderActionsComponent {
@@ -5654,7 +5654,7 @@ class HeaderProfileComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showDropdown: { classPropertyName: "showDropdown", publicName: "showDropdown", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showDropdown(); as dropdown) {\n  <ng-container *hideAt=\"dropdown\">\n    <button\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [class]=\"buttonClass()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"\n        breakpointService.isBelowBreakpoint('sm')() || !name()\n          ? translationService.track('header.profile')()\n          : null\n      \"\n      (click)=\"handleModalOpen()\"\n    >\n      @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n        <tedi-icon\n          [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n          color=\"brand\"\n        />\n        {{ \"header.profile\" | tediTranslate }}\n      } @else {\n        <tedi-icon\n          name=\"account_circle\"\n          color=\"brand\"\n          [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n        />\n        {{ name() }}\n        @if (name()) {\n          <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n        }\n      }\n    </button>\n    <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n  </ng-container>\n\n  <ng-container *showAt=\"dropdown\">\n    <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n      <button\n        tedi-button\n        tedi-popover-trigger\n        [attr.data-open]=\"modalOpen()\"\n        [class]=\"buttonClass()\"\n        [variant]=\"buttonVariant()\"\n        (click)=\"handleModalOpen()\"\n      >\n        @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n          <tedi-icon\n            [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n            color=\"brand\"\n          />\n          {{ \"header.profile\" | tediTranslate }}\n        } @else {\n          <tedi-icon\n            name=\"account_circle\"\n            color=\"brand\"\n            [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n          />\n          {{ name() }}\n          @if (name()) {\n            <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n          }\n        }\n      </button>\n      <tedi-popover-content maxWidth=\"small\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n} @else {\n  <button\n    tedi-button\n    [attr.data-open]=\"modalOpen()\"\n    [class]=\"buttonClass()\"\n    [variant]=\"buttonVariant()\"\n    (click)=\"handleModalOpen()\"\n  >\n    @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n      <tedi-icon\n        [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n        color=\"brand\"\n      />\n      {{ \"header.profile\" | tediTranslate }}\n    } @else {\n      <tedi-icon\n        name=\"account_circle\"\n        color=\"brand\"\n        [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n      />\n      {{ name() }}\n      @if (name()) {\n        <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n      }\n    }\n  </button>\n  <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div class=\"tedi-header-profile__modal\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-min-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-min-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-min-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:calc(100dvh - var(--layout-header-min-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { 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: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showDropdown: { classPropertyName: "showDropdown", publicName: "showDropdown", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showDropdown(); as dropdown) {\n  <ng-container *hideAt=\"dropdown\">\n    <button\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [class]=\"buttonClass()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"\n        breakpointService.isBelowBreakpoint('sm')() || !name()\n          ? translationService.track('header.profile')()\n          : null\n      \"\n      (click)=\"handleModalOpen()\"\n    >\n      @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n        <tedi-icon\n          [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n          color=\"brand\"\n        />\n        {{ \"header.profile\" | tediTranslate }}\n      } @else {\n        <tedi-icon\n          name=\"account_circle\"\n          color=\"brand\"\n          [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n        />\n        {{ name() }}\n        @if (name()) {\n          <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n        }\n      }\n    </button>\n    <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n  </ng-container>\n\n  <ng-container *showAt=\"dropdown\">\n    <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n      <button\n        tedi-button\n        tedi-popover-trigger\n        [attr.data-open]=\"modalOpen()\"\n        [class]=\"buttonClass()\"\n        [variant]=\"buttonVariant()\"\n        (click)=\"handleModalOpen()\"\n      >\n        @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n          <tedi-icon\n            [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n            color=\"brand\"\n          />\n          {{ \"header.profile\" | tediTranslate }}\n        } @else {\n          <tedi-icon\n            name=\"account_circle\"\n            color=\"brand\"\n            [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n          />\n          {{ name() }}\n          @if (name()) {\n            <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n          }\n        }\n      </button>\n      <tedi-popover-content maxWidth=\"small\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n} @else {\n  <button\n    tedi-button\n    [attr.data-open]=\"modalOpen()\"\n    [class]=\"buttonClass()\"\n    [variant]=\"buttonVariant()\"\n    (click)=\"handleModalOpen()\"\n  >\n    @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n      <tedi-icon\n        [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n        color=\"brand\"\n      />\n      {{ \"header.profile\" | tediTranslate }}\n    } @else {\n      <tedi-icon\n        name=\"account_circle\"\n        color=\"brand\"\n        [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n      />\n      {{ name() }}\n      @if (name()) {\n        <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n      }\n    }\n  </button>\n  <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div class=\"tedi-header-profile__modal\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:calc(100dvh - var(--layout-header-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { 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: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderProfileComponent, decorators: [{
             type: Component,
@@ -5668,7 +5668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         HideAtDirective,
                         NgTemplateOutlet,
                         TediTranslationPipe,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showDropdown(); as dropdown) {\n  <ng-container *hideAt=\"dropdown\">\n    <button\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [class]=\"buttonClass()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"\n        breakpointService.isBelowBreakpoint('sm')() || !name()\n          ? translationService.track('header.profile')()\n          : null\n      \"\n      (click)=\"handleModalOpen()\"\n    >\n      @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n        <tedi-icon\n          [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n          color=\"brand\"\n        />\n        {{ \"header.profile\" | tediTranslate }}\n      } @else {\n        <tedi-icon\n          name=\"account_circle\"\n          color=\"brand\"\n          [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n        />\n        {{ name() }}\n        @if (name()) {\n          <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n        }\n      }\n    </button>\n    <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n  </ng-container>\n\n  <ng-container *showAt=\"dropdown\">\n    <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n      <button\n        tedi-button\n        tedi-popover-trigger\n        [attr.data-open]=\"modalOpen()\"\n        [class]=\"buttonClass()\"\n        [variant]=\"buttonVariant()\"\n        (click)=\"handleModalOpen()\"\n      >\n        @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n          <tedi-icon\n            [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n            color=\"brand\"\n          />\n          {{ \"header.profile\" | tediTranslate }}\n        } @else {\n          <tedi-icon\n            name=\"account_circle\"\n            color=\"brand\"\n            [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n          />\n          {{ name() }}\n          @if (name()) {\n            <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n          }\n        }\n      </button>\n      <tedi-popover-content maxWidth=\"small\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n} @else {\n  <button\n    tedi-button\n    [attr.data-open]=\"modalOpen()\"\n    [class]=\"buttonClass()\"\n    [variant]=\"buttonVariant()\"\n    (click)=\"handleModalOpen()\"\n  >\n    @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n      <tedi-icon\n        [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n        color=\"brand\"\n      />\n      {{ \"header.profile\" | tediTranslate }}\n    } @else {\n      <tedi-icon\n        name=\"account_circle\"\n        color=\"brand\"\n        [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n      />\n      {{ name() }}\n      @if (name()) {\n        <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n      }\n    }\n  </button>\n  <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div class=\"tedi-header-profile__modal\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-min-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-min-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-min-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:calc(100dvh - var(--layout-header-min-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showDropdown(); as dropdown) {\n  <ng-container *hideAt=\"dropdown\">\n    <button\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [class]=\"buttonClass()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"\n        breakpointService.isBelowBreakpoint('sm')() || !name()\n          ? translationService.track('header.profile')()\n          : null\n      \"\n      (click)=\"handleModalOpen()\"\n    >\n      @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n        <tedi-icon\n          [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n          color=\"brand\"\n        />\n        {{ \"header.profile\" | tediTranslate }}\n      } @else {\n        <tedi-icon\n          name=\"account_circle\"\n          color=\"brand\"\n          [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n        />\n        {{ name() }}\n        @if (name()) {\n          <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n        }\n      }\n    </button>\n    <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n  </ng-container>\n\n  <ng-container *showAt=\"dropdown\">\n    <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\" appendTo=\"\">\n      <button\n        tedi-button\n        tedi-popover-trigger\n        [attr.data-open]=\"modalOpen()\"\n        [class]=\"buttonClass()\"\n        [variant]=\"buttonVariant()\"\n        (click)=\"handleModalOpen()\"\n      >\n        @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n          <tedi-icon\n            [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n            color=\"brand\"\n          />\n          {{ \"header.profile\" | tediTranslate }}\n        } @else {\n          <tedi-icon\n            name=\"account_circle\"\n            color=\"brand\"\n            [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n          />\n          {{ name() }}\n          @if (name()) {\n            <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n          }\n        }\n      </button>\n      <tedi-popover-content maxWidth=\"small\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n} @else {\n  <button\n    tedi-button\n    [attr.data-open]=\"modalOpen()\"\n    [class]=\"buttonClass()\"\n    [variant]=\"buttonVariant()\"\n    (click)=\"handleModalOpen()\"\n  >\n    @if (breakpointService.isBelowBreakpoint(\"sm\")()) {\n      <tedi-icon\n        [name]=\"modalOpen() ? 'close' : 'account_circle'\"\n        color=\"brand\"\n      />\n      {{ \"header.profile\" | tediTranslate }}\n    } @else {\n      <tedi-icon\n        name=\"account_circle\"\n        color=\"brand\"\n        [style]=\"{ 'font-size': name() ? '18px' : '36px' }\"\n      />\n      {{ name() }}\n      @if (name()) {\n        <tedi-icon name=\"expand_more\" style=\"font-size: 18px\" />\n      }\n    }\n  </button>\n  <ng-container *ngTemplateOutlet=\"modal\"></ng-container>\n}\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div class=\"tedi-header-profile__modal\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{align-content:center}tedi-header-profile .tedi-header-profile--mobile{flex-direction:column;gap:0;align-items:center;justify-content:center;min-width:var(--layout-header-mobile-button-size);min-height:var(--layout-header-mobile-button-size);padding:var(--layout-grid-gutters-08);font-size:12px;line-height:16px;border:0;border-radius:0}tedi-header-profile .tedi-header-profile--mobile:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}tedi-header-profile .tedi-header-profile--mobile tedi-icon{font-size:var(--icon-05)}tedi-header-profile .tedi-header-profile--mobile[data-open=true]{background:var(--button-main-neutral-icon-only-background-active)}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--layout-header-height);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;min-height:calc(100dvh - var(--layout-header-height));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--layout-header-height);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;min-height:calc(100dvh - var(--layout-header-height));max-height:100%;overflow-y:auto;background:var(--general-surface-primary)}tedi-header-profile .tedi-header-profile__modal>*{padding:var(--layout-header-modal-item-padding)}tedi-header-profile .tedi-header-profile__modal>*:not(:last-child){border-bottom:var(--borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal>*:has(.tedi-header-role__head){border-bottom:var(--borders-04) solid var(--general-border-brand)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile{flex-direction:row;gap:var(--link-inner-spacing-x);justify-content:flex-start;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal .tedi-header-logout--mobile tedi-icon{font-size:inherit!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class HeaderRoleComponent {