@tedi-design-system/angular 6.5.0-rc.10 → 6.5.0-rc.12

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, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, isDevMode, forwardRef, booleanAttribute, HostListener, viewChild, contentChild, DestroyRef, contentChildren, ViewChild, TemplateRef, viewChildren, NgZone, ContentChild, Optional, SkipSelf, afterNextRender, untracked, HostAttributeToken, HostBinding, ViewContainerRef, runInInjectionContext, ContentChildren, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, booleanAttribute, model, output, Injector, Renderer2, isDevMode, forwardRef, HostListener, viewChild, contentChild, DestroyRef, contentChildren, ViewChild, TemplateRef, viewChildren, NgZone, ContentChild, Optional, SkipSelf, afterNextRender, untracked, HostAttributeToken, HostBinding, ViewContainerRef, runInInjectionContext, ContentChildren, makeEnvironmentProviders } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgFor, NgIf } from '@angular/common';
@@ -219,13 +219,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{font-size:inherit;color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var( --button-main-primary-background-hover, var(--button-main-primary-background-default) );--_btn-hover-border: var( --button-main-primary-border-hover, var(--button-main-primary-border-default) );--_btn-hover-text: var( --button-main-primary-text-hover, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-focus-bg: var( --button-main-primary-background-focus, var(--button-main-primary-background-default) );--_btn-focus-border: var( --button-main-primary-border-focus, var(--button-main-primary-border-default) );--_btn-focus-text: var( --button-main-primary-text-focus, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-active-bg: var( --button-main-primary-background-active, var(--button-main-primary-background-default) );--_btn-active-border: var( --button-main-primary-border-active, var(--button-main-primary-border-default) );--_btn-active-text: var( --button-main-primary-text-active, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var( --button-main-secondary-background-hover, var(--button-main-secondary-background-default) );--_btn-hover-border: var( --button-main-secondary-border-hover, var(--button-main-secondary-border-default) );--_btn-hover-text: var( --button-main-secondary-text-hover, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-focus-bg: var( --button-main-secondary-background-focus, var(--button-main-secondary-background-default) );--_btn-focus-border: var( --button-main-secondary-border-focus, var(--button-main-secondary-border-default) );--_btn-focus-text: var( --button-main-secondary-text-focus, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-active-bg: var( --button-main-secondary-background-active, var(--button-main-secondary-background-default) );--_btn-active-border: var( --button-main-secondary-border-active, var(--button-main-secondary-border-default) );--_btn-active-text: var( --button-main-secondary-text-active, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-background-hover, var(--button-main-neutral-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-background-focus, var(--button-main-neutral-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-background-active, var(--button-main-neutral-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var( --button-main-success-background-hover, var(--button-main-success-background-default) );--_btn-hover-border: var( --button-main-success-border-hover, var(--button-main-success-border-default) );--_btn-hover-text: var( --button-main-success-text-hover, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-focus-bg: var( --button-main-success-background-focus, var(--button-main-success-background-default) );--_btn-focus-border: var( --button-main-success-border-focus, var(--button-main-success-border-default) );--_btn-focus-text: var( --button-main-success-text-focus, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-active-bg: var( --button-main-success-background-active, var(--button-main-success-background-default) );--_btn-active-border: var( --button-main-success-border-active, var(--button-main-success-border-default) );--_btn-active-text: var( --button-main-success-text-active, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var( --button-main-danger-background-hover, var(--button-main-danger-background-default) );--_btn-hover-border: var( --button-main-danger-border-hover, var(--button-main-danger-border-default) );--_btn-hover-text: var( --button-main-danger-text-hover, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-focus-bg: var( --button-main-danger-background-focus, var(--button-main-danger-background-default) );--_btn-focus-border: var( --button-main-danger-border-focus, var(--button-main-danger-border-default) );--_btn-focus-text: var( --button-main-danger-text-focus, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-active-bg: var( --button-main-danger-background-active, var(--button-main-danger-background-default) );--_btn-active-border: var( --button-main-danger-border-active, var(--button-main-danger-border-default) );--_btn-active-text: var( --button-main-danger-text-active, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var( --button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default) );--_btn-hover-border: var( --button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default) );--_btn-hover-text: var( --button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-focus-bg: var( --button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default) );--_btn-focus-border: var( --button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default) );--_btn-focus-text: var( --button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-active-bg: var( --button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default) );--_btn-active-border: var( --button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default) );--_btn-active-text: var( --button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var( --button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default) );--_btn-hover-border: var( --button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default) );--_btn-hover-text: var( --button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-focus-bg: var( --button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default) );--_btn-focus-border: var( --button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default) );--_btn-focus-text: var( --button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-active-bg: var( --button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default) );--_btn-active-border: var( --button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default) );--_btn-active-text: var( --button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button[class*=-inverted]:focus-visible{outline:none;box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var( --button-main-neutral-icon-only-background-default );--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var( --button-main-neutral-inverted-icon-only-background-default );--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var( --button-main-danger-neutral-icon-only-background-default );--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+/**
+ * Interactive wrapper around a `tedi-card`. Apply to an anchor (with `href`
+ * or `routerLink`) for navigation or to a button for actions — the host
+ * element provides the interaction semantics and applies the hover, active,
+ * focus and disabled states to the card and its blocks inside.
+ *
+ * Only a projected `tedi-card` is rendered — other content is ignored. The
+ * card may use any card sub-components (content, rows, icon cells). Do not
+ * place other interactive elements inside.
+ */
+class CardButtonComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: CardButtonComponent, isStandalone: true, selector: "a[tedi-card-button], button[tedi-card-button]", host: { classAttribute: "tedi-card-button" }, ngImport: i0, template: "<ng-content select=\"tedi-card\"></ng-content>\n", styles: [".tedi-card-button{display:block;width:100%;height:100%;padding:0;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;background:none;border:none}.tedi-card-button>.tedi-card{height:100%}.tedi-card-button>.tedi-card>.tedi-card-row{flex:1 0 auto}.tedi-card-button:hover>.tedi-card{border-color:var(--button-card-hover-border)}.tedi-card-button:hover>.tedi-card .tedi-card-content,.tedi-card-button:hover>.tedi-card .tedi-card-icon{background-color:var(--button-card-hover-background)}.tedi-card-button:hover>.tedi-card .tedi-icon{color:var(--button-card-icon-hover)}.tedi-card-button:hover>.tedi-card .tedi-separator{border-color:var(--button-card-hover-border)}.tedi-card-button:active>.tedi-card{border-color:var(--button-card-active-border)}.tedi-card-button:active>.tedi-card .tedi-card-content,.tedi-card-button:active>.tedi-card .tedi-card-icon{background-color:var(--button-card-active-background)}.tedi-card-button:active>.tedi-card .tedi-icon{color:var(--button-card-icon-hover)}.tedi-card-button:active>.tedi-card .tedi-separator{border-color:var(--button-card-active-border)}.tedi-card-button:focus-visible{outline:none;border-radius:var(--card-radius-rounded);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-card-button:disabled{cursor:default}.tedi-card-button:disabled>.tedi-card{color:var(--general-text-disabled);border-color:var(--button-card-disabled-border)}.tedi-card-button:disabled>.tedi-card .tedi-card-content,.tedi-card-button:disabled>.tedi-card .tedi-card-icon{background-color:var(--button-card-disabled-background)}.tedi-card-button:disabled>.tedi-card [class*=tedi-text--],.tedi-card-button:disabled>.tedi-card .tedi-icon,.tedi-card-button:disabled>.tedi-card .tedi-card-icon{color:var(--general-text-disabled)}.tedi-card-button:disabled>.tedi-card .tedi-separator{border-color:var(--button-card-disabled-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "a[tedi-card-button], button[tedi-card-button]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: "tedi-card-button",
+                    }, template: "<ng-content select=\"tedi-card\"></ng-content>\n", styles: [".tedi-card-button{display:block;width:100%;height:100%;padding:0;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;background:none;border:none}.tedi-card-button>.tedi-card{height:100%}.tedi-card-button>.tedi-card>.tedi-card-row{flex:1 0 auto}.tedi-card-button:hover>.tedi-card{border-color:var(--button-card-hover-border)}.tedi-card-button:hover>.tedi-card .tedi-card-content,.tedi-card-button:hover>.tedi-card .tedi-card-icon{background-color:var(--button-card-hover-background)}.tedi-card-button:hover>.tedi-card .tedi-icon{color:var(--button-card-icon-hover)}.tedi-card-button:hover>.tedi-card .tedi-separator{border-color:var(--button-card-hover-border)}.tedi-card-button:active>.tedi-card{border-color:var(--button-card-active-border)}.tedi-card-button:active>.tedi-card .tedi-card-content,.tedi-card-button:active>.tedi-card .tedi-card-icon{background-color:var(--button-card-active-background)}.tedi-card-button:active>.tedi-card .tedi-icon{color:var(--button-card-icon-hover)}.tedi-card-button:active>.tedi-card .tedi-separator{border-color:var(--button-card-active-border)}.tedi-card-button:focus-visible{outline:none;border-radius:var(--card-radius-rounded);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-card-button:disabled{cursor:default}.tedi-card-button:disabled>.tedi-card{color:var(--general-text-disabled);border-color:var(--button-card-disabled-border)}.tedi-card-button:disabled>.tedi-card .tedi-card-content,.tedi-card-button:disabled>.tedi-card .tedi-card-icon{background-color:var(--button-card-disabled-background)}.tedi-card-button:disabled>.tedi-card [class*=tedi-text--],.tedi-card-button:disabled>.tedi-card .tedi-icon,.tedi-card-button:disabled>.tedi-card .tedi-card-icon{color:var(--general-text-disabled)}.tedi-card-button:disabled>.tedi-card .tedi-separator{border-color:var(--button-card-disabled-border)}\n"] }]
+        }] });
+
+/**
+ * Grid breakpoints in `rem`, mirroring `$grid-breakpoints` in
+ * `@tedi-design-system/core`. `rem` is used (instead of `px`) so breakpoints
+ * resolve against the browser's base font size and scale with the user's font
+ * preference — keeping these JS breakpoints aligned with the rem-based CSS
+ * tokens at any zoom / font-size setting.
+ */
 const BREAKPOINTS = {
     xs: 0,
-    sm: 576,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-    xxl: 1400,
+    sm: 36,
+    md: 48,
+    lg: 62,
+    xl: 75,
+    xxl: 87.5,
 };
 const breakpointsOrder = ["xs", "sm", "md", "lg", "xl", "xxl"];
 class BreakpointService {
@@ -233,24 +261,24 @@ class BreakpointService {
     _currentBreakpoint = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentBreakpoint" }] : []));
     constructor() {
         this.breakpointObserver
-            .observe(Object.values(BREAKPOINTS).map((value) => `(min-width: ${value}px)`))
+            .observe(Object.values(BREAKPOINTS).map((value) => `(min-width: ${value}rem)`))
             .subscribe((state) => {
-            if (state.breakpoints[`(min-width: ${BREAKPOINTS.xxl}px)`]) {
+            if (state.breakpoints[`(min-width: ${BREAKPOINTS.xxl}rem)`]) {
                 this._currentBreakpoint.set("xxl");
             }
-            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.xl}px)`]) {
+            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.xl}rem)`]) {
                 this._currentBreakpoint.set("xl");
             }
-            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.lg}px)`]) {
+            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.lg}rem)`]) {
                 this._currentBreakpoint.set("lg");
             }
-            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.md}px)`]) {
+            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.md}rem)`]) {
                 this._currentBreakpoint.set("md");
             }
-            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.sm}px)`]) {
+            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.sm}rem)`]) {
                 this._currentBreakpoint.set("sm");
             }
