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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/community/index.d.ts +10 -2
  2. package/community/index.d.ts.map +1 -1
  3. package/fesm2022/tedi-design-system-angular-community.mjs +22 -28
  4. package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
  5. package/fesm2022/tedi-design-system-angular-tedi.mjs +334 -38
  6. package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/tedi/index.d.ts +232 -8
  9. package/tedi/index.d.ts.map +1 -1
package/fesm2022/tedi-design-system-angular-tedi.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ 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';
3
3
  import { BreakpointObserver } from '@angular/cdk/layout';
4
4
  import * as i1$1 from '@angular/common';
5
5
  import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgFor, NgIf } from '@angular/common';
@@ -219,13 +219,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
219
219
  }, 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"] }]
220
220
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
221
221
 
222
+ /**
223
+ * Grid breakpoints in `rem`, mirroring `$grid-breakpoints` in
224
+ * `@tedi-design-system/core`. `rem` is used (instead of `px`) so breakpoints
225
+ * resolve against the browser's base font size and scale with the user's font
226
+ * preference — keeping these JS breakpoints aligned with the rem-based CSS
227
+ * tokens at any zoom / font-size setting.
228
+ */
222
229
  const BREAKPOINTS = {
223
230
  xs: 0,
224
- sm: 576,
225
- md: 768,
226
- lg: 992,
227
- xl: 1200,
228
- xxl: 1400,
231
+ sm: 36,
232
+ md: 48,
233
+ lg: 62,
234
+ xl: 75,
235
+ xxl: 87.5,
229
236
  };
230
237
  const breakpointsOrder = ["xs", "sm", "md", "lg", "xl", "xxl"];
