@tedi-design-system/angular 9.0.0-rc.6 → 9.0.0-rc.8

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

@@ -487,7 +487,11 @@ function breakpointInput(input) {
     return { xs: input };
 }
 
-const FOCUSABLE_SELECTOR$1 = "button, a[href], [tabindex]";
+/** Native controls keep their own semantics and keyboard behavior. */
+const NATIVE_INTERACTIVE_SELECTOR = 'button, a[href], input:not([type="hidden"]), select, textarea';
+const FOCUSABLE_SELECTOR$1 = `${NATIVE_INTERACTIVE_SELECTOR}, [tabindex]`;
+/** Native controls that fire `click` on Space but not on Enter. */
+const SPACE_ACTIVATED_SELECTOR = 'input[type="checkbox"], input[type="radio"]';
 class DropdownTriggerDirective {
     /**
      * The `aria-haspopup` value for the trigger, telling assistive technology
@@ -510,6 +514,8 @@ class DropdownTriggerDirective {
      * would both be tab stops, and the ARIA state would land on the wrong element.
      */
     triggerElement = signal(null, ...(ngDevMode ? [{ debugName: "triggerElement" }] : []));
+    /** Only a Space press that starts on the trigger may activate it on keyup. */
+    spacePressed = false;
     hasPopup = computed(() => {
         const explicit = this.ariaHaspopup();
         if (explicit)
@@ -545,14 +551,21 @@ class DropdownTriggerDirective {
                 this.renderer.setAttribute(el, "aria-haspopup", hasPopup);
             }
             this.renderer.setAttribute(el, "aria-expanded", String(this.dropdown.isOpen()));
-            if (!this.isNativelyFocusable(el)) {
-                this.renderer.setAttribute(el, "role", "button");
-                this.renderer.setAttribute(el, "tabindex", "0");
-            }
         });
     }
     ngAfterViewInit() {
-        this.triggerElement.set(this.resolveTriggerElement());
+        const el = this.resolveTriggerElement();
+        // Non-native triggers need button semantics, but a role or tabindex the
+        // consumer set (e.g. `role="checkbox"`) is theirs to keep.
+        if (!this.isNativelyInteractive(el)) {
+            if (!el.hasAttribute("role")) {
+                this.renderer.setAttribute(el, "role", "button");
+            }
+            if (!el.hasAttribute("tabindex")) {
+                this.renderer.setAttribute(el, "tabindex", "0");
+            }
+        }
+        this.triggerElement.set(el);
     }
     focus() {
         this.triggerElement()?.focus();
@@ -568,6 +581,20 @@ class DropdownTriggerDirective {
     onKeydown(event) {
         const key = event.key;
         switch (key) {
+            case "Enter":
+                if (!this.handlesKey(event, key))
+                    break;
+                // Also keeps Enter on a checkbox from submitting its form.
+                event.preventDefault();
+                this.dropdown.toggleDropdown();
+                break;
+            case " ":
+                if (!this.handlesKey(event, key))
+                    break;
+                // Match button timing and prevent page scrolling.
+                event.preventDefault();
+                this.spacePressed = true;
+                break;
             case "ArrowDown":
                 if (!this.isWidgetContent())
                     break;
@@ -587,17 +614,43 @@ class DropdownTriggerDirective {
                 break;
         }
     }
+    onKeyup(event) {
+        if (event.key !== " " || !this.spacePressed)
+            return;
+        this.spacePressed = false;
+        if (event.target !== this.focusableElement)
+            return;
+        this.dropdown.toggleDropdown();
+    }
+    onFocusout(event) {
+        if (event.target === this.focusableElement)
+            this.spacePressed = false;
+    }
+    /**
+     * Whether the directive must activate the trigger on `key` itself, because the
+     * element does not turn that key into a native click: both keys for a generic
+     * trigger, Enter for a checkbox or radio. Other native controls handle both.
+     */
+    handlesKey(event, key) {
+        const el = this.focusableElement;
+        // Keys from other controls inside the host are theirs.
+        if (event.target !== el)
+            return false;
+        if (!this.isNativelyInteractive(el))
+            return true;
+        return key === "Enter" && el.matches(SPACE_ACTIVATED_SELECTOR);
+    }
     isWidgetContent() {
         return this.dropdown.dropdownContent().isWidget();
     }
     resolveTriggerElement() {
         const el = this.host.nativeElement;
-        if (this.isNativelyFocusable(el))
+        if (this.isNativelyInteractive(el))
             return el;
         return el.querySelector(FOCUSABLE_SELECTOR$1) ?? el;
     }
-    isNativelyFocusable(el) {
-        return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
+    isNativelyInteractive(el) {
+        return el.matches(NATIVE_INTERACTIVE_SELECTOR);
     }
     openAndFocusFirst() {
         if (this.dropdown.isOpen()) {
@@ -616,7 +669,7 @@ class DropdownTriggerDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)", "focusout": "onFocusout($event)" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
             type: Directive,
@@ -631,6 +684,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             }], onKeydown: [{
                 type: HostListener,
                 args: ["keydown", ["$event"]]
+            }], onKeyup: [{
+                type: HostListener,
+                args: ["keyup", ["$event"]]
+            }], onFocusout: [{
+                type: HostListener,
+                args: ["focusout", ["$event"]]
             }] } });
 
 const DROPDOWN_API = new InjectionToken("DropdownApi");
