@tedi-design-system/angular 7.0.1 → 7.1.0-rc.2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, viewChild, DestroyRef, NgZone, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, ContentChild, HostAttributeToken, HostBinding, runInInjectionContext, ContentChildren, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, viewChild, DestroyRef, NgZone, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, ContentChild, HostAttributeToken, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, makeEnvironmentProviders } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
@@ -1697,9 +1697,9 @@ const translationsMap = {
     "header.select-lang": {
         description: "Label for HeaderLanguage label and Modal Heading",
         components: ["HeaderLanguage"],
-        et: "Keel:",
-        en: "Language:",
-        ru: "Язык:",
+        et: "Keel",
+        en: "Language",
+        ru: "Язык",
     },
     "header.role-label": {
         description: "Label for Role selection",
@@ -3897,7 +3897,7 @@ class InfoButtonComponent {
     color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
     _defaultLabel = this.translationService.track('info-button.label');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InfoButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: InfoButtonComponent, isStandalone: true, selector: "button[tedi-info-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "class.tedi-info-button--inverted": "color() === 'inverted'", "attr.aria-label": "ariaLabel() || _defaultLabel()" }, classAttribute: "tedi-info-button" }, ngImport: i0, template: `<tedi-icon name="info" [size]="18" />`, isInline: true, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:var(--tedi-borders-01);background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: InfoButtonComponent, isStandalone: true, selector: "button[tedi-info-button]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "class.tedi-info-button--inverted": "color() === 'inverted'", "attr.aria-label": "ariaLabel() || _defaultLabel()" }, classAttribute: "tedi-info-button" }, ngImport: i0, template: `<tedi-icon name="info" [size]="18" />`, isInline: true, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:calc(-1 * var(--tedi-borders-02));background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: InfoButtonComponent, decorators: [{
             type: Component,
@@ -3906,7 +3906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "class": "tedi-info-button",
                         "[class.tedi-info-button--inverted]": "color() === 'inverted'",
                         "[attr.aria-label]": "ariaLabel() || _defaultLabel()"
-                    }, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:var(--tedi-borders-01);background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\n"] }]
+                    }, styles: [".tedi-info-button{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--button-xs-icon-size);vertical-align:bottom;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-info-button:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-info-button:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-info-button:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--button-main-primary-border-focus);outline-offset:calc(-1 * var(--tedi-borders-02));background-color:var(--button-main-neutral-background-focus);border-color:var(--button-main-neutral-border-default)}.tedi-info-button tedi-icon{color:inherit}.tedi-info-button--inverted{color:var(--button-main-neutral-inverted-text-default)}.tedi-info-button--inverted:hover{color:var(--button-main-neutral-inverted-text-hover);background:var(--button-main-neutral-inverted-icon-only-background-hover)}.tedi-info-button--inverted:active{color:var(--button-main-neutral-inverted-text-active);background:var(--button-main-neutral-inverted-icon-only-background-active)}.tedi-info-button--inverted:focus-visible{color:var(--button-main-neutral-inverted-text-focus);outline:none;background-color:var(--button-main-neutral-inverted-background-focus);box-shadow:0 0 0 var(--tedi-borders-02) var(--tedi-neutral-100)}\n"] }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class CollapseButtonComponent {
@@ -5427,7 +5427,16 @@ class TooltipTriggerComponent {
             return;
         }
         const interactive = this.resolveInteractiveElement(firstChild);
-        this.renderer.addClass(interactive, "tedi-tooltip-trigger--focus");
+        // The `--focus` class is a fallback focus ring for triggers that have no
+        // focus styling of their own. Natively focusable elements (a real
+        // `<button>`/`<a href>`, e.g. tedi-info-button or tedi-button) already own
+        // their `:focus-visible` styles, and the tooltip's generic outline has
+        // higher specificity — adding it would override the component's own focus
+        // outline. Only synthesise a focus ring for elements that aren't already
+        // focusable in their own right.
+        if (!this.isFocusable(interactive)) {
+            this.renderer.addClass(interactive, "tedi-tooltip-trigger--focus");
+        }
         if (!interactive.getAttribute("tabindex")) {
             this.renderer.setAttribute(interactive, "tabindex", "0");
         }
@@ -5451,11 +5460,13 @@ class TooltipTriggerComponent {
         return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", host: { listeners: { "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", host: { listeners: { "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()" }, properties: { "class.tedi-tooltip-trigger--clickable": "tooltip.openWith() === 'click'" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tedi-tooltip-trigger", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkOverlayOrigin], styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
+            args: [{ selector: "tedi-tooltip-trigger", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkOverlayOrigin], host: {
+                        "[class.tedi-tooltip-trigger--clickable]": "tooltip.openWith() === 'click'",
+                    }, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onTouchStart: [{
                 type: HostListener,
                 args: ["touchstart"]
@@ -5504,14 +5515,14 @@ class TooltipContentComponent {
         this.tooltip.isContentHovered.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TooltipContentComponent, isStandalone: true, selector: "tedi-tooltip-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TooltipContentComponent, isStandalone: true, selector: "tedi-tooltip-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipContentComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-tooltip-content", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class]": "classes()",
                         "aria-hidden": "true"
-                    }, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
+                    }, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
         }], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], onMouseEnter: [{
                 type: HostListener,
                 args: ["mouseenter"]
@@ -5618,11 +5629,11 @@ class TooltipComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\" aria-hidden=\"true\">\n    <div\n      class=\"tedi-tooltip__arrow\"\n      [style.left.px]=\"arrowLeft()\"\n      [style.top.px]=\"arrowTop()\"\n    ></div>\n    <ng-content select=\"tedi-tooltip-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\" aria-hidden=\"true\">\n    <div\n      class=\"tedi-tooltip__arrow\"\n      [style.left.px]=\"arrowLeft()\"\n      [style.top.px]=\"arrowTop()\"\n    ></div>\n    <ng-content select=\"tedi-tooltip-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-tooltip", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\" aria-hidden=\"true\">\n    <div\n      class=\"tedi-tooltip__arrow\"\n      [style.left.px]=\"arrowLeft()\"\n      [style.top.px]=\"arrowTop()\"\n    ></div>\n    <ng-content select=\"tedi-tooltip-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
+            args: [{ standalone: true, selector: "tedi-tooltip", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\" aria-hidden=\"true\">\n    <div\n      class=\"tedi-tooltip__arrow\"\n      [style.left.px]=\"arrowLeft()\"\n      [style.top.px]=\"arrowTop()\"\n    ></div>\n    <ng-content select=\"tedi-tooltip-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], openWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "openWith", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], tooltipTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipTriggerComponent), { isSignal: true }] }], tooltipContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipContentComponent), { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
@@ -8929,13 +8940,13 @@ class PopoverContentComponent {
         this.popover.hidePopover(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (title() && showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n    <button tedi-closing-button (click)=\"handleClose()\"></button>\n  </div>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n  </div>\n} @else if (title()) {\n  <h4 [id]=\"titleId\">{{ title() }}</h4>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (title() && showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n    <button tedi-closing-button (click)=\"handleClose()\"></button>\n  </div>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n  </div>\n} @else if (title()) {\n  <h4 [id]=\"titleId\">{{ title() }}</h4>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-popover-content", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ClosingButtonComponent], host: {
                         "[class]": "classes()",
-                    }, template: "@if (title() && showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n    <button tedi-closing-button (click)=\"handleClose()\"></button>\n  </div>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n  </div>\n} @else if (title()) {\n  <h4 [id]=\"titleId\">{{ title() }}</h4>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
+                    }, template: "@if (title() && showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n    <button tedi-closing-button (click)=\"handleClose()\"></button>\n  </div>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n  </div>\n} @else if (title()) {\n  <h4 [id]=\"titleId\">{{ title() }}</h4>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
         }], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }] } });
 
 let popoverIdCounter = 0;