-            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.xs}px)`]) {
+            else if (state.breakpoints[`(min-width: ${BREAKPOINTS.xs}rem)`]) {
                 this._currentBreakpoint.set("xs");
             }
             else {
@@ -554,6 +582,13 @@ const translationsMap = {
         en: "An error occurred while uploading the file",
         ru: "Произошла ошибка при загрузке файла",
     },
+    "file-attachment.uploading": {
+        description: "Default hint label shown under the progress bar in Attachment while a file is being uploaded",
+        components: ["Attachment"],
+        et: "Üleslaadimine",
+        en: "Uploading",
+        ru: "Загрузка",
+    },
     "modal.close": {
         description: "Label for modals close button",
         components: ["Modal"],
@@ -1684,24 +1719,40 @@ class ClosingButtonComponent {
      * @default 24
      */
     iconSize = input(24, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    /**
+     * Material Symbols icon rendered inside the button. Override for other
+     * closing-like actions such as delete/remove (e.g. `delete`). When
+     * overriding, also provide a matching `ariaLabel` — the default label
+     * is "close".
+     * @default close
+     */
+    icon = input("close", ...(ngDevMode ? [{ debugName: "icon" }] : []));
     /**
      * ARIA label to override default label "close"
      */
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /**
+     * Render the label as a native `title` attribute (browser tooltip on
+     * hover). Set to `false` when the button is wrapped in a `tedi-tooltip`
+     * so the native tooltip does not double the custom one. The `aria-label`
+     * is kept either way.
+     * @default true
+     */
+    showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     translationService = inject(TediTranslationService);
     _defaultLabel = this.translationService.track("close");
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: ClosingButtonComponent, isStandalone: true, selector: "button[tedi-closing-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "ariaLabel() || _defaultLabel()", "attr.aria-label": "ariaLabel() || _defaultLabel()", "class.tedi-closing-button": "true", "class.tedi-closing-button--small": "size() === 'small'" } }, ngImport: i0, template: "<tedi-icon name=\"close\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: ClosingButtonComponent, isStandalone: true, selector: "button[tedi-closing-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "showTitle() ? ariaLabel() || _defaultLabel() : null", "attr.aria-label": "ariaLabel() || _defaultLabel()", "class.tedi-closing-button": "true", "class.tedi-closing-button--small": "size() === 'small'" } }, ngImport: i0, template: "<tedi-icon [name]=\"icon()\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: "button[tedi-closing-button]", imports: [IconComponent], standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        "[title]": "ariaLabel() || _defaultLabel()",
+                        "[attr.title]": "showTitle() ? ariaLabel() || _defaultLabel() : null",
                         "[attr.aria-label]": "ariaLabel() || _defaultLabel()",
                         "[class.tedi-closing-button]": "true",
                         "[class.tedi-closing-button--small]": "size() === 'small'",
-                    }, template: "<tedi-icon name=\"close\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+                    }, template: "<tedi-icon [name]=\"icon()\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n", styles: [".tedi-closing-button{--general-icon-primary: var(--button-close-text-default);display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:0;cursor:pointer;background-color:var(--button-close-background-default);border:1px solid var(--button-close-background-default);border-radius:var(--button-radius-default);transition:background .5s ease}.tedi-closing-button:hover{--general-icon-primary: var(--button-close-text-hover);background-color:var(--button-close-background-hover)}.tedi-closing-button:active{--general-icon-primary: var(--button-close-text-active);background-color:var(--button-close-background-active)}.tedi-closing-button:focus-visible{outline:2px solid var(--button-main-primary-border-focus);outline-offset:-2px}.tedi-closing-button--small{width:var(--button-xs-icon-size);height:var(--button-xs-icon-size)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }] } });
 
 class AlertComponent {
     /**
@@ -1793,7 +1844,7 @@ class AlertComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "tedi-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, titleElement: { classPropertyName: "titleElement", publicName: "titleElement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeClick: "closeClick" }, host: { properties: { "style.display": "open() ? 'flex' : 'none'", "attr.aria-live": "getAriaLive()", "attr.aria-label": "getAriaLabel()", "class": "classes()", "attr.role": "role() === 'none' ? null : role()" } }, ngImport: i0, template: "@if (title()) {\n  <div class=\"tedi-alert__head\">\n    @if (icon()) {\n      <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n    }\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <div class=\"tedi-alert__content\">\n    @if (icon()) {\n      <tedi-icon [name]=\"icon()\" [size]=\"18\" class=\"tedi-alert__content-icon\" />\n    }\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n}\n@if (showClose()) {\n  <button\n    tedi-closing-button\n    class=\"tedi-alert__close\"\n    size=\"small\"\n    [iconSize]=\"18\"\n    (click)=\"handleClose()\"\n  ></button>\n}\n\n<ng-template #heading>\n  @if (titleElement() === \"h1\") {\n    <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n  } @else if (titleElement() === \"h2\") {\n    <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n  } @else if (titleElement() === \"h3\") {\n    <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n  } @else if (titleElement() === \"h4\") {\n    <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n  } @else if (titleElement() === \"h5\") {\n    <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n  } @else if (titleElement() === \"h6\") {\n    <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n  } @else {\n    <div class=\"tedi-alert__title\">{{ title() }}</div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <div>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--alert-default-padding-y) var(--alert-default-padding-x);font-size:var(--body-regular-size);border:1px solid;border-radius:var(--alert-radius);color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x))}.tedi-alert__close{position:absolute;top:var(--alert-default-padding-y);right:var(--alert-default-padding-x)}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--info{color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--general-text-primary);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--general-text-primary);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--general-text-primary);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "tedi-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, titleElement: { classPropertyName: "titleElement", publicName: "titleElement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closeClick: "closeClick" }, host: { properties: { "style.display": "open() ? 'flex' : 'none'", "attr.aria-live": "getAriaLive()", "attr.aria-label": "getAriaLabel()", "class": "classes()", "attr.role": "role() === 'none' ? null : role()" } }, ngImport: i0, template: "@if (title()) {\n  <div class=\"tedi-alert__head\">\n    @if (icon()) {\n      <tedi-icon [name]=\"icon()\" [size]=\"18\" />\n    }\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <div class=\"tedi-alert__content\">\n    @if (icon()) {\n      <tedi-icon [name]=\"icon()\" [size]=\"18\" class=\"tedi-alert__content-icon\" />\n    }\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n}\n@if (showClose()) {\n  <button\n    tedi-closing-button\n    class=\"tedi-alert__close\"\n    size=\"small\"\n    [iconSize]=\"18\"\n    (click)=\"handleClose()\"\n  ></button>\n}\n\n<ng-template #heading>\n  @if (titleElement() === \"h1\") {\n    <h1 class=\"tedi-alert__title\">{{ title() }}</h1>\n  } @else if (titleElement() === \"h2\") {\n    <h2 class=\"tedi-alert__title\">{{ title() }}</h2>\n  } @else if (titleElement() === \"h3\") {\n    <h3 class=\"tedi-alert__title\">{{ title() }}</h3>\n  } @else if (titleElement() === \"h4\") {\n    <h4 class=\"tedi-alert__title\">{{ title() }}</h4>\n  } @else if (titleElement() === \"h5\") {\n    <h5 class=\"tedi-alert__title\">{{ title() }}</h5>\n  } @else if (titleElement() === \"h6\") {\n    <h6 class=\"tedi-alert__title\">{{ title() }}</h6>\n  } @else {\n    <div class=\"tedi-alert__title\">{{ title() }}</div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <div>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".tedi-alert{--_close-button-size: 18px;position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-04);padding:var(--alert-default-padding-y) var(--alert-default-padding-x);font-size:var(--body-regular-size);border:1px solid;border-radius:var(--alert-radius);color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-alert:has(.tedi-alert__close){padding-right:calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x))}.tedi-alert__close{position:absolute;top:var(--alert-default-padding-y);right:var(--alert-default-padding-x)}.tedi-alert__content{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start}.tedi-alert__content .tedi-alert__content-icon{line-height:var(--body-regular-line-height)}.tedi-alert__title{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-alert--info{color:var(--general-text-primary);background-color:var(--alert-default-background-info);border-color:var(--alert-default-border-info)}.tedi-alert--success{color:var(--general-text-primary);background-color:var(--alert-default-background-success);border-color:var(--alert-default-border-success)}.tedi-alert--warning{color:var(--general-text-primary);background-color:var(--alert-default-background-warning);border-color:var(--alert-default-border-warning)}.tedi-alert--danger{color:var(--general-text-primary);background-color:var(--alert-default-background-danger);border-color:var(--alert-default-border-danger)}.tedi-alert--global{width:100%;border:0;border-radius:0}.tedi-alert--no-side-borders{border-right:none;border-left:none;border-radius:0}@media print{.tedi-alert{color:var(--general-text-primary);background-color:var(--tedi-neutral-100);border-color:var(--tedi-neutral-350)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -2489,6 +2540,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             args: [{ standalone: true, selector: "tedi-collapse", imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"tedi-collapse\"\n  [class.tedi-collapse--open]=\"isOpen() === true\"\n  [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n  <button\n    tedi-collapse-button\n    [open]=\"isOpen()\"\n    [openText]=\"openText()\"\n    [closeText]=\"closeText()\"\n    [hideText]=\"hideCollapseText()\"\n    [arrowType]=\"arrowType()\"\n    [size]=\"size()\"\n    [inverted]=\"inverted()\"\n    [ariaControls]=\"collapseContentId\"\n    (openChange)=\"isOpen.set($event)\"\n  ></button>\n  <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n    <div class=\"tedi-collapse__extender\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"] }]
         }], propDecorators: { openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], hideCollapseText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCollapseText", required: false }] }], arrowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }] } });
 
+function getCardBorderPlacementColor(border) {
+    if (!border) {
+        return [undefined, undefined];
+    }
+    if (border.startsWith("top-")) {
+        return ["top", border.slice("top-".length)];
+    }
+    if (border.startsWith("left-")) {
+        return ["left", border.slice("left-".length)];
+    }
+    return [undefined, border];
+}
+function getPaddingCssVariables(padding) {
+    if (typeof padding === "number") {
+        return {
+            "--card-content-padding-top": `${padding}rem`,
+            "--card-content-padding-right": `${padding}rem`,
+            "--card-content-padding-bottom": `${padding}rem`,
+            "--card-content-padding-left": `${padding}rem`,
+        };
+    }
+    if ("vertical" in padding && "horizontal" in padding) {
+        return {
+            "--card-content-padding-top": `${padding.vertical}rem`,
+            "--card-content-padding-right": `${padding.horizontal}rem`,
+            "--card-content-padding-bottom": `${padding.vertical}rem`,
+            "--card-content-padding-left": `${padding.horizontal}rem`,
+        };
+    }
+    const { top = 0, right = 0, bottom = 0, left = 0 } = padding;
+    return {
+        "--card-content-padding-top": `${top}rem`,
+        "--card-content-padding-right": `${right}rem`,
+        "--card-content-padding-bottom": `${bottom}rem`,
+        "--card-content-padding-left": `${left}rem`,
+    };
+}
+function resolveCardBorderRadius(config) {
+    if (config === false) {
+        return {
+            topLeft: false,
+            topRight: false,
+            bottomRight: false,
+            bottomLeft: false,
+        };
+    }
+    const { top, right, bottom, left, topLeft, topRight, bottomRight, bottomLeft } = config ?? {};
+    const sideTop = top !== false;
+    const sideRight = right !== false;
+    const sideBottom = bottom !== false;
+    const sideLeft = left !== false;
+    // corner overrides take precedence over side values
+    return {
+        topLeft: topLeft ?? (sideTop && sideLeft),
+        topRight: topRight ?? (sideTop && sideRight),
+        bottomRight: bottomRight ?? (sideBottom && sideRight),
+        bottomLeft: bottomLeft ?? (sideBottom && sideLeft),
+    };
+}
+
+/**
+ * Card is a container for grouping related content. Compose it from
+ * `tedi-card-header`, `tedi-card-content` and `tedi-card-notification` blocks.
+ * `background` and `padding` set here act as defaults for all child blocks.
+ */
+class CardComponent {
+    /**
+     * Default background color for child content blocks.
+     */
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    /**
+     * Default padding for child content blocks.
+     * Value is either a predefined number in rems or an object of
+     * vertical/horizontal or top/right/bottom/left number values in rems.
+     */
+    padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : []));
+    /**
+     * Controls card border radius.
+     * Accepts `false` to remove all radius or an object to control
+     * sides or individual corners. Corner values take precedence over sides.
+     */
+    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : []));
+    /**
+     * Removes border from card.
+     * @default false
+     */
+    borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : []));
+    /**
+     * Type of border. Plain background value colors the whole border,
+     * `top-` or `left-` prefixed value draws a thick accent border on that side.
+     */
+    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : []));
+    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" }] : []));
+    breakpointService = inject(BreakpointService);
+    breakpointInputs = computed(() => {
+        return this.breakpointService.getBreakpointInputs({
+            background: this.background(),
+            padding: this.padding(),
+            borderRadius: this.borderRadius(),
+            borderless: this.borderless(),
+            border: this.border(),
+            xs: this.xs(),
+            sm: this.sm(),
+            md: this.md(),
+            lg: this.lg(),
+            xl: this.xl(),
+            xxl: this.xxl(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
+    classes = computed(() => {
+        const { border, borderless, borderRadius } = this.breakpointInputs();
+        const classList = ["tedi-card"];
+        const [placement, color] = getCardBorderPlacementColor(border);
+        if (placement) {
+            classList.push(`tedi-card--border-${placement}`);
+        }
+        if (color) {
+            classList.push(`tedi-card--border--${color}`);
+        }
+        if (borderless) {
+            classList.push("tedi-card--borderless");
+        }
+        const corners = resolveCardBorderRadius(borderRadius);
+        if (!corners.topLeft) {
+            classList.push("tedi-card--no-radius-tl");
+        }
+        if (!corners.topRight) {
+            classList.push("tedi-card--no-radius-tr");
+        }
+        if (!corners.bottomRight) {
+            classList.push("tedi-card--no-radius-br");
+        }
+        if (!corners.bottomLeft) {
+            classList.push("tedi-card--no-radius-bl");
+        }
+        return classList.join(" ");
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardComponent, isStandalone: true, selector: "tedi-card", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-card--border--accent{border-color:var(--card-background-accent);--card-border-color: var(--card-background-accent)}.tedi-card--border--brand-primary{border-color:var(--card-background-brand-primary);--card-border-color: var(--card-background-brand-primary)}.tedi-card--border--brand-secondary{border-color:var(--card-background-brand-secondary);--card-border-color: var(--card-background-brand-secondary)}.tedi-card--border--brand-tertiary{border-color:var(--card-background-brand-tertiary);--card-border-color: var(--card-background-brand-tertiary)}.tedi-card--border--brand-quaternary{border-color:var(--card-background-brand-quaternary);--card-border-color: var(--card-background-brand-quaternary)}.tedi-card--border--primary{border-color:var(--card-background-primary);--card-border-color: var(--card-background-primary)}.tedi-card--border--secondary{border-color:var(--card-background-secondary);--card-border-color: var(--card-background-secondary)}.tedi-card--border--tertiary{border-color:var(--card-background-tertiary);--card-border-color: var(--card-background-tertiary)}.tedi-card--border--info-primary{border-color:var(--general-status-info-background-light);--card-border-color: var(--general-status-info-background-light)}.tedi-card--border--info-secondary{border-color:var(--general-status-info-background-dark);--card-border-color: var(--general-status-info-background-dark)}.tedi-card--border--neutral-primary{border-color:var(--general-status-neutral-background-light);--card-border-color: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-secondary{border-color:var(--general-status-neutral-background-dark);--card-border-color: var(--general-status-neutral-background-dark)}.tedi-card--border--success-primary{border-color:var(--card-background-success);--card-border-color: var(--card-background-success)}.tedi-card--border--success-secondary{border-color:var(--general-status-success-background-secondary);--card-border-color: var(--general-status-success-background-secondary)}.tedi-card--border--danger-primary{border-color:var(--general-status-danger-background-primary);--card-border-color: var(--general-status-danger-background-primary)}.tedi-card--border--danger-secondary{border-color:var(--general-status-danger-background-secondary);--card-border-color: var(--general-status-danger-background-secondary)}.tedi-card--border--warning-primary{border-color:var(--general-status-warning-background-light);--card-border-color: var(--general-status-warning-background-light)}.tedi-card--border--warning-secondary{border-color:var(--general-status-warning-background-dark);--card-border-color: var(--general-status-warning-background-dark)}.tedi-card--border-left{border-top-color:var(--card-border-primary);border-right-color:var(--card-border-primary);border-bottom-color:var(--card-border-primary);border-left:4px solid var(--card-border-color)}.tedi-card--border-top{border-top:4px solid var(--card-border-color);border-right-color:var(--card-border-primary);border-bottom-color:var(--card-border-primary);border-left-color:var(--card-border-primary)}.tedi-card--borderless{border:none}.tedi-card--no-radius-tl{border-top-left-radius:0}.tedi-card--no-radius-tr{border-top-right-radius:0}.tedi-card--no-radius-br{border-bottom-right-radius:0}.tedi-card--no-radius-bl{border-bottom-left-radius:0}@media print{.tedi-card--border-left,.tedi-card--border-top{border-color:var(--general-border-secondary)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-card--border--accent{border-color:var(--card-background-accent);--card-border-color: var(--card-background-accent)}.tedi-card--border--brand-primary{border-color:var(--card-background-brand-primary);--card-border-color: var(--card-background-brand-primary)}.tedi-card--border--brand-secondary{border-color:var(--card-background-brand-secondary);--card-border-color: var(--card-background-brand-secondary)}.tedi-card--border--brand-tertiary{border-color:var(--card-background-brand-tertiary);--card-border-color: var(--card-background-brand-tertiary)}.tedi-card--border--brand-quaternary{border-color:var(--card-background-brand-quaternary);--card-border-color: var(--card-background-brand-quaternary)}.tedi-card--border--primary{border-color:var(--card-background-primary);--card-border-color: var(--card-background-primary)}.tedi-card--border--secondary{border-color:var(--card-background-secondary);--card-border-color: var(--card-background-secondary)}.tedi-card--border--tertiary{border-color:var(--card-background-tertiary);--card-border-color: var(--card-background-tertiary)}.tedi-card--border--info-primary{border-color:var(--general-status-info-background-light);--card-border-color: var(--general-status-info-background-light)}.tedi-card--border--info-secondary{border-color:var(--general-status-info-background-dark);--card-border-color: var(--general-status-info-background-dark)}.tedi-card--border--neutral-primary{border-color:var(--general-status-neutral-background-light);--card-border-color: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-secondary{border-color:var(--general-status-neutral-background-dark);--card-border-color: var(--general-status-neutral-background-dark)}.tedi-card--border--success-primary{border-color:var(--card-background-success);--card-border-color: var(--card-background-success)}.tedi-card--border--success-secondary{border-color:var(--general-status-success-background-secondary);--card-border-color: var(--general-status-success-background-secondary)}.tedi-card--border--danger-primary{border-color:var(--general-status-danger-background-primary);--card-border-color: var(--general-status-danger-background-primary)}.tedi-card--border--danger-secondary{border-color:var(--general-status-danger-background-secondary);--card-border-color: var(--general-status-danger-background-secondary)}.tedi-card--border--warning-primary{border-color:var(--general-status-warning-background-light);--card-border-color: var(--general-status-warning-background-light)}.tedi-card--border--warning-secondary{border-color:var(--general-status-warning-background-dark);--card-border-color: var(--general-status-warning-background-dark)}.tedi-card--border-left{border-top-color:var(--card-border-primary);border-right-color:var(--card-border-primary);border-bottom-color:var(--card-border-primary);border-left:4px solid var(--card-border-color)}.tedi-card--border-top{border-top:4px solid var(--card-border-color);border-right-color:var(--card-border-primary);border-bottom-color:var(--card-border-primary);border-left-color:var(--card-border-primary)}.tedi-card--borderless{border:none}.tedi-card--no-radius-tl{border-top-left-radius:0}.tedi-card--no-radius-tr{border-top-right-radius:0}.tedi-card--no-radius-br{border-bottom-right-radius:0}.tedi-card--no-radius-bl{border-bottom-left-radius:0}@media print{.tedi-card--border-left,.tedi-card--border-top{border-color:var(--general-border-secondary)}}\n"] }]
+        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", 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 }] }] } });
+
+/**
+ * Content block of a card. Inherits unset `background` and `padding`
+ * from the parent `tedi-card`.
+ */
+class CardContentComponent {
+    /**
+     * Background color.
+     * @default primary
+     */
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    /**
+     * Content padding.
+     * Value is either a predefined number in rems or an object of
+     * vertical/horizontal or top/right/bottom/left number values in rems.
+     * @default 1
+     */
+    padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : []));
+    /**
+     * Background image url.
+     */
+    backgroundImage = input(...(ngDevMode ? [undefined, { debugName: "backgroundImage" }] : []));
+    /**
+     * Background position for the image.
+     */
+    backgroundPosition = input(...(ngDevMode ? [undefined, { debugName: "backgroundPosition" }] : []));
+    /**
+     * Background size for the image.
+     */
+    backgroundSize = input(...(ngDevMode ? [undefined, { debugName: "backgroundSize" }] : []));
+    /**
+     * Background repeat for the image.
+     */
+    backgroundRepeat = input(...(ngDevMode ? [undefined, { debugName: "backgroundRepeat" }] : []));
+    /**
+     * Takes only as much width as its content needs instead of growing.
+     * Useful for icon or date cells inside `tedi-card-row`.
+     * @default false
+     */
+    autoWidth = input(false, ...(ngDevMode ? [{ debugName: "autoWidth" }] : []));
+    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" }] : []));
+    blockClass = "tedi-card-content";
+    defaultBackground = "primary";
+    breakpointService = inject(BreakpointService);
+    card = inject(CardComponent, { optional: true });
+    breakpointInputs = computed(() => {
+        return this.breakpointService.getBreakpointInputs({
+            background: this.background(),
+            padding: this.padding(),
+            backgroundImage: this.backgroundImage(),
+            backgroundPosition: this.backgroundPosition(),
+            backgroundSize: this.backgroundSize(),
+            backgroundRepeat: this.backgroundRepeat(),
+            autoWidth: this.autoWidth(),
+            xs: this.xs(),
+            sm: this.sm(),
+            md: this.md(),
+            lg: this.lg(),
+            xl: this.xl(),
+            xxl: this.xxl(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
+    classes = computed(() => {
+        const { background, autoWidth } = this.breakpointInputs();
+        const resolvedBackground = background ?? this.inheritedBackground() ?? this.defaultBackground;
+        const classList = [
+            this.blockClass,
+            `${this.blockClass}--background--${resolvedBackground}`,
+        ];
+        if (autoWidth) {
+            classList.push(`${this.blockClass}--auto-width`);
+        }
+        return classList.join(" ");
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    styles = computed(() => {
+        const { padding, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat } = this.breakpointInputs();
+        const resolvedPadding = padding ?? this.card?.breakpointInputs().padding ?? this.defaultPadding();
+        const styles = getPaddingCssVariables(resolvedPadding);
+        if (backgroundImage) {
+            styles["background-image"] = `url(${backgroundImage})`;
+        }
+        if (backgroundPosition) {
+            styles["background-position"] = backgroundPosition;
+        }
+        if (backgroundSize) {
+            styles["background-size"] = backgroundSize;
+        }
+        if (backgroundRepeat) {
+            styles["background-repeat"] = backgroundRepeat;
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "styles" }] : []));
+    inheritedBackground() {
+        return this.card?.breakpointInputs().background;
+    }
+    defaultPadding() {
+        return 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardContentComponent, isStandalone: true, selector: "tedi-card-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, backgroundImage: { classPropertyName: "backgroundImage", publicName: "backgroundImage", isSignal: true, isRequired: false, transformFunction: null }, backgroundPosition: { classPropertyName: "backgroundPosition", publicName: "backgroundPosition", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, backgroundRepeat: { classPropertyName: "backgroundRepeat", publicName: "backgroundRepeat", isSignal: true, isRequired: false, transformFunction: null }, autoWidth: { classPropertyName: "autoWidth", publicName: "autoWidth", 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()", "style": "styles()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content--background--accent{background-color:var(--card-background-accent)}.tedi-card-content--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-content--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-content--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-content--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-content--background--primary{background-color:var(--card-background-primary)}.tedi-card-content--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-content--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-content--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-content--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-content--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-content--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-content--background--success-primary{background-color:var(--card-background-success)}.tedi-card-content--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-content--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-content--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-content--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-content--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-content--background--brand-primary,.tedi-card-content--background--brand-secondary{color:var(--general-text-white)}.tedi-card-content{display:block;flex:1 1 1px;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}.tedi-card-content--auto-width{flex:0 0 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card-content", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "[style]": "styles()",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content--background--accent{background-color:var(--card-background-accent)}.tedi-card-content--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-content--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-content--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-content--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-content--background--primary{background-color:var(--card-background-primary)}.tedi-card-content--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-content--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-content--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-content--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-content--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-content--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-content--background--success-primary{background-color:var(--card-background-success)}.tedi-card-content--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-content--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-content--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-content--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-content--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-content--background--brand-primary,.tedi-card-content--background--brand-secondary{color:var(--general-text-white)}.tedi-card-content{display:block;flex:1 1 1px;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}.tedi-card-content--auto-width{flex:0 0 auto}\n"] }]
+        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], backgroundImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundImage", required: false }] }], backgroundPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundPosition", required: false }] }], backgroundSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundSize", required: false }] }], backgroundRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundRepeat", required: false }] }], autoWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoWidth", 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 }] }] } });
+
+/**
+ * Icon cell for a card row. The projected icon is aligned to the top of the
+ * cell and inherits the cell color. Pair the small size with a 16px icon.
+ */
+class CardIconComponent extends CardContentComponent {
+    /**
+     * Visual type of the icon cell.
+     * @default default
+     */
+    type = input("default", ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /**
+     * Size of the icon cell.
+     * @default default
+     */
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    blockClass = "tedi-card-icon";
+    inheritedBackground() {
+        return this.type() === "brand" ? "brand-primary" : "secondary";
+    }
+    defaultPadding() {
+        return this.size() === "small" ? 0.75 : 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardIconComponent, isStandalone: true, selector: "tedi-card-icon", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style": "styles()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-icon{display:flex;flex:0 0 auto;gap:var(--layout-grid-gutters-08);align-items:flex-start;color:var(--general-icon-secondary);padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}.tedi-card-icon .tedi-icon{color:inherit}.tedi-card-icon--background--accent{background-color:var(--card-background-accent)}.tedi-card-icon--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-icon--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-icon--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-icon--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-icon--background--primary{background-color:var(--card-background-primary)}.tedi-card-icon--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-icon--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-icon--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-icon--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-icon--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-icon--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-icon--background--success-primary{background-color:var(--card-background-success)}.tedi-card-icon--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-icon--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-icon--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-icon--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-icon--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-icon--background--brand-primary,.tedi-card-icon--background--brand-secondary{color:var(--general-text-white)}.tedi-card-icon--auto-width{flex:0 0 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card-icon", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "[style]": "styles()",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card-icon{display:flex;flex:0 0 auto;gap:var(--layout-grid-gutters-08);align-items:flex-start;color:var(--general-icon-secondary);padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}.tedi-card-icon .tedi-icon{color:inherit}.tedi-card-icon--background--accent{background-color:var(--card-background-accent)}.tedi-card-icon--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-icon--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-icon--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-icon--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-icon--background--primary{background-color:var(--card-background-primary)}.tedi-card-icon--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-icon--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-icon--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-icon--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-icon--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-icon--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-icon--background--success-primary{background-color:var(--card-background-success)}.tedi-card-icon--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-icon--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-icon--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-icon--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-icon--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-icon--background--brand-primary,.tedi-card-icon--background--brand-secondary{color:var(--general-text-white)}.tedi-card-icon--auto-width{flex:0 0 auto}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Lays out card content cells horizontally inside a card.
+ * Place a `tedi-separator` between cells (vertical, `size="auto"`) or
+ * between rows (horizontal) to draw dividers.
+ */
+class CardRowComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: CardRowComponent, isStandalone: true, selector: "tedi-card-row", host: { properties: { "class.tedi-card-row": "true" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-row{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card-row", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class.tedi-card-row]": "true",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card-row{display:flex}\n"] }]
+        }] });
+
+/**
+ * Header block of a card. Same API as `tedi-card-content`, but defaults to
+ * the brand-primary background and does not inherit background from the card.
+ */
+class CardHeaderComponent extends CardContentComponent {
+    blockClass = "tedi-card-header";
+    defaultBackground = "brand-primary";
+    inheritedBackground() {
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: CardHeaderComponent, isStandalone: true, selector: "tedi-card-header", host: { properties: { "class": "classes()", "style": "styles()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-header--background--accent{background-color:var(--card-background-accent)}.tedi-card-header--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-header--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-header--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-header--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-header--background--primary{background-color:var(--card-background-primary)}.tedi-card-header--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-header--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-header--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-header--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-header--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-header--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-header--background--success-primary{background-color:var(--card-background-success)}.tedi-card-header--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-header--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-header--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-header--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-header--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-header--background--brand-primary,.tedi-card-header--background--brand-secondary{color:var(--general-text-white)}.tedi-card-header{z-index:1;display:block;flex:0 0 auto;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}@media print{.tedi-card-header{color:var(--general-text-primary);background:var(--card-background-primary);border-bottom:1px solid var(--card-border-primary)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card-header", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "[style]": "styles()",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card-header--background--accent{background-color:var(--card-background-accent)}.tedi-card-header--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-header--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-header--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-header--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-header--background--primary{background-color:var(--card-background-primary)}.tedi-card-header--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-header--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-header--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-header--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-header--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-header--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-header--background--success-primary{background-color:var(--card-background-success)}.tedi-card-header--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-header--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-header--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-header--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-header--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-header--background--brand-primary,.tedi-card-header--background--brand-secondary{color:var(--general-text-white)}.tedi-card-header{z-index:1;display:block;flex:0 0 auto;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}@media print{.tedi-card-header{color:var(--general-text-primary);background:var(--card-background-primary);border-bottom:1px solid var(--card-border-primary)}}\n"] }]
+        }] });
+
 class ListComponent {
     /**
      * Is list styled?
@@ -3524,7 +3910,7 @@ class PopoverContentComponent {
         this.popover.hidePopover(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (title() && showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n    <button tedi-closing-button (click)=\"handleClose()\"></button>\n  </div>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n  </div>\n} @else if (title()) {\n  <h4 [id]=\"titleId\">{{ title() }}</h4>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-12px;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-12px;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-12px;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-12px;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{border-radius:var(--popover-radius-rounded)}.tedi-popover__container--border .tedi-popover__arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-12px;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-12px;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-right:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-12px;transform:translateY(-60%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-left:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-12px;transform:translateY(-60%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (title() && showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n    <button tedi-closing-button (click)=\"handleClose()\"></button>\n  </div>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n  <div class=\"tedi-popover-content__head\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n  </div>\n} @else if (title()) {\n  <h4 [id]=\"titleId\">{{ title() }}</h4>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-12px;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-12px;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-12px;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-12px;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{border-radius:var(--popover-radius-rounded)}.tedi-popover__container--border .tedi-popover__arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-12px;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-12px;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-right:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-12px;transform:translateY(-60%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-left:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-12px;transform:translateY(-60%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, decorators: [{
             type: Component,
@@ -3789,7 +4175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             args: [{ standalone: true, selector: "tedi-popover", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n>\n  <div\n    [class]=\"panelClasses()\"\n    [id]=\"containerId()\"\n    [attr.data-placement]=\"currentPlacement()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n  >\n    @if (withArrow()) {\n      <div\n        class=\"tedi-popover__arrow\"\n        [style.left.px]=\"arrowLeft()\"\n        [style.top.px]=\"arrowTop()\"\n      ></div>\n    }\n    <ng-content select=\"tedi-popover-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-12px;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-12px;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-12px;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-12px;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{border-radius:var(--popover-radius-rounded)}.tedi-popover__container--border .tedi-popover__arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-12px;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-12px;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-right:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-12px;transform:translateY(-60%) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-left:4px solid var(--header-popover-border-top)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-12px;transform:translateY(-60%) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], withBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBorder", required: false }] }], withArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "withArrow", required: false }] }], lockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockScroll", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], popoverTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], popoverContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverContentComponent), { isSignal: true }] }] } });
 
-const FOCUSABLE_SELECTOR = "button, a[href], [tabindex]";
+const FOCUSABLE_SELECTOR$1 = "button, a[href], [tabindex]";
 class DropdownTriggerDirective {
     /** Defines the aria-haspopup attribute for the trigger, informing assistive technologies whether it opens a menu or listbox. Improves accessibility by describing the type of popup. */
     ariaHaspopup = input("menu", ...(ngDevMode ? [{ debugName: "ariaHaspopup" }] : []));
@@ -3856,7 +4242,7 @@ class DropdownTriggerDirective {
         const el = this.host.nativeElement;
         if (this.isNativelyFocusable(el))
             return el;
-        return el.querySelector(FOCUSABLE_SELECTOR) ?? el;
+        return el.querySelector(FOCUSABLE_SELECTOR$1) ?? el;
     }
     isNativelyFocusable(el) {
         return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
@@ -5216,7 +5602,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -5517,6 +5903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, template: "<svg viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n  <circle\n    class=\"tedi-spinner--inner\"\n    cx=\"22\"\n    cy=\"22\"\n    [attr.r]=\"r()\"\n    fill=\"none\"\n  ></circle>\n</svg>", styles: [".tedi-spinner{display:flex;width:calc(var(--tedi-spinner-size, 16) * 1rem / 16);height:calc(var(--tedi-spinner-size, 16) * 1rem / 16);animation:1.4s linear 0s infinite normal none running tedi-spinner-outer}.tedi-spinner--inner{stroke-width:var(--tedi-spinner-stroke-width);stroke-dasharray:80,200;stroke-dashoffset:0;animation:1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner}@media(prefers-reduced-motion:reduce){.tedi-spinner--inner{animation:none}}.tedi-spinner--color-primary{stroke:var(--loader-spinner-color-primary)}.tedi-spinner--color-secondary{stroke:var(--loader-spinner-color-secondary)}.tedi-spinner--size-10{--tedi-spinner-size: 10;--tedi-spinner-stroke-width: 4.4}.tedi-spinner--size-16{--tedi-spinner-size: 16;--tedi-spinner-stroke-width: 5.5}.tedi-spinner--size-48{--tedi-spinner-size: 48;--tedi-spinner-stroke-width: 3.6666666667}@media(prefers-reduced-motion:reduce){.tedi-spinner{animation:none}}@keyframes tedi-spinner-outer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tedi-spinner-inner{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15}to{stroke-dasharray:100,200;stroke-dashoffset:-125}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+const FOCUSABLE_SELECTOR = "button, a[href], [tabindex]";
 class TooltipTriggerComponent {
     host = inject(ElementRef);
     overlayOrigin = inject(CdkOverlayOrigin, { self: true });
@@ -5604,11 +5991,29 @@ class TooltipTriggerComponent {
             this.interactiveElement.set(span);
             return;
         }
-        this.renderer.addClass(firstChild, "tedi-tooltip-trigger--focus");
-        if (!firstChild.getAttribute("tabindex")) {
-            this.renderer.setAttribute(firstChild, "tabindex", "0");
+        const interactive = this.resolveInteractiveElement(firstChild);
+        this.renderer.addClass(interactive, "tedi-tooltip-trigger--focus");
+        if (!interactive.getAttribute("tabindex")) {
+            this.renderer.setAttribute(interactive, "tabindex", "0");
+        }
+        this.interactiveElement.set(interactive);
+    }
+    /**
+     * The element that actually receives focus and ARIA semantics. When the
+     * projected child is itself focusable (a `<button>`/`<a href>`) it is used
+     * directly. When it is a non-focusable wrapper that renders its own
+     * interactive element (e.g. a `tedi-dropdown` projecting a trigger button),
+     * the first focusable descendant is used instead — otherwise focus and the
+     * tooltip description would land on the non-interactive wrapper.
+     */
+    resolveInteractiveElement(child) {
+        if (this.isFocusable(child)) {
+            return child;
         }
-        this.interactiveElement.set(firstChild);
+        return child.querySelector(FOCUSABLE_SELECTOR) ?? child;
+    }
+    isFocusable(el) {
+        return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", host: { listeners: { "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -5885,7 +6290,7 @@ class TagComponent {
         this.closed.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TagComponent, isStandalone: true, selector: "tedi-tag", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.tedi-tag": "true", "class.tedi-tag--loading": "loading()", "class.tedi-tag--closable": "closable()", "class.tedi-tag--ellipsis": "ellipsis() !== false", "class": "classes()" } }, ngImport: i0, template: "@if (type() === \"danger\") {\n  <span class=\"tedi-tag__icon-wrapper\">\n    <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n  </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n  @if (ellipsis()) {\n    <tedi-ellipsis [position]=\"ellipsisPosition()\" [lineClamp]=\"1\">\n      <ng-container [ngTemplateOutlet]=\"tagContent\" />\n    </tedi-ellipsis>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"tagContent\" />\n  }\n</span>\n\n<ng-template #tagContent><ng-content /></ng-template>\n\n@if (loading()) {\n  <span class=\"tedi-tag__spinner-wrapper\">\n    <tedi-spinner [size]=\"48\" />\n  </span>\n} @else if (closable()) {\n  <button\n    type=\"button\"\n    tedi-closing-button\n    size=\"small\"\n    [iconSize]=\"18\"\n    (click)=\"handleClose($event)\"\n    [attr.aria-describedby]=\"uniqueId\"\n    [ariaLabel]=\"'remove' | tediTranslate\"\n  >\n  </button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag--ellipsis{min-width:0;max-width:100%}.tedi-tag--ellipsis .tedi-tag__content{min-width:0}.tedi-tag--ellipsis .tedi-tag__icon-wrapper,.tedi-tag--ellipsis .tedi-closing-button{flex-shrink:0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TagComponent, isStandalone: true, selector: "tedi-tag", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.tedi-tag": "true", "class.tedi-tag--loading": "loading()", "class.tedi-tag--closable": "closable()", "class.tedi-tag--ellipsis": "ellipsis() !== false", "class": "classes()" } }, ngImport: i0, template: "@if (type() === \"danger\") {\n  <span class=\"tedi-tag__icon-wrapper\">\n    <tedi-icon name=\"error\" color=\"danger\" [size]=\"16\" />\n  </span>\n}\n\n<span class=\"tedi-tag__content\" [attr.id]=\"uniqueId\">\n  @if (ellipsis()) {\n    <tedi-ellipsis [position]=\"ellipsisPosition()\" [lineClamp]=\"1\">\n      <ng-container [ngTemplateOutlet]=\"tagContent\" />\n    </tedi-ellipsis>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"tagContent\" />\n  }\n</span>\n\n<ng-template #tagContent><ng-content /></ng-template>\n\n@if (loading()) {\n  <span class=\"tedi-tag__spinner-wrapper\">\n    <tedi-spinner [size]=\"48\" />\n  </span>\n} @else if (closable()) {\n  <button\n    type=\"button\"\n    tedi-closing-button\n    size=\"small\"\n    [iconSize]=\"18\"\n    (click)=\"handleClose($event)\"\n    [attr.aria-describedby]=\"uniqueId\"\n    [ariaLabel]=\"'remove' | tediTranslate\"\n  >\n  </button>\n}\n", styles: [".tedi-tag{--_background-color: var(--tag-primary-background);--_border-color: var(--tag-primary-border);--_line-height: var(--body-small-regular-line-height);display:inline-flex;gap:var(--tag-default-padding-x);align-items:flex-start;padding:0 var(--tag-default-padding-x);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--_line-height);color:var(--general-text-primary);background-color:var(--_background-color);border-radius:var(--tag-default-radius);box-shadow:inset 0 0 0 1px var(--_border-color)}.tedi-tag__content{padding:var(--tag-default-padding-y) 0}.tedi-tag--ellipsis{min-width:0;max-width:100%}.tedi-tag--ellipsis .tedi-tag__content{min-width:0}.tedi-tag--ellipsis .tedi-tag__icon-wrapper,.tedi-tag--ellipsis .tedi-closing-button{flex-shrink:0}.tedi-tag__icon-wrapper{line-height:var(--_line-height)}.tedi-tag__spinner-wrapper{display:flex;align-items:center;height:calc(var(--_line-height) + var(--tag-default-padding-y))}.tedi-tag__spinner-wrapper tedi-spinner{--tedi-spinner-size: 12;--tedi-spinner-stroke: 2}.tedi-tag--closable:not(.tedi-tag--loading){padding-right:0}.tedi-tag--closable:not(.tedi-tag--loading) .tedi-closing-button{border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-tag--secondary{--_background-color: var(--tag-secondary-background);--_border-color: var(--tag-secondary-border)}.tedi-tag--danger{--_background-color: var(--tag-danger-background);--_border-color: var(--tag-danger-border)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: EllipsisComponent, selector: "tedi-ellipsis", inputs: ["lineClamp", "tooltip", "position"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
@@ -6772,7 +7177,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: CdkOverlayOrigin, 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  <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}\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() && label() ? labelId() : 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]=\"label() ? labelId() : null\"\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  <button\n    class=\"tedi-select__arrow\"\n    type=\"button\"\n    tabindex=\"-1\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </button>\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          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      @for (value of selectedValues(); track value; let i = $index) {\n        @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n          <tedi-tag\n            #tagElement\n            [closable]=\"isTagRemovable()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      }\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag>+{{ 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]=\"label() ? labelId() : null\"\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__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{flex-grow:0;flex-shrink:0;padding:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default;background:none;border:none}.tedi-select__arrow:focus-visible{outline:none}.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-border-radius);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;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__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", "ariaLabel"] }, { 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" }, { 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: CdkOverlayOrigin, 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  <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}\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() && label() ? labelId() : 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]=\"label() ? labelId() : null\"\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  <button\n    class=\"tedi-select__arrow\"\n    type=\"button\"\n    tabindex=\"-1\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </button>\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          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      @for (value of selectedValues(); track value; let i = $index) {\n        @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n          <tedi-tag\n            #tagElement\n            [closable]=\"isTagRemovable()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      }\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag>+{{ 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]=\"label() ? labelId() : null\"\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__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{flex-grow:0;flex-shrink:0;padding:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default;background:none;border:none}.tedi-select__arrow:focus-visible{outline:none}.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-border-radius);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;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__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: 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" }, { 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,
@@ -6997,7 +7402,7 @@ class FormFieldComponent {
         this.control?.clearField?.();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n  <ng-content select=\"input[tedi-text-field], tedi-time-field\"></ng-content>\n\n  @if (clearable()) {\n    <div\n      class=\"tedi-form-field__buttons\"\n      [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n      [attr.aria-hidden]=\"!showClearButton() || null\"\n    >\n      <button\n        class=\"tedi-form-field__clear\"\n        tedi-closing-button\n        type=\"button\"\n        size=\"small\"\n        [ariaLabel]=\"'clear' | tediTranslate\"\n        [iconSize]=\"18\"\n        [tabIndex]=\"showClearButton() ? 0 : -1\"\n        [disabled]=\"isDisabled() || !showClearButton()\"\n        (click)=\"clear()\"\n      ></button>\n\n      @if (icon()) {\n        <tedi-separator axis=\"vertical\" size=\"1rem\" />\n      }\n    </div>\n  }\n\n  @if (resolvedIcon(); as icon) {\n    <div class=\"tedi-form-field__icon\">\n      <tedi-icon\n        [name]=\"icon.name\"\n        [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n        [color]=\"icon.color ?? 'secondary'\"\n        [type]=\"icon.type ?? 'outlined'\"\n        [variant]=\"icon.variant ?? 'outlined'\"\n        [attr.aria-hidden]=\"true\"\n      />\n    </div>\n  }\n</div>\n\n@if (feedback) {\n  <div class=\"tedi-form-field__feedback\">\n    <ng-content select=\"tedi-feedback-text\"></ng-content>\n  </div>\n}\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field--with-icon .tedi-form-field__input{padding-right:var(--form-field-padding-x-md-default)}.tedi-form-field--with-icon.tedi-form-field--large .tedi-form-field__input{padding-right:var(--form-field-padding-x-lg)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:active){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "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: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n  <ng-content select=\"input[tedi-text-field], tedi-time-field\"></ng-content>\n\n  @if (clearable()) {\n    <div\n      class=\"tedi-form-field__buttons\"\n      [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n      [attr.aria-hidden]=\"!showClearButton() || null\"\n    >\n      <button\n        class=\"tedi-form-field__clear\"\n        tedi-closing-button\n        type=\"button\"\n        size=\"small\"\n        [ariaLabel]=\"'clear' | tediTranslate\"\n        [iconSize]=\"18\"\n        [tabIndex]=\"showClearButton() ? 0 : -1\"\n        [disabled]=\"isDisabled() || !showClearButton()\"\n        (click)=\"clear()\"\n      ></button>\n\n      @if (icon()) {\n        <tedi-separator axis=\"vertical\" size=\"1rem\" />\n      }\n    </div>\n  }\n\n  @if (resolvedIcon(); as icon) {\n    <div class=\"tedi-form-field__icon\">\n      <tedi-icon\n        [name]=\"icon.name\"\n        [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n        [color]=\"icon.color ?? 'secondary'\"\n        [type]=\"icon.type ?? 'outlined'\"\n        [variant]=\"icon.variant ?? 'outlined'\"\n        [attr.aria-hidden]=\"true\"\n      />\n    </div>\n  }\n</div>\n\n@if (feedback) {\n  <div class=\"tedi-form-field__feedback\">\n    <ng-content select=\"tedi-feedback-text\"></ng-content>\n  </div>\n}\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field--with-icon .tedi-form-field__input{padding-right:var(--form-field-padding-x-md-default)}.tedi-form-field--with-icon.tedi-form-field--large .tedi-form-field__input{padding-right:var(--form-field-padding-x-lg)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:active){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "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: FormFieldComponent, decorators: [{
             type: Component,
@@ -7972,7 +8377,7 @@ class ModalHeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeButtonSize: { classPropertyName: "closeButtonSize", publicName: "closeButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-modal-header" }, ngImport: i0, template: "<div class=\"tedi-modal-header__head\">\n  <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n  @if (showClose()) {\n    <button\n      tedi-closing-button\n      class=\"tedi-modal-header__close\"\n      [size]=\"effectiveCloseButtonSize()\"\n      (click)=\"closeModal()\"\n    ></button>\n  }\n</div>\n<ng-content select=\"[tedi-modal-description]\" />\n<ng-content />\n", styles: ["h1,.h1,.tedi-h1,.text-h1,.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}h2,.h2,.tedi-h2,.text-h2,.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}h3,.h3,.tedi-h3,.text-h3,.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}h4,.h4,.tedi-h4,.text-h4,.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}h5,.h5,.tedi-h5,.text-h5,.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}h6,.h6,.tedi-h6,.text-h6,.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--default{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}.tedi-text--small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-subtitle{font-size:var(--heading-subtitle-regular-size);font-weight:var(--heading-subtitle-regular-weight);line-height:var(--heading-subtitle-regular-line-height);text-transform:uppercase}.text-subtitle.text-small{font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height)}label{line-height:var(--body-regular-line-height);color:var(--general-text-secondary)}.text-normal{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}small,.text-small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-extra-small{font-size:var(--body-extra-small-size);font-weight:var(--body-extra-small-weight);line-height:var(--body-extra-small-line-height)}.tedi-text--default,.tedi-text--primary{color:var(--general-text-primary)}.tedi-text--secondary{color:var(--general-text-secondary)}.tedi-text--tertiary{color:var(--general-text-tertiary)}.tedi-text--white{color:var(--general-text-white)}.tedi-text--disabled{color:var(--general-text-disabled)}.tedi-text--brand{color:var(--general-text-brand)}.tedi-text--success{color:var(--general-status-success-text)}.tedi-text--warning{color:var(--general-status-warning-text)}.tedi-text--danger{color:var(--general-status-danger-text)}.tedi-text--info{color:var(--general-status-info-text)}.tedi-text--neutral{color:var(--general-status-neutral-text)}.text-nowrap{white-space:nowrap}.text-break-all{word-break:break-all}.text-break-word{overflow-wrap:break-word}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-capitalize-first:first-letter{text-transform:capitalize}.text-break-spaces{white-space:break-spaces}.text-inline-block{display:inline-block}.text-inline{display:inline}b,strong,.text-bold{font-weight:700}.text-thin{font-weight:300}i,.text-italic{font-style:italic}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-line-normal{line-height:normal}.text-line-condensed{line-height:1}.text-default{color:var(--general-text-primary)}.text-primary{color:var(--general-text-brand)}@media print{.text-primary{filter:grayscale(1)}}.text-muted{color:var(--general-text-secondary)}.text-subtle{color:var(--general-text-tertiary)}.text-disabled{color:var(--general-text-disabled)}.text-inverted{color:var(--general-text-white)}.text-positive{color:var(--general-status-success-text)}@media print{.text-positive{filter:grayscale(1)}}.text-important{color:var(--general-status-danger-text)}@media print{.text-important{filter:grayscale(1)}}.text-warning{color:var(--general-status-warning-text)}@media print{.text-warning{filter:grayscale(1)}}.tedi-modal{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;position:fixed;inset:0;z-index:var(--z-index-modal);display:none}.tedi-modal--open{display:block}.tedi-modal--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal--default .tedi-modal-header__head h1,.tedi-modal--default .tedi-modal-header__head h2,.tedi-modal--default .tedi-modal-header__head h3,.tedi-modal--default .tedi-modal-header__head h4,.tedi-modal--default .tedi-modal-header__head h5,.tedi-modal--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal--small .tedi-modal-header__head h1,.tedi-modal--small .tedi-modal-header__head h2,.tedi-modal--small .tedi-modal-header__head h3,.tedi-modal--small .tedi-modal-header__head h4,.tedi-modal--small .tedi-modal-header__head h5,.tedi-modal--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal--xs .tedi-modal__dialog{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal__backdrop{position:fixed;inset:0;background:var(--general-surface-overlay)}.tedi-modal .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.cdk-overlay-container{z-index:var(--z-index-modal)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal-dialog--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeButtonSize: { classPropertyName: "closeButtonSize", publicName: "closeButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-modal-header" }, ngImport: i0, template: "<div class=\"tedi-modal-header__head\">\n  <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n  @if (showClose()) {\n    <button\n      tedi-closing-button\n      class=\"tedi-modal-header__close\"\n      [size]=\"effectiveCloseButtonSize()\"\n      (click)=\"closeModal()\"\n    ></button>\n  }\n</div>\n<ng-content select=\"[tedi-modal-description]\" />\n<ng-content />\n", styles: ["h1,.h1,.tedi-h1,.text-h1,.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}h2,.h2,.tedi-h2,.text-h2,.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}h3,.h3,.tedi-h3,.text-h3,.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}h4,.h4,.tedi-h4,.text-h4,.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}h5,.h5,.tedi-h5,.text-h5,.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}h6,.h6,.tedi-h6,.text-h6,.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--default{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}.tedi-text--small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-subtitle{font-size:var(--heading-subtitle-regular-size);font-weight:var(--heading-subtitle-regular-weight);line-height:var(--heading-subtitle-regular-line-height);text-transform:uppercase}.text-subtitle.text-small{font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height)}label{line-height:var(--body-regular-line-height);color:var(--general-text-secondary)}.text-normal{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}small,.text-small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-extra-small{font-size:var(--body-extra-small-size);font-weight:var(--body-extra-small-weight);line-height:var(--body-extra-small-line-height)}.tedi-text--default,.tedi-text--primary{color:var(--general-text-primary)}.tedi-text--secondary{color:var(--general-text-secondary)}.tedi-text--tertiary{color:var(--general-text-tertiary)}.tedi-text--white{color:var(--general-text-white)}.tedi-text--disabled{color:var(--general-text-disabled)}.tedi-text--brand{color:var(--general-text-brand)}.tedi-text--success{color:var(--general-status-success-text)}.tedi-text--warning{color:var(--general-status-warning-text)}.tedi-text--danger{color:var(--general-status-danger-text)}.tedi-text--info{color:var(--general-status-info-text)}.tedi-text--neutral{color:var(--general-status-neutral-text)}.text-nowrap{white-space:nowrap}.text-break-all{word-break:break-all}.text-break-word{overflow-wrap:break-word}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-capitalize-first:first-letter{text-transform:capitalize}.text-break-spaces{white-space:break-spaces}.text-inline-block{display:inline-block}.text-inline{display:inline}b,strong,.text-bold{font-weight:700}.text-thin{font-weight:300}i,.text-italic{font-style:italic}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-line-normal{line-height:normal}.text-line-condensed{line-height:1}.text-default{color:var(--general-text-primary)}.text-primary{color:var(--general-text-brand)}@media print{.text-primary{filter:grayscale(1)}}.text-muted{color:var(--general-text-secondary)}.text-subtle{color:var(--general-text-tertiary)}.text-disabled{color:var(--general-text-disabled)}.text-inverted{color:var(--general-text-white)}.text-positive{color:var(--general-status-success-text)}@media print{.text-positive{filter:grayscale(1)}}.text-important{color:var(--general-status-danger-text)}@media print{.text-important{filter:grayscale(1)}}.text-warning{color:var(--general-status-warning-text)}@media print{.text-warning{filter:grayscale(1)}}.tedi-modal{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;position:fixed;inset:0;z-index:var(--z-index-modal);display:none}.tedi-modal--open{display:block}.tedi-modal--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal--default .tedi-modal-header__head h1,.tedi-modal--default .tedi-modal-header__head h2,.tedi-modal--default .tedi-modal-header__head h3,.tedi-modal--default .tedi-modal-header__head h4,.tedi-modal--default .tedi-modal-header__head h5,.tedi-modal--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal--small .tedi-modal-header__head h1,.tedi-modal--small .tedi-modal-header__head h2,.tedi-modal--small .tedi-modal-header__head h3,.tedi-modal--small .tedi-modal-header__head h4,.tedi-modal--small .tedi-modal-header__head h5,.tedi-modal--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal--xs .tedi-modal__dialog{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal__backdrop{position:fixed;inset:0;background:var(--general-surface-overlay)}.tedi-modal .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.cdk-overlay-container{z-index:var(--z-index-modal)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal-dialog--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media(max-width:35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media(max-width:47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media(max-width:61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media(max-width:74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media(max-width:87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, decorators: [{
             type: Component,
@@ -8343,7 +8748,7 @@ class TimeFieldComponent {
                 provide: TEDI_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TimeFieldComponent),
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.role]=\"null\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0;padding-right:var(--form-field-padding-x-md-default)}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.role]=\"null\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0;padding-right:var(--form-field-padding-x-md-default)}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
             type: Component,
@@ -11891,6 +12296,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (option of filteredOptions(); track option.value; let i = $index) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n                [class.tedi-filter-dropdown__item--selected]=\"isOptionSelected(option.value)\"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\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              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"allFilteredSelected() ? 'true' : someFilteredSelected() ? 'mixed' : 'false'\"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{ resolvedSelectAllLabel() }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (option of filteredOptions(); track option.value; let i = $index) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\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              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon class=\"tedi-filter__icon\" name=\"check\" [size]=\"iconSize()\" color=\"inherit\" />\n  }\n\n  <div class=\"tedi-filter__prepend\" [class.tedi-filter__prepend--hidden]=\"hidePrepend()\">\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge class=\"tedi-filter__count\" [text]=\"'' + selectedCount()\" color=\"brand\" />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon class=\"tedi-filter__icon\" name=\"arrow_drop_down\" variant=\"filled\" [size]=\"iconSize()\" color=\"inherit\" />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);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)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchClearable", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], preserveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.ViewChild, args: ["dropdown", { isSignal: true }] }], dropdownPanel: [{ type: i0.ViewChild, args: ["dropdownPanel", { isSignal: true }] }], optionsList: [{ type: i0.ViewChild, args: ["optionsList", { isSignal: true }] }], triggerBtn: [{ type: i0.ViewChild, args: ["triggerBtn", { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FilterContentDirective), { isSignal: true }] }], filterPrepend: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FilterPrependDirective), { isSignal: true }] }] } });
 
+class ProgressBarComponent {
+    /**
+     * Optional id for the underlying `<progress>` element. Useful when an
+     * external `<label for=…>` should bind to it.
+     */
+    progressId = input(...(ngDevMode ? [undefined, { debugName: "progressId" }] : []));
+    /**
+     * Progress value between 0 and 100. Values are clamped.
+     * @default 0
+     */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value", transform: (raw) => Math.min(100, Math.max(0, Number(raw) || 0)) }] : [{
+            transform: (raw) => Math.min(100, Math.max(0, Number(raw) || 0)),
+        }]));
+    /**
+     * Size of the bar. `small` renders a 4px bar height instead of the
+     * default 8px.
+     * @default default
+     */
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Optional title rendered above (default) or to the left of the bar.
+     */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /**
+     * Where to place the label relative to the bar.
+     * Has no effect when `label` is not set.
+     * @default top
+     */
+    labelPosition = input("top", ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    /**
+     * Render a red `*` after the label to indicate a required field.
+     * Has no effect when `label` is not set.
+     * @default false
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Show or hide the percentage value.
+     * @default true
+     */
+    showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Where to place the percentage value.
+     * - `horizontal` – next to the bar.
+     * - `bottom` – on the hint row beneath the bar.
+     * @default horizontal
+     */
+    valuePosition = input("horizontal", ...(ngDevMode ? [{ debugName: "valuePosition" }] : []));
+    /**
+     * Override the rendered value text. Defaults to `"{value}%"`.
+     *
+     * Use this when the progress represents something other than a percentage —
+     * e.g. `value=20` with `valueLabel="1/5"` shows the bar at 20% but renders
+     * the label as "1/5". `value` still drives the bar fill; the label is also
+     * exposed to assistive technology via `aria-valuetext`.
+     */
+    valueLabel = input(...(ngDevMode ? [undefined, { debugName: "valueLabel" }] : []));
+    /**
+     * Accessible label for the progress bar. Falls back to `label()` when omitted.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /*
+     * Per-breakpoint overrides (`xs`–`xxl`).
+     *
+     * The base inputs (`size`, `labelPosition`, `valuePosition`, …) describe the
+     * smallest viewport. Each breakpoint input takes a *partial* `ProgressBarInputs`
+     * that is layered on top from that breakpoint **and up** — so you only set what
+     * changes, and larger breakpoints inherit from smaller ones until overridden.
+     *
+     * Breakpoint widths: `xs` ≥ 0, `sm` ≥ 576, `md` ≥ 768, `lg` ≥ 992,
+     * `xl` ≥ 1200, `xxl` ≥ 1400 (px).
+     *
+     * @example
+     * ```html
+     * <!-- Mobile-first: stacked label + value below the bar.
+     *      From md up: inline label on the left, value beside the bar. -->
+     * <tedi-progress-bar
+     *   [value]="40"
+     *   label="Upload"
+     *   labelPosition="top"
+     *   valuePosition="bottom"
+     *   [md]="{ labelPosition: 'horizontal', valuePosition: 'horizontal' }"
+     * />
+     *
+     * <!-- Multiple breakpoints stack: sm hides the value, xl shows it again. -->
+     * <tedi-progress-bar
+     *   [value]="40"
+     *   [sm]="{ showValue: false }"
+     *   [xl]="{ showValue: true }"
+     * />
+     * ```
+     */
+    /** Overrides applied from the `xs` breakpoint (≥ 0px) and up. */
+    xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
+    /** Overrides applied from the `sm` breakpoint (≥ 576px) and up. */
+    sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
+    /** Overrides applied from the `md` breakpoint (≥ 768px) and up. */
+    md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
+    /** Overrides applied from the `lg` breakpoint (≥ 992px) and up. */
+    lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
+    /** Overrides applied from the `xl` breakpoint (≥ 1200px) and up. */
+    xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
+    /** Overrides applied from the `xxl` breakpoint (≥ 1400px) and up. */
+    xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
+    breakpointService = inject(BreakpointService);
+    currentProps = computed(() => this.breakpointService.getBreakpointInputs({
+        size: this.size(),
+        labelPosition: this.labelPosition(),
+        showValue: this.showValue(),
+        valuePosition: this.valuePosition(),
+        valueLabel: this.valueLabel(),
+        xs: this.xs(),
+        sm: this.sm(),
+        md: this.md(),
+        lg: this.lg(),
+        xl: this.xl(),
+        xxl: this.xxl(),
+    }), ...(ngDevMode ? [{ debugName: "currentProps" }] : []));
+    formattedValue = computed(() => this.currentProps().valueLabel ?? `${this.value()}%`, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
+    accessibleLabel = computed(() => this.ariaLabel() ?? this.label() ?? undefined, ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ProgressBarComponent, isStandalone: true, selector: "tedi-progress-bar", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valuePosition: { classPropertyName: "valuePosition", publicName: "valuePosition", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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.tedi-progress-bar": "true", "class.tedi-progress-bar--small": "currentProps().size === 'small'", "class.tedi-progress-bar--label-horizontal": "label() && currentProps().labelPosition === 'horizontal'", "class.tedi-progress-bar--value-bottom": "currentProps().valuePosition === 'bottom'" } }, ngImport: i0, template: "@if (label() && currentProps().labelPosition === \"top\") {\n  <label\n    tedi-label\n    color=\"primary\"\n    [required]=\"required()\"\n    [for]=\"progressId()\"\n    class=\"tedi-progress-bar__label\"\n  >\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n  @if (label() && currentProps().labelPosition === \"horizontal\") {\n    <label\n      tedi-label\n      color=\"primary\"\n      [required]=\"required()\"\n      [for]=\"progressId()\"\n      class=\"tedi-progress-bar__label\"\n    >\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"tedi-progress-bar__main\">\n    <div class=\"tedi-progress-bar__track-row\">\n      <progress\n        class=\"tedi-progress-bar__track\"\n        [id]=\"progressId()\"\n        [max]=\"100\"\n        [value]=\"value()\"\n        [attr.aria-label]=\"accessibleLabel()\"\n        [attr.aria-valuetext]=\"currentProps().valueLabel\"\n      ></progress>\n\n      @if (currentProps().showValue && currentProps().valuePosition === \"horizontal\") {\n        <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n\n    <div class=\"tedi-progress-bar__hint-row\">\n      <ng-content select=\"tedi-feedback-text\" />\n\n      @if (currentProps().showValue && currentProps().valuePosition === \"bottom\") {\n        <span\n          tedi-label\n          size=\"small\"\n          class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n        >\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\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: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-progress-bar", imports: [LabelComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class.tedi-progress-bar]": "true",
+                        "[class.tedi-progress-bar--small]": "currentProps().size === 'small'",
+                        "[class.tedi-progress-bar--label-horizontal]": "label() && currentProps().labelPosition === 'horizontal'",
+                        "[class.tedi-progress-bar--value-bottom]": "currentProps().valuePosition === 'bottom'",
+                    }, template: "@if (label() && currentProps().labelPosition === \"top\") {\n  <label\n    tedi-label\n    color=\"primary\"\n    [required]=\"required()\"\n    [for]=\"progressId()\"\n    class=\"tedi-progress-bar__label\"\n  >\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-progress-bar__row\">\n  @if (label() && currentProps().labelPosition === \"horizontal\") {\n    <label\n      tedi-label\n      color=\"primary\"\n      [required]=\"required()\"\n      [for]=\"progressId()\"\n      class=\"tedi-progress-bar__label\"\n    >\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"tedi-progress-bar__main\">\n    <div class=\"tedi-progress-bar__track-row\">\n      <progress\n        class=\"tedi-progress-bar__track\"\n        [id]=\"progressId()\"\n        [max]=\"100\"\n        [value]=\"value()\"\n        [attr.aria-label]=\"accessibleLabel()\"\n        [attr.aria-valuetext]=\"currentProps().valueLabel\"\n      ></progress>\n\n      @if (currentProps().showValue && currentProps().valuePosition === \"horizontal\") {\n        <span tedi-label size=\"small\" class=\"tedi-progress-bar__value\">\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n\n    <div class=\"tedi-progress-bar__hint-row\">\n      <ng-content select=\"tedi-feedback-text\" />\n\n      @if (currentProps().showValue && currentProps().valuePosition === \"bottom\") {\n        <span\n          tedi-label\n          size=\"small\"\n          class=\"tedi-progress-bar__value tedi-progress-bar__value--bottom\"\n        >\n          {{ formattedValue() }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".tedi-progress-bar{--_bar-height: var(--progress-bar-height);--_bar-radius: var(--progress-bar-radius);--_bar-background: var(--progress-bar-background-passive);--_bar-border: var(--progress-bar-border-default);--_progress-background: var(--progress-bar-background-active);--_value-color: var(--progress-bar-range-label-text);display:flex;flex-direction:column;width:100%}.tedi-progress-bar__label{display:inline-flex}.tedi-progress-bar__row{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-progress-bar--label-horizontal .tedi-progress-bar__row{flex-direction:row;gap:var(--layout-grid-gutters-16);align-items:flex-start}.tedi-progress-bar__main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.tedi-progress-bar__track-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;min-height:var(--body-regular-line-height)}.tedi-progress-bar__track{flex:1 1 auto;width:100%;height:var(--_bar-height);overflow:hidden;appearance:none;background:var(--_bar-background);border:1px solid var(--_bar-border);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-bar{background:var(--_bar-background);border-radius:var(--_bar-radius)}.tedi-progress-bar__track::-webkit-progress-value{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__track::-moz-progress-bar{background:var(--_progress-background);border-radius:var(--_bar-radius) 0 0 var(--_bar-radius)}.tedi-progress-bar__value{flex-shrink:0;color:var(--_value-color)}.tedi-progress-bar__hint-row{display:flex;gap:var(--layout-grid-gutters-08);align-items:flex-start;min-width:0}.tedi-progress-bar__hint-row:empty{display:none}.tedi-progress-bar__hint-row .tedi-feedback-text{flex:1 1 auto;min-width:0}.tedi-progress-bar__value--bottom{margin-left:auto;color:var(--progress-bar-range-label-text)}.tedi-progress-bar--small{--_bar-height: var(--progress-bar-height-sm)}\n"] }]
+        }], propDecorators: { progressId: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valuePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePosition", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 AttachmentComponent {
+    projectedProgress = contentChild(ProgressBarComponent, ...(ngDevMode ? [{ debugName: "projectedProgress" }] : []));
+    breakpointService = inject(BreakpointService);
+    /**
+     * File name to display.
+     */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * Pre-formatted file size string (e.g. `"0.9 MB"`). Consumer formats the
+     * value; the component renders it as-is to the right of the name.
+     */
+    fileSize = input(...(ngDevMode ? [undefined, { debugName: "fileSize" }] : []));
+    /**
+     * Leading file-type icon shown before the file name. Pass a Material Symbol
+     * name (e.g. `"description"`, `"picture_as_pdf"`, `"imagesmode"`).
+     */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    /**
+     * Error feedback message. When set, the attachment switches to its error
+     * visual: red card background, error icon next to the name, and the
+     * message rendered as feedback text below the card. Implies `invalid`.
+     */
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
+    /**
+     * Mark the attachment as invalid. Switches to the error visual (red card
+     * background, error icon next to the name) but does **not** render any
+     * feedback text below the card. Use when the validation message is
+     * shown elsewhere (e.g. as an aggregate error on the parent control).
+     * Implied automatically when `error` is set.
+     * @default false
+     */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Content layout direction.
+     * - `horizontal` – name/size and progress sit on a single row beside the
+     *   actions (the default desktop layout).
+     * - `vertical` – name, size and progress stack in a column with the actions
+     *   pinned top-right. Useful in narrow containers (mobile, sidebars).
+     *
+     * When `undefined`, the direction is auto-derived from the viewport: it
+     * switches to `vertical` below the `verticalBelow` breakpoint.
+     */
+    direction = input(undefined, ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    /**
+     * Viewport breakpoint below which the layout auto-switches to `vertical`
+     * when `direction` is not set explicitly.
+     * @default "sm"
+     */
+    verticalBelow = input("sm", ...(ngDevMode ? [{ debugName: "verticalBelow" }] : []));
+    _autoVertical = computed(() => {
+        return this.breakpointService.isBelowBreakpoint(this.verticalBelow())();
+    }, ...(ngDevMode ? [{ debugName: "_autoVertical" }] : []));
+    isVertical = computed(() => (this.direction() ?? (this._autoVertical() ? "vertical" : "horizontal")) === "vertical", ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
+    hasErrorVisual = computed(() => !!this.error() || this.invalid(), ...(ngDevMode ? [{ debugName: "hasErrorVisual" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AttachmentComponent, isStandalone: true, selector: "tedi-attachment", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, verticalBelow: { classPropertyName: "verticalBelow", publicName: "verticalBelow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-attachment": "true", "class.tedi-attachment--error": "hasErrorVisual()", "class.tedi-attachment--vertical": "isVertical()", "class.tedi-attachment--has-progress": "!!projectedProgress()" } }, queries: [{ propertyName: "projectedProgress", first: true, predicate: ProgressBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-attachment__card\">\n  <div class=\"tedi-attachment__title-row\">\n    <div class=\"tedi-attachment__title-group\">\n      @if (icon()) {\n        <tedi-icon\n          [name]=\"icon()!\"\n          [size]=\"18\"\n          class=\"tedi-attachment__icon\"\n        />\n      }\n      <span class=\"tedi-attachment__title\">{{ name() }}</span>\n      @if (hasErrorVisual()) {\n        <tedi-icon\n          name=\"error\"\n          color=\"danger\"\n          [size]=\"18\"\n          [label]=\"error()\"\n          class=\"tedi-attachment__error-icon\"\n        />\n      }\n    </div>\n    @if (fileSize()) {\n      <span class=\"tedi-attachment__size\">{{ fileSize() }}</span>\n    }\n  </div>\n\n  <div\n    class=\"tedi-attachment__progress\"\n    [class.tedi-attachment__progress--empty]=\"!projectedProgress()\"\n  >\n    <ng-content select=\"tedi-progress-bar\" />\n  </div>\n\n  <div class=\"tedi-attachment__actions\">\n    <ng-content select=\"tedi-attachment-actions\" />\n  </div>\n</div>\n\n@if (error()) {\n  <tedi-feedback-text\n    class=\"tedi-attachment__feedback\"\n    [text]=\"error()!\"\n    type=\"error\"\n    position=\"left\"\n  />\n}\n", styles: [".tedi-attachment{display:block;width:100%}.tedi-attachment__card{display:grid;grid-template-areas:\"title actions\";grid-template-columns:1fr auto;background:var(--card-background-tertiary);border-radius:var(--card-radius-rounded)}.tedi-attachment--has-progress .tedi-attachment__card{grid-template-areas:\"title actions\" \"progress actions\"}.tedi-attachment__title-row{display:flex;grid-area:title;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0;padding:var(--card-padding-xs)}.tedi-attachment__title-group{display:flex;flex:1 1 auto;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}.tedi-attachment__title{min-width:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary);overflow-wrap:anywhere}.tedi-attachment__icon{flex-shrink:0}.tedi-attachment__error-icon{flex-shrink:0;--general-icon-danger: var(--status-badge-text-danger)}.tedi-attachment__size{flex-shrink:0;font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-attachment__progress{grid-area:progress;min-width:0;padding:0 var(--card-padding-xs) var(--card-padding-xs)}.tedi-attachment__progress--empty{display:none}.tedi-attachment__actions{display:flex;flex-shrink:0;grid-area:actions;align-items:center;align-self:start;min-height:var(--button-md-icon-size);padding-inline-start:var(--layout-grid-gutters-08)}.tedi-attachment__actions:empty{display:none}.tedi-attachment__feedback{margin-top:var(--layout-grid-gutters-04)}.tedi-attachment--error .tedi-attachment__card{background:var(--card-background-danger)}.tedi-attachment--vertical.tedi-attachment--has-progress .tedi-attachment__card{grid-template-areas:\"title actions\" \"progress progress\"}.tedi-attachment--vertical .tedi-attachment__title-row{flex-direction:column;gap:var(--layout-grid-gutters-02);align-items:stretch}.tedi-attachment--vertical .tedi-attachment__title-group{flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AttachmentComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-attachment", imports: [IconComponent, FeedbackTextComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class.tedi-attachment]": "true",
+                        "[class.tedi-attachment--error]": "hasErrorVisual()",
+                        "[class.tedi-attachment--vertical]": "isVertical()",
+                        "[class.tedi-attachment--has-progress]": "!!projectedProgress()",
+                    }, template: "<div class=\"tedi-attachment__card\">\n  <div class=\"tedi-attachment__title-row\">\n    <div class=\"tedi-attachment__title-group\">\n      @if (icon()) {\n        <tedi-icon\n          [name]=\"icon()!\"\n          [size]=\"18\"\n          class=\"tedi-attachment__icon\"\n        />\n      }\n      <span class=\"tedi-attachment__title\">{{ name() }}</span>\n      @if (hasErrorVisual()) {\n        <tedi-icon\n          name=\"error\"\n          color=\"danger\"\n          [size]=\"18\"\n          [label]=\"error()\"\n          class=\"tedi-attachment__error-icon\"\n        />\n      }\n    </div>\n    @if (fileSize()) {\n      <span class=\"tedi-attachment__size\">{{ fileSize() }}</span>\n    }\n  </div>\n\n  <div\n    class=\"tedi-attachment__progress\"\n    [class.tedi-attachment__progress--empty]=\"!projectedProgress()\"\n  >\n    <ng-content select=\"tedi-progress-bar\" />\n  </div>\n\n  <div class=\"tedi-attachment__actions\">\n    <ng-content select=\"tedi-attachment-actions\" />\n  </div>\n</div>\n\n@if (error()) {\n  <tedi-feedback-text\n    class=\"tedi-attachment__feedback\"\n    [text]=\"error()!\"\n    type=\"error\"\n    position=\"left\"\n  />\n}\n", styles: [".tedi-attachment{display:block;width:100%}.tedi-attachment__card{display:grid;grid-template-areas:\"title actions\";grid-template-columns:1fr auto;background:var(--card-background-tertiary);border-radius:var(--card-radius-rounded)}.tedi-attachment--has-progress .tedi-attachment__card{grid-template-areas:\"title actions\" \"progress actions\"}.tedi-attachment__title-row{display:flex;grid-area:title;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0;padding:var(--card-padding-xs)}.tedi-attachment__title-group{display:flex;flex:1 1 auto;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}.tedi-attachment__title{min-width:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary);overflow-wrap:anywhere}.tedi-attachment__icon{flex-shrink:0}.tedi-attachment__error-icon{flex-shrink:0;--general-icon-danger: var(--status-badge-text-danger)}.tedi-attachment__size{flex-shrink:0;font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-attachment__progress{grid-area:progress;min-width:0;padding:0 var(--card-padding-xs) var(--card-padding-xs)}.tedi-attachment__progress--empty{display:none}.tedi-attachment__actions{display:flex;flex-shrink:0;grid-area:actions;align-items:center;align-self:start;min-height:var(--button-md-icon-size);padding-inline-start:var(--layout-grid-gutters-08)}.tedi-attachment__actions:empty{display:none}.tedi-attachment__feedback{margin-top:var(--layout-grid-gutters-04)}.tedi-attachment--error .tedi-attachment__card{background:var(--card-background-danger)}.tedi-attachment--vertical.tedi-attachment--has-progress .tedi-attachment__card{grid-template-areas:\"title actions\" \"progress progress\"}.tedi-attachment--vertical .tedi-attachment__title-row{flex-direction:column;gap:var(--layout-grid-gutters-02);align-items:stretch}.tedi-attachment--vertical .tedi-attachment__title-group{flex:0 0 auto}\n"] }]
+        }], propDecorators: { projectedProgress: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ProgressBarComponent), { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], verticalBelow: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBelow", required: false }] }] } });
+
+class AttachmentActionsComponent {
+    /**
+     * Adds a 12px gap between the actions and 8px inline padding to the group.
+     * Enable for labeled (text) buttons, whose neutral variant has no horizontal
+     * padding of its own and would otherwise touch the card edge. Leave off for
+     * icon-only buttons, which sit flush.
+     * @default false
+     */
+    padded = input(false, ...(ngDevMode ? [{ debugName: "padded", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AttachmentActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AttachmentActionsComponent, isStandalone: true, selector: "tedi-attachment-actions", inputs: { padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-attachment-actions--padded": "padded()" }, classAttribute: "tedi-attachment-actions" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-attachment-actions{display:flex;align-items:center}.tedi-attachment-actions .tedi-button{border-radius:var(--tedi-radius-02-default)}.tedi-attachment-actions--padded{gap:var(--tedi-dimensions-07);padding-inline:var(--card-padding-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AttachmentActionsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-attachment-actions", template: "<ng-content />", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: "tedi-attachment-actions",
+                        "[class.tedi-attachment-actions--padded]": "padded()",
+                    }, styles: [".tedi-attachment-actions{display:flex;align-items:center}.tedi-attachment-actions .tedi-button{border-radius:var(--tedi-radius-02-default)}.tedi-attachment-actions--padded{gap:var(--tedi-dimensions-07);padding-inline:var(--card-padding-xs)}\n"] }]
+        }], propDecorators: { padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }] } });
+
 /**
  * Communicates that there is nothing to display — empty search results, an
  * unpopulated list, a freshly-created workspace — and optionally guides the
@@ -12150,6 +12774,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 class TimelineComponent {
     /** Index of active item */
     activeIndex = input(...(ngDevMode ? [undefined, { debugName: "activeIndex" }] : []));
+    /**
+     * Visual variant. "card" wraps the timeline in the borders and paddings
+     * of a card.
+     * @default default
+     */
+    variant = input("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Item padding in rems for the card variant.
+     * @default 1
+     */
+    cardPadding = input(...(ngDevMode ? [undefined, { debugName: "cardPadding" }] : []));
     items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     registerItem(item) {
         this.items.update((list) => [...list, item]);
@@ -12158,17 +12793,42 @@ class TimelineComponent {
         this.items.update((list) => list.filter((i) => i !== item));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TimelineComponent, isStandalone: true, selector: "tedi-timeline", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TimelineComponent, isStandalone: true, selector: "tedi-timeline", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cardPadding: { classPropertyName: "cardPadding", publicName: "cardPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline--card": "variant() === 'card'", "style.--_timeline-card-padding": "variant() === 'card' && cardPadding() != null ? cardPadding() + 'rem' : null" }, classAttribute: "tedi-timeline" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){.tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}.tedi-timeline--card{--_timeline-card-padding: var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-timeline--card .tedi-timeline-item{display:grid;grid-template-columns:subgrid;grid-column:1/-1;padding:var(--_timeline-card-padding);border-bottom:1px solid var(--card-border-primary)}.tedi-timeline--card .tedi-timeline-item:last-child{border-bottom:0}.tedi-timeline--card .tedi-timeline-item:not(:last-child) .tedi-timeline__marker{margin-bottom:calc(-2 * var(--_timeline-card-padding) - 10px)}.tedi-timeline--card .tedi-timeline__marker .tedi-separator--dot-only-outlined:before{background-color:var(--card-background-primary)}@media(max-width:61.98rem){.tedi-timeline--card .tedi-timeline-item .tedi-timeline__marker{grid-row:1/span 2}.tedi-timeline--card .tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:1/span 3}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-timeline", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}\n"] }]
-        }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }] } });
+            args: [{ standalone: true, selector: "tedi-timeline", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-timeline",
+                        "[class.tedi-timeline--card]": "variant() === 'card'",
+                        "[style.--_timeline-card-padding]": "variant() === 'card' && cardPadding() != null ? cardPadding() + 'rem' : null",
+                    }, styles: [".tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){.tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}.tedi-timeline--card{--_timeline-card-padding: var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-timeline--card .tedi-timeline-item{display:grid;grid-template-columns:subgrid;grid-column:1/-1;padding:var(--_timeline-card-padding);border-bottom:1px solid var(--card-border-primary)}.tedi-timeline--card .tedi-timeline-item:last-child{border-bottom:0}.tedi-timeline--card .tedi-timeline-item:not(:last-child) .tedi-timeline__marker{margin-bottom:calc(-2 * var(--_timeline-card-padding) - 10px)}.tedi-timeline--card .tedi-timeline__marker .tedi-separator--dot-only-outlined:before{background-color:var(--card-background-primary)}@media(max-width:61.98rem){.tedi-timeline--card .tedi-timeline-item .tedi-timeline__marker{grid-row:1/span 2}.tedi-timeline--card .tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:1/span 3}}\n"] }]
+        }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cardPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPadding", required: false }] }] } });
+
+/**
+ * Marks content that is pinned to the bottom of a timeline item's timings
+ * column on desktop and rendered after the item content on mobile.
+ *
+ * Usage: `<p *tediTimelineTimingsBottom>Muudetud 08.02.2024</p>`
+ */
+class TimelineTimingsBottomDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineTimingsBottomDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: TimelineTimingsBottomDirective, isStandalone: true, selector: "[tediTimelineTimingsBottom]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineTimingsBottomDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediTimelineTimingsBottom]",
+                    standalone: true,
+                }]
+        }] });
 
 class TimelineItemComponent {
     /** Item timings */
     timings = input([], ...(ngDevMode ? [{ debugName: "timings" }] : []));
     timeline = inject(TimelineComponent, { optional: true });
+    isMobile = inject(BreakpointService).isBelowBreakpoint("lg");
+    timingsBottom = contentChild(TimelineTimingsBottomDirective, ...(ngDevMode ? [{ debugName: "timingsBottom" }] : []));
     ngOnInit() {
         if (!this.timeline) {
             return;
@@ -12218,12 +12878,15 @@ class TimelineItemComponent {
         return "secondary";
     }, ...(ngDevMode ? [{ debugName: "color" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimelineItemComponent, isStandalone: true, selector: "tedi-timeline-item", inputs: { timings: { classPropertyName: "timings", publicName: "timings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-timeline__timings\">\n  @for (timing of timings(); track timing; let index = $index) {\n    <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n      {{ timing }}\n    </div>\n  }\n</div>\n<div\n  class=\"tedi-timeline__marker\"\n  [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n  <tedi-separator\n    [color]=\"color()\"\n    variant=\"dot-only\"\n    [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n    [dotFilled]=\"state() !== 'future'\"\n  />\n  @if (!isLast()) {\n    <tedi-separator\n      axis=\"vertical\"\n      [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n    />\n  }\n</div>\n<div class=\"tedi-timeline__info\">\n  <div>\n    <ng-content select=\"tedi-timeline-title\" />\n    <ng-content select=\"tedi-timeline-description\" />\n  </div>\n  <div class=\"tedi-timeline__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:4px;height:4px;margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:3px}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}\n"], dependencies: [{ kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimelineItemComponent, isStandalone: true, selector: "tedi-timeline-item", inputs: { timings: { classPropertyName: "timings", publicName: "timings", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline__item--has-bottom": "isMobile() && !!timingsBottom()" }, classAttribute: "tedi-timeline-item" }, queries: [{ propertyName: "timingsBottom", first: true, predicate: TimelineTimingsBottomDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-timeline__timings\">\n  @for (timing of timings(); track timing; let index = $index) {\n    <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n      {{ timing }}\n    </div>\n  }\n  @if (!isMobile() && timingsBottom()) {\n    <div class=\"tedi-timeline__timings-bottom\">\n      <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n    </div>\n  }\n</div>\n<div\n  class=\"tedi-timeline__marker\"\n  [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n  <tedi-separator\n    [color]=\"color()\"\n    variant=\"dot-only\"\n    [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n    [dotFilled]=\"state() !== 'future'\"\n  />\n  @if (!isLast()) {\n    <tedi-separator\n      axis=\"vertical\"\n      [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n    />\n  }\n</div>\n<div class=\"tedi-timeline__info\">\n  <div>\n    <ng-content select=\"tedi-timeline-title\" />\n    <ng-content select=\"tedi-timeline-description\" />\n  </div>\n  <div class=\"tedi-timeline__content\">\n    <ng-content />\n  </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n  <div class=\"tedi-timeline__timings-bottom\">\n    <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n  </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:4px;height:4px;margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:3px}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"], dependencies: [{ kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-timeline-item", imports: [SeparatorComponent, TextComponent, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tedi-timeline__timings\">\n  @for (timing of timings(); track timing; let index = $index) {\n    <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n      {{ timing }}\n    </div>\n  }\n</div>\n<div\n  class=\"tedi-timeline__marker\"\n  [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n  <tedi-separator\n    [color]=\"color()\"\n    variant=\"dot-only\"\n    [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n    [dotFilled]=\"state() !== 'future'\"\n  />\n  @if (!isLast()) {\n    <tedi-separator\n      axis=\"vertical\"\n      [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n    />\n  }\n</div>\n<div class=\"tedi-timeline__info\">\n  <div>\n    <ng-content select=\"tedi-timeline-title\" />\n    <ng-content select=\"tedi-timeline-description\" />\n  </div>\n  <div class=\"tedi-timeline__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:4px;height:4px;margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:3px}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}\n"] }]
-        }], propDecorators: { timings: [{ type: i0.Input, args: [{ isSignal: true, alias: "timings", required: false }] }] } });
+            args: [{ standalone: true, selector: "tedi-timeline-item", imports: [SeparatorComponent, TextComponent, NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-timeline-item",
+                        "[class.tedi-timeline__item--has-bottom]": "isMobile() && !!timingsBottom()",
+                    }, template: "<div class=\"tedi-timeline__timings\">\n  @for (timing of timings(); track timing; let index = $index) {\n    <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n      {{ timing }}\n    </div>\n  }\n  @if (!isMobile() && timingsBottom()) {\n    <div class=\"tedi-timeline__timings-bottom\">\n      <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n    </div>\n  }\n</div>\n<div\n  class=\"tedi-timeline__marker\"\n  [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n  <tedi-separator\n    [color]=\"color()\"\n    variant=\"dot-only\"\n    [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n    [dotFilled]=\"state() !== 'future'\"\n  />\n  @if (!isLast()) {\n    <tedi-separator\n      axis=\"vertical\"\n      [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n    />\n  }\n</div>\n<div class=\"tedi-timeline__info\">\n  <div>\n    <ng-content select=\"tedi-timeline-title\" />\n    <ng-content select=\"tedi-timeline-description\" />\n  </div>\n  <div class=\"tedi-timeline__content\">\n    <ng-content />\n  </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n  <div class=\"tedi-timeline__timings-bottom\">\n    <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n  </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:4px;height:4px;margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:3px}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"] }]
+        }], propDecorators: { timings: [{ type: i0.Input, args: [{ isSignal: true, alias: "timings", required: false }] }], timingsBottom: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineTimingsBottomDirective), { isSignal: true }] }] } });
 
 class TimelineDescriptionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -12584,12 +13247,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
 class ShowAtDirective {
     showAt = input.required(...(ngDevMode ? [{ debugName: "showAt" }] : []));
-    templateRef = inject(TemplateRef);
+    templateRef = inject(TemplateRef, { optional: true });
     viewContainerRef = inject(ViewContainerRef);
     breakpointService = inject(BreakpointService);
+    visible = computed(() => this.breakpointService.isAboveBreakpoint(this.showAt())(), ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /**
+     * Attribute usage (`showAt` on a real element) toggles `display` so the
+     * element stays in the DOM and remains eligible for content projection.
+     * Structural usage (`*showAt`) creates/clears the view instead and leaves
+     * `display` untouched (returns `null`).
+     */
+    hostDisplay = computed(() => this.templateRef || this.visible() ? null : 'none', ...(ngDevMode ? [{ debugName: "hostDisplay" }] : []));
     constructor() {
         effect(() => {
-            if (this.breakpointService.isAboveBreakpoint(this.showAt())()) {
+            if (!this.templateRef) {
+                return;
+            }
+            if (this.visible()) {
                 this.viewContainerRef.createEmbeddedView(this.templateRef);
             }
             else {
@@ -12598,24 +13272,38 @@ class ShowAtDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ShowAtDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: ShowAtDirective, isStandalone: true, selector: "[showAt]", inputs: { showAt: { classPropertyName: "showAt", publicName: "showAt", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: ShowAtDirective, isStandalone: true, selector: "[showAt]", inputs: { showAt: { classPropertyName: "showAt", publicName: "showAt", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.display": "hostDisplay()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ShowAtDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[showAt]',
                     standalone: true,
+                    host: {
+                        '[style.display]': 'hostDisplay()',
+                    },
                 }]
         }], ctorParameters: () => [], propDecorators: { showAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAt", required: true }] }] } });
 
 class HideAtDirective {
     hideAt = input.required(...(ngDevMode ? [{ debugName: "hideAt" }] : []));
-    templateRef = inject(TemplateRef);
+    templateRef = inject(TemplateRef, { optional: true });
     viewContainerRef = inject(ViewContainerRef);
     breakpointService = inject(BreakpointService);
+    visible = computed(() => this.breakpointService.isBelowBreakpoint(this.hideAt())(), ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /**
+     * Attribute usage (`hideAt` on a real element) toggles `display` so the
+     * element stays in the DOM and remains eligible for content projection.
+     * Structural usage (`*hideAt`) creates/clears the view instead and leaves
+     * `display` untouched (returns `null`).
+     */
+    hostDisplay = computed(() => this.templateRef || this.visible() ? null : 'none', ...(ngDevMode ? [{ debugName: "hostDisplay" }] : []));
     constructor() {
         effect(() => {
-            if (this.breakpointService.isBelowBreakpoint(this.hideAt())()) {
+            if (!this.templateRef) {
+                return;
+            }
+            if (this.visible()) {
                 this.viewContainerRef.createEmbeddedView(this.templateRef);
             }
             else {
@@ -12624,13 +13312,16 @@ class HideAtDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HideAtDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: HideAtDirective, isStandalone: true, selector: "[hideAt]", inputs: { hideAt: { classPropertyName: "hideAt", publicName: "hideAt", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: HideAtDirective, isStandalone: true, selector: "[hideAt]", inputs: { hideAt: { classPropertyName: "hideAt", publicName: "hideAt", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.display": "hostDisplay()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HideAtDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hideAt]',
                     standalone: true,
+                    host: {
+                        '[style.display]': 'hostDisplay()',
+                    },
                 }]
         }], ctorParameters: () => [], propDecorators: { hideAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAt", required: true }] }] } });
 
@@ -13492,5 +14183,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, 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, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, 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, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, calculateArrowOffset, createTablePersistence, generateUUID, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, toConnectedPositions, usePagination };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, 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, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, 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, 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, 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, breakpointInput, calculateArrowOffset, createTablePersistence, generateUUID, getCardBorderPlacementColor, getPaddingCssVariables, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, resolveCardBorderRadius, toConnectedPositions, usePagination };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map