@@ -12052,7 +12111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
 class PopoverTriggerDirective {
     /**
-     * Should add underline class to trigger element?
+     * Underline the trigger element.
      * @default false
      */
     underline = input(false, ...(ngDevMode ? [{ debugName: "underline" }] : []));
@@ -12103,11 +12162,11 @@ class PopoverContentComponent {
      */
     maxWidth = input("small", ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
     /**
-     * Heading title of the content
+     * Title shown at the top of the content.
      */
     title = input("", ...(ngDevMode ? [{ debugName: "title" }] : []));
     /**
-     * Should content show close button?
+     * Show a close button in the content.
      * @default false
      */
     showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
@@ -12146,38 +12205,47 @@ class PopoverComponent {
      */
     position = input("top", ...(ngDevMode ? [{ debugName: "position" }] : []));
     /**
-     * Should position flip to opposite direction when overflowing screen?
+     * Flip to the opposite side when the popover would overflow the screen.
      * @default false
      */
     preventOverflow = input(false, ...(ngDevMode ? [{ debugName: "preventOverflow" }] : []));
     /**
-     * Is dismissible by clicking outside of content?
+     * Close the popover when clicking outside its content.
      * @default true
      */
     dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
     /**
-     * Does popover content hide on scroll?
+     * Close the popover when the page scrolls.
      * @default false
      */
     hideOnScroll = input(false, ...(ngDevMode ? [{ debugName: "hideOnScroll" }] : []));
     /**
-     * Does popover have illustrative border on the arrow side?
+     * Show an illustrative border on the arrow side.
      * @default false
      */
     withBorder = input(false, ...(ngDevMode ? [{ debugName: "withBorder" }] : []));
     /**
-     * Should show arrow?
+     * Show the arrow pointing to the trigger.
+     * @default true
      */
     withArrow = input(true, ...(ngDevMode ? [{ debugName: "withArrow" }] : []));
     /**
-     * Lock scrolling on rest of the page?
+     * Lock scrolling on the rest of the page while the popover is open.
      * @default false
      */
     lockScroll = input(false, ...(ngDevMode ? [{ debugName: "lockScroll" }] : []));
-    /** Delay time (in ms) for closing popover when not hovering trigger or content.
+    /**
+     * Delay in ms before the popover closes when neither the trigger nor the
+     * content is hovered.
      * @default 100
      */
     timeoutDelay = input(100, ...(ngDevMode ? [{ debugName: "timeoutDelay" }] : []));
+    /**
+     * Gap in px between the trigger and the popover. The arrow's gap is added on
+     * top when `withArrow` is `true`.
+     * @default 8
+     */
+    offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
     document = inject(DOCUMENT);
     renderer = inject(Renderer2);
     connectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : []));
@@ -12191,7 +12259,14 @@ class PopoverComponent {
     arrowTop = signal(null, ...(ngDevMode ? [{ debugName: "arrowTop" }] : []));
     overlayOrigin = computed(() => this.popoverTrigger().overlayOrigin, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
     arrowOffset = computed(() => (this.withArrow() ? 12 : 0), ...(ngDevMode ? [{ debugName: "arrowOffset" }] : []));
-    overlayPositions = computed(() => toConnectedPositions(this.position(), this.preventOverflow(), this.arrowOffset()), ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
+    overlayPositions = computed(() => {
+        const gap = this.offset() + this.arrowOffset();
+        return toConnectedPositions(this.position(), this.preventOverflow()).map((pos) => ({
+            ...pos,
+            offsetX: pos.offsetX ? Math.sign(pos.offsetX) * gap : pos.offsetX,
+            offsetY: pos.offsetY ? Math.sign(pos.offsetY) * gap : pos.offsetY,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
     panelClasses = computed(() => {
         const classList = ["tedi-popover__container"];
         if (this.withBorder())
@@ -12419,14 +12494,14 @@ 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]: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(--popover-border-width-md) solid var(--popover-border-default);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;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;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(75% 0,100% 0,100% 100%,0 100%,0 75%)}.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-md));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:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) 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-md));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:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) 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-md));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:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) 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-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) 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 });
+    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 }, offset: { classPropertyName: "offset", publicName: "offset", 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(--popover-border-width-md) solid var(--popover-border-default);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;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;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(75% 0,100% 0,100% 100%,0 100%,0 75%)}.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-md));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:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) 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-md));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:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) 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-md));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:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) 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-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) 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]: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(--popover-border-width-md) solid var(--popover-border-default);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;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;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(75% 0,100% 0,100% 100%,0 100%,0 75%)}.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-md));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:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) 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-md));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:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) 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-md));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:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) 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-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) 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 }] }] } });
+        }], 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 }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", 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 ModalFooterComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -14668,7 +14743,7 @@ class TediTableComponent {
                 useFactory: (component) => component.contextValue,
                 deps: [TediTableComponent],
             },