231
238
  class BreakpointService {
@@ -233,24 +240,24 @@ class BreakpointService {
233
240
  _currentBreakpoint = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentBreakpoint" }] : []));
234
241
  constructor() {
235
242
  this.breakpointObserver
236
- .observe(Object.values(BREAKPOINTS).map((value) => `(min-width: ${value}px)`))
243
+ .observe(Object.values(BREAKPOINTS).map((value) => `(min-width: ${value}rem)`))
237
244
  .subscribe((state) => {
238
- if (state.breakpoints[`(min-width: ${BREAKPOINTS.xxl}px)`]) {
245
+ if (state.breakpoints[`(min-width: ${BREAKPOINTS.xxl}rem)`]) {
239
246
  this._currentBreakpoint.set("xxl");
240
247
  }
241
- else if (state.breakpoints[`(min-width: ${BREAKPOINTS.xl}px)`]) {
248
+ else if (state.breakpoints[`(min-width: ${BREAKPOINTS.xl}rem)`]) {
242
249
  this._currentBreakpoint.set("xl");
243
250
  }
244
- else if (state.breakpoints[`(min-width: ${BREAKPOINTS.lg}px)`]) {
251
+ else if (state.breakpoints[`(min-width: ${BREAKPOINTS.lg}rem)`]) {
245
252
  this._currentBreakpoint.set("lg");
246
253
  }
247
- else if (state.breakpoints[`(min-width: ${BREAKPOINTS.md}px)`]) {
254
+ else if (state.breakpoints[`(min-width: ${BREAKPOINTS.md}rem)`]) {
248
255
  this._currentBreakpoint.set("md");
249
256
  }
250
- else if (state.breakpoints[`(min-width: ${BREAKPOINTS.sm}px)`]) {
257
+ else if (state.breakpoints[`(min-width: ${BREAKPOINTS.sm}rem)`]) {
251
258
  this._currentBreakpoint.set("sm");
252
259
  }
253
- else if (state.breakpoints[`(min-width: ${BREAKPOINTS.xs}px)`]) {
260
+ else if (state.breakpoints[`(min-width: ${BREAKPOINTS.xs}rem)`]) {
254
261
  this._currentBreakpoint.set("xs");
255
262
  }
256
263
  else {
@@ -554,6 +561,13 @@ const translationsMap = {
554
561
  en: "An error occurred while uploading the file",
555
562
  ru: "Произошла ошибка при загрузке файла",
556
563
  },
564
+ "file-attachment.uploading": {
565
+ description: "Default hint label shown under the progress bar in Attachment while a file is being uploaded",
566
+ components: ["Attachment"],
567
+ et: "Üleslaadimine",
568
+ en: "Uploading",
569
+ ru: "Загрузка",
570
+ },
557
571
  "modal.close": {
558
572
  description: "Label for modals close button",
559
573
  components: ["Modal"],
@@ -1684,24 +1698,40 @@ class ClosingButtonComponent {
1684
1698
  * @default 24
1685
1699
  */
1686
1700
  iconSize = input(24, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
1701
+ /**
1702
+ * Material Symbols icon rendered inside the button. Override for other
1703
+ * closing-like actions such as delete/remove (e.g. `delete`). When
1704
+ * overriding, also provide a matching `ariaLabel` — the default label
1705
+ * is "close".
1706
+ * @default close
1707
+ */
1708
+ icon = input("close", ...(ngDevMode ? [{ debugName: "icon" }] : []));
1687
1709
  /**
1688
1710
  * ARIA label to override default label "close"
1689
1711
  */
1690
1712
  ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
1713
+ /**
1714
+ * Render the label as a native `title` attribute (browser tooltip on
1715
+ * hover). Set to `false` when the button is wrapped in a `tedi-tooltip`
1716
+ * so the native tooltip does not double the custom one. The `aria-label`
1717
+ * is kept either way.
1718
+ * @default true
1719
+ */
1720
+ showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
1691
1721
  translationService = inject(TediTranslationService);
1692
1722
  _defaultLabel = this.translationService.track("close");
1693
1723
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1694
- 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 });
1724
+ 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 });
1695
1725
  }
1696
1726
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ClosingButtonComponent, decorators: [{
1697
1727
  type: Component,
1698
1728
  args: [{ selector: "button[tedi-closing-button]", imports: [IconComponent], standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
1699
- "[title]": "ariaLabel() || _defaultLabel()",
1729
+ "[attr.title]": "showTitle() ? ariaLabel() || _defaultLabel() : null",
1700
1730
  "[attr.aria-label]": "ariaLabel() || _defaultLabel()",
1701
1731
  "[class.tedi-closing-button]": "true",
1702
1732
  "[class.tedi-closing-button--small]": "size() === 'small'",
1703
- }, 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"] }]
1704
- }], 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 }] }] } });
1733
+ }, 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"] }]
1734
+ }], 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 }] }] } });
1705
1735
 
1706
1736
  class AlertComponent {
1707
1737
  /**
@@ -1793,7 +1823,7 @@ class AlertComponent {
1793
1823
  }
1794
1824
  }
1795
1825
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1796
- 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 });
1826
+ 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 });
1797
1827
  }
1798
1828
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, decorators: [{
1799
1829
  type: Component,
@@ -3524,7 +3554,7 @@ class PopoverContentComponent {
3524
3554
  this.popover.hidePopover(true);
3525
3555
  }
3526
3556
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3527
- 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 });
3557
+ 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 });
3528
3558
  }
3529
3559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, decorators: [{
3530
3560
  type: Component,
@@ -3789,7 +3819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
3789
3819
  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"] }]
3790
3820
  }], 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 }] }] } });
3791
3821
 
3792
- const FOCUSABLE_SELECTOR = "button, a[href], [tabindex]";
3822
+ const FOCUSABLE_SELECTOR$1 = "button, a[href], [tabindex]";
3793
3823
  class DropdownTriggerDirective {
3794
3824
  /** 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. */
3795
3825
  ariaHaspopup = input("menu", ...(ngDevMode ? [{ debugName: "ariaHaspopup" }] : []));
@@ -3856,7 +3886,7 @@ class DropdownTriggerDirective {
3856
3886
  const el = this.host.nativeElement;
3857
3887
  if (this.isNativelyFocusable(el))
3858
3888
  return el;
3859
- return el.querySelector(FOCUSABLE_SELECTOR) ?? el;
3889
+ return el.querySelector(FOCUSABLE_SELECTOR$1) ?? el;
3860
3890
  }
3861
3891
  isNativelyFocusable(el) {
3862
3892
  return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
@@ -5216,7 +5246,7 @@ class DatePickerComponent {
5216
5246
  useExisting: forwardRef(() => DatePickerComponent),
5217
5247
  multi: true,
5218
5248
  },
5219
- ], 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 });
5249
+ ], 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 });
5220
5250
  }