@@ -9203,13 +9214,13 @@ class PopoverComponent {
         this.hidePopover(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-popover" }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div\n    [class]=\"panelClasses()\"\n    [id]=\"containerId()\"\n    [attr.data-placement]=\"currentPlacement()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n  >\n    @if (withArrow()) {\n      <div\n        class=\"tedi-popover__arrow\"\n        [style.left.px]=\"arrowLeft()\"\n        [style.top.px]=\"arrowTop()\"\n      ></div>\n    }\n    <ng-content select=\"tedi-popover-content\" />\n  </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-popover" }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div\n    [class]=\"panelClasses()\"\n    [id]=\"containerId()\"\n    [attr.data-placement]=\"currentPlacement()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n  >\n    @if (withArrow()) {\n      <div\n        class=\"tedi-popover__arrow\"\n        [style.left.px]=\"arrowLeft()\"\n        [style.top.px]=\"arrowTop()\"\n      ></div>\n    }\n    <ng-content select=\"tedi-popover-content\" />\n  </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-popover", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "tedi-popover",
-                    }, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div\n    [class]=\"panelClasses()\"\n    [id]=\"containerId()\"\n    [attr.data-placement]=\"currentPlacement()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n  >\n    @if (withArrow()) {\n      <div\n        class=\"tedi-popover__arrow\"\n        [style.left.px]=\"arrowLeft()\"\n        [style.top.px]=\"arrowTop()\"\n      ></div>\n    }\n    <ng-content select=\"tedi-popover-content\" />\n  </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
+                    }, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div\n    [class]=\"panelClasses()\"\n    [id]=\"containerId()\"\n    [attr.data-placement]=\"currentPlacement()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n  >\n    @if (withArrow()) {\n      <div\n        class=\"tedi-popover__arrow\"\n        [style.left.px]=\"arrowLeft()\"\n        [style.top.px]=\"arrowTop()\"\n      ></div>\n    }\n    <ng-content select=\"tedi-popover-content\" />\n  </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(100% 0,100% 100%,0 100%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-lg));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-lg));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-lg));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-lg));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], withBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBorder", required: false }] }], withArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "withArrow", required: false }] }], lockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockScroll", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], popoverTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], popoverContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverContentComponent), { isSignal: true }] }] } });
 
 class DatePickerHeaderComponent {
@@ -16880,13 +16891,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
 class HeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<div class=\"tedi-header__main\">\n  <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n  <div class=\"tedi-header__main--content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-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)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: HeaderComponent, isStandalone: true, selector: "header[tedi-header]", host: { classAttribute: "tedi-header" }, ngImport: i0, template: "<ng-content select=\"tedi-header-top\"></ng-content>\n<div class=\"tedi-header__main\">\n  <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n  <div class=\"tedi-header__main--content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-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)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", 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: "<div class=\"tedi-header__main\">\n  <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n  <div class=\"tedi-header__main--content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-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)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"] }]