-        ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"tedi-table__sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [align]=\"top.align\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              @let headerAlign = meta?.headerAlign ?? meta?.align;\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n                [style.right.px]=\"stickyRight(header.column.id)\"\n              >\n                @if (srHeaderLabel) {\n                  <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n                }\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      @if (filterUsesModal()) {\n                        <button\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\n                        <tedi-popover\n                          #filterPopover\n                          class=\"tedi-table__filter-popover\"\n                          position=\"bottom-end\"\n                          [preventOverflow]=\"true\"\n                        >\n                          <button\n                            tedi-popover-trigger\n                            tedi-table-header-button\n                            icon=\"filter_alt\"\n                            [selected]=\"filterIsActive(header.column)\"\n                            [filled]=\"filterIsActive(header.column)\"\n                            [aria-label]=\"filterAriaLabel(header.column)\"\n                            (click)=\"handleFilterTriggerClick(header.column)\"\n                          ></button>\n                          <tedi-popover-content\n                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\n                            <div class=\"tedi-table__filter\">\n                              <div class=\"tedi-table__filter-body\">\n                                @if (filterTemplateFor(header.column); as tpl) {\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      tpl;\n                                      context: filterContextFor(\n                                        header.column,\n                                        filterPopover\n                                      )\n                                    \"\n                                  />\n                                }\n                              </div>\n                              <div class=\"tedi-table__filter-actions\">\n                                <button\n                                  tedi-button\n                                  variant=\"secondary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterClear(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterClearLabel() }}\n                                </button>\n                                <button\n                                  tedi-button\n                                  variant=\"primary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterApply(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterApplyLabel() }}\n                                </button>\n                              </div>\n                            </div>\n                          </tedi-popover-content>\n                        </tedi-popover>\n                      }\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                    (clear)=\"handleColumnFilter(column, '')\"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"\n              interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n            \"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"\n              (interactive() || expandsOnClick) && handleRowClick($event, row)\n            \"\n            (keydown)=\"handleRowKeydown($event, row)\"\n            (mouseenter)=\"handleRowMouseEnter(row)\"\n            (mouseleave)=\"handleRowMouseLeave()\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              @let cellMeta = getColumnMeta(cell.column);\n              @let cellContext = cell.getContext();\n              @let resolvedSpan = resolveRowSpan(cell, cellContext);\n              @if (resolvedSpan !== 0) {\n                <td\n                  [class]=\"\n                    'tedi-table__cell' +\n                    (cellMeta?.align\n                      ? ' tedi-table__cell--align-' + cellMeta?.align\n                      : '') +\n                    (cellMeta?.vAlign\n                      ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n                      : '') +\n                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"\n                            renderSubComponent() ? subRowId : undefined\n                          \"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [align]=\"bottom.align\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"tedi-table__sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [align]=\"top.align\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              @let headerAlign = meta?.headerAlign ?? meta?.align;\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n                [style.right.px]=\"stickyRight(header.column.id)\"\n              >\n                @if (srHeaderLabel) {\n                  <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n                }\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      @if (filterUsesModal()) {\n                        <button\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\n                        <tedi-popover\n                          #filterPopover\n                          class=\"tedi-table__filter-popover\"\n                          position=\"bottom-end\"\n                          [preventOverflow]=\"true\"\n                        >\n                          <button\n                            tedi-popover-trigger\n                            tedi-table-header-button\n                            icon=\"filter_alt\"\n                            [selected]=\"filterIsActive(header.column)\"\n                            [filled]=\"filterIsActive(header.column)\"\n                            [aria-label]=\"filterAriaLabel(header.column)\"\n                            (click)=\"handleFilterTriggerClick(header.column)\"\n                          ></button>\n                          <tedi-popover-content\n                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\n                            <div class=\"tedi-table__filter\">\n                              <div class=\"tedi-table__filter-body\">\n                                @if (filterTemplateFor(header.column); as tpl) {\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      tpl;\n                                      context: filterContextFor(\n                                        header.column,\n                                        filterPopover\n                                      )\n                                    \"\n                                  />\n                                }\n                              </div>\n                              <div class=\"tedi-table__filter-actions\">\n                                <button\n                                  tedi-button\n                                  variant=\"secondary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterClear(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterClearLabel() }}\n                                </button>\n                                <button\n                                  tedi-button\n                                  variant=\"primary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterApply(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterApplyLabel() }}\n                                </button>\n                              </div>\n                            </div>\n                          </tedi-popover-content>\n                        </tedi-popover>\n                      }\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                    (clear)=\"handleColumnFilter(column, '')\"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"\n              interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n            \"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"\n              (interactive() || expandsOnClick) && handleRowClick($event, row)\n            \"\n            (keydown)=\"handleRowKeydown($event, row)\"\n            (mouseenter)=\"handleRowMouseEnter(row)\"\n            (mouseleave)=\"handleRowMouseLeave()\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              @let cellMeta = getColumnMeta(cell.column);\n              @let cellContext = cell.getContext();\n              @let resolvedSpan = resolveRowSpan(cell, cellContext);\n              @if (resolvedSpan !== 0) {\n                <td\n                  [class]=\"\n                    'tedi-table__cell' +\n                    (cellMeta?.align\n                      ? ' tedi-table__cell--align-' + cellMeta?.align\n                      : '') +\n                    (cellMeta?.vAlign\n                      ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n                      : '') +\n                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"\n                            renderSubComponent() ? subRowId : undefined\n                          \"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [align]=\"bottom.align\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
             type: Component,