5221
5251
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
5222
5252
  type: Component,
@@ -5517,6 +5547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
5517
5547
  }, 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"] }]
5518
5548
  }], 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 }] }] } });
5519
5549
 
5550
+ const FOCUSABLE_SELECTOR = "button, a[href], [tabindex]";
5520
5551
  class TooltipTriggerComponent {
5521
5552
  host = inject(ElementRef);
5522
5553
  overlayOrigin = inject(CdkOverlayOrigin, { self: true });
@@ -5604,11 +5635,29 @@ class TooltipTriggerComponent {
5604
5635
  this.interactiveElement.set(span);
5605
5636
  return;
5606
5637
  }
5607
- this.renderer.addClass(firstChild, "tedi-tooltip-trigger--focus");
5608
- if (!firstChild.getAttribute("tabindex")) {
5609
- this.renderer.setAttribute(firstChild, "tabindex", "0");
5638
+ const interactive = this.resolveInteractiveElement(firstChild);
5639
+ this.renderer.addClass(interactive, "tedi-tooltip-trigger--focus");
5640
+ if (!interactive.getAttribute("tabindex")) {
5641
+ this.renderer.setAttribute(interactive, "tabindex", "0");
5642
+ }
5643
+ this.interactiveElement.set(interactive);
5644
+ }
5645
+ /**
5646
+ * The element that actually receives focus and ARIA semantics. When the
5647
+ * projected child is itself focusable (a `<button>`/`<a href>`) it is used
5648
+ * directly. When it is a non-focusable wrapper that renders its own
5649
+ * interactive element (e.g. a `tedi-dropdown` projecting a trigger button),
5650
+ * the first focusable descendant is used instead — otherwise focus and the
5651
+ * tooltip description would land on the non-interactive wrapper.
5652
+ */
5653
+ resolveInteractiveElement(child) {
5654
+ if (this.isFocusable(child)) {
5655
+ return child;
5610
5656
  }
5611
- this.interactiveElement.set(firstChild);
5657
+ return child.querySelector(FOCUSABLE_SELECTOR) ?? child;
5658
+ }
5659
+ isFocusable(el) {
5660
+ return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
5612
5661
  }
5613
5662
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5614
5663
  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 +5934,7 @@ class TagComponent {
5885
5934
  this.closed.emit(event);
5886
5935
  }
5887
5936
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5888
- 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 });
5937
+ 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 });
5889
5938
  }
5890
5939
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TagComponent, decorators: [{
5891
5940
  type: Component,
@@ -6772,7 +6821,7 @@ class SelectComponent {
6772
6821
  useExisting: forwardRef(() => SelectComponent),
6773
6822
  multi: true,
6774
6823
  },
6775
- ], 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 });
6824
+ ], 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 });
6776
6825
  }
6777
6826
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
6778
6827
  type: Component,
@@ -6997,7 +7046,7 @@ class FormFieldComponent {
6997
7046
  this.control?.clearField?.();
6998
7047
  }
6999
7048
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7000
- 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 });
7049
+ 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 });
7001
7050
  }
7002
7051
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, decorators: [{
7003
7052
  type: Component,
@@ -7972,7 +8021,7 @@ class ModalHeaderComponent {
7972
8021
  }
7973
8022
  }
7974
8023
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7975
- 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 });
8024
+ 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 });
7976
8025
  }
7977
8026
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalHeaderComponent, decorators: [{
7978
8027
  type: Component,
@@ -8343,7 +8392,7 @@ class TimeFieldComponent {
8343
8392
  provide: TEDI_FORM_FIELD_CONTROL,
8344
8393
  useExisting: forwardRef(() => TimeFieldComponent),
8345
8394
  },
8346
- ], 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 });
8395
+ ], 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 });
8347
8396
  }