+                    }, template: "<ng-content select=\"tedi-header-top\"></ng-content>\n<div class=\"tedi-header__main\">\n  <ng-content select=\"button[tedi-sidenav-toggle]\"></ng-content>\n  <div class=\"tedi-header__main--content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"tedi-header-bottom\"></ng-content>\n", styles: [".tedi-header{display:block;box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-header__main{display:flex;min-height:var(--layout-header-height);overflow:auto;background:var(--header-background)}.tedi-header__main--content{display:flex;gap:var(--layout-header-items-right-gutter-x);align-items:center;justify-content:space-between;width:100%;min-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)}.tedi-header__link-button.tedi-link{display:inline-flex;gap:var(--link-inner-spacing-x);align-items:center;padding:0;font-size:var(--body-regular-size);white-space:nowrap;background-color:transparent;border:0}.tedi-header__link-button.tedi-link,.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]),.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-default)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-hover)}.tedi-header__link-button.tedi-link:hover:not(:disabled,[aria-disabled=true]) span{text-decoration:underline!important}.tedi-header__link-button.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-dropdown-active)}.tedi-header__link-button.tedi-link:focus-visible:not(:disabled){color:var(--header-dropdown-focus)}.tedi-header__link-button.tedi-link span{text-decoration:none!important}\n"] }]
         }] });
 
 class HeaderActionsComponent {
@@ -16928,6 +16939,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, styles: [".tedi-header-bottom{display:block;padding:var(--layout-grid-gutters-12) var(--layout-page-spacing-x);background:var(--general-surface-primary);border-top:var(--tedi-borders-01) solid var(--general-border-primary);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}@media(min-width:48rem){.tedi-header-bottom{display:none}}\n"] }]
         }] });
 