@@ -17633,7 +17708,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -20328,7 +20403,7 @@ class TimeFieldComponent {
                 provide: TEDI_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TimeFieldComponent),
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      [interactive]=\"false\"\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [class.tedi-field-surface]=\"paintsSurface()\"\n      [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n      [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n      [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content\n      class=\"tedi-time-field__popover-content\"\n      maxWidth=\"none\"\n    >\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div\n    #fieldEl\n    class=\"tedi-time-field__field\"\n    [class.tedi-field-surface]=\"paintsSurface()\"\n    [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n    [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n    [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n  >\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span\n          class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n          aria-hidden=\"true\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      [interactive]=\"false\"\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [class.tedi-field-surface]=\"paintsSurface()\"\n      [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n      [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n      [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content\n      class=\"tedi-time-field__popover-content\"\n      maxWidth=\"none\"\n    >\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div\n    #fieldEl\n    class=\"tedi-time-field__field\"\n    [class.tedi-field-surface]=\"paintsSurface()\"\n    [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n    [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n    [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n  >\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span\n          class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n          aria-hidden=\"true\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { 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: TimeFieldComponent, decorators: [{
             type: Component,
@@ -21303,7 +21378,7 @@ class HeaderLanguageComponent {
         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.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", "interactive"] }, { 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", "offset"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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,
@@ -21799,7 +21874,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{--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", "interactive"] }, { 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", "offset"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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,
@@ -22072,7 +22147,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: SearchComponent, 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  @if (hasRoleSelection()) {\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  } @else {\n    <div class=\"tedi-header-role__value\">\n      {{ currentRepresentative().name }}\n    </div>\n  }\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <tedi-search\n      [inputId]=\"inputId\"\n      [label]=\"searchText()\"\n      [value]=\"inputValue()\"\n      [clearable]=\"searchClearable()\"\n      (valueChange)=\"handleInputChange($event)\"\n    />\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  @for (r of filteredRepresentatives(); track r.id) {\n    <button\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  }\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__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: 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", "interactive"] }, { 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"] }, { kind: "component", type: SearchComponent, selector: "tedi-search", inputs: ["inputId", "label", "value", "placeholder", "size", "clearable", "showClearOnInteraction", "searchIcon", "disabled", "button", "feedbackText", "ariaLabel", "suggestions", "bindLabel", "bindDescription", "bindDisabled", "minQueryLength", "loading", "hideOnScroll", "panelOpen", "noResultsText", "loadingText", "resultsCountText"], outputs: ["valueChange", "panelOpenChange", "searchEvent", "clear", "suggestionSelect"] }], 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: SearchComponent, 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  @if (hasRoleSelection()) {\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  } @else {\n    <div class=\"tedi-header-role__value\">\n      {{ currentRepresentative().name }}\n    </div>\n  }\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <tedi-search\n      [inputId]=\"inputId\"\n      [label]=\"searchText()\"\n      [value]=\"inputValue()\"\n      [clearable]=\"searchClearable()\"\n      (valueChange)=\"handleInputChange($event)\"\n    />\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  @for (r of filteredRepresentatives(); track r.id) {\n    <button\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  }\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__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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { 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"] }, { kind: "component", type: SearchComponent, selector: "tedi-search", inputs: ["inputId", "label", "value", "placeholder", "size", "clearable", "showClearOnInteraction", "searchIcon", "disabled", "button", "feedbackText", "ariaLabel", "suggestions", "bindLabel", "bindDescription", "bindDisabled", "minQueryLength", "loading", "hideOnScroll", "panelOpen", "noResultsText", "loadingText", "resultsCountText"], outputs: ["valueChange", "panelOpenChange", "searchEvent", "clear", "suggestionSelect"] }], 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,