8348
8397
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
8349
8398
  type: Component,
@@ -11891,6 +11940,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
11891
11940
  }, 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"] }]
11892
11941
  }], 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 }] }] } });
11893
11942
 
11943
+ class ProgressBarComponent {
11944
+ /**
11945
+ * Optional id for the underlying `<progress>` element. Useful when an
11946
+ * external `<label for=…>` should bind to it.
11947
+ */
11948
+ progressId = input(...(ngDevMode ? [undefined, { debugName: "progressId" }] : []));
11949
+ /**
11950
+ * Progress value between 0 and 100. Values are clamped.
11951
+ * @default 0
11952
+ */
11953
+ value = input(0, ...(ngDevMode ? [{ debugName: "value", transform: (raw) => Math.min(100, Math.max(0, Number(raw) || 0)) }] : [{
11954
+ transform: (raw) => Math.min(100, Math.max(0, Number(raw) || 0)),
11955
+ }]));
11956
+ /**
11957
+ * Size of the bar. `small` renders a 4px bar height instead of the
11958
+ * default 8px.
11959
+ * @default default
11960
+ */
11961
+ size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
11962
+ /**
11963
+ * Optional title rendered above (default) or to the left of the bar.
11964
+ */
11965
+ label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
11966
+ /**
11967
+ * Where to place the label relative to the bar.
11968
+ * Has no effect when `label` is not set.
11969
+ * @default top
11970
+ */
11971
+ labelPosition = input("top", ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
11972
+ /**
11973
+ * Render a red `*` after the label to indicate a required field.
11974
+ * Has no effect when `label` is not set.
11975
+ * @default false
11976
+ */
11977
+ required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
11978
+ /**
11979
+ * Show or hide the percentage value.
11980
+ * @default true
11981
+ */
11982
+ showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
11983
+ /**
11984
+ * Where to place the percentage value.
11985
+ * - `horizontal` – next to the bar.
11986
+ * - `bottom` – on the hint row beneath the bar.
11987
+ * @default horizontal
11988
+ */
11989
+ valuePosition = input("horizontal", ...(ngDevMode ? [{ debugName: "valuePosition" }] : []));
11990
+ /**
11991
+ * Override the rendered value text. Defaults to `"{value}%"`.
11992
+ *
11993
+ * Use this when the progress represents something other than a percentage —
11994
+ * e.g. `value=20` with `valueLabel="1/5"` shows the bar at 20% but renders
11995
+ * the label as "1/5". `value` still drives the bar fill; the label is also
11996
+ * exposed to assistive technology via `aria-valuetext`.
11997
+ */
11998
+ valueLabel = input(...(ngDevMode ? [undefined, { debugName: "valueLabel" }] : []));
11999
+ /**
12000
+ * Accessible label for the progress bar. Falls back to `label()` when omitted.
12001
+ */
12002
+ ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
12003
+ /*
12004
+ * Per-breakpoint overrides (`xs`–`xxl`).
12005
+ *
12006
+ * The base inputs (`size`, `labelPosition`, `valuePosition`, …) describe the
12007
+ * smallest viewport. Each breakpoint input takes a *partial* `ProgressBarInputs`
12008
+ * that is layered on top from that breakpoint **and up** — so you only set what
12009
+ * changes, and larger breakpoints inherit from smaller ones until overridden.
12010
+ *
12011
+ * Breakpoint widths: `xs` ≥ 0, `sm` ≥ 576, `md` ≥ 768, `lg` ≥ 992,
12012
+ * `xl` ≥ 1200, `xxl` ≥ 1400 (px).
12013
+ *
12014
+ * @example
12015
+ * ```html
12016
+ * <!-- Mobile-first: stacked label + value below the bar.
12017
+ * From md up: inline label on the left, value beside the bar. -->
12018
+ * <tedi-progress-bar
12019
+ * [value]="40"
12020
+ * label="Upload"
12021
+ * labelPosition="top"
12022
+ * valuePosition="bottom"
12023
+ * [md]="{ labelPosition: 'horizontal', valuePosition: 'horizontal' }"
12024
+ * />
12025
+ *
12026
+ * <!-- Multiple breakpoints stack: sm hides the value, xl shows it again. -->
12027
+ * <tedi-progress-bar
12028
+ * [value]="40"
12029
+ * [sm]="{ showValue: false }"
12030
+ * [xl]="{ showValue: true }"
12031
+ * />
12032
+ * ```
12033
+ */
12034
+ /** Overrides applied from the `xs` breakpoint (≥ 0px) and up. */
12035
+ xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
12036
+ /** Overrides applied from the `sm` breakpoint (≥ 576px) and up. */
12037
+ sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
12038
+ /** Overrides applied from the `md` breakpoint (≥ 768px) and up. */
12039
+ md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
12040
+ /** Overrides applied from the `lg` breakpoint (≥ 992px) and up. */
12041
+ lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
12042
+ /** Overrides applied from the `xl` breakpoint (≥ 1200px) and up. */
12043
+ xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
12044
+ /** Overrides applied from the `xxl` breakpoint (≥ 1400px) and up. */
12045
+ xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
12046
+ breakpointService = inject(BreakpointService);
12047
+ currentProps = computed(() => this.breakpointService.getBreakpointInputs({
12048
+ size: this.size(),
12049
+ labelPosition: this.labelPosition(),
12050
+ showValue: this.showValue(),
12051
+ valuePosition: this.valuePosition(),
12052
+ valueLabel: this.valueLabel(),
12053
+ xs: this.xs(),
12054
+ sm: this.sm(),
12055
+ md: this.md(),
12056
+ lg: this.lg(),
12057
+ xl: this.xl(),
12058
+ xxl: this.xxl(),
12059
+ }), ...(ngDevMode ? [{ debugName: "currentProps" }] : []));
12060
+ formattedValue = computed(() => this.currentProps().valueLabel ?? `${this.value()}%`, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
12061
+ accessibleLabel = computed(() => this.ariaLabel() ?? this.label() ?? undefined, ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : []));
12062
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12063
+ 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 });
12064
+ }
12065
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProgressBarComponent, decorators: [{
12066
+ type: Component,
12067
+ args: [{ standalone: true, selector: "tedi-progress-bar", imports: [LabelComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
12068
+ "[class.tedi-progress-bar]": "true",
12069
+ "[class.tedi-progress-bar--small]": "currentProps().size === 'small'",
12070
+ "[class.tedi-progress-bar--label-horizontal]": "label() && currentProps().labelPosition === 'horizontal'",
12071
+ "[class.tedi-progress-bar--value-bottom]": "currentProps().valuePosition === 'bottom'",
12072
+ }, 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"] }]
12073
+ }], 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 }] }] } });
12074
+
12075
+ class AttachmentComponent {
12076
+ projectedProgress = contentChild(ProgressBarComponent, ...(ngDevMode ? [{ debugName: "projectedProgress" }] : []));
12077
+ breakpointService = inject(BreakpointService);
12078
+ /**
12079
+ * File name to display.
12080
+ */
12081
+ name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
12082
+ /**
12083
+ * Pre-formatted file size string (e.g. `"0.9 MB"`). Consumer formats the
12084
+ * value; the component renders it as-is to the right of the name.
12085
+ */
12086
+ fileSize = input(...(ngDevMode ? [undefined, { debugName: "fileSize" }] : []));
12087
+ /**
12088
+ * Leading file-type icon shown before the file name. Pass a Material Symbol
12089
+ * name (e.g. `"description"`, `"picture_as_pdf"`, `"imagesmode"`).
12090
+ */
12091
+ icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
12092
+ /**
12093
+ * Error feedback message. When set, the attachment switches to its error
12094
+ * visual: red card background, error icon next to the name, and the
12095
+ * message rendered as feedback text below the card. Implies `invalid`.
12096
+ */
12097
+ error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
12098
+ /**
12099
+ * Mark the attachment as invalid. Switches to the error visual (red card
12100
+ * background, error icon next to the name) but does **not** render any
12101
+ * feedback text below the card. Use when the validation message is
12102
+ * shown elsewhere (e.g. as an aggregate error on the parent control).
12103
+ * Implied automatically when `error` is set.
12104
+ * @default false
12105
+ */
12106
+ invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
12107
+ /**
12108
+ * Content layout direction.
12109
+ * - `horizontal` – name/size and progress sit on a single row beside the
12110
+ * actions (the default desktop layout).
12111
+ * - `vertical` – name, size and progress stack in a column with the actions
12112
+ * pinned top-right. Useful in narrow containers (mobile, sidebars).
12113
+ *
12114
+ * When `undefined`, the direction is auto-derived from the viewport: it
12115
+ * switches to `vertical` below the `verticalBelow` breakpoint.
12116
+ */
12117
+ direction = input(undefined, ...(ngDevMode ? [{ debugName: "direction" }] : []));
12118
+ /**
12119
+ * Viewport breakpoint below which the layout auto-switches to `vertical`
12120
+ * when `direction` is not set explicitly.
12121
+ * @default "sm"
12122
+ */
12123
+ verticalBelow = input("sm", ...(ngDevMode ? [{ debugName: "verticalBelow" }] : []));
12124
+ _autoVertical = computed(() => {
12125
+ return this.breakpointService.isBelowBreakpoint(this.verticalBelow())();
12126
+ }, ...(ngDevMode ? [{ debugName: "_autoVertical" }] : []));
12127
+ isVertical = computed(() => (this.direction() ?? (this._autoVertical() ? "vertical" : "horizontal")) === "vertical", ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
12128
+ hasErrorVisual = computed(() => !!this.error() || this.invalid(), ...(ngDevMode ? [{ debugName: "hasErrorVisual" }] : []));
12129
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12130
+ 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 });
12131
+ }
12132
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AttachmentComponent, decorators: [{
12133
+ type: Component,
12134
+ args: [{ standalone: true, selector: "tedi-attachment", imports: [IconComponent, FeedbackTextComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
12135
+ "[class.tedi-attachment]": "true",
12136
+ "[class.tedi-attachment--error]": "hasErrorVisual()",
12137
+ "[class.tedi-attachment--vertical]": "isVertical()",
12138
+ "[class.tedi-attachment--has-progress]": "!!projectedProgress()",
12139
+ }, 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"] }]
12140
+ }], 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 }] }] } });
12141
+
12142
+ class AttachmentActionsComponent {
12143
+ /**
12144
+ * Adds a 12px gap between the actions and 8px inline padding to the group.
12145
+ * Enable for labeled (text) buttons, whose neutral variant has no horizontal
12146
+ * padding of its own and would otherwise touch the card edge. Leave off for
12147
+ * icon-only buttons, which sit flush.
12148
+ * @default false
12149
+ */
12150
+ padded = input(false, ...(ngDevMode ? [{ debugName: "padded", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
12151
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AttachmentActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12152
+ 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 });
12153
+ }
12154
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AttachmentActionsComponent, decorators: [{
12155
+ type: Component,
12156
+ args: [{ standalone: true, selector: "tedi-attachment-actions", template: "<ng-content />", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
12157
+ class: "tedi-attachment-actions",
12158
+ "[class.tedi-attachment-actions--padded]": "padded()",
12159
+ }, 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"] }]
12160
+ }], propDecorators: { padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }] } });
12161
+
11894
12162
  /**
11895
12163
  * Communicates that there is nothing to display — empty search results, an
11896
12164
  * unpopulated list, a freshly-created workspace — and optionally guides the
@@ -12584,12 +12852,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
12584
12852
 
12585
12853
  class ShowAtDirective {
12586
12854
  showAt = input.required(...(ngDevMode ? [{ debugName: "showAt" }] : []));
12587
- templateRef = inject(TemplateRef);
12855
+ templateRef = inject(TemplateRef, { optional: true });
12588
12856
  viewContainerRef = inject(ViewContainerRef);
12589
12857
  breakpointService = inject(BreakpointService);
12858
+ visible = computed(() => this.breakpointService.isAboveBreakpoint(this.showAt())(), ...(ngDevMode ? [{ debugName: "visible" }] : []));
12859
+ /**
12860
+ * Attribute usage (`showAt` on a real element) toggles `display` so the
12861
+ * element stays in the DOM and remains eligible for content projection.
12862
+ * Structural usage (`*showAt`) creates/clears the view instead and leaves
12863
+ * `display` untouched (returns `null`).
12864
+ */
12865
+ hostDisplay = computed(() => this.templateRef || this.visible() ? null : 'none', ...(ngDevMode ? [{ debugName: "hostDisplay" }] : []));
12590
12866
  constructor() {
12591
12867
  effect(() => {
12592
- if (this.breakpointService.isAboveBreakpoint(this.showAt())()) {
12868
+ if (!this.templateRef) {
12869
+ return;
12870
+ }
12871
+ if (this.visible()) {
12593
12872
  this.viewContainerRef.createEmbeddedView(this.templateRef);
12594
12873
  }
12595
12874
  else {
@@ -12598,24 +12877,38 @@ class ShowAtDirective {
12598
12877
  });
12599
12878
  }
12600
12879
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ShowAtDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
12601
- 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 });
12880
+ 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 });
12602
12881
  }
