@tedi-design-system/angular 7.1.0-rc.3 → 7.1.0-rc.5

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, viewChild, DestroyRef, NgZone, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, ContentChild, HostAttributeToken, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, viewChild, NgZone, DestroyRef, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, ContentChild, HostAttributeToken, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, makeEnvironmentProviders } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
@@ -1667,6 +1667,13 @@ const translationsMap = {
         en: "Breadcrumbs",
         ru: "Навигационная цепочка",
     },
+    "breadcrumbs.show-more": {
+        description: "Label for the collapsed-crumbs ellipsis button in breadcrumbs",
+        components: ["Breadcrumbs"],
+        et: "Näita rohkem",
+        en: "Show more",
+        ru: "Показать больше",
+    },
     more: {
         components: ["Tabs"],
         et: "Veel",
@@ -5340,6 +5347,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
 const FOCUSABLE_SELECTOR = "button, a[href], [tabindex]";
 class TooltipTriggerComponent {
+    /**
+     * When `false`, the trigger is a pure positioning anchor: it skips making its
+     * projected child focusable (no synthesized `tabindex`, focus ring or
+     * `aria-describedby`). Use for decorative or externally-controlled origins where
+     * focus and ARIA live on another element (e.g. a slider's range input).
+     * @default true
+     */
+    interactive = input(true, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
     host = inject(ElementRef);
     overlayOrigin = inject(CdkOverlayOrigin, { self: true });
     renderer = inject(Renderer2);
@@ -5358,7 +5373,9 @@ class TooltipTriggerComponent {
         this.isTouch = true;
     }
     onTouchEnd() {
-        this.tooltip.toggleTooltip();
+        if (this.tooltip.openWith() !== "none") {
+            this.tooltip.toggleTooltip();
+        }
         setTimeout(() => (this.isTouch = false), 300);
     }
     onClick() {
@@ -5410,6 +5427,8 @@ class TooltipTriggerComponent {
         this.tooltip.hideTooltip();
     }
     ngAfterContentChecked() {
+        if (!this.interactive())
+            return;
         const element = this.host.nativeElement;
         const firstChild = element.firstChild;
         if (!firstChild) {
@@ -5460,14 +5479,14 @@ class TooltipTriggerComponent {
         return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", host: { listeners: { "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()" }, properties: { "class.tedi-tooltip-trigger--clickable": "tooltip.openWith() === 'click'" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()" }, properties: { "class.tedi-tooltip-trigger--clickable": "tooltip.openWith() === 'click'" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-tooltip-trigger", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkOverlayOrigin], host: {
                         "[class.tedi-tooltip-trigger--clickable]": "tooltip.openWith() === 'click'",
                     }, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { onTouchStart: [{
+        }], ctorParameters: () => [], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], onTouchStart: [{
                 type: HostListener,
                 args: ["touchstart"]
             }], onTouchEnd: [{
@@ -5544,14 +5563,35 @@ class TooltipComponent {
      */
     preventOverflow = input(true, ...(ngDevMode ? [{ debugName: "preventOverflow" }] : []));
     /**
-     * How tooltip can opened?
+     * How the tooltip can be opened. Use `none` for full external control via `open`
+     * (e.g. a slider or custom draggable element driving the open state itself).
      * @default both
      */
     openWith = input("both", ...(ngDevMode ? [{ debugName: "openWith" }] : []));
+    /**
+     * Controlled open state. When set (not `undefined`), it overrides the built-in
+     * trigger behavior; typically paired with `openWith="none"`. Leave unset for the
+     * default trigger-driven behavior.
+     */
+    open = model(undefined, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /**
+     * While open, continuously reposition the tooltip so it follows an origin that moves
+     * (e.g. a dragging slider thumb). Uses `requestAnimationFrame`; enable only while the
+     * origin can actually move to avoid needless work.
+     * @default false
+     */
+    trackPosition = input(false, ...(ngDevMode ? [{ debugName: "trackPosition" }] : []));
     /** Delay time (in ms) for closing tooltip when not hovering trigger or content.
      * @default 100
      */
     timeoutDelay = input(100, ...(ngDevMode ? [{ debugName: "timeoutDelay" }] : []));
+    /**
+     * Extra distance (in px) between the tooltip and its trigger, added on top of the
+     * arrow allowance. Set to `0` to sit the tooltip directly against the trigger
+     * (e.g. a slider thumb).
+     * @default 4
+     */
+    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : []));
     /** Dropdown trigger button */
     tooltipTrigger = contentChild.required(TooltipTriggerComponent);
     /** Tooltip content component */
@@ -5561,34 +5601,76 @@ class TooltipComponent {
     connectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : []));
     descriptionId = `tedi-tooltip-${++tooltipIdCounter}`;
     contentText = signal("", ...(ngDevMode ? [{ debugName: "contentText" }] : []));
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : []));
+    isOpen = computed(() => this.open() !== undefined ? Boolean(this.open()) : this.internalOpen(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     currentPlacement = signal("top", ...(ngDevMode ? [{ debugName: "currentPlacement" }] : []));
     arrowLeft = signal(null, ...(ngDevMode ? [{ debugName: "arrowLeft" }] : []));
     arrowTop = signal(null, ...(ngDevMode ? [{ debugName: "arrowTop" }] : []));
-    overlayPositions = computed(() => toConnectedPositions(this.position(), this.preventOverflow(), 4), ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
+    overlayPositions = computed(() => toConnectedPositions(this.position(), this.preventOverflow(), this.offset()), ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
     overlayOrigin = computed(() => this.tooltipTrigger().overlayOrigin, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
     isContentHovered = signal(false, ...(ngDevMode ? [{ debugName: "isContentHovered" }] : []));
     hideTimeout;
+    ngZone = inject(NgZone);
+    trackRafId = null;
     horizontalPush = new HorizontalPushHandler(() => this.connectedOverlay()?.overlayRef?.overlayElement, () => this.updateArrowPosition());
     constructor() {
         inject(DestroyRef).onDestroy(() => {
             clearTimeout(this.hideTimeout);
             this.horizontalPush.detach();
+            this.stopTracking();
+        });
+        effect(() => {
+            if (this.isOpen() && this.trackPosition()) {
+                this.startTracking();
+            }
+            else {
+                this.stopTracking();
+            }
         });
     }
     showTooltip() {
+        if (this.open() !== undefined)
+            return;
         clearTimeout(this.hideTimeout);
         if (!this.isOpen()) {
-            this.isOpen.set(true);
+            this.internalOpen.set(true);
         }
     }
     hideTooltip() {
+        if (this.open() !== undefined)
+            return;
         if (this.isOpen()) {
             clearTimeout(this.hideTimeout);
-            this.isOpen.set(false);
+            this.internalOpen.set(false);
             this.horizontalPush.detach();
         }
     }
+    /**
+     * Recomputes the overlay position against its origin. Call this when the origin has
+     * moved without a scroll/resize event (e.g. a dragged element). `trackPosition`
+     * calls it automatically each frame while open.
+     */
+    updatePosition() {
+        this.connectedOverlay()?.overlayRef?.updatePosition();
+        this.updateArrowPosition();
+    }
+    startTracking() {
+        if (this.trackRafId !== null)
+            return;
+        this.ngZone.runOutsideAngular(() => {
+            const loop = () => {
+                this.updatePosition();
+                this.trackRafId = requestAnimationFrame(loop);
+            };
+            this.trackRafId = requestAnimationFrame(loop);
+        });
+    }
+    stopTracking() {
+        if (this.trackRafId !== null) {
+            cancelAnimationFrame(this.trackRafId);
+            this.trackRafId = null;
+        }
+    }
     toggleTooltip() {
         if (this.isOpen()) {
             this.hideTooltip();
@@ -5629,12 +5711,12 @@ class TooltipComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\" aria-hidden=\"true\">\n    <div\n      class=\"tedi-tooltip__arrow\"\n      [style.left.px]=\"arrowLeft()\"\n      [style.top.px]=\"arrowTop()\"\n    ></div>\n    <ng-content select=\"tedi-tooltip-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trackPosition: { classPropertyName: "trackPosition", publicName: "trackPosition", 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 } }, outputs: { open: "openChange" }, queries: [{ propertyName: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\" aria-hidden=\"true\">\n    <div\n      class=\"tedi-tooltip__arrow\"\n      [style.left.px]=\"arrowLeft()\"\n      [style.top.px]=\"arrowTop()\"\n    ></div>\n    <ng-content select=\"tedi-tooltip-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-tooltip", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\" aria-hidden=\"true\">\n    <div\n      class=\"tedi-tooltip__arrow\"\n      [style.left.px]=\"arrowLeft()\"\n      [style.top.px]=\"arrowTop()\"\n    ></div>\n    <ng-content select=\"tedi-tooltip-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], openWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "openWith", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], tooltipTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipTriggerComponent), { isSignal: true }] }], tooltipContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipContentComponent), { ...{
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], openWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "openWith", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], trackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackPosition", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], tooltipTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipTriggerComponent), { isSignal: true }] }], tooltipContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipContentComponent), { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
 
@@ -5680,7 +5762,7 @@ class EllipsisComponent {
         this.fullText.set(el.textContent?.trim() ?? "");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: EllipsisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: EllipsisComponent, isStandalone: true, selector: "tedi-ellipsis", inputs: { lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-ellipsis" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isEllipsed() && tooltip()) {\n  <tedi-tooltip openWith=\"hover\">\n    <tedi-tooltip-trigger class=\"tedi-ellipsis__trigger\">\n      <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n    </tedi-tooltip-trigger>\n    <tedi-tooltip-content>{{ fullText() }}</tedi-tooltip-content>\n  </tedi-tooltip>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n}\n\n<ng-template #contentTpl>\n  <span class=\"tedi-ellipsis__wrapper\">\n    <span\n      #content\n      [class]=\"contentClasses()\"\n      [style.-webkit-line-clamp]=\"clampStyle()\"\n      [style.line-clamp]=\"clampStyle()\"\n    >\n      <span class=\"tedi-ellipsis__inner\"><ng-content /></span>\n    </span>\n  </span>\n</ng-template>\n", styles: [".tedi-ellipsis,.tedi-ellipsis__trigger,.tedi-ellipsis__wrapper{display:block;min-width:0}.tedi-ellipsis__content{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-hyphens:auto;hyphens:auto;word-break:break-word;-webkit-box-orient:vertical}.tedi-ellipsis__content--start{display:block;text-align:left;-webkit-hyphens:none;hyphens:none;word-break:normal;white-space:nowrap;-webkit-user-select:none;user-select:none;direction:rtl}.tedi-ellipsis__content--start .tedi-ellipsis__inner{unicode-bidi:plaintext}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: EllipsisComponent, isStandalone: true, selector: "tedi-ellipsis", inputs: { lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-ellipsis" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isEllipsed() && tooltip()) {\n  <tedi-tooltip openWith=\"hover\">\n    <tedi-tooltip-trigger class=\"tedi-ellipsis__trigger\">\n      <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n    </tedi-tooltip-trigger>\n    <tedi-tooltip-content>{{ fullText() }}</tedi-tooltip-content>\n  </tedi-tooltip>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n}\n\n<ng-template #contentTpl>\n  <span class=\"tedi-ellipsis__wrapper\">\n    <span\n      #content\n      [class]=\"contentClasses()\"\n      [style.-webkit-line-clamp]=\"clampStyle()\"\n      [style.line-clamp]=\"clampStyle()\"\n    >\n      <span class=\"tedi-ellipsis__inner\"><ng-content /></span>\n    </span>\n  </span>\n</ng-template>\n", styles: [".tedi-ellipsis,.tedi-ellipsis__trigger,.tedi-ellipsis__wrapper{display:block;min-width:0}.tedi-ellipsis__content{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-hyphens:auto;hyphens:auto;word-break:break-word;-webkit-box-orient:vertical}.tedi-ellipsis__content--start{display:block;text-align:left;-webkit-hyphens:none;hyphens:none;word-break:normal;white-space:nowrap;-webkit-user-select:none;user-select:none;direction:rtl}.tedi-ellipsis__content--start .tedi-ellipsis__inner{unicode-bidi:plaintext}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: EllipsisComponent, decorators: [{
             type: Component,
@@ -11187,7 +11269,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <div class=\"tedi-select__label-row\">\n    <label\n      [id]=\"labelId()\"\n      tedi-label\n      [for]=\"inputId()\"\n      [required]=\"required()\"\n      [size]=\"size()\"\n      (click)=\"onTriggerClick()\"\n    >\n      {{ label() }}\n    </label>\n    @if (tooltip(); as tooltipText) {\n      <tedi-tooltip>\n        <tedi-tooltip-trigger>\n          <button tedi-info-button></button>\n        </tedi-tooltip-trigger>\n        <tedi-tooltip-content>{{ tooltipText }}</tedi-tooltip-content>\n      </tedi-tooltip>\n    }\n  </div>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n  [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n          [attr.aria-label]=\"resolvedAriaLabel()\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else {\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <span\n    class=\"tedi-select__arrow\"\n    aria-hidden=\"true\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </span>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [ellipsis]=\"tagEllipsis()\"\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      <div class=\"tedi-select__multiselect-tags\">\n        @for (value of selectedValues(); track value; let i = $index) {\n          @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n            <tedi-tag\n              #tagElement\n              [ellipsis]=\"tagEllipsis()\"\n              [closable]=\"isTagRemovable()\"\n              (closed)=\"deselect($event, value)\"\n            >\n              {{ getLabel(value) }}\n            </tedi-tag>\n          }\n        }\n      </div>\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag class=\"tedi-select__multiselect-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    <ul\n      [id]=\"listboxId()\"\n      class=\"tedi-select__options\"\n      [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n      [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n      cdkListbox\n      [cdkListboxMultiple]=\"allowMultiple()\"\n      [cdkListboxValue]=\"visibleSelectedValues()\"\n      [cdkListboxNavigatesDisabledOptions]=\"false\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      (cdkListboxValueChange)=\"handleValueChange($event)\"\n      (keydown.tab)=\"toggleIsOpen(true)\"\n      (keydown.escape)=\"toggleIsOpen(true)\"\n      #listbox=\"cdkListbox\"\n    >\n      @if (filteredOptions().length) {\n        @if (allowMultiple() && showSelectAll()) {\n          <li\n            class=\"tedi-dropdown-item\"\n            [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n          >\n            <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n              <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n            </tedi-dropdown-item-value>\n          </li>\n        }\n\n        @for (group of optionGroups(); track group.label) {\n          @if (group.label.length > 0) {\n            @if (allowMultiple() && selectableGroups()) {\n              <li\n                class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n              >\n                <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n                  <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </li>\n            } @else {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n          }\n\n          @for (option of group.options; track option.value; let i = $index) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [cdkOption]=\"option.value\"\n              [cdkOptionDisabled]=\"option.disabled\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </li>\n          }\n        }\n      } @else {\n        <li class=\"tedi-dropdown-item tedi-select__no-options\">\n          {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__label-row{display:flex;gap:var(--content-label-inner-spacing-x);align-items:center}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 1 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter,.tedi-select__multiselect-container--single-row .tedi-select__search-input{flex-shrink:0}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]", inputs: ["aria-label", "color"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <div class=\"tedi-select__label-row\">\n    <label\n      [id]=\"labelId()\"\n      tedi-label\n      [for]=\"inputId()\"\n      [required]=\"required()\"\n      [size]=\"size()\"\n      (click)=\"onTriggerClick()\"\n    >\n      {{ label() }}\n    </label>\n    @if (tooltip(); as tooltipText) {\n      <tedi-tooltip>\n        <tedi-tooltip-trigger>\n          <button tedi-info-button></button>\n        </tedi-tooltip-trigger>\n        <tedi-tooltip-content>{{ tooltipText }}</tedi-tooltip-content>\n      </tedi-tooltip>\n    }\n  </div>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n  [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n          [attr.aria-label]=\"resolvedAriaLabel()\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else {\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <span\n    class=\"tedi-select__arrow\"\n    aria-hidden=\"true\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </span>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [ellipsis]=\"tagEllipsis()\"\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      <div class=\"tedi-select__multiselect-tags\">\n        @for (value of selectedValues(); track value; let i = $index) {\n          @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n            <tedi-tag\n              #tagElement\n              [ellipsis]=\"tagEllipsis()\"\n              [closable]=\"isTagRemovable()\"\n              (closed)=\"deselect($event, value)\"\n            >\n              {{ getLabel(value) }}\n            </tedi-tag>\n          }\n        }\n      </div>\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag class=\"tedi-select__multiselect-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    <ul\n      [id]=\"listboxId()\"\n      class=\"tedi-select__options\"\n      [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n      [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n      cdkListbox\n      [cdkListboxMultiple]=\"allowMultiple()\"\n      [cdkListboxValue]=\"visibleSelectedValues()\"\n      [cdkListboxNavigatesDisabledOptions]=\"false\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      (cdkListboxValueChange)=\"handleValueChange($event)\"\n      (keydown.tab)=\"toggleIsOpen(true)\"\n      (keydown.escape)=\"toggleIsOpen(true)\"\n      #listbox=\"cdkListbox\"\n    >\n      @if (filteredOptions().length) {\n        @if (allowMultiple() && showSelectAll()) {\n          <li\n            class=\"tedi-dropdown-item\"\n            [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n          >\n            <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n              <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n            </tedi-dropdown-item-value>\n          </li>\n        }\n\n        @for (group of optionGroups(); track group.label) {\n          @if (group.label.length > 0) {\n            @if (allowMultiple() && selectableGroups()) {\n              <li\n                class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n              >\n                <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n                  <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </li>\n            } @else {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n          }\n\n          @for (option of group.options; track option.value; let i = $index) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [cdkOption]=\"option.value\"\n              [cdkOptionDisabled]=\"option.disabled\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </li>\n          }\n        }\n      } @else {\n        <li class=\"tedi-dropdown-item tedi-select__no-options\">\n          {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__label-row{display:flex;gap:var(--content-label-inner-spacing-x);align-items:center}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 1 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter,.tedi-select__multiselect-container--single-row .tedi-select__search-input{flex-shrink:0}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]", inputs: ["aria-label", "color"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { 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: SelectComponent, decorators: [{
             type: Component,
@@ -11226,6 +11308,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 args: ["document:click", ["$event"]]
             }] } });
 
+class SliderComponent {
+    /**
+     * Unique identifier for the underlying range input, used for label association.
+     */
+    inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /**
+     * Name attribute of the underlying input.
+     */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    /**
+     * Label rendered above the slider.
+     */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /**
+     * Hide the label visually while keeping it available to assistive technology, or
+     * `"keep-space"` to also reserve its vertical space.
+     * @default false
+     */
+    hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : []));
+    /**
+     * Marks the field as required.
+     * @default false
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    /**
+     * Maximum allowed value.
+     * @default 100
+     */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /**
+     * Step size.
+     * @default 1
+     */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    /**
+     * Current value. Supports two-way binding and reactive forms.
+     */
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Disables the slider.
+     * @default false
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Marks the slider as invalid for validation purposes.
+     * @default false
+     */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    /**
+     * Text rendered to the left of the track (e.g. the minimum value).
+     */
+    minLabel = input(...(ngDevMode ? [undefined, { debugName: "minLabel" }] : []));
+    /**
+     * Text rendered to the right of the track (e.g. the maximum value).
+     * Ignored when `showCurrentValue` is `true`.
+     */
+    maxLabel = input(...(ngDevMode ? [undefined, { debugName: "maxLabel" }] : []));
+    /**
+     * Render the current value to the right of the track instead of `maxLabel`.
+     * @default false
+     */
+    showCurrentValue = input(false, ...(ngDevMode ? [{ debugName: "showCurrentValue" }] : []));
+    /**
+     * Formats the current value for the thumb tooltip and the `showCurrentValue` label.
+     */
+    valueFormatter = input(...(ngDevMode ? [undefined, { debugName: "valueFormatter" }] : []));
+    /**
+     * Show a tooltip with the current value above the thumb while hovered, focused or dragged.
+     * @default true
+     */
+    tooltip = input(true, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+    /**
+     * FeedbackText component inputs, rendered below the slider.
+     */
+    feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
+    /**
+     * Accessible label used when no visible `label` is provided.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /**
+     * ID of an element that labels the slider, used when no visible `label` is provided.
+     */
+    ariaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : []));
+    /**
+     * Human-readable text alternative of the current value.
+     */
+    ariaValuetext = input(...(ngDevMode ? [undefined, { debugName: "ariaValuetext" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isInvalid = computed(() => this.invalid() || this.feedbackText()?.type === "error", ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+    clampedValue = computed(() => Math.min(this.max(), Math.max(this.min(), this.value())), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+    progress = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        if (max === min)
+            return 0;
+        return ((this.clampedValue() - min) / (max - min)) * 100;
+    }, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    progressStyle = computed(() => ({
+        "--tedi-slider-progress": `${this.progress()}%`,
+        "--tedi-slider-progress-ratio": `${this.progress() / 100}`,
+    }), ...(ngDevMode ? [{ debugName: "progressStyle" }] : []));
+    formattedValue = computed(() => {
+        const formatter = this.valueFormatter();
+        return formatter ? formatter(this.clampedValue()) : `${this.clampedValue()}`;
+    }, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
+    rightLabel = computed(() => this.showCurrentValue() ? this.formattedValue() : this.maxLabel(), ...(ngDevMode ? [{ debugName: "rightLabel" }] : []));
+    feedbackId = computed(() => this.feedbackText() ? `${this.inputId()}-feedback` : null, ...(ngDevMode ? [{ debugName: "feedbackId" }] : []));
+    canShowTooltip = computed(() => this.tooltip() && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "canShowTooltip" }] : []));
+    tooltipOpen = computed(() => this.canShowTooltip() &&
+        (this.isHovered() || this.isFocused() || this.isDragging()), ...(ngDevMode ? [{ debugName: "tooltipOpen" }] : []));
+    classes = computed(() => {
+        const classList = ["tedi-slider"];
+        if (this.isDisabled())
+            classList.push("tedi-slider--disabled");
+        if (this.isInvalid())
+            classList.push("tedi-slider--invalid");
+        if (this.isDragging() && !this.isDisabled()) {
+            classList.push("tedi-slider--dragging");
+        }
+        return classList.join(" ");
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    writeValue(value) {
+        this.value.set(value == null || isNaN(value) ? this.min() : value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.formDisabled.set(disabled);
+    }
+    handleInput(event) {
+        const next = event.target.valueAsNumber;
+        if (isNaN(next))
+            return;
+        this.value.set(next);
+        this.onChange(next);
+    }
+    handlePointerDown() {
+        if (this.isDisabled())
+            return;
+        this.isDragging.set(true);
+        window.addEventListener("pointerup", this.endDrag);
+        window.addEventListener("pointercancel", this.endDrag);
+    }
+    handleFocus() {
+        this.isFocused.set(true);
+    }
+    handleBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    handleMouseEnter() {
+        this.isHovered.set(true);
+    }
+    handleMouseLeave() {
+        this.isHovered.set(false);
+    }
+    ngOnDestroy() {
+        this.endDrag();
+    }
+    endDrag = () => {
+        this.isDragging.set(false);
+        window.removeEventListener("pointerup", this.endDrag);
+        window.removeEventListener("pointercancel", this.endDrag);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SliderComponent, isStandalone: true, selector: "tedi-slider", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null }, showCurrentValue: { classPropertyName: "showCurrentValue", publicName: "showCurrentValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaValuetext: { classPropertyName: "ariaValuetext", publicName: "ariaValuetext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SliderComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "@if (label()) {\n  <label\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [class.sr-only]=\"hideLabel() === true\"\n    [class.tedi-slider__label--reserve-space]=\"hideLabel() === 'keep-space'\"\n  >{{ label() }}</label>\n}\n<div class=\"tedi-slider__container\">\n  <div class=\"tedi-slider__track-row\">\n    @if (minLabel() != null) {\n      <span class=\"tedi-slider__range-label\" aria-hidden=\"true\">{{ minLabel() }}</span>\n    }\n    <div class=\"tedi-slider__track\" [style]=\"progressStyle()\">\n      <input\n        type=\"range\"\n        class=\"tedi-slider__input\"\n        [id]=\"inputId()\"\n        [attr.name]=\"name()\"\n        [attr.min]=\"min()\"\n        [attr.max]=\"max()\"\n        [attr.step]=\"step()\"\n        [value]=\"clampedValue()\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [attr.aria-invalid]=\"isInvalid() ? 'true' : null\"\n        [attr.aria-describedby]=\"feedbackId()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        [attr.aria-valuetext]=\"ariaValuetext()\"\n        (input)=\"handleInput($event)\"\n        (mouseenter)=\"handleMouseEnter()\"\n        (mouseleave)=\"handleMouseLeave()\"\n        (pointerdown)=\"handlePointerDown()\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"handleBlur()\"\n      />\n      @if (canShowTooltip()) {\n        <tedi-tooltip\n          openWith=\"none\"\n          position=\"top\"\n          [offset]=\"0\"\n          [open]=\"tooltipOpen()\"\n          [trackPosition]=\"isDragging() || isFocused()\"\n        >\n          <tedi-tooltip-trigger\n            class=\"tedi-slider__thumb-anchor\"\n            [interactive]=\"false\"\n          ></tedi-tooltip-trigger>\n          <tedi-tooltip-content>{{ formattedValue() }}</tedi-tooltip-content>\n        </tedi-tooltip>\n      }\n    </div>\n    @if (rightLabel() != null) {\n      <span\n        class=\"tedi-slider__range-label\"\n        [attr.aria-hidden]=\"showCurrentValue() ? null : 'true'\"\n        [attr.aria-live]=\"showCurrentValue() ? 'polite' : null\"\n      >\n        {{ rightLabel() }}\n      </span>\n    }\n  </div>\n  <div class=\"tedi-slider__addon\">\n    <ng-content select=\"[sliderAddon]\" />\n  </div>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-slider{display:flex;flex-direction:column;width:100%}.tedi-slider__label--reserve-space{min-height:var(--body-regular-line-height);overflow:hidden;clip-path:inset(50%)}.tedi-slider__container{display:flex;flex-wrap:wrap;gap:var(--form-slider-inner-spacing);align-items:center;width:100%}.tedi-slider__container:has(.tedi-slider__addon:not(:empty)) .tedi-slider__track-row{min-width:8rem}.tedi-slider__track-row{display:flex;flex:1 0 0;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}.tedi-slider__range-label{flex-shrink:0;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-slider-range-label-text);white-space:nowrap}.tedi-slider__track{--tedi-slider-progress: 0%;--tedi-slider-progress-ratio: 0;position:relative;flex:1 0 0;min-width:0;height:var(--form-slider-height);background:linear-gradient(to right,var(--form-slider-active-background-default) 0%,var(--form-slider-active-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%);border:1px solid var(--form-slider-border-default);border-radius:var(--form-slider-radius)}.tedi-slider__thumb-anchor{position:absolute;top:50%;left:calc(var(--form-slider-thumb-size) / 2 + var(--tedi-slider-progress-ratio) * (100% - var(--form-slider-thumb-size)));display:block;width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);pointer-events:none;transform:translate(-50%,-50%)}.tedi-slider__input{--tedi-slider-hit-padding: .625rem;position:absolute;inset:calc(var(--tedi-slider-hit-padding) * -1) 0;width:100%;padding:0;margin:0;appearance:none;cursor:pointer;outline:none;background:transparent;border:0;border-radius:inherit}.tedi-slider__input::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent;border:0}.tedi-slider__input::-moz-range-track{width:100%;height:100%;background:transparent;border:0}.tedi-slider__input::-webkit-slider-thumb{width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);margin-top:calc((var(--form-slider-height) - var(--form-slider-thumb-size)) / 2 + var(--tedi-slider-hit-padding));appearance:none;cursor:pointer;background:var(--form-slider-thumb-background-default);border:var(--tedi-borders-02) solid var(--form-slider-thumb-border-default);border-radius:50%}.tedi-slider__input::-moz-range-thumb{box-sizing:border-box;width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);cursor:pointer;background:var(--form-slider-thumb-background-default);border:var(--tedi-borders-02) solid var(--form-slider-thumb-border-default);border-radius:50%}.tedi-slider__input:hover:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-hover);border-color:var(--form-slider-thumb-border-hover)}.tedi-slider__input:hover:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-hover);border-color:var(--form-slider-thumb-border-hover)}.tedi-slider__input:active:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-active);border-color:var(--form-slider-thumb-border-active)}.tedi-slider__input:active:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-active);border-color:var(--form-slider-thumb-border-active)}.tedi-slider__input:focus-visible:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-focus);border-color:var(--form-slider-thumb-border-focus);box-shadow:0 0 0 var(--tedi-borders-01) var(--tedi-neutral-100),0 0 0 calc(var(--tedi-borders-01) + var(--tedi-borders-02)) var(--form-slider-thumb-border-focus)}.tedi-slider__input:focus-visible:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-focus);border-color:var(--form-slider-thumb-border-focus);box-shadow:0 0 0 var(--tedi-borders-01) var(--tedi-neutral-100),0 0 0 calc(var(--tedi-borders-01) + var(--tedi-borders-02)) var(--form-slider-thumb-border-focus)}.tedi-slider__addon{display:flex;flex-shrink:0;align-items:center}.tedi-slider__addon:empty{display:none}.tedi-slider:hover:not(.tedi-slider--disabled) .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-hover) 0%,var(--form-slider-active-background-hover) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--dragging:not(.tedi-slider--disabled) .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-active) 0%,var(--form-slider-active-background-active) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--disabled .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-disabled) 0%,var(--form-slider-active-background-disabled) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--disabled .tedi-slider__input{cursor:not-allowed}.tedi-slider--disabled .tedi-slider__input::-webkit-slider-thumb{cursor:not-allowed;background:var(--form-slider-thumb-background-disabled);border-color:var(--form-slider-thumb-border-disabled)}.tedi-slider--disabled .tedi-slider__input::-moz-range-thumb{cursor:not-allowed;background:var(--form-slider-thumb-background-disabled);border-color:var(--form-slider-thumb-border-disabled)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-slider", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        LabelComponent,
+                        FeedbackTextComponent,
+                        TooltipComponent,
+                        TooltipTriggerComponent,
+                        TooltipContentComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        "[class]": "classes()",
+                    }, template: "@if (label()) {\n  <label\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [class.sr-only]=\"hideLabel() === true\"\n    [class.tedi-slider__label--reserve-space]=\"hideLabel() === 'keep-space'\"\n  >{{ label() }}</label>\n}\n<div class=\"tedi-slider__container\">\n  <div class=\"tedi-slider__track-row\">\n    @if (minLabel() != null) {\n      <span class=\"tedi-slider__range-label\" aria-hidden=\"true\">{{ minLabel() }}</span>\n    }\n    <div class=\"tedi-slider__track\" [style]=\"progressStyle()\">\n      <input\n        type=\"range\"\n        class=\"tedi-slider__input\"\n        [id]=\"inputId()\"\n        [attr.name]=\"name()\"\n        [attr.min]=\"min()\"\n        [attr.max]=\"max()\"\n        [attr.step]=\"step()\"\n        [value]=\"clampedValue()\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [attr.aria-invalid]=\"isInvalid() ? 'true' : null\"\n        [attr.aria-describedby]=\"feedbackId()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-labelledby]=\"ariaLabelledby()\"\n        [attr.aria-valuetext]=\"ariaValuetext()\"\n        (input)=\"handleInput($event)\"\n        (mouseenter)=\"handleMouseEnter()\"\n        (mouseleave)=\"handleMouseLeave()\"\n        (pointerdown)=\"handlePointerDown()\"\n        (focus)=\"handleFocus()\"\n        (blur)=\"handleBlur()\"\n      />\n      @if (canShowTooltip()) {\n        <tedi-tooltip\n          openWith=\"none\"\n          position=\"top\"\n          [offset]=\"0\"\n          [open]=\"tooltipOpen()\"\n          [trackPosition]=\"isDragging() || isFocused()\"\n        >\n          <tedi-tooltip-trigger\n            class=\"tedi-slider__thumb-anchor\"\n            [interactive]=\"false\"\n          ></tedi-tooltip-trigger>\n          <tedi-tooltip-content>{{ formattedValue() }}</tedi-tooltip-content>\n        </tedi-tooltip>\n      }\n    </div>\n    @if (rightLabel() != null) {\n      <span\n        class=\"tedi-slider__range-label\"\n        [attr.aria-hidden]=\"showCurrentValue() ? null : 'true'\"\n        [attr.aria-live]=\"showCurrentValue() ? 'polite' : null\"\n      >\n        {{ rightLabel() }}\n      </span>\n    }\n  </div>\n  <div class=\"tedi-slider__addon\">\n    <ng-content select=\"[sliderAddon]\" />\n  </div>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-slider{display:flex;flex-direction:column;width:100%}.tedi-slider__label--reserve-space{min-height:var(--body-regular-line-height);overflow:hidden;clip-path:inset(50%)}.tedi-slider__container{display:flex;flex-wrap:wrap;gap:var(--form-slider-inner-spacing);align-items:center;width:100%}.tedi-slider__container:has(.tedi-slider__addon:not(:empty)) .tedi-slider__track-row{min-width:8rem}.tedi-slider__track-row{display:flex;flex:1 0 0;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}.tedi-slider__range-label{flex-shrink:0;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-slider-range-label-text);white-space:nowrap}.tedi-slider__track{--tedi-slider-progress: 0%;--tedi-slider-progress-ratio: 0;position:relative;flex:1 0 0;min-width:0;height:var(--form-slider-height);background:linear-gradient(to right,var(--form-slider-active-background-default) 0%,var(--form-slider-active-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%);border:1px solid var(--form-slider-border-default);border-radius:var(--form-slider-radius)}.tedi-slider__thumb-anchor{position:absolute;top:50%;left:calc(var(--form-slider-thumb-size) / 2 + var(--tedi-slider-progress-ratio) * (100% - var(--form-slider-thumb-size)));display:block;width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);pointer-events:none;transform:translate(-50%,-50%)}.tedi-slider__input{--tedi-slider-hit-padding: .625rem;position:absolute;inset:calc(var(--tedi-slider-hit-padding) * -1) 0;width:100%;padding:0;margin:0;appearance:none;cursor:pointer;outline:none;background:transparent;border:0;border-radius:inherit}.tedi-slider__input::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent;border:0}.tedi-slider__input::-moz-range-track{width:100%;height:100%;background:transparent;border:0}.tedi-slider__input::-webkit-slider-thumb{width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);margin-top:calc((var(--form-slider-height) - var(--form-slider-thumb-size)) / 2 + var(--tedi-slider-hit-padding));appearance:none;cursor:pointer;background:var(--form-slider-thumb-background-default);border:var(--tedi-borders-02) solid var(--form-slider-thumb-border-default);border-radius:50%}.tedi-slider__input::-moz-range-thumb{box-sizing:border-box;width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);cursor:pointer;background:var(--form-slider-thumb-background-default);border:var(--tedi-borders-02) solid var(--form-slider-thumb-border-default);border-radius:50%}.tedi-slider__input:hover:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-hover);border-color:var(--form-slider-thumb-border-hover)}.tedi-slider__input:hover:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-hover);border-color:var(--form-slider-thumb-border-hover)}.tedi-slider__input:active:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-active);border-color:var(--form-slider-thumb-border-active)}.tedi-slider__input:active:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-active);border-color:var(--form-slider-thumb-border-active)}.tedi-slider__input:focus-visible:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-focus);border-color:var(--form-slider-thumb-border-focus);box-shadow:0 0 0 var(--tedi-borders-01) var(--tedi-neutral-100),0 0 0 calc(var(--tedi-borders-01) + var(--tedi-borders-02)) var(--form-slider-thumb-border-focus)}.tedi-slider__input:focus-visible:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-focus);border-color:var(--form-slider-thumb-border-focus);box-shadow:0 0 0 var(--tedi-borders-01) var(--tedi-neutral-100),0 0 0 calc(var(--tedi-borders-01) + var(--tedi-borders-02)) var(--form-slider-thumb-border-focus)}.tedi-slider__addon{display:flex;flex-shrink:0;align-items:center}.tedi-slider__addon:empty{display:none}.tedi-slider:hover:not(.tedi-slider--disabled) .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-hover) 0%,var(--form-slider-active-background-hover) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--dragging:not(.tedi-slider--disabled) .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-active) 0%,var(--form-slider-active-background-active) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--disabled .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-disabled) 0%,var(--form-slider-active-background-disabled) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--disabled .tedi-slider__input{cursor:not-allowed}.tedi-slider--disabled .tedi-slider__input::-webkit-slider-thumb{cursor:not-allowed;background:var(--form-slider-thumb-background-disabled);border-color:var(--form-slider-thumb-border-disabled)}.tedi-slider--disabled .tedi-slider__input::-moz-range-thumb{cursor:not-allowed;background:var(--form-slider-thumb-background-disabled);border-color:var(--form-slider-thumb-border-disabled)}\n"] }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLabel", required: false }] }], maxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabel", required: false }] }], showCurrentValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentValue", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaValuetext: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaValuetext", required: false }] }] } });
+
 class ToggleComponent {
     /**
      * The unique identifier for the input element that is associated with label.
@@ -12354,7 +12643,11 @@ class TextGroupComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
     classes = computed(() => {
-        const classList = ['tedi-text-group', `tedi-text-group--${this.breakpointInputs().type}`];
+        const { type, labelWidth } = this.breakpointInputs();
+        const classList = ['tedi-text-group', `tedi-text-group--${type}`];
+        if (labelWidth) {
+            classList.push('tedi-text-group--fixed-label');
+        }
         return classList.join(" ");
     }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     ngAfterContentChecked() {
@@ -12367,22 +12660,22 @@ class TextGroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"breakpointInputs().labelWidth\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-text-group", imports: [
                         LabelComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"labelWidth()\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"breakpointInputs().labelWidth\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], textGroupLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TextGroupLabelComponent), { ...{ read: ElementRef }, isSignal: true }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
 
 class TextGroupValueComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TextGroupValueComponent, isStandalone: true, selector: "tedi-text-group-value", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TextGroupValueComponent, isStandalone: true, selector: "tedi-text-group-value", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
+            args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
         }] });
 
 class CarouselSlideDirective {
@@ -16809,14 +17102,14 @@ class LinkComponent {
         return classList.join(" ");
     }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: LinkComponent, isStandalone: true, selector: "[tedi-link]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.tabIndex": "0" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (target() === \"_blank\") {\n  <span class=\"sr-only\">{{ \"anchor.new-tab\" | tediTranslate }}</span>\n}\n", styles: [".tedi-link{display:inline-flex;text-decoration:none;cursor:pointer;color:var(--link-primary-default)}.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--link-primary-hover)}.tedi-link:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--link-primary-active)}.tedi-link:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:focus-visible:not(:disabled){color:var(--link-primary-focus);outline:2px solid var(--link-primary-focus);outline-offset:1px;border-radius:0}.tedi-link:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--inverted{color:var(--link-inverted-default)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-hover)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-active)}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:focus-visible:not(:disabled){color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}.tedi-link--inverted:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--small{font-size:var(--body-small-regular-size)}.tedi-link:not(.tedi-link--no-underline) :not(tedi-icon){text-decoration:underline}.tedi-link:hover :not(tedi-icon){text-decoration:underline}.tedi-link tedi-icon{--_tedi-icon-size: var(--icon-03);height:fit-content;margin-right:var(--button-sm-inner-spacing);margin-left:var(--button-sm-inner-spacing);line-height:inherit;color:inherit}.tedi-link tedi-icon:first-child{margin-left:0}.tedi-link tedi-icon:last-child{margin-right:0}.tedi-link--small tedi-icon{--_tedi-icon-size: var(--icon-02)}\n"], dependencies: [{ 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: LinkComponent, isStandalone: true, selector: "[tedi-link]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.tabIndex": "0" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (target() === \"_blank\") {\n  <span class=\"sr-only\">{{ \"anchor.new-tab\" | tediTranslate }}</span>\n}\n", styles: [".tedi-link{display:inline-flex;text-decoration:none;cursor:pointer;color:var(--link-primary-default)}.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--link-primary-hover)}.tedi-link:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--link-primary-active)}.tedi-link:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:focus-visible:not(:disabled){color:var(--link-primary-focus);outline:2px solid var(--link-primary-focus);outline-offset:1px;border-radius:0}.tedi-link:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link:where(button){padding:0;font:inherit;text-align:inherit;appearance:none;background:none;border:0}.tedi-link--inverted{color:var(--link-inverted-default)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-hover)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-active)}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:focus-visible:not(:disabled){color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}.tedi-link--inverted:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--small{font-size:var(--body-small-regular-size)}.tedi-link:not(.tedi-link--no-underline) :not(tedi-icon){text-decoration:underline}.tedi-link:hover :not(tedi-icon){text-decoration:underline}.tedi-link tedi-icon{--_tedi-icon-size: var(--icon-03);height:fit-content;margin-right:var(--button-sm-inner-spacing);margin-left:var(--button-sm-inner-spacing);line-height:inherit;color:inherit}.tedi-link tedi-icon:first-child{margin-left:0}.tedi-link tedi-icon:last-child{margin-right:0}.tedi-link--small tedi-icon{--_tedi-icon-size: var(--icon-02)}\n"], dependencies: [{ 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: LinkComponent, decorators: [{
             type: Component,
             args: [{ selector: "[tedi-link]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [TediTranslationPipe], host: {
                         "[class]": "classes()",
                         "[attr.tabIndex]": "0",
-                    }, template: "<ng-content></ng-content>\n@if (target() === \"_blank\") {\n  <span class=\"sr-only\">{{ \"anchor.new-tab\" | tediTranslate }}</span>\n}\n", styles: [".tedi-link{display:inline-flex;text-decoration:none;cursor:pointer;color:var(--link-primary-default)}.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--link-primary-hover)}.tedi-link:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--link-primary-active)}.tedi-link:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:focus-visible:not(:disabled){color:var(--link-primary-focus);outline:2px solid var(--link-primary-focus);outline-offset:1px;border-radius:0}.tedi-link:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--inverted{color:var(--link-inverted-default)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-hover)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-active)}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:focus-visible:not(:disabled){color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}.tedi-link--inverted:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--small{font-size:var(--body-small-regular-size)}.tedi-link:not(.tedi-link--no-underline) :not(tedi-icon){text-decoration:underline}.tedi-link:hover :not(tedi-icon){text-decoration:underline}.tedi-link tedi-icon{--_tedi-icon-size: var(--icon-03);height:fit-content;margin-right:var(--button-sm-inner-spacing);margin-left:var(--button-sm-inner-spacing);line-height:inherit;color:inherit}.tedi-link tedi-icon:first-child{margin-left:0}.tedi-link tedi-icon:last-child{margin-right:0}.tedi-link--small tedi-icon{--_tedi-icon-size: var(--icon-02)}\n"] }]
+                    }, template: "<ng-content></ng-content>\n@if (target() === \"_blank\") {\n  <span class=\"sr-only\">{{ \"anchor.new-tab\" | tediTranslate }}</span>\n}\n", styles: [".tedi-link{display:inline-flex;text-decoration:none;cursor:pointer;color:var(--link-primary-default)}.tedi-link:hover:not(:disabled,[aria-disabled=true]){color:var(--link-primary-hover)}.tedi-link:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:active:not(:disabled,[aria-disabled=true]){color:var(--link-primary-active)}.tedi-link:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link:focus-visible:not(:disabled){color:var(--link-primary-focus);outline:2px solid var(--link-primary-focus);outline-offset:1px;border-radius:0}.tedi-link:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link:where(button){padding:0;font:inherit;text-align:inherit;appearance:none;background:none;border:0}.tedi-link--inverted{color:var(--link-inverted-default)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-hover)}.tedi-link--inverted:hover:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]){color:var(--link-inverted-active)}.tedi-link--inverted:active:not(:disabled,[aria-disabled=true]) .tedi-link__text{text-decoration:underline}.tedi-link--inverted:focus-visible:not(:disabled){color:var(--link-inverted-focus);outline:2px solid var(--link-inverted-focus);outline-offset:1px;border-radius:0}.tedi-link--inverted:focus-visible:not(:disabled) .tedi-link__text{text-decoration:underline}.tedi-link--small{font-size:var(--body-small-regular-size)}.tedi-link:not(.tedi-link--no-underline) :not(tedi-icon){text-decoration:underline}.tedi-link:hover :not(tedi-icon){text-decoration:underline}.tedi-link tedi-icon{--_tedi-icon-size: var(--icon-03);height:fit-content;margin-right:var(--button-sm-inner-spacing);margin-left:var(--button-sm-inner-spacing);line-height:inherit;color:inherit}.tedi-link tedi-icon:first-child{margin-left:0}.tedi-link tedi-icon:last-child{margin-right:0}.tedi-link--small tedi-icon{--_tedi-icon-size: var(--icon-02)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
 
 class FooterBottomComponent {
@@ -18195,7 +18488,7 @@ class SideNavItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SideNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SideNavItemComponent, isStandalone: true, selector: "tedi-sidenav-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, styleAttribute: "display: contents" }, queries: [{ propertyName: "dropdown", first: true, predicate: i0.forwardRef(() => SideNavDropdownComponent), descendants: true }], ngImport: i0, template: "<li [class]=\"classes()\">\n  @if (sidenavService.isMobile()) {\n    @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n      <ng-container *ngIf=\"!href() && !route(); else mobileLink\">\n        <tedi-sidenav-group-title>\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </tedi-sidenav-group-title>\n      </ng-container>\n      <ng-template #mobileLink>\n        <ng-container *ngIf=\"route(); else mobileHref\">\n          <a class=\"tedi-sidenav-item__link\" [routerLink]=\"route()\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n          </a>\n        </ng-container>\n        <ng-template #mobileHref>\n          <a class=\"tedi-sidenav-item__link\" [href]=\"href()\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n          </a>\n        </ng-template>\n      </ng-template>\n    } @else {\n      <div class=\"tedi-sidenav-item__trigger\">\n        <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n      </div>\n    }\n  } @else if (sidenavService.tooltipEnabled()) {\n    <tedi-tooltip position=\"right\">\n      <tedi-tooltip-trigger>\n        <div class=\"tedi-sidenav-item__trigger\">\n          <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n        </div>\n      </tedi-tooltip-trigger>\n      <tedi-tooltip-content position=\"right\">\n        {{ textContent() }}\n      </tedi-tooltip-content>\n    </tedi-tooltip>\n  } @else {\n    <div class=\"tedi-sidenav-item__trigger\">\n      <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n    </div>\n  }\n\n  <ng-content select=\"tedi-sidenav-dropdown\"></ng-content>\n</li>\n\n<ng-template #buttonOrLink>\n  <ng-container *ngIf=\"!href() && !route(); else hasLink\">\n    <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown?.open()\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      @if (dropdown) {\n        <tedi-icon\n          name=\"expand_more\"\n          class=\"tedi-sidenav-item__caret\"\n          color=\"white\"\n          [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n        />\n      }\n    </button>\n  </ng-container>\n  <ng-template #hasLink>\n    <ng-container\n      *ngIf=\"\n        (dropdown && sidenavService.isCollapsed()) ||\n          (dropdown && sidenavService.isMobile());\n        else plainLink\n      \"\n    >\n      <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown.open()\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        <tedi-icon\n          name=\"expand_more\"\n          class=\"tedi-sidenav-item__caret\"\n          color=\"white\"\n          [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n        />\n      </button>\n    </ng-container>\n    <ng-template #plainLink>\n      @if (route()) {\n        <a class=\"tedi-sidenav-item__title\" [routerLink]=\"route()\">\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n      } @else {\n        <a class=\"tedi-sidenav-item__title\" [href]=\"href()\">\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n      }\n      @if (dropdown) {\n        <button\n          class=\"tedi-sidenav-item__caret-button\"\n          (click)=\"toggleDropdown()\"\n          [attr.aria-expanded]=\"dropdown.open()\"\n        >\n          <span class=\"sr-only\">{{ 'sidenav.toggleSubmenu' | tediTranslate: textContent(): dropdown.open() }}</span>\n          <div class=\"tedi-sidenav-item__caret-container\">\n            <tedi-icon\n              name=\"expand_more\"\n              class=\"tedi-sidenav-item__caret\"\n              color=\"white\"\n              [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n            />\n          </div>\n        </button>\n      }\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #content>\n  @if (icon(); as icon) {\n    @if (!(sidenavService.isMobileItemOpen() && dropdown?.open())) {\n      <tedi-icon [name]=\"icon\" color=\"white\" class=\"tedi-sidenav-item__icon\" />\n    }\n  }\n  <span class=\"tedi-sidenav-item__text\">\n    <ng-content></ng-content>\n  </span>\n</ng-template>\n", styles: [".tedi-sidenav-item{position:relative;display:flex;flex-direction:column;font-size:var(--_sidenav-item-font-size);line-height:var(--_sidenav-item-line-height)}.tedi-sidenav-item--hidden{display:none}.tedi-sidenav-item--selected .tedi-sidenav-item__trigger{background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight)}.tedi-sidenav-item__trigger{--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:flex;gap:var(--_gap);width:100%;cursor:pointer}.tedi-sidenav-item__trigger:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{display:flex;gap:var(--_gap);align-items:center;width:100%;min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:inherit;color:var(--navigation-vertical-item-text-default);text-align:start;text-decoration:none;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__title:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__title:not(:only-child){max-width:calc(100% - var(--_sidenav-item-padding-right) - var(--_sidenav-item-caret-size) - var(--_gap));padding-right:0}.tedi-sidenav-item__icon{font-size:var(--_sidenav-item-icon-size)!important}.tedi-sidenav-item__caret-button{display:flex;place-items:center center;min-height:var(--_sidenav-item-min-height);padding:0;font-size:inherit;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--navigation-vertical-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible{position:relative;z-index:1;outline:none}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__caret-button:last-child{padding-right:var(--_sidenav-item-padding-right)}.tedi-sidenav-item__caret-container{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;border-radius:var(--button-radius-sm)}.tedi-sidenav-item__caret{margin-left:auto;font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);color:var(--navigation-vertical-item-text-default);text-decoration:none}.tedi-sidenav-item__link:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__link:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{max-width:none;white-space:normal}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SideNavGroupTitleComponent, selector: "tedi-sidenav-group-title" }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { 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: SideNavItemComponent, isStandalone: true, selector: "tedi-sidenav-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, styleAttribute: "display: contents" }, queries: [{ propertyName: "dropdown", first: true, predicate: i0.forwardRef(() => SideNavDropdownComponent), descendants: true }], ngImport: i0, template: "<li [class]=\"classes()\">\n  @if (sidenavService.isMobile()) {\n    @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n      <ng-container *ngIf=\"!href() && !route(); else mobileLink\">\n        <tedi-sidenav-group-title>\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </tedi-sidenav-group-title>\n      </ng-container>\n      <ng-template #mobileLink>\n        <ng-container *ngIf=\"route(); else mobileHref\">\n          <a class=\"tedi-sidenav-item__link\" [routerLink]=\"route()\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n          </a>\n        </ng-container>\n        <ng-template #mobileHref>\n          <a class=\"tedi-sidenav-item__link\" [href]=\"href()\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n          </a>\n        </ng-template>\n      </ng-template>\n    } @else {\n      <div class=\"tedi-sidenav-item__trigger\">\n        <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n      </div>\n    }\n  } @else if (sidenavService.tooltipEnabled()) {\n    <tedi-tooltip position=\"right\">\n      <tedi-tooltip-trigger>\n        <div class=\"tedi-sidenav-item__trigger\">\n          <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n        </div>\n      </tedi-tooltip-trigger>\n      <tedi-tooltip-content position=\"right\">\n        {{ textContent() }}\n      </tedi-tooltip-content>\n    </tedi-tooltip>\n  } @else {\n    <div class=\"tedi-sidenav-item__trigger\">\n      <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n    </div>\n  }\n\n  <ng-content select=\"tedi-sidenav-dropdown\"></ng-content>\n</li>\n\n<ng-template #buttonOrLink>\n  <ng-container *ngIf=\"!href() && !route(); else hasLink\">\n    <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown?.open()\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      @if (dropdown) {\n        <tedi-icon\n          name=\"expand_more\"\n          class=\"tedi-sidenav-item__caret\"\n          color=\"white\"\n          [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n        />\n      }\n    </button>\n  </ng-container>\n  <ng-template #hasLink>\n    <ng-container\n      *ngIf=\"\n        (dropdown && sidenavService.isCollapsed()) ||\n          (dropdown && sidenavService.isMobile());\n        else plainLink\n      \"\n    >\n      <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown.open()\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        <tedi-icon\n          name=\"expand_more\"\n          class=\"tedi-sidenav-item__caret\"\n          color=\"white\"\n          [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n        />\n      </button>\n    </ng-container>\n    <ng-template #plainLink>\n      @if (route()) {\n        <a class=\"tedi-sidenav-item__title\" [routerLink]=\"route()\">\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n      } @else {\n        <a class=\"tedi-sidenav-item__title\" [href]=\"href()\">\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </a>\n      }\n      @if (dropdown) {\n        <button\n          class=\"tedi-sidenav-item__caret-button\"\n          (click)=\"toggleDropdown()\"\n          [attr.aria-expanded]=\"dropdown.open()\"\n        >\n          <span class=\"sr-only\">{{ 'sidenav.toggleSubmenu' | tediTranslate: textContent(): dropdown.open() }}</span>\n          <div class=\"tedi-sidenav-item__caret-container\">\n            <tedi-icon\n              name=\"expand_more\"\n              class=\"tedi-sidenav-item__caret\"\n              color=\"white\"\n              [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n            />\n          </div>\n        </button>\n      }\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #content>\n  @if (icon(); as icon) {\n    @if (!(sidenavService.isMobileItemOpen() && dropdown?.open())) {\n      <tedi-icon [name]=\"icon\" color=\"white\" class=\"tedi-sidenav-item__icon\" />\n    }\n  }\n  <span class=\"tedi-sidenav-item__text\">\n    <ng-content></ng-content>\n  </span>\n</ng-template>\n", styles: [".tedi-sidenav-item{position:relative;display:flex;flex-direction:column;font-size:var(--_sidenav-item-font-size);line-height:var(--_sidenav-item-line-height)}.tedi-sidenav-item--hidden{display:none}.tedi-sidenav-item--selected .tedi-sidenav-item__trigger{background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight)}.tedi-sidenav-item__trigger{--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:flex;gap:var(--_gap);width:100%;cursor:pointer}.tedi-sidenav-item__trigger:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{display:flex;gap:var(--_gap);align-items:center;width:100%;min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:inherit;color:var(--navigation-vertical-item-text-default);text-align:start;text-decoration:none;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__title:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__title:not(:only-child){max-width:calc(100% - var(--_sidenav-item-padding-right) - var(--_sidenav-item-caret-size) - var(--_gap));padding-right:0}.tedi-sidenav-item__icon{font-size:var(--_sidenav-item-icon-size)!important}.tedi-sidenav-item__caret-button{display:flex;place-items:center center;min-height:var(--_sidenav-item-min-height);padding:0;font-size:inherit;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--navigation-vertical-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible{position:relative;z-index:1;outline:none}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__caret-button:last-child{padding-right:var(--_sidenav-item-padding-right)}.tedi-sidenav-item__caret-container{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;border-radius:var(--button-radius-sm)}.tedi-sidenav-item__caret{margin-left:auto;font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);color:var(--navigation-vertical-item-text-default);text-decoration:none}.tedi-sidenav-item__link:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__link:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{max-width:none;white-space:normal}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SideNavGroupTitleComponent, selector: "tedi-sidenav-group-title" }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { 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: SideNavItemComponent, decorators: [{
             type: Component,
@@ -18328,6 +18621,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 args: ["click"]
             }] } });
 
+/**
+ * Marks a projected element as a single breadcrumb. Apply as a structural
+ * directive on the crumb element; `tedi-breadcrumbs` collects each one and
+ * renders it into the trail, inserting separators between them.
+ *
+ * Use a link (e.g. `a tedi-link`) for navigable crumbs and a plain element
+ * (e.g. `span`) for the current page — add `aria-current="page"` to it yourself.
+ */
+class BreadcrumbItemDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: BreadcrumbItemDirective, isStandalone: true, selector: "[tediBreadcrumbItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediBreadcrumbItem]",
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Optional custom separator for `tedi-breadcrumbs`. Provide as a template to
+ * render arbitrary content between crumbs; takes precedence over the
+ * `separator` string input and the default chevron icon.
+ */
+class BreadcrumbSeparatorDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: BreadcrumbSeparatorDirective, isStandalone: true, selector: "[tediBreadcrumbSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediBreadcrumbSeparator]",
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Breadcrumbs show the user's location within the page hierarchy. Each child
+ * marked with `*tediBreadcrumbItem` becomes one crumb, in order from the root
+ * to the current page; chevron separators are inserted between them.
+ *
+ * Use a link (e.g. `a tedi-link`) for navigable crumbs and a plain element for
+ * the current page — add `aria-current="page"` to it yourself.
+ *
+ * Crumb links are underlined by default. Set `[underline]="false"` on the
+ * `tedi-link` for non-underlined crumbs — recommended for the `short` back-link.
+ * Crumbs collapsed into the ellipsis dropdown are always rendered without an
+ * underline, regardless of their `[underline]` setting.
+ */
+class BreadcrumbsComponent {
+    breakpointService = inject(BreakpointService);
+    items = contentChildren(BreadcrumbItemDirective, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    separatorTemplate = contentChild(BreadcrumbSeparatorDirective, ...(ngDevMode ? [{ debugName: "separatorTemplate" }] : []));
+    /** Accessible label for the `nav` landmark. Falls back to the `breadcrumbs` translation. */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /** Accessible label for the ellipsis button that opens the collapsed-crumbs dropdown. Falls back to the `breadcrumbs.show-more` translation. */
+    showMoreLabel = input(...(ngDevMode ? [undefined, { debugName: "showMoreLabel" }] : []));
+    /** Separator between crumbs. Defaults to a chevron icon; a `[tediBreadcrumbSeparator]` template overrides this. */
+    separator = input(...(ngDevMode ? [undefined, { debugName: "separator" }] : []));
+    /** `long` shows the full trail; `short` shows only the parent crumb as a back-link. Defaults to `long`. */
+    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+    /** Max crumbs before the middle collapses into an ellipsis dropdown. Long variant only; omit to render all. */
+    maxItems = input(...(ngDevMode ? [undefined, { debugName: "maxItems" }] : []));
+    /** Crumbs kept visible at the start of the trail when collapsed. Defaults to `1`. */
+    itemsBeforeCollapse = input(...(ngDevMode ? [undefined, { debugName: "itemsBeforeCollapse" }] : []));
+    /** Crumbs kept visible at the end of the trail when collapsed. Defaults to `1`. */
+    itemsAfterCollapse = input(...(ngDevMode ? [undefined, { debugName: "itemsAfterCollapse" }] : []));
+    xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
+    sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
+    md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
+    lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
+    xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
+    xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
+    resolved = computed(() => this.breakpointService.getBreakpointInputs({
+        variant: this.variant(),
+        maxItems: this.maxItems(),
+        itemsBeforeCollapse: this.itemsBeforeCollapse(),
+        itemsAfterCollapse: this.itemsAfterCollapse(),
+        xs: this.xs(),
+        sm: this.sm(),
+        md: this.md(),
+        lg: this.lg(),
+        xl: this.xl(),
+        xxl: this.xxl(),
+    }), ...(ngDevMode ? [{ debugName: "resolved" }] : []));
+    currentVariant = computed(() => this.resolved().variant ?? "long", ...(ngDevMode ? [{ debugName: "currentVariant" }] : []));
+    parentItem = computed(() => {
+        const items = this.items();
+        return items.length > 1 ? items[items.length - 2] : null;
+    }, ...(ngDevMode ? [{ debugName: "parentItem" }] : []));
+    visible = computed(() => {
+        if (this.items().length === 0)
+            return false;
+        if (this.currentVariant() === "short")
+            return this.parentItem() !== null;
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    tokens = computed(() => {
+        const items = this.items();
+        if (items.length === 0)
+            return [];
+        const resolved = this.resolved();
+        const before = Math.max(0, resolved.itemsBeforeCollapse ?? 1);
+        // Keep at least one trailing crumb so the current page is never collapsed.
+        const after = Math.max(1, resolved.itemsAfterCollapse ?? 1);
+        const lastIndex = items.length - 1;
+        const shouldCollapse = resolved.maxItems !== undefined &&
+            items.length > resolved.maxItems &&
+            items.length > before + after;
+        if (!shouldCollapse) {
+            return items.map((item, index) => ({
+                kind: "item",
+                item,
+                current: index === lastIndex,
+            }));
+        }
+        const tail = items.slice(items.length - after);
+        return [
+            ...items
+                .slice(0, before)
+                .map((item) => ({ kind: "item", item, current: false })),
+            {
+                kind: "ellipsis",
+                hidden: items.slice(before, items.length - after),
+            },
+            ...tail.map((item, index) => ({
+                kind: "item",
+                item,
+                current: index === tail.length - 1,
+            })),
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tokens" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BreadcrumbsComponent, isStandalone: true, selector: "tedi-breadcrumbs", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showMoreLabel: { classPropertyName: "showMoreLabel", publicName: "showMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, itemsBeforeCollapse: { classPropertyName: "itemsBeforeCollapse", publicName: "itemsBeforeCollapse", isSignal: true, isRequired: false, transformFunction: null }, itemsAfterCollapse: { classPropertyName: "itemsAfterCollapse", publicName: "itemsAfterCollapse", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-breadcrumbs" }, queries: [{ propertyName: "items", predicate: BreadcrumbItemDirective, isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: BreadcrumbSeparatorDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <nav [attr.aria-label]=\"ariaLabel() || ('breadcrumbs' | tediTranslate)\">\n    <ol class=\"tedi-breadcrumbs__list\">\n      @if (currentVariant() === \"short\") {\n        @if (parentItem(); as parent) {\n          <li class=\"tedi-breadcrumbs__item\">\n            <tedi-icon name=\"arrow_back\" [size]=\"16\" color=\"brand\" />\n            <ng-container [ngTemplateOutlet]=\"parent.templateRef\" />\n          </li>\n        }\n      } @else {\n        @for (token of tokens(); track $index; let last = $last) {\n          @if (token.kind === \"item\") {\n            <li\n              class=\"tedi-breadcrumbs__item\"\n              [class.tedi-breadcrumbs__item--current]=\"token.current\"\n            >\n              <ng-container [ngTemplateOutlet]=\"token.item.templateRef\" />\n            </li>\n          } @else {\n            <li class=\"tedi-breadcrumbs__item\">\n              <tedi-dropdown position=\"bottom-start\">\n                <button\n                  type=\"button\"\n                  tedi-link\n                  [underline]=\"false\"\n                  tedi-dropdown-trigger\n                  class=\"tedi-breadcrumbs__ellipsis\"\n                  [attr.aria-label]=\"\n                    showMoreLabel() || ('breadcrumbs.show-more' | tediTranslate)\n                  \"\n                >\n                  <span aria-hidden=\"true\">\u2026</span>\n                </button>\n                <tedi-dropdown-content dropdownRole=\"menu\">\n                  @for (hidden of token.hidden; track $index) {\n                    <li\n                      tedi-dropdown-item\n                      [clipContent]=\"false\"\n                      class=\"tedi-breadcrumbs__dropdown-item\"\n                    >\n                      <ng-container [ngTemplateOutlet]=\"hidden.templateRef\" />\n                    </li>\n                  }\n                </tedi-dropdown-content>\n              </tedi-dropdown>\n            </li>\n          }\n          @if (!last) {\n            <li class=\"tedi-breadcrumbs__separator\" aria-hidden=\"true\">\n              @if (separatorTemplate(); as sep) {\n                <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n              } @else if (separator()) {\n                <span tedi-text color=\"brand\">{{ separator() }}</span>\n              } @else {\n                <tedi-icon name=\"chevron_right\" [size]=\"16\" color=\"brand\" />\n              }\n            </li>\n          }\n        }\n      }\n    </ol>\n  </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--breadcrumb-inner-spacing);align-items:center;padding:0;margin:0;list-style:none}.tedi-breadcrumbs__item{display:inline-flex;gap:var(--breadcrumb-inner-spacing);align-items:center}.tedi-breadcrumbs__item--current{color:var(--general-text-secondary)}.tedi-breadcrumbs__separator{display:inline-flex;align-items:center}.tedi-breadcrumbs__ellipsis{justify-content:center;min-width:1.5rem;min-height:1.5rem;margin-inline:-.25rem}.tedi-breadcrumbs__dropdown-item .tedi-link:not(.tedi-link--no-underline) :not(tedi-icon),.tedi-breadcrumbs__dropdown-item .tedi-link:hover :not(tedi-icon){text-decoration:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }, { 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: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-breadcrumbs", standalone: true, imports: [
+                        NgTemplateOutlet,
+                        IconComponent,
+                        TextComponent,
+                        LinkComponent,
+                        DropdownComponent,
+                        DropdownTriggerDirective,
+                        DropdownContentComponent,
+                        DropdownItemComponent,
+                        TediTranslationPipe,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-breadcrumbs",
+                    }, template: "@if (visible()) {\n  <nav [attr.aria-label]=\"ariaLabel() || ('breadcrumbs' | tediTranslate)\">\n    <ol class=\"tedi-breadcrumbs__list\">\n      @if (currentVariant() === \"short\") {\n        @if (parentItem(); as parent) {\n          <li class=\"tedi-breadcrumbs__item\">\n            <tedi-icon name=\"arrow_back\" [size]=\"16\" color=\"brand\" />\n            <ng-container [ngTemplateOutlet]=\"parent.templateRef\" />\n          </li>\n        }\n      } @else {\n        @for (token of tokens(); track $index; let last = $last) {\n          @if (token.kind === \"item\") {\n            <li\n              class=\"tedi-breadcrumbs__item\"\n              [class.tedi-breadcrumbs__item--current]=\"token.current\"\n            >\n              <ng-container [ngTemplateOutlet]=\"token.item.templateRef\" />\n            </li>\n          } @else {\n            <li class=\"tedi-breadcrumbs__item\">\n              <tedi-dropdown position=\"bottom-start\">\n                <button\n                  type=\"button\"\n                  tedi-link\n                  [underline]=\"false\"\n                  tedi-dropdown-trigger\n                  class=\"tedi-breadcrumbs__ellipsis\"\n                  [attr.aria-label]=\"\n                    showMoreLabel() || ('breadcrumbs.show-more' | tediTranslate)\n                  \"\n                >\n                  <span aria-hidden=\"true\">\u2026</span>\n                </button>\n                <tedi-dropdown-content dropdownRole=\"menu\">\n                  @for (hidden of token.hidden; track $index) {\n                    <li\n                      tedi-dropdown-item\n                      [clipContent]=\"false\"\n                      class=\"tedi-breadcrumbs__dropdown-item\"\n                    >\n                      <ng-container [ngTemplateOutlet]=\"hidden.templateRef\" />\n                    </li>\n                  }\n                </tedi-dropdown-content>\n              </tedi-dropdown>\n            </li>\n          }\n          @if (!last) {\n            <li class=\"tedi-breadcrumbs__separator\" aria-hidden=\"true\">\n              @if (separatorTemplate(); as sep) {\n                <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n              } @else if (separator()) {\n                <span tedi-text color=\"brand\">{{ separator() }}</span>\n              } @else {\n                <tedi-icon name=\"chevron_right\" [size]=\"16\" color=\"brand\" />\n              }\n            </li>\n          }\n        }\n      }\n    </ol>\n  </nav>\n}\n", styles: [":host{display:block}.tedi-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--breadcrumb-inner-spacing);align-items:center;padding:0;margin:0;list-style:none}.tedi-breadcrumbs__item{display:inline-flex;gap:var(--breadcrumb-inner-spacing);align-items:center}.tedi-breadcrumbs__item--current{color:var(--general-text-secondary)}.tedi-breadcrumbs__separator{display:inline-flex;align-items:center}.tedi-breadcrumbs__ellipsis{justify-content:center;min-width:1.5rem;min-height:1.5rem;margin-inline:-.25rem}.tedi-breadcrumbs__dropdown-item .tedi-link:not(.tedi-link--no-underline) :not(tedi-icon),.tedi-breadcrumbs__dropdown-item .tedi-link:hover :not(tedi-icon){text-decoration:none}\n"] }]
+        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BreadcrumbItemDirective), { isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BreadcrumbSeparatorDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], itemsBeforeCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsBeforeCollapse", required: false }] }], itemsAfterCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsAfterCollapse", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
+
 class HorizontalStepperItemComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
@@ -18823,5 +19271,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map