+/**
+ * Maps a `HeaderAlignment` value to the global `justify-content-*` utility class,
+ * so header components reuse the shared utilities instead of redefining the same
+ * `justify-content` modifiers.
+ */
+const headerAlignmentUtility = {
+    "flex-start": "justify-content-start",
+    center: "justify-content-center",
+    "flex-end": "justify-content-end",
+    "space-between": "justify-content-between",
+    "space-around": "justify-content-around",
+    "space-evenly": "justify-content-evenly",
+};
+
 class HeaderContentComponent {
     /**
      * Controls the horizontal alignment of the projected content (`justify-content`).
@@ -16936,15 +16961,15 @@ class HeaderContentComponent {
      * @default "center"
      */
     alignment = input("center", ...(ngDevMode ? [{ debugName: "alignment" }] : []));
-    classes = computed(() => `tedi-header-content tedi-header-content--${this.alignment()}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    classes = computed(() => `tedi-header-content ${headerAlignmentUtility[this.alignment()]}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: HeaderContentComponent, isStandalone: true, selector: "tedi-header-content", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-header-content{display:flex;flex:1 0 0;gap:var(--layout-header-items-center-gutter-x);align-items:center}.tedi-header-content--flex-start{justify-content:flex-start}.tedi-header-content--center{justify-content:center}.tedi-header-content--space-between{justify-content:space-between}.tedi-header-content a,.tedi-header-content .tedi-link{color:var(--header-link-default)}.tedi-header-content a:hover:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-link-hover)}.tedi-header-content a:active:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-link-active)}.tedi-header-content a:focus-visible:not(:disabled),.tedi-header-content .tedi-link:focus-visible:not(:disabled){outline:var(--tedi-borders-02) solid var(--header-link-focus);outline-offset:var(--tedi-borders-01)}.tedi-header-content>*{display:flex;gap:var(--layout-header-items-center-gutter-x)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: HeaderContentComponent, isStandalone: true, selector: "tedi-header-content", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-header-content{display:flex;flex:1 0 0;gap:var(--layout-header-items-center-gutter-x);align-items:center}.tedi-header-content a,.tedi-header-content .tedi-link{color:var(--header-link-default)}.tedi-header-content a:hover:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-link-hover)}.tedi-header-content a:active:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-link-active)}.tedi-header-content a:focus-visible:not(:disabled),.tedi-header-content .tedi-link:focus-visible:not(:disabled){outline:var(--tedi-borders-02) solid var(--header-link-focus);outline-offset:var(--tedi-borders-01)}.tedi-header-content>*{display:flex;gap:var(--layout-header-items-center-gutter-x)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderContentComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-header-content", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class]": "classes()",
-                    }, styles: [".tedi-header-content{display:flex;flex:1 0 0;gap:var(--layout-header-items-center-gutter-x);align-items:center}.tedi-header-content--flex-start{justify-content:flex-start}.tedi-header-content--center{justify-content:center}.tedi-header-content--space-between{justify-content:space-between}.tedi-header-content a,.tedi-header-content .tedi-link{color:var(--header-link-default)}.tedi-header-content a:hover:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-link-hover)}.tedi-header-content a:active:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-link-active)}.tedi-header-content a:focus-visible:not(:disabled),.tedi-header-content .tedi-link:focus-visible:not(:disabled){outline:var(--tedi-borders-02) solid var(--header-link-focus);outline-offset:var(--tedi-borders-01)}.tedi-header-content>*{display:flex;gap:var(--layout-header-items-center-gutter-x)}\n"] }]
+                    }, styles: [".tedi-header-content{display:flex;flex:1 0 0;gap:var(--layout-header-items-center-gutter-x);align-items:center}.tedi-header-content a,.tedi-header-content .tedi-link{color:var(--header-link-default)}.tedi-header-content a:hover:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--header-link-hover)}.tedi-header-content a:active:not(:disabled,[aria-disabled=true]),.tedi-header-content .tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--header-link-active)}.tedi-header-content a:focus-visible:not(:disabled),.tedi-header-content .tedi-link:focus-visible:not(:disabled){outline:var(--tedi-borders-02) solid var(--header-link-focus);outline-offset:var(--tedi-borders-01)}.tedi-header-content>*{display:flex;gap:var(--layout-header-items-center-gutter-x)}\n"] }]
         }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }] } });
 
 class HeaderLanguageComponent {
@@ -16954,6 +16979,24 @@ class HeaderLanguageComponent {
      * Value should be text shown in the UI.
      */
     languages = input.required(...(ngDevMode ? [{ debugName: "languages" }] : []));
+    /**
+     * Label for the language selector. Falls back to the `header.select-lang`
+     * translation when not provided.
+     */
+    selectLabel = input(...(ngDevMode ? [undefined, { debugName: "selectLabel" }] : []));
+    /**
+     * Position of the select label relative to the popover trigger.
+     * - `top` — label sits above the trigger (default)
+     * - `left` — label sits inline, to the left of the trigger
+     * @default "top"
+     */
+    labelPosition = input("top", ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    /**
+     * Optional per-language URLs. When a language has a URL, its option renders as
+     * a navigation anchor (`<a href>`) and switching is handled by the browser
+     * instead of the client-side translation service.
+     */
+    languageHrefs = input(...(ngDevMode ? [undefined, { debugName: "languageHrefs" }] : []));
     /**
      * This is event emitter for changing language
      */
@@ -16961,18 +17004,25 @@ class HeaderLanguageComponent {
     popover = viewChild(PopoverComponent, ...(ngDevMode ? [{ debugName: "popover" }] : []));
     translationService = inject(TediTranslationService);
     languageKeys = computed(() => Object.keys(this.languages()), ...(ngDevMode ? [{ debugName: "languageKeys" }] : []));
+    /** Label currently shown on the trigger (the active language's display text). */
+    displayedLanguage = computed(() => this.languages()[this.translationService.getLanguage()], ...(ngDevMode ? [{ debugName: "displayedLanguage" }] : []));
+    /** Self-describing accessible name for the trigger, e.g. "Language EST". */
+    triggerAriaLabel = computed(() => {
+        const label = this.selectLabel() ||
+            this.translationService.translate("header.select-lang");
+        return `${label} ${this.displayedLanguage() ?? ""}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : []));
     handleChangeLang(lang) {
         this.languageChange.emit(lang);
         this.translationService.setLanguage(lang);
         this.popover()?.hidePopover();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  tedi-text\n  color=\"secondary\"\n  modifiers=\"small\"\n  class=\"tedi-header-language__label\"\n  >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n  <button\n    type=\"button\"\n    tedi-popover-trigger\n    class=\"tedi-link tedi-header__link-button\"\n  >\n    <span>{{ languages()[translationService.getLanguage()] }}</span>\n    <tedi-icon\n      name=\"expand_more\"\n      color=\"inherit\"\n      class=\"tedi-header-language__chevron\"\n    />\n  </button>\n  <tedi-popover-content maxWidth=\"none\">\n    <button\n      *ngFor=\"let language of languageKeys()\"\n      type=\"button\"\n      class=\"tedi-link tedi-header__link-button\"\n      (click)=\"handleChangeLang(language)\"\n    >\n      <span>{{ languages()[language] }}</span>\n    </button>\n  </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, languageHrefs: { classPropertyName: "languageHrefs", publicName: "languageHrefs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { properties: { "class.tedi-header-language--label-left": "labelPosition() === 'left'" }, classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  tedi-text\n  color=\"secondary\"\n  modifiers=\"small\"\n  class=\"tedi-header-language__label\"\n  >{{ selectLabel() || (\"header.select-lang\" | tediTranslate) }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n  <button\n    type=\"button\"\n    tedi-popover-trigger\n    class=\"tedi-link tedi-header__link-button\"\n    [attr.aria-label]=\"triggerAriaLabel()\"\n  >\n    <span>{{ displayedLanguage() }}</span>\n    <tedi-icon\n      name=\"expand_more\"\n      [size]=\"18\"\n      color=\"inherit\"\n      class=\"tedi-header-language__chevron\"\n    />\n  </button>\n  <tedi-popover-content maxWidth=\"none\">\n    @for (language of languageKeys(); track language) {\n      @if (languageHrefs()?.[language]; as href) {\n        <a class=\"tedi-link tedi-header__link-button\" [href]=\"href\">\n          <span>{{ languages()[language] }}</span>\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"tedi-link tedi-header__link-button\"\n          (click)=\"handleChangeLang(language)\"\n        >\n          <span>{{ languages()[language] }}</span>\n        </button>\n      }\n    }\n  </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}.tedi-header-language--label-left{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-header-language", standalone: true, imports: [
-                        NgFor,
                         IconComponent,
                         TextComponent,
                         PopoverComponent,
@@ -16981,8 +17031,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         TediTranslationPipe,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "tedi-header-language",
-                    }, template: "<span\n  tedi-text\n  color=\"secondary\"\n  modifiers=\"small\"\n  class=\"tedi-header-language__label\"\n  >{{ \"header.select-lang\" | tediTranslate }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n  <button\n    type=\"button\"\n    tedi-popover-trigger\n    class=\"tedi-link tedi-header__link-button\"\n  >\n    <span>{{ languages()[translationService.getLanguage()] }}</span>\n    <tedi-icon\n      name=\"expand_more\"\n      color=\"inherit\"\n      class=\"tedi-header-language__chevron\"\n    />\n  </button>\n  <tedi-popover-content maxWidth=\"none\">\n    <button\n      *ngFor=\"let language of languageKeys()\"\n      type=\"button\"\n      class=\"tedi-link tedi-header__link-button\"\n      (click)=\"handleChangeLang(language)\"\n    >\n      <span>{{ languages()[language] }}</span>\n    </button>\n  </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"] }]
-        }], propDecorators: { languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: true }] }], languageChange: [{ type: i0.Output, args: ["languageChange"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
+                        "[class.tedi-header-language--label-left]": "labelPosition() === 'left'",
+                    }, template: "<span\n  tedi-text\n  color=\"secondary\"\n  modifiers=\"small\"\n  class=\"tedi-header-language__label\"\n  >{{ selectLabel() || (\"header.select-lang\" | tediTranslate) }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n  <button\n    type=\"button\"\n    tedi-popover-trigger\n    class=\"tedi-link tedi-header__link-button\"\n    [attr.aria-label]=\"triggerAriaLabel()\"\n  >\n    <span>{{ displayedLanguage() }}</span>\n    <tedi-icon\n      name=\"expand_more\"\n      [size]=\"18\"\n      color=\"inherit\"\n      class=\"tedi-header-language__chevron\"\n    />\n  </button>\n  <tedi-popover-content maxWidth=\"none\">\n    @for (language of languageKeys(); track language) {\n      @if (languageHrefs()?.[language]; as href) {\n        <a class=\"tedi-link tedi-header__link-button\" [href]=\"href\">\n          <span>{{ languages()[language] }}</span>\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"tedi-link tedi-header__link-button\"\n          (click)=\"handleChangeLang(language)\"\n        >\n          <span>{{ languages()[language] }}</span>\n        </button>\n      }\n    }\n  </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}.tedi-header-language--label-left{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"] }]
+        }], propDecorators: { languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: true }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], languageHrefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageHrefs", required: false }] }], languageChange: [{ type: i0.Output, args: ["languageChange"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
 
 /**
  * Compact icon + label button used inside the mobile header row
@@ -17442,6 +17493,20 @@ class HeaderProfileComponent {
             }
         });
         this.destroyRef.onDestroy(cleanup);
+        // The modal/overlay sit below the header. Its height varies with the optional
+        // top/bottom bars, so track the actual rendered header height and expose it as
+        // `--header-profile-offset`. Keeping it always up to date (not just on open) means
+        // the modal opens at the correct position with no jump.
+        const headerEl = element.closest("header");
+        if (headerEl && typeof ResizeObserver !== "undefined") {
+            const updateOffset = () => {
+                this.renderer.setStyle(element, "--header-profile-offset", `${headerEl.getBoundingClientRect().height}px`, RendererStyleFlags2.DashCase);
+            };
+            updateOffset();
+            const resizeObserver = new ResizeObserver(updateOffset);
+            resizeObserver.observe(headerEl);
+            this.destroyRef.onDestroy(() => resizeObserver.disconnect());
+        }
     }
     handleModalOpen() {
         const { showPopover } = this.breakpointInputs();
@@ -17450,7 +17515,7 @@ class HeaderProfileComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: true, isRequired: false, transformFunction: null }, noStyle: { classPropertyName: "noStyle", publicName: "noStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 } }, ngImport: i0, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n  <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n  <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n    <button\n      type=\"button\"\n      tedi-button\n      tedi-popover-trigger\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </tedi-popover-content>\n  </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n  @if (isSmall()) {\n    <tedi-header-mobile-button\n      [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n      [label]=\"resolvedLabel()\"\n      [selected]=\"modalOpen()\"\n      ariaHasPopup=\"dialog\"\n      [ariaExpanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    />\n  } @else {\n    <button\n      type=\"button\"\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n  }\n  <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n  <tedi-icon\n    name=\"account_circle\"\n    color=\"brand\"\n    class=\"tedi-header-profile__icon\"\n    [class.tedi-header-profile__icon--small]=\"showLabel()\"\n  />\n  @if (showLabel()) {\n    <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n    <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n  }\n</ng-template>\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div\n      class=\"tedi-header-profile__modal\"\n      [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n    >\n      <ng-container *ngTemplateOutlet=\"content\" />\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-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}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%;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%;height:calc(100dvh - var(--layout-header-height));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "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: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: true, isRequired: false, transformFunction: null }, noStyle: { classPropertyName: "noStyle", publicName: "noStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 } }, ngImport: i0, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n  <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n  <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n    <button\n      type=\"button\"\n      tedi-button\n      tedi-popover-trigger\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </tedi-popover-content>\n  </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n  @if (isSmall()) {\n    <tedi-header-mobile-button\n      [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n      [label]=\"resolvedLabel()\"\n      [selected]=\"modalOpen()\"\n      ariaHasPopup=\"dialog\"\n      [ariaExpanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    />\n  } @else {\n    <button\n      type=\"button\"\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n  }\n  <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n  <tedi-icon\n    name=\"account_circle\"\n    color=\"brand\"\n    class=\"tedi-header-profile__icon\"\n    [class.tedi-header-profile__icon--small]=\"showLabel()\"\n  />\n  @if (showLabel()) {\n    <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n    <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n  }\n</ng-template>\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div\n      class=\"tedi-header-profile__modal\"\n      [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n    >\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{--header-profile-offset: var(--layout-header-height);align-content:center}tedi-header-profile [tedi-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--header-profile-offset);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;height:calc(100dvh - var(--header-profile-offset));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--header-profile-offset);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;height:calc(100dvh - var(--header-profile-offset));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "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: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, decorators: [{
             type: Component,
@@ -17464,7 +17529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         HideAtDirective,
                         NgTemplateOutlet,
                         HeaderMobileButtonComponent,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n  <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n  <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n    <button\n      type=\"button\"\n      tedi-button\n      tedi-popover-trigger\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </tedi-popover-content>\n  </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n  @if (isSmall()) {\n    <tedi-header-mobile-button\n      [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n      [label]=\"resolvedLabel()\"\n      [selected]=\"modalOpen()\"\n      ariaHasPopup=\"dialog\"\n      [ariaExpanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    />\n  } @else {\n    <button\n      type=\"button\"\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n  }\n  <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n  <tedi-icon\n    name=\"account_circle\"\n    color=\"brand\"\n    class=\"tedi-header-profile__icon\"\n    [class.tedi-header-profile__icon--small]=\"showLabel()\"\n  />\n  @if (showLabel()) {\n    <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n    <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n  }\n</ng-template>\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div\n      class=\"tedi-header-profile__modal\"\n      [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n    >\n      <ng-container *ngTemplateOutlet=\"content\" />\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-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}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%;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%;height:calc(100dvh - var(--layout-header-height));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n  <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n  <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n    <button\n      type=\"button\"\n      tedi-button\n      tedi-popover-trigger\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </tedi-popover-content>\n  </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n  @if (isSmall()) {\n    <tedi-header-mobile-button\n      [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n      [label]=\"resolvedLabel()\"\n      [selected]=\"modalOpen()\"\n      ariaHasPopup=\"dialog\"\n      [ariaExpanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    />\n  } @else {\n    <button\n      type=\"button\"\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n  }\n  <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n  <tedi-icon\n    name=\"account_circle\"\n    color=\"brand\"\n    class=\"tedi-header-profile__icon\"\n    [class.tedi-header-profile__icon--small]=\"showLabel()\"\n  />\n  @if (showLabel()) {\n    <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n    <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n  }\n</ng-template>\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div\n      class=\"tedi-header-profile__modal\"\n      [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n    >\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{--header-profile-offset: var(--layout-header-height);align-content:center}tedi-header-profile [tedi-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--header-profile-offset);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;height:calc(100dvh - var(--header-profile-offset));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--header-profile-offset);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;height:calc(100dvh - var(--header-profile-offset));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopover", required: false }] }], noStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "noStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
 
 /**
@@ -17725,7 +17790,7 @@ class HeaderRoleComponent {
         return { name: icon.name, size: icon.size ?? 24 };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <ng-container *ngIf=\"hasRoleSelection(); else normalText\">\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon name=\"expand_more\" class=\"tedi-header-role__chevron\" />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <div>\n      <label [attr.for]=\"inputId\">{{ searchText() }}</label>\n      <input\n        #searchInput\n        [id]=\"inputId\"\n        class=\"tedi-header-role__input\"\n        [value]=\"inputValue()\"\n        (input)=\"handleInputChange($event)\"\n      />\n    </div>\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  <button\n    *ngFor=\"let r of filteredRepresentatives(); trackBy: trackById\"\n    type=\"button\"\n    class=\"tedi-header-role__representative\"\n    [attr.data-selected]=\"r.id === currentRepresentative().id\"\n    (click)=\"handleSelectRepresentative(r)\"\n  >\n    @if (resolveIcon(r.icon); as icon) {\n      <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n    }\n    <div>\n      <div>{{ r.name }}</div>\n      @if (r.description) {\n        <div tedi-text modifiers=\"small\">\n          {{ r.description }}\n        </div>\n      }\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #normalText>\n  <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "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: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <ng-container *ngIf=\"hasRoleSelection(); else normalText\">\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon\n          name=\"expand_more\"\n          [size]=\"16\"\n          class=\"tedi-header-role__chevron\"\n        />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <div>\n      <label [attr.for]=\"inputId\">{{ searchText() }}</label>\n      <input\n        #searchInput\n        [id]=\"inputId\"\n        class=\"tedi-header-role__input\"\n        [value]=\"inputValue()\"\n        (input)=\"handleInputChange($event)\"\n      />\n    </div>\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  <button\n    *ngFor=\"let r of filteredRepresentatives(); trackBy: trackById\"\n    type=\"button\"\n    class=\"tedi-header-role__representative\"\n    [attr.data-selected]=\"r.id === currentRepresentative().id\"\n    (click)=\"handleSelectRepresentative(r)\"\n  >\n    @if (resolveIcon(r.icon); as icon) {\n      <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n    }\n    <div>\n      <div>{{ r.name }}</div>\n      @if (r.description) {\n        <div tedi-text modifiers=\"small\">\n          {{ r.description }}\n        </div>\n      }\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #normalText>\n  <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "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: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, decorators: [{
             type: Component,
@@ -17744,7 +17809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         SeparatorComponent,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "tedi-header-role",
-                    }, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <ng-container *ngIf=\"hasRoleSelection(); else normalText\">\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon name=\"expand_more\" class=\"tedi-header-role__chevron\" />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <div>\n      <label [attr.for]=\"inputId\">{{ searchText() }}</label>\n      <input\n        #searchInput\n        [id]=\"inputId\"\n        class=\"tedi-header-role__input\"\n        [value]=\"inputValue()\"\n        (input)=\"handleInputChange($event)\"\n      />\n    </div>\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  <button\n    *ngFor=\"let r of filteredRepresentatives(); trackBy: trackById\"\n    type=\"button\"\n    class=\"tedi-header-role__representative\"\n    [attr.data-selected]=\"r.id === currentRepresentative().id\"\n    (click)=\"handleSelectRepresentative(r)\"\n  >\n    @if (resolveIcon(r.icon); as icon) {\n      <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n    }\n    <div>\n      <div>{{ r.name }}</div>\n      @if (r.description) {\n        <div tedi-text modifiers=\"small\">\n          {{ r.description }}\n        </div>\n      }\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #normalText>\n  <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"] }]
+                    }, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <ng-container *ngIf=\"hasRoleSelection(); else normalText\">\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon\n          name=\"expand_more\"\n          [size]=\"16\"\n          class=\"tedi-header-role__chevron\"\n        />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <div>\n      <label [attr.for]=\"inputId\">{{ searchText() }}</label>\n      <input\n        #searchInput\n        [id]=\"inputId\"\n        class=\"tedi-header-role__input\"\n        [value]=\"inputValue()\"\n        (input)=\"handleInputChange($event)\"\n      />\n    </div>\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  <button\n    *ngFor=\"let r of filteredRepresentatives(); trackBy: trackById\"\n    type=\"button\"\n    class=\"tedi-header-role__representative\"\n    [attr.data-selected]=\"r.id === currentRepresentative().id\"\n    (click)=\"handleSelectRepresentative(r)\"\n  >\n    @if (resolveIcon(r.icon); as icon) {\n      <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n    }\n    <div>\n      <div>{{ r.name }}</div>\n      @if (r.description) {\n        <div tedi-text modifiers=\"small\">\n          {{ r.description }}\n        </div>\n      }\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #normalText>\n  <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], titleContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleTitleDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleContentDirective), { isSignal: true }] }], noResultsContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleNoResultsDirective), { isSignal: true }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchClearable", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], isOrganization: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOrganization", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], organizationSearchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "organizationSearchLabel", required: false }] }], showRoleSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRoleSwitch", required: false }] }], representatives: [{ type: i0.Input, args: [{ isSignal: true, alias: "representatives", required: true }] }], currentRepresentative: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRepresentative", required: true }] }, { type: i0.Output, args: ["currentRepresentativeChange"] }], roleSelectionToggle: [{ type: i0.Output, args: ["roleSelectionToggle"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }] } });
 
 class HeaderSearchComponent {
@@ -17819,6 +17884,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, template: "@if (isMobile() && mobileVariant() === \"modal\") {\n  <tedi-header-mobile-button\n    icon=\"search\"\n    [label]=\"buttonLabel()\"\n    [ariaLabel]=\"buttonLabel()\"\n    ariaHasPopup=\"dialog\"\n    [ariaExpanded]=\"modalOpen()\"\n    [selected]=\"modalOpen()\"\n    [disabled]=\"disabled()\"\n    (click)=\"open()\"\n  />\n  <dialog\n    #dialog\n    class=\"tedi-header-search__modal\"\n    [attr.aria-label]=\"modalTitle()\"\n    (close)=\"onDialogClose()\"\n  >\n    <div class=\"tedi-header-search__modal-heading\">\n      <span tedi-text modifiers=\"h3\" color=\"secondary\">\n        {{ modalTitle() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"tedi-header-search__button-close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close()\"\n      >\n        <tedi-icon name=\"close\" [size]=\"24\" color=\"inherit\" />\n      </button>\n    </div>\n    <div class=\"tedi-header-search__modal-body\">\n      <ng-container *ngTemplateOutlet=\"searchContent\"></ng-container>\n    </div>\n  </dialog>\n} @else {\n  <ng-container *ngTemplateOutlet=\"searchContent\"></ng-container>\n}\n\n<ng-template #searchContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-header-search{display:contents}.tedi-header-search .tedi-search__container{margin-bottom:0}.tedi-header-search__modal{position:fixed;top:0;left:0;z-index:var(--z-index-header);width:100%;max-width:100%;height:100dvh;max-height:100dvh;padding:0;background:var(--modal-background);border:0}.tedi-header-search__modal[open]{display:flex;flex-direction:column}.tedi-header-search__modal::backdrop{background:transparent}.tedi-header-search__modal-heading{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:var(--modal-heading-padding-y) var(--modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-header-search__modal-body{flex:1 1 0;padding:var(--modal-body-padding);overflow-y:auto}.tedi-header-search__button-close{display:inline-flex;align-items:center;justify-content:center;padding:var(--layout-grid-gutters-08);color:var(--button-close-text-default);cursor:pointer;background:transparent;border:0}.tedi-header-search__button-close:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { mobileVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileVariant", required: false }] }], mobileLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLabels", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dialogEl: [{ type: i0.ViewChild, args: ["dialog", { isSignal: true }] }] } });
 
+/**
+ * Secondary bar rendered above the main header bar.
+ *
+ * @example
+ * <header tedi-header>
+ *   <tedi-header-top alignment="center" [lg]="{ alignment: 'space-between' }">
+ *     <!-- top bar content -->
+ *   </tedi-header-top>
+ *   <!-- main content -->
+ * </header>
+ */
+class HeaderTopComponent {
+    breakpointService = inject(BreakpointService);
+    /**
+     * Horizontal alignment (`justify-content`) of the top bar content. Supports
+     * per-breakpoint overrides via the `[xs]`–`[xxl]` inputs, e.g.
+     * `alignment="center"` with `[lg]="{ alignment: 'space-between' }"`.
+     * @default "space-between"
+     */
+    alignment = input("space-between", ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
+    sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
+    md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
+    lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
+    xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
+    xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
+    breakpointInputs = computed(() => this.breakpointService.getBreakpointInputs({
+        alignment: this.alignment(),
+        xs: this.xs(),
+        sm: this.sm(),
+        md: this.md(),
+        lg: this.lg(),
+        xl: this.xl(),
+        xxl: this.xxl(),
+    }), ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
+    classes = computed(() => `tedi-header-top ${headerAlignmentUtility[this.breakpointInputs().alignment]}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: HeaderTopComponent, isStandalone: true, selector: "tedi-header-top", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", 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 } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-header-top{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;align-self:stretch;justify-content:space-between;min-height:var(--layout-header-top-header-min-height);padding:var(--layout-header-top-header-padding-y) var(--layout-header-top-header-padding-x);background:var(--header-background);border-bottom:var(--tedi-borders-01) solid var(--header-top-header-border-bottom)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderTopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-header-top", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class]": "classes()",
+                    }, styles: [".tedi-header-top{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;align-self:stretch;justify-content:space-between;min-height:var(--layout-header-top-header-min-height);padding:var(--layout-header-top-header-padding-y) var(--layout-header-top-header-padding-x);background:var(--header-background);border-bottom:var(--tedi-borders-01) solid var(--header-top-header-border-bottom)}\n"] }]
+        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
+
 class SideNavService {
     breakpointService = inject(BreakpointService);
     items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -18712,5 +18823,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map