12603
12882
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ShowAtDirective, decorators: [{
12604
12883
  type: Directive,
12605
12884
  args: [{
12606
12885
  selector: '[showAt]',
12607
12886
  standalone: true,
12887
+ host: {
12888
+ '[style.display]': 'hostDisplay()',
12889
+ },
12608
12890
  }]
12609
12891
  }], ctorParameters: () => [], propDecorators: { showAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAt", required: true }] }] } });
12610
12892
 
12611
12893
  class HideAtDirective {
12612
12894
  hideAt = input.required(...(ngDevMode ? [{ debugName: "hideAt" }] : []));
12613
- templateRef = inject(TemplateRef);
12895
+ templateRef = inject(TemplateRef, { optional: true });
12614
12896
  viewContainerRef = inject(ViewContainerRef);
12615
12897
  breakpointService = inject(BreakpointService);
12898
+ visible = computed(() => this.breakpointService.isBelowBreakpoint(this.hideAt())(), ...(ngDevMode ? [{ debugName: "visible" }] : []));
12899
+ /**
12900
+ * Attribute usage (`hideAt` on a real element) toggles `display` so the
12901
+ * element stays in the DOM and remains eligible for content projection.
12902
+ * Structural usage (`*hideAt`) creates/clears the view instead and leaves
12903
+ * `display` untouched (returns `null`).
12904
+ */
12905
+ hostDisplay = computed(() => this.templateRef || this.visible() ? null : 'none', ...(ngDevMode ? [{ debugName: "hostDisplay" }] : []));
12616
12906
  constructor() {
12617
12907
  effect(() => {
12618
- if (this.breakpointService.isBelowBreakpoint(this.hideAt())()) {
12908
+ if (!this.templateRef) {
12909
+ return;
12910
+ }
12911
+ if (this.visible()) {
12619
12912
  this.viewContainerRef.createEmbeddedView(this.templateRef);
12620
12913
  }
12621
12914
  else {
@@ -12624,13 +12917,16 @@ class HideAtDirective {
12624
12917
  });
12625
12918
  }
12626
12919
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HideAtDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
12627
- 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 });
12920
+ 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 });
12628
12921
  }
12629
12922
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HideAtDirective, decorators: [{
12630
12923
  type: Directive,
12631
12924
  args: [{
12632
12925
  selector: '[hideAt]',
12633
12926
  standalone: true,
12927
+ host: {
12928
+ '[style.display]': 'hostDisplay()',
12929
+ },
12634
12930
  }]
12635
12931
  }], ctorParameters: () => [], propDecorators: { hideAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAt", required: true }] }] } });
12636
12932
 
@@ -13492,5 +13788,5 @@ function provideTedi(config = {}) {
13492
13788
  * Generated bundle index. Do not edit.
13493
13789
  */
13494
13790
 
13495
- 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 };
13791
+ export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, 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, 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, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, calculateArrowOffset, createTablePersistence, generateUUID, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, toConnectedPositions, usePagination };
13496
13792
  //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map