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

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

@@ -1,15 +1,18 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, ContentChild, Optional, Self, TemplateRef, viewChildren, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, forwardRef, ViewChild, TemplateRef, viewChild, viewChildren, NgZone, contentChild, HostListener, contentChildren, DestroyRef, ContentChild, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, makeEnvironmentProviders } from '@angular/core';
 import * as i1 from '@angular/cdk/layout';
-import * as i1$3 from '@angular/common';
-import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, NgClass, NgFor, NgIf, CommonModule } from '@angular/common';
-import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgFor, NgIf } from '@angular/common';
+import * as i2 from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import * as i1$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i1$1 from 'ngx-float-ui';
+import { LiveAnnouncer, _IdGenerator, CdkTrapFocus } from '@angular/cdk/a11y';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import * as i3 from '@angular/cdk/listbox';
+import { CdkListbox, CdkListboxModule } from '@angular/cdk/listbox';
+import * as i1$2 from 'ngx-float-ui';
 import { NgxFloatUiContentComponent, NgxFloatUiModule } from 'ngx-float-ui';
-import { LiveAnnouncer, CdkTrapFocus, _IdGenerator } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { RouterLink } from '@angular/router';
 
@@ -356,7 +359,7 @@ const translationsMap = {
     },
     clear: {
         description: "For clearing a value",
-        components: ["TableFilter", "TextField"],
+        components: ["TableFilter", "TextField", "Select"],
         et: "Tühjenda",
         en: "Clear",
         ru: "Очистить",
@@ -558,25 +561,32 @@ const translationsMap = {
     },
     "select.loading": {
         description: "Text when select options are loading",
-        components: ["select"],
+        components: ["Select"],
         et: "Laadimine...",
         en: "Loading...",
         ru: "Загрузка...",
     },
     "select.no-options": {
         description: "Text when select has no options",
-        components: ["select"],
+        components: ["Select"],
         et: "Valikud puuduvad",
         en: "No options",
         ru: "Нет вариантов",
     },
     "select.select-all": {
         description: "Text when select has 'select all' option",
-        components: ["select"],
+        components: ["Select"],
         et: "Vali kõik",
         en: "Select all",
         ru: "Выбрать все",
     },
+    "select.search": {
+        description: "Placeholder text for search input in searchable select",
+        components: ["Select"],
+        et: "Otsi...",
+        en: "Search...",
+        ru: "Искать...",
+    },
     "stepper.completed": {
         description: "Label for screen-reader that this step is completed (visually hidden)",
         components: ["StepperNav"],
@@ -2174,6 +2184,1306 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     }, styles: ["input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1.125rem;position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:1px solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-checkbox)}@media (min-width: 576px){input[tedi-checkbox][type=checkbox]{--_checkbox-icon-size: 1rem}}input[tedi-checkbox][type=checkbox]:not(:disabled):hover{border-color:var(--form-checkbox-radio-default-border-hover);box-shadow:0 0 0 1px var(--form-checkbox-radio-default-border-hover)}input[tedi-checkbox][type=checkbox]:not(:checked):disabled{cursor:not-allowed;background-color:var(--form-general-background-disabled);border-color:var(--form-general-border-disabled)}input[tedi-checkbox][type=checkbox]:checked,input[tedi-checkbox][type=checkbox]:indeterminate{background-color:var(--form-checkbox-radio-default-background-selected);border-color:var(--form-checkbox-radio-default-border-selected)}input[tedi-checkbox][type=checkbox]:checked:disabled,input[tedi-checkbox][type=checkbox]:indeterminate:disabled{cursor:not-allowed;background-color:var(--form-checkbox-radio-default-background-selected-disabled);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}input[tedi-checkbox][type=checkbox]:checked:before,input[tedi-checkbox][type=checkbox]:indeterminate:before{position:absolute;top:50%;left:50%;font-family:Material Symbols Outlined,sans-serif;font-size:var(--_checkbox-icon-size);line-height:1;color:var(--form-checkbox-radio-default-check-indicator-default);content:\"check\";transform:translate(-50%,-50%);-webkit-font-smoothing:antialiased}input[tedi-checkbox][type=checkbox]:checked:before{content:\"check\"}input[tedi-checkbox][type=checkbox]:indeterminate:before{content:\"remove\"}input[tedi-checkbox][type=checkbox]:focus-visible{outline-width:2px;outline-style:solid;outline-offset:2px}input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).tedi-checkbox--invalid,input[tedi-checkbox][type=checkbox]:user-invalid,input[tedi-checkbox][type=checkbox].ng-invalid.ng-touched{border-color:var(--form-general-feedback-error-border)}input[tedi-checkbox][type=checkbox]:not(:checked,:disabled).tedi-checkbox--invalid:hover,input[tedi-checkbox][type=checkbox]:user-invalid:hover,input[tedi-checkbox][type=checkbox].ng-invalid.ng-touched:hover{border-color:var(--form-checkbox-radio-default-border-hover)}input[tedi-checkbox][type=checkbox].tedi-checkbox--large{--_checkbox-icon-size: 1.125rem;width:var(--form-checkbox-radio-size-large);height:var(--form-checkbox-radio-size-large)}\n"] }]
         }] });
 
+class FeedbackTextComponent {
+    /**
+     * Helper text
+     */
+    text = input.required();
+    /**
+     * Type of form-helper.
+     * @default hint
+     */
+    type = input("hint");
+    /**
+     * Position of the helper.
+     * @default left
+     */
+    position = input("left");
+    role = computed(() => {
+        if (this.type() === "valid" || this.type() === "error") {
+            return "alert";
+        }
+        return undefined;
+    });
+    ariaLive = computed(() => {
+        if (this.type() === "error" || this.type() === "valid") {
+            return "assertive";
+        }
+        return "polite";
+    });
+    classes = computed(() => {
+        return `tedi-feedback-text tedi-feedback-text--${this.type()} tedi-feedback-text--${this.position()}`;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeedbackTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: FeedbackTextComponent, isStandalone: true, selector: "tedi-feedback-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "role()", "attr.aria-live": "ariaLive()" } }, ngImport: i0, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--form-general-feedback-success-text)}.tedi-feedback-text--error{color:var(--form-general-feedback-error-text)}.tedi-feedback-text--left{flex-grow:1;text-align:left}.tedi-feedback-text--right{flex-grow:0;text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeedbackTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-feedback-text", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "[attr.role]": "role()",
+                        "[attr.aria-live]": "ariaLive()",
+                    }, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--form-general-feedback-success-text)}.tedi-feedback-text--error{color:var(--form-general-feedback-error-text)}.tedi-feedback-text--left{flex-grow:1;text-align:left}.tedi-feedback-text--right{flex-grow:0;text-align:right}\n"] }]
+        }] });
+
+class LabelComponent {
+    /**
+     * Size of the label.
+     * @default default
+     */
+    size = input("default");
+    /**
+     * Whether label is required.
+     * @default false
+     */
+    required = input(false);
+    /**
+     * Color of the label.
+     * @default secondary
+     */
+    color = input("secondary");
+    classes = computed(() => {
+        const classList = ["tedi-label", `tedi-label--${this.color()}`];
+        if (this.size() === "small") {
+            classList.push("tedi-label--small");
+        }
+        return classList.join(" ");
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LabelComponent, isStandalone: true, selector: "[tedi-label]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />\n@if (required()) {\n  <span class=\"tedi-label--required\" aria-hidden=\"true\">*</span>\n  <span class=\"sr-only\">, {{ 'required' | tediTranslate }}</span>\n}\n", styles: [".tedi-label{font-family:var(--family-default);font-size:var(--body-regular-size)}.tedi-label--small{font-size:var(--body-small-regular-size)}.tedi-label--required{margin-left:var(--content-label-inner-spacing-x);color:var(--form-general-feedback-error-border)}.tedi-label--primary{color:var(--general-text-primary)}.tedi-label--secondary{color:var(--general-text-secondary)}.tedi-label:has(input[disabled]),.tedi-label[for]:has(+input[disabled]){color:var(--general-text-disabled)}\n"], dependencies: [{ kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "[tedi-label]", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TediTranslationPipe
+                    ], host: {
+                        "[class]": "classes()",
+                    }, template: "<ng-content />\n@if (required()) {\n  <span class=\"tedi-label--required\" aria-hidden=\"true\">*</span>\n  <span class=\"sr-only\">, {{ 'required' | tediTranslate }}</span>\n}\n", styles: [".tedi-label{font-family:var(--family-default);font-size:var(--body-regular-size)}.tedi-label--small{font-size:var(--body-small-regular-size)}.tedi-label--required{margin-left:var(--content-label-inner-spacing-x);color:var(--form-general-feedback-error-border)}.tedi-label--primary{color:var(--general-text-primary)}.tedi-label--secondary{color:var(--general-text-secondary)}.tedi-label:has(input[disabled]),.tedi-label[for]:has(+input[disabled]){color:var(--general-text-disabled)}\n"] }]
+        }] });
+
+class NumberFieldComponent {
+    /**
+     * The unique identifier for the input element that this label is associated with. This ID should match the input element's id attribute to ensure accessibility.
+     */
+    inputId = input.required();
+    /**
+     * The text content of the label that describes the input field.
+     */
+    label = input();
+    /**
+     * Value of the input field. Supports two-way binding, use with form controls.
+     */
+    value = model(0);
+    /**
+     * Is input disabled?
+     * @default false
+     */
+    disabled = input(false);
+    /**
+     * Indicates whether the input field is required. If set to true, the required indicator will be displayed next to the label.
+     * @default false
+     */
+    required = input(false);
+    /**
+     * Minimum allowed value. Disables decrementing below this value and restricts manual input.
+     */
+    min = input();
+    /**
+     * Maximum allowed value. Disables incrementing above this value and restricts manual input.
+     */
+    max = input();
+    /**
+     * Step size for incrementing or decrementing the value.
+     * @default 1
+     */
+    step = input(1);
+    /**
+     * Size of the number field.
+     * @default default
+     */
+    size = input("default");
+    /**
+     * Marks the field as invalid for validation purposes.
+     * @default false
+     */
+    invalid = input(false);
+    /**
+     * Text displayed after the input value, typically a unit.
+     */
+    suffix = input();
+    /**
+     * FeedbackText component inputs.
+     */
+    feedbackText = input();
+    /**
+     * Is input full width?
+     * @default false
+     */
+    fullWidth = input(false);
+    inputRef;
+    formDisabled = signal(false);
+    onChange = () => { };
+    onTouched = () => { };
+    translationService = inject(TediTranslationService);
+    liveAnnouncer = inject(LiveAnnouncer);
+    isInvalid = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        return (this.invalid() ||
+            Boolean(min !== undefined && this.value() < min) ||
+            Boolean(max !== undefined && this.value() > max));
+    });
+    isDisabled = computed(() => this.disabled() || this.formDisabled());
+    decrementDisabled = computed(() => {
+        const min = this.min();
+        return this.isDisabled() || (min !== undefined && this.value() <= min);
+    });
+    incrementDisabled = computed(() => {
+        const max = this.max();
+        return this.isDisabled() || (max !== undefined && this.value() >= max);
+    });
+    feedbackId = computed(() => this.feedbackText() ? `${this.inputId()}-feedback` : null);
+    writeValue(value) {
+        this.value.set(value ? (isNaN(value) ? 0 : value) : 0);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.formDisabled.set(disabled);
+    }
+    focus() {
+        this.inputRef.nativeElement.focus();
+    }
+    blur() {
+        this.inputRef.nativeElement.blur();
+        this.onTouched();
+    }
+    handleButtonClick(action) {
+        const delta = action === "decrement" ? -1 : 1;
+        const nextValue = this.value() + this.step() * delta;
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+        this.onTouched();
+        this.announceValue(nextValue);
+    }
+    announceValue(value) {
+        this.liveAnnouncer.announce(this.translationService.translate("numberField.quantityUpdated", value), "polite");
+    }
+    handleInputChange(event) {
+        const input = event.target;
+        const value = isNaN(input.valueAsNumber) ? 0 : input.valueAsNumber;
+        if (value !== this.value()) {
+            this.value.set(value);
+            this.onChange(value);
+        }
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: NumberFieldComponent, isStandalone: true, selector: "tedi-number-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NumberFieldComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--borders-01)) solid var(--form-input-border-active);outline-offset:var(--borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { 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: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NumberFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-number-field", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        LabelComponent,
+                        ButtonComponent,
+                        IconComponent,
+                        TextComponent,
+                        FeedbackTextComponent,
+                        TediTranslationPipe,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumberFieldComponent),
+                            multi: true,
+                        },
+                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--borders-01)) solid var(--form-input-border-active);outline-offset:var(--borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
+        }], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ["inputElement"]
+            }] } });
+
+class SpinnerComponent {
+    /**
+     * Size of the spinner in px.
+     * @default 16
+     */
+    size = input(16);
+    /**
+     * Specifies the color theme of the spinner.
+     * The color should meet accessibility standards for color contrast.
+     * @default primary
+     */
+    color = input("primary");
+    /**
+     * Provides a text label for screen readers to announce the spinner's purpose or status.
+     */
+    label = input();
+    sizeConfig = {
+        10: { strokeWidth: 4.4, r: 19.8 },
+        16: { strokeWidth: 5.5, r: 19.25 },
+        48: { strokeWidth: 3.6667, r: 20.1667 },
+    };
+    strokeWidth = computed(() => this.sizeConfig[this.size()].strokeWidth);
+    r = computed(() => this.sizeConfig[this.size()].r);
+    classes = computed(() => {
+        const classList = [
+            "tedi-spinner",
+            `tedi-spinner--size-${this.size()}`,
+            `tedi-spinner--color-${this.color()}`,
+        ];
+        return classList.join(" ");
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "tedi-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "classes()", "attr.aria-label": "label() ? label() : null", "attr.aria-hidden": "!label()" } }, ngImport: i0, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-spinner", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "role": "status",
+                        "aria-live": "polite",
+                        "[attr.aria-label]": "label() ? label() : null",
+                        "[attr.aria-hidden]": "!label()"
+                    }, 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"] }]
+        }] });
+
+class TagComponent {
+    idGenerator = inject(_IdGenerator);
+    uniqueId = this.idGenerator.getId('tedi-tag');
+    /**
+     * Whether the tag is in loading state.
+     * When true, a spinner will be displayed inside the tag.
+     * @default false
+     */
+    loading = input(false);
+    /**
+     * Whether the tag can be closed.
+     * When true, a close button will be displayed that emits the 'closed' event when clicked.
+     * @default false
+     */
+    closable = input(false);
+    /**
+     * The visual style of the tag.
+     * Possible values: 'primary', 'secondary', 'danger'
+     * @default "primary"
+     */
+    type = input("primary");
+    /**
+     * Event emitted when the close button is clicked.
+     */
+    closed = output();
+    classes = computed(() => {
+        const classList = [];
+        if (this.type()) {
+            classList.push(`tedi-tag--${this.type()}`);
+        }
+        return classList.join(" ");
+    });
+    handleClose(event) {
+        this.closed.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 } }, outputs: { closed: "closed" }, host: { properties: { "class.tedi-tag": "true", "class.tedi-tag--loading": "loading()", "class.tedi-tag--closable": "closable()", "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  <ng-content />\n</span>\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__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: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-tag", imports: [SpinnerComponent, IconComponent, ClosingButtonComponent, TediTranslationPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class.tedi-tag]": "true",
+                        "[class.tedi-tag--loading]": "loading()",
+                        "[class.tedi-tag--closable]": "closable()",
+                        "[class]": "classes()",
+                    }, 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  <ng-content />\n</span>\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__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"] }]
+        }] });
+
+class DropdownItemValueComponent {
+    /**
+     * Type of item value - controls selection indicator
+     * - 'default': No selection indicator
+     * - 'checkbox': Shows checkbox (for multiselect)
+     * - 'radio': Shows radio button (for single select listbox)
+     * @default 'default'
+     */
+    type = input("default");
+    /**
+     * Layout: 'horizontal' (side-by-side) or 'vertical' (stacked)
+     * @default 'horizontal'
+     */
+    layout = input("horizontal");
+    /**
+     * Whether the item is selected (controls checkbox/radio state)
+     * @default false
+     */
+    selected = input(false);
+    /**
+     * Whether the checkbox is in indeterminate state
+     * @default false
+     */
+    indeterminate = input(false);
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    disabled = input(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownItemValueComponent, isStandalone: true, selector: "tedi-dropdown-item-value", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-dropdown-item-value--vertical": "layout() === 'vertical'", "class.tedi-dropdown-item-value--horizontal": "layout() === 'horizontal'", "class.tedi-dropdown-item-value--checkbox": "type() === 'checkbox'", "class.tedi-dropdown-item-value--radio": "type() === 'radio'" }, classAttribute: "tedi-dropdown-item-value" }, ngImport: i0, template: "@if (type() === 'checkbox') {\n  <input\n    type=\"checkbox\"\n    tedi-checkbox\n    class=\"tedi-dropdown-item-value__checkbox\"\n    [checked]=\"selected()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"disabled()\"\n    (click)=\"$event.stopPropagation()\"\n  />\n} @else if (type() === 'radio') {\n  <input\n    type=\"radio\"\n    class=\"tedi-dropdown-item-value__radio\"\n    [checked]=\"selected()\"\n    [disabled]=\"disabled()\"\n    (click)=\"$event.stopPropagation()\"\n  />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-dropdown-item-value__content\">\n  <ng-content select=\"tedi-dropdown-item-value-label\" />\n  <ng-content select=\"tedi-dropdown-item-value-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-dropdown-item-value{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio{align-items:flex-start}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>.tedi-icon,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-dropdown-item-value--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-dropdown-item-value__checkbox,.tedi-dropdown-item-value__radio{flex-shrink:0;pointer-events:none}.tedi-dropdown-item-value__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-dropdown-item-value__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-dropdown-item-value__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-dropdown-item-value__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-dropdown-item-value__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__content{display:flex;flex:1 0 0;min-width:0}.tedi-dropdown-item-value--horizontal .tedi-dropdown-item-value__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__content{flex-direction:column;align-items:flex-start}.tedi-dropdown-item-value__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-dropdown-item-value__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected: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]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--borders-02)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-dropdown-item-value", standalone: true, imports: [CheckboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: "tedi-dropdown-item-value",
+                        "[class.tedi-dropdown-item-value--vertical]": "layout() === 'vertical'",
+                        "[class.tedi-dropdown-item-value--horizontal]": "layout() === 'horizontal'",
+                        "[class.tedi-dropdown-item-value--checkbox]": "type() === 'checkbox'",
+                        "[class.tedi-dropdown-item-value--radio]": "type() === 'radio'",
+                    }, template: "@if (type() === 'checkbox') {\n  <input\n    type=\"checkbox\"\n    tedi-checkbox\n    class=\"tedi-dropdown-item-value__checkbox\"\n    [checked]=\"selected()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"disabled()\"\n    (click)=\"$event.stopPropagation()\"\n  />\n} @else if (type() === 'radio') {\n  <input\n    type=\"radio\"\n    class=\"tedi-dropdown-item-value__radio\"\n    [checked]=\"selected()\"\n    [disabled]=\"disabled()\"\n    (click)=\"$event.stopPropagation()\"\n  />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-dropdown-item-value__content\">\n  <ng-content select=\"tedi-dropdown-item-value-label\" />\n  <ng-content select=\"tedi-dropdown-item-value-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-dropdown-item-value{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio{align-items:flex-start}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>.tedi-icon,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-dropdown-item-value--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-dropdown-item-value__checkbox,.tedi-dropdown-item-value__radio{flex-shrink:0;pointer-events:none}.tedi-dropdown-item-value__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-dropdown-item-value__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-dropdown-item-value__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-dropdown-item-value__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-dropdown-item-value__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__content{display:flex;flex:1 0 0;min-width:0}.tedi-dropdown-item-value--horizontal .tedi-dropdown-item-value__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__content{flex-direction:column;align-items:flex-start}.tedi-dropdown-item-value__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-dropdown-item-value__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected: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]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--borders-02)}\n"] }]
+        }] });
+
+class DropdownItemValueLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemValueLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DropdownItemValueLabelComponent, isStandalone: true, selector: "tedi-dropdown-item-value-label", host: { classAttribute: "tedi-dropdown-item-value__label" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemValueLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "tedi-dropdown-item-value-label",
+                    template: `<ng-content />`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: "tedi-dropdown-item-value__label",
+                    },
+                }]
+        }] });
+
+/**
+ * Directive for custom option template rendering in the dropdown.
+ *
+ * @example
+ * ```html
+ * <tedi-select [options]="options">
+ *   <ng-template tediSelectOption let-item>
+ *     <div class="custom-option">
+ *       <strong>{{ item.title }}</strong>
+ *       <span>{{ item.description }}</span>
+ *     </div>
+ *   </ng-template>
+ * </tedi-select>
+ * ```
+ */
+class SelectOptionTemplateDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: SelectOptionTemplateDirective, isStandalone: true, selector: "[tediSelectOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectOptionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediSelectOption]",
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Directive for custom value template rendering (selected value display in trigger).
+ * Used for single-select to display custom content like colors, icons, etc.
+ *
+ * @example
+ * ```html
+ * <tedi-select [options]="colors" bindLabel="name" bindValue="id">
+ *   <ng-template tediSelectValue let-item>
+ *     <div class="color-swatch" [style.background]="item.color"></div>
+ *   </ng-template>
+ * </tedi-select>
+ * ```
+ */
+class SelectValueTemplateDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectValueTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: SelectValueTemplateDirective, isStandalone: true, selector: "[tediSelectValue]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectValueTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediSelectValue]",
+                    standalone: true,
+                }]
+        }] });
+
+var SpecialOptionControls;
+(function (SpecialOptionControls) {
+    SpecialOptionControls["SELECT_ALL"] = "\0SELECT_ALL";
+    SpecialOptionControls["SELECT_GROUP"] = "\0SELECT_GROUP_";
+})(SpecialOptionControls || (SpecialOptionControls = {}));
+class SelectComponent {
+    /**
+     * Unique identifier for the select input element.
+     * Used for label association and accessibility.
+     */
+    inputId = input.required();
+    /**
+     * Label text displayed above the select.
+     */
+    label = input();
+    /**
+     * Whether the field is required.
+     * @default false
+     */
+    required = input(false);
+    /**
+     * Placeholder text shown when no value is selected.
+     * @default ""
+     */
+    placeholder = input("");
+    /**
+     * Visual state of the input.
+     * @default "default"
+     */
+    state = input("default");
+    /**
+     * Size variant of the select.
+     * @default "default"
+     */
+    size = input("default");
+    /**
+     * Whether to show a clear button when a value is selected.
+     * @default false
+     */
+    clearable = input(false);
+    /**
+     * Element reference used to determine dropdown width.
+     * When null, dropdown width matches the host element.
+     */
+    dropdownWidthRef = input();
+    /**
+     * Configuration for the feedback text displayed below the select.
+     */
+    feedbackText = input();
+    /**
+     * Array of options to display in the dropdown.
+     * Can be an array of objects or primitive values.
+     * @default []
+     */
+    options = input([]);
+    /**
+     * Property name to use as the display label for object items.
+     * @default "label"
+     */
+    bindLabel = input("label");
+    /**
+     * Property name to use as the value for object items.
+     * When undefined, the entire object is used as the value.
+     */
+    bindValue = input(undefined);
+    /**
+     * Whether multiple items can be selected.
+     * @default false
+     */
+    allowMultiple = input(false);
+    /**
+     * Property name or function used to group options.
+     * When a string, uses that property from the item.
+     * When a function, calls it with each item to determine the group.
+     */
+    groupBy = input(undefined);
+    /**
+     * Whether to show a "Select All" option in multiselect mode.
+     * @default false
+     */
+    showSelectAll = input(false);
+    /**
+     * Whether group headers are selectable in multiselect mode.
+     * Clicking a group header selects/deselects all options in that group.
+     * @default false
+     */
+    selectableGroups = input(false);
+    /**
+     * Whether selected tags are individually removable in multiselect mode.
+     * @default false
+     */
+    isTagRemovable = input(false);
+    /**
+     * Whether selected tags wrap to multiple rows in multiselect mode.
+     * When false, overflow tags are hidden and a counter is shown.
+     * @default false
+     */
+    multiRow = input(false);
+    /**
+     * Function used to compare option values for equality.
+     * Used to determine which options are selected.
+     * @default (a, b) => a === b
+     */
+    compareWith = input((a, b) => a === b);
+    /**
+     * Property name to check for disabled state on items.
+     * @default "disabled"
+     */
+    disabledKey = input("disabled");
+    /**
+     * Text displayed when no options match the search term.
+     */
+    noOptionsMessage = input();
+    /**
+     * Maximum height of the dropdown menu in pixels.
+     * When not set, the dropdown height is calculated based on available viewport space.
+     */
+    maxDropdownHeight = input();
+    /**
+     * Layout type for the dropdown options.
+     * - `"menu"` (default): vertical list of options.
+     * - `"grid"`: swatch grid layout for use with custom option templates
+     *   (e.g. color or icon pickers). Customizable via `--tedi-swatch-size`,
+     *   `--tedi-swatch-gap`, and `--tedi-swatch-columns` CSS properties.
+     * @default "menu"
+     */
+    dropdownType = input('menu');
+    /**
+     * Whether the select has a search input for filtering options.
+     * @default false
+     */
+    searchable = input(false);
+    SpecialOptionControls = SpecialOptionControls;
+    dropdownPositions = [
+        // Open below, expand downward
+        {
+            originX: "start",
+            originY: "bottom",
+            overlayX: "start",
+            overlayY: "top",
+        },
+        // Fallback: open above, expand upward
+        {
+            originX: "start",
+            originY: "top",
+            overlayX: "start",
+            overlayY: "bottom",
+        },
+    ];
+    listboxId = computed(() => this.inputId() + "-listbox");
+    labelId = computed(() => this.inputId() + "-label");
+    isOpen = signal(false);
+    selectedValues = signal([]);
+    disabled = signal(false);
+    dropdownWidth = signal(null);
+    dropdownMaxHeight = signal(null);
+    visibleTagsCount = signal(null);
+    searchTerm = signal("");
+    searchFocused = signal(false);
+    hiddenTagsCount = computed(() => {
+        const visible = this.visibleTagsCount();
+        const total = this.selectedValues().length;
+        if (visible === null || visible >= total)
+            return 0;
+        return total - visible;
+    });
+    listboxRef = viewChild(CdkListbox, { read: ElementRef });
+    cdkListboxRef = viewChild(CdkListbox);
+    triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef });
+    searchInputRef = viewChild("searchInput");
+    multiselectContainerRef = viewChild("multiselectContainer");
+    tagRefs = viewChildren("tagElement", { read: ElementRef });
+    hostRef = inject(ElementRef);
+    ngZone = inject(NgZone);
+    // Template queries for custom rendering
+    optionTemplate = contentChild(SelectOptionTemplateDirective);
+    valueTemplate = contentChild(SelectValueTemplateDirective);
+    normalizedOptions = computed(() => {
+        const items = this.options();
+        if (!items || items.length === 0)
+            return [];
+        return items.map((item) => {
+            if (typeof item === "string" || typeof item === "number") {
+                return {
+                    value: item,
+                    label: String(item),
+                    disabled: false,
+                    group: undefined,
+                };
+            }
+            const itemRecord = item;
+            const bindLabel = this.bindLabel();
+            const bindValue = this.bindValue();
+            const disabledKey = this.disabledKey();
+            const groupBy = this.groupBy();
+            const label = String(itemRecord[bindLabel] ?? item);
+            const value = bindValue ? itemRecord[bindValue] : item;
+            const disabled = !!itemRecord[disabledKey];
+            let group;
+            if (typeof groupBy === "string") {
+                group = itemRecord[groupBy];
+            }
+            else if (typeof groupBy === "function") {
+                group = groupBy(item);
+            }
+            return { ...itemRecord, value, label, disabled, group };
+        });
+    });
+    filteredOptions = computed(() => {
+        const options = this.normalizedOptions();
+        const term = this.searchTerm().toLowerCase().trim();
+        if (!term) {
+            return options;
+        }
+        return options.filter((option) => option.label.toLowerCase().includes(term));
+    });
+    optionGroups = computed(() => {
+        const options = this.filteredOptions();
+        const groups = [];
+        options.forEach((option) => {
+            const groupLabel = option.group ?? "";
+            const existingGroup = groups.find((g) => g.label === groupLabel);
+            if (existingGroup) {
+                existingGroup.options.push(option);
+            }
+            else {
+                groups.push({ label: groupLabel, options: [option] });
+            }
+        });
+        return groups;
+    });
+    selectedOptions = computed(() => {
+        const values = this.selectedValues();
+        const options = this.normalizedOptions();
+        const compareWith = this.compareWith();
+        return options.filter((option) => values.some((val) => compareWith(option.value, val)));
+    });
+    visibleSelectedValues = computed(() => {
+        const selected = this.selectedValues();
+        const filtered = this.filteredOptions();
+        const compareWith = this.compareWith();
+        return selected.filter((val) => filtered.some((opt) => compareWith(opt.value, val)));
+    });
+    selectedLabels = computed(() => {
+        return this.selectedOptions().map((option) => option.label);
+    });
+    showSingleSelectedValue = computed(() => {
+        return !this.searchTerm() && !!this.selectedValues().length && !this.allowMultiple();
+    });
+    allOptionsSelected = computed(() => {
+        const enabledOptions = this.normalizedOptions().filter((o) => !o.disabled);
+        const selected = this.selectedValues();
+        const compareWith = this.compareWith();
+        return (enabledOptions.length > 0 &&
+            enabledOptions.every((option) => selected.some((val) => compareWith(option.value, val))));
+    });
+    ngAfterContentChecked() {
+        this.setDropdownWidth();
+    }
+    ngAfterViewChecked() {
+        if (this.allowMultiple() && !this.multiRow()) {
+            this.calculateVisibleTags();
+        }
+    }
+    onWindowResize() {
+        this.setDropdownWidth();
+        if (this.allowMultiple() && !this.multiRow()) {
+            this.visibleTagsCount.set(null);
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen())
+            return;
+        const target = event.target;
+        const hostElement = this.hostRef.nativeElement;
+        const listboxElement = this.listboxRef()?.nativeElement;
+        const clickedInside = hostElement.contains(target) || listboxElement?.contains(target);
+        if (!clickedInside) {
+            this.isOpen.set(false);
+            this.searchTerm.set("");
+        }
+    }
+    focusListboxWhenVisible = effect(() => {
+        if (this.isOpen() && this.searchable() && this.searchInputRef()) {
+            this.searchInputRef()?.nativeElement.focus();
+        }
+        else if (this.isOpen() && this.listboxRef() && !this.searchable()) {
+            this.listboxRef()?.nativeElement.focus();
+        }
+    });
+    constructor() {
+        /**
+         * Workaround: Prevent CDK from resetting active item to the first selected
+         * option whenever [cdkListboxValue] changes in multiselect mode. CDK calls
+         * _setNextFocusToSelectedOption inside _setSelection, which moves focus
+         * away from the user's current position after each selection toggle.
+         * Tested against @angular/cdk 19. Revisit when CDK exposes a public API
+         * to control this behavior.
+         */
+        effect(() => {
+            const listbox = this.cdkListboxRef();
+            if (listbox && this.allowMultiple()) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                listbox._setNextFocusToSelectedOption = () => { };
+            }
+        });
+    }
+    resetVisibleTagsOnSelectionChange = effect(() => {
+        this.selectedValues();
+        this.visibleTagsCount.set(null);
+    });
+    toggleIsOpen(close) {
+        if (this.disabled() && !close)
+            return;
+        if (close) {
+            this.closeDropdown();
+            this.focusTrigger();
+        }
+        else {
+            const willOpen = !this.isOpen();
+            if (willOpen) {
+                this.openDropdown();
+            }
+            else {
+                this.dropdownMaxHeight.set(null);
+                this.isOpen.set(false);
+            }
+        }
+    }
+    onSearchInput(event) {
+        const input = event.target;
+        this.searchTerm.set(input.value);
+        if (!this.isOpen()) {
+            this.openDropdown();
+        }
+    }
+    onSearchFocus() {
+        this.searchFocused.set(true);
+    }
+    onSearchBlur() {
+        this.searchFocused.set(false);
+        this.onTouched();
+    }
+    onTriggerClick() {
+        if (this.disabled())
+            return;
+        if (this.searchable()) {
+            this.searchInputRef()?.nativeElement.focus();
+            if (!this.isOpen()) {
+                this.openDropdown();
+            }
+        }
+        else {
+            this.toggleIsOpen();
+        }
+    }
+    onTriggerEnter() {
+        if (!this.isOpen()) {
+            this.openDropdown();
+        }
+    }
+    onSearchKeydown(event) {
+        event.stopPropagation();
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp":
+            case "Home":
+            case "End":
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this.forwardToCdkListbox(event.key);
+                }
+                else {
+                    this.openDropdown();
+                }
+                break;
+            case "Enter":
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this.forwardToCdkListbox(event.key);
+                }
+                else {
+                    this.openDropdown();
+                }
+                break;
+            case " ":
+                if (!this.isOpen()) {
+                    event.preventDefault();
+                    this.openDropdown();
+                }
+                break;
+            case "Escape":
+            case "Tab":
+                if (this.isOpen()) {
+                    this.closeDropdown();
+                }
+                break;
+        }
+    }
+    static KEY_CODES = {
+        ArrowDown: 40,
+        ArrowUp: 38,
+        Home: 36,
+        End: 35,
+        Enter: 13,
+        " ": 32,
+    };
+    forwardToCdkListbox(key) {
+        const listbox = this.cdkListboxRef();
+        if (listbox) {
+            const keyCode = SelectComponent.KEY_CODES[key] ?? 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            listbox._handleKeydown(new KeyboardEvent("keydown", { key, keyCode, bubbles: true }));
+        }
+    }
+    openDropdown() {
+        this.calculateDropdownMaxHeight();
+        this.isOpen.set(true);
+    }
+    calculateDropdownMaxHeight() {
+        const inputMaxHeight = this.maxDropdownHeight();
+        if (inputMaxHeight != null) {
+            this.dropdownMaxHeight.set(inputMaxHeight);
+            return;
+        }
+        const trigger = this.triggerRef()?.nativeElement;
+        if (!trigger) {
+            this.dropdownMaxHeight.set(null);
+            return;
+        }
+        const triggerRect = trigger.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const margin = 16; // Margin from viewport edges
+        // Calculate space below and above the trigger
+        const spaceBelow = viewportHeight - triggerRect.bottom - margin;
+        const spaceAbove = triggerRect.top - margin;
+        // Use the larger available space
+        const maxHeight = Math.max(spaceBelow, spaceAbove);
+        this.dropdownMaxHeight.set(maxHeight);
+    }
+    closeDropdown() {
+        this.isOpen.set(false);
+        this.searchTerm.set("");
+        this.dropdownMaxHeight.set(null);
+    }
+    handleValueChange(event) {
+        const values = event.value;
+        const selectAllIndex = values.findIndex((v) => v === SpecialOptionControls.SELECT_ALL);
+        const selectGroupValue = values.find((v) => typeof v === "string" &&
+            v.startsWith(SpecialOptionControls.SELECT_GROUP));
+        if (selectAllIndex !== -1) {
+            this.toggleSelectAll();
+            this.onTouched();
+            return;
+        }
+        if (selectGroupValue) {
+            const groupLabel = selectGroupValue.replace(SpecialOptionControls.SELECT_GROUP, "");
+            this.toggleGroupSelection(groupLabel);
+            this.onTouched();
+            return;
+        }
+        if (this.allowMultiple()) {
+            let newSelection;
+            if (this.searchable() && this.searchTerm().trim()) {
+                const filtered = this.filteredOptions();
+                const compareWith = this.compareWith();
+                const hiddenSelected = this.selectedValues().filter((val) => !filtered.some((opt) => compareWith(opt.value, val)));
+                newSelection = [...hiddenSelected, ...values];
+            }
+            else {
+                newSelection = [...values];
+            }
+            this.selectedValues.set(newSelection);
+            this.onChange(newSelection);
+            this.searchTerm.set("");
+            if (this.searchable()) {
+                this.searchInputRef()?.nativeElement.focus();
+            }
+        }
+        else {
+            const selected = values[0] ?? null;
+            this.selectedValues.set(selected != null ? [selected] : []);
+            this.onChange(selected);
+            this.toggleIsOpen(true);
+        }
+        this.onTouched();
+    }
+    clear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        this.selectedValues.set([]);
+        if (this.allowMultiple()) {
+            this.onChange([]);
+        }
+        else {
+            this.onChange(null);
+        }
+        this.onTouched();
+        this.focusTrigger();
+    }
+    deselect(event, value) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.disabled())
+            return;
+        const compareWith = this.compareWith();
+        const newSelection = this.selectedValues().filter((v) => !compareWith(v, value));
+        this.selectedValues.set(newSelection);
+        this.onChange(newSelection);
+        this.onTouched();
+    }
+    isOptionSelected(optionValue) {
+        const compareWith = this.compareWith();
+        return this.selectedValues().some((val) => compareWith(val, optionValue));
+    }
+    getLabel(value) {
+        const compareWith = this.compareWith();
+        const option = this.normalizedOptions().find((o) => compareWith(o.value, value));
+        return option?.label ?? String(value);
+    }
+    /**
+     * Get the original item from the items array for a given option.
+     * Used for custom templates that need access to the full item data.
+     */
+    getOriginalItem(option) {
+        const compareWith = this.compareWith();
+        const bindValue = this.bindValue();
+        if (!bindValue) {
+            return option.value;
+        }
+        // Find the original item by matching the value
+        const items = this.options();
+        const found = items.find((item) => {
+            const itemRecord = item;
+            return compareWith(itemRecord[bindValue], option.value);
+        });
+        return found ?? option;
+    }
+    /** Create context object for custom option templates. */
+    getOptionContext(option, index) {
+        const item = this.getOriginalItem(option);
+        return {
+            $implicit: item,
+            item,
+            index,
+            selected: this.isOptionSelected(option.value),
+            disabled: option.disabled ?? false,
+        };
+    }
+    /** Create context object for custom value templates. */
+    getValueContext(option) {
+        const item = this.getOriginalItem(option);
+        return { $implicit: item, item, label: option.label };
+    }
+    isGroupSelected(groupLabel) {
+        const group = this.optionGroups().find((g) => g.label === groupLabel);
+        if (!group)
+            return false;
+        const enabledGroupOptions = group.options.filter((o) => !o.disabled);
+        if (enabledGroupOptions.length === 0)
+            return false;
+        const compareWith = this.compareWith();
+        const selected = this.selectedValues();
+        return enabledGroupOptions.every((option) => selected.some((val) => compareWith(option.value, val)));
+    }
+    isGroupIndeterminate(groupLabel) {
+        const group = this.optionGroups().find((g) => g.label === groupLabel);
+        if (!group)
+            return false;
+        const enabledGroupOptions = group.options.filter((o) => !o.disabled);
+        if (enabledGroupOptions.length === 0)
+            return false;
+        const compareWith = this.compareWith();
+        const selected = this.selectedValues();
+        const selectedCount = enabledGroupOptions.filter((option) => selected.some((val) => compareWith(option.value, val))).length;
+        return selectedCount > 0 && selectedCount < enabledGroupOptions.length;
+    }
+    focusTrigger() {
+        if (this.searchable()) {
+            this.searchInputRef()?.nativeElement.focus();
+        }
+        else {
+            this.triggerRef()?.nativeElement.focus();
+        }
+    }
+    getAvailableTagWidth() {
+        const trigger = this.triggerRef()?.nativeElement;
+        if (!trigger)
+            return 0;
+        const triggerWidth = trigger.clientWidth;
+        if (triggerWidth === 0)
+            return 0;
+        const triggerStyle = getComputedStyle(trigger);
+        const padding = (parseFloat(triggerStyle.paddingLeft) || 0) + (parseFloat(triggerStyle.paddingRight) || 0);
+        let nonTagWidth = 0;
+        const arrow = trigger.querySelector(".tedi-select__arrow");
+        const clear = trigger.querySelector(".tedi-select__clear");
+        const searchInput = trigger.querySelector(".tedi-select__search-input");
+        if (arrow)
+            nonTagWidth += arrow.offsetWidth + (parseFloat(getComputedStyle(arrow).marginLeft) || 0) + (parseFloat(getComputedStyle(arrow).paddingLeft) || 0);
+        if (clear)
+            nonTagWidth += clear.offsetWidth;
+        if (searchInput)
+            nonTagWidth += parseFloat(getComputedStyle(searchInput).minWidth) || 0;
+        return triggerWidth - padding - nonTagWidth;
+    }
+    calculateVisibleTags() {
+        const tags = this.tagRefs();
+        if (tags.length === 0 || this.visibleTagsCount() !== null)
+            return;
+        const availableWidth = this.getAvailableTagWidth();
+        if (availableWidth <= 0)
+            return;
+        const gap = 8;
+        const counterTagWidth = 40;
+        let usedWidth = 0;
+        let visibleCount = 0;
+        for (let i = 0; i < tags.length; i++) {
+            const tagWidth = tags[i].nativeElement.offsetWidth;
+            const spaceNeeded = usedWidth + tagWidth + (visibleCount > 0 ? gap : 0);
+            const hasMoreItems = i < tags.length - 1;
+            const reservedSpace = hasMoreItems ? counterTagWidth + gap : 0;
+            if (spaceNeeded + reservedSpace <= availableWidth) {
+                usedWidth = spaceNeeded;
+                visibleCount++;
+            }
+            else {
+                break;
+            }
+        }
+        if (visibleCount === 0 && tags.length > 0) {
+            visibleCount = 1;
+        }
+        this.ngZone.run(() => {
+            this.visibleTagsCount.set(visibleCount);
+        });
+    }
+    setDropdownWidth() {
+        const widthRef = this.dropdownWidthRef();
+        if (widthRef === null) {
+            this.dropdownWidth.set(null);
+            return;
+        }
+        const element = widthRef?.nativeElement ?? this.hostRef?.nativeElement;
+        const computedWidth = element?.getBoundingClientRect()?.width ?? 0;
+        this.dropdownWidth.set(computedWidth);
+    }
+    toggleSelectAll() {
+        const options = this.normalizedOptions();
+        const enabledOptions = options.filter((o) => !o.disabled);
+        const compareWith = this.compareWith();
+        const disabledSelectedValues = this.selectedValues().filter((val) => options.some((o) => o.disabled && compareWith(val, o.value)));
+        if (this.allOptionsSelected()) {
+            this.selectedValues.set(disabledSelectedValues);
+            this.onChange(disabledSelectedValues);
+        }
+        else {
+            const allEnabledValues = enabledOptions.map((o) => o.value);
+            const mergedValues = [...disabledSelectedValues, ...allEnabledValues];
+            this.selectedValues.set(mergedValues);
+            this.onChange(mergedValues);
+        }
+    }
+    toggleGroupSelection(groupLabel) {
+        const group = this.optionGroups().find((g) => g.label === groupLabel);
+        if (!group)
+            return;
+        const enabledGroupOptions = group.options.filter((o) => !o.disabled);
+        const groupValues = enabledGroupOptions.map((o) => o.value);
+        const isGroupSelected = this.isGroupSelected(groupLabel);
+        const compareWith = this.compareWith();
+        let newSelection;
+        if (isGroupSelected) {
+            newSelection = this.selectedValues().filter((val) => !groupValues.some((gv) => compareWith(val, gv)));
+        }
+        else {
+            newSelection = [...this.selectedValues()];
+            for (const gv of groupValues) {
+                if (!newSelection.some((val) => compareWith(val, gv))) {
+                    newSelection.push(gv);
+                }
+            }
+        }
+        this.selectedValues.set(newSelection);
+        this.onChange(newSelection);
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (this.allowMultiple()) {
+            this.selectedValues.set(Array.isArray(value) ? value : []);
+        }
+        else {
+            this.selectedValues.set(value != null ? [value] : []);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        if (isDisabled) {
+            this.closeDropdown();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "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  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"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      }\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n        [placeholder]=\"selectedValues().length ? '' : 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    </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  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\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  </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()\">\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(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--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: 50px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--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(--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;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-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(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--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(--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: i2.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: i2.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"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-select", imports: [
+                        CommonModule,
+                        OverlayModule,
+                        CdkListboxModule,
+                        ClosingButtonComponent,
+                        IconComponent,
+                        LabelComponent,
+                        FeedbackTextComponent,
+                        TextComponent,
+                        TagComponent,
+                        TediTranslationPipe,
+                        DropdownItemValueComponent,
+                        DropdownItemValueLabelComponent,
+                    ], standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-select",
+                        "[class.tedi-select--multiselect]": "allowMultiple()",
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                    ], template: "@if (label()) {\n  <label\n    [id]=\"labelId()\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"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      }\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n        [placeholder]=\"selectedValues().length ? '' : 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    </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  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\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  </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()\">\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(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--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: 50px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--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(--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;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-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(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--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(--borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onWindowResize: [{
+                type: HostListener,
+                args: ["window:resize"]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ["document:click", ["$event"]]
+            }] } });
+
+class ToggleComponent {
+    /**
+     * The unique identifier for the input element that is associated with label.
+     */
+    inputId = input.required();
+    /**
+     * Is toggle checked? Supports two-way binding, use with form controls.
+     */
+    checked = model(false);
+    /**
+     * Is input disabled?
+     * @default false
+     */
+    disabled = input(false);
+    /**
+     * Indicates whether the input field is required.
+     * @default false
+     */
+    required = input(false);
+    /**
+     * Color variant of the toggle
+     * @default primary
+     */
+    variant = input("primary");
+    /**
+     * Type of the toggle
+     * @default filled
+     */
+    type = input("filled");
+    /**
+     * Size of the toggle
+     * @default default
+     */
+    size = input("default");
+    /**
+     * Should the toggle show lock icon. Works only with large toggle.
+     * @default false
+     */
+    icon = input(false);
+    inputRef;
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(checked) {
+        this.checked.set(checked);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    focus() {
+        this.inputRef.nativeElement.focus();
+    }
+    blur() {
+        this.inputRef.nativeElement.blur();
+        this.onTouched();
+    }
+    handleChange = (event) => {
+        const target = event.target;
+        this.checked.set(target.checked);
+        this.onChange(target.checked);
+    };
+    classes = computed(() => {
+        return [
+            "tedi-toggle",
+            `tedi-toggle--${this.variant()}-${this.type()}`,
+            `tedi-toggle--size-${this.size()}`,
+        ].join(" ");
+    });
+    iconColor = computed(() => {
+        if (this.type() === "outlined") {
+            return 'white';
+        }
+        switch (this.variant()) {
+            case "primary":
+                return this.checked() ? "brand" : "tertiary";
+            case "colored":
+                return this.checked() ? "success" : "danger";
+        }
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToggleComponent, isStandalone: true, selector: "tedi-toggle", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ToggleComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<input\n  #inputElement\n  [id]=\"inputId()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-checked]=\"checked()\"\n  type=\"checkbox\"\n  class=\"tedi-toggle__input\"\n  role=\"switch\"\n  (change)=\"handleChange($event)\"\n/>\n<span class=\"tedi-toggle__slider\" aria-hidden=\"true\">\n  @if (icon() && size() === 'large') {\n    <tedi-icon\n      [name]=\"checked() ? 'lock_open_right' : 'lock'\"\n      [color]=\"iconColor()\"\n      [size]=\"16\"\n      class=\"tedi-toggle__icon\"\n    />\n  }\n</span>\n", styles: [".tedi-toggle{position:relative;display:block}.tedi-toggle--size-default{--_toggle-indicator: var(--form-toggl-default-indicator);width:var(--form-toggl-default-width);height:var(--form-toggl-default-height)}.tedi-toggle--size-default .tedi-toggle__slider{width:var(--form-toggl-default-indicator);height:var(--form-toggl-default-indicator)}.tedi-toggle--size-large{--_toggle-indicator: var(--form-toggl-large-indicator);width:var(--form-toggl-large-width);height:var(--form-toggl-large-height)}.tedi-toggle--size-large .tedi-toggle__slider{width:var(--form-toggl-large-indicator);height:var(--form-toggl-large-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:hover{background-color:var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:active{background-color:var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggl-primary-inactive-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input:checked{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggl-primary-active-active)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggl-primary-active-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-indicator)}.tedi-toggle--primary-outlined .tedi-toggle__input{border:var(--borders-01) solid var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover{border:var(--borders-01) solid var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:active{border:var(--borders-01) solid var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-primary-inactive-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked{border:var(--borders-01) solid var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover{border:var(--borders-01) solid var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active{border:var(--borders-01) solid var(--form-toggl-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-primary-active-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:hover{background-color:var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:active{background-color:var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggl-colored-inactive-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-indicator)}.tedi-toggle--colored-filled .tedi-toggle__input:checked{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggl-colored-active-active)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggl-colored-active-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-indicator)}.tedi-toggle--colored-outlined .tedi-toggle__input{border:var(--borders-01) solid var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover{border:var(--borders-01) solid var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:active{border:var(--borders-01) solid var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-colored-inactive-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked{border:var(--borders-01) solid var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover{border:var(--borders-01) solid var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active{border:var(--borders-01) solid var(--form-toggl-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-colored-active-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle__input{width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-radius:var(--form-toggl-radius)}.tedi-toggle__input:checked+.tedi-toggle__slider{left:calc(100% - var(--_toggle-indicator) - var(--form-toggl-padding));transform:translateY(-50%)}.tedi-toggle__slider{position:absolute;top:50%;left:var(--form-toggl-padding);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;transform:translateY(-50%);transition:left .17s ease-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-toggle", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        "[class]": "classes()"
+                    }, template: "<input\n  #inputElement\n  [id]=\"inputId()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-checked]=\"checked()\"\n  type=\"checkbox\"\n  class=\"tedi-toggle__input\"\n  role=\"switch\"\n  (change)=\"handleChange($event)\"\n/>\n<span class=\"tedi-toggle__slider\" aria-hidden=\"true\">\n  @if (icon() && size() === 'large') {\n    <tedi-icon\n      [name]=\"checked() ? 'lock_open_right' : 'lock'\"\n      [color]=\"iconColor()\"\n      [size]=\"16\"\n      class=\"tedi-toggle__icon\"\n    />\n  }\n</span>\n", styles: [".tedi-toggle{position:relative;display:block}.tedi-toggle--size-default{--_toggle-indicator: var(--form-toggl-default-indicator);width:var(--form-toggl-default-width);height:var(--form-toggl-default-height)}.tedi-toggle--size-default .tedi-toggle__slider{width:var(--form-toggl-default-indicator);height:var(--form-toggl-default-indicator)}.tedi-toggle--size-large{--_toggle-indicator: var(--form-toggl-large-indicator);width:var(--form-toggl-large-width);height:var(--form-toggl-large-height)}.tedi-toggle--size-large .tedi-toggle__slider{width:var(--form-toggl-large-indicator);height:var(--form-toggl-large-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:hover{background-color:var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:active{background-color:var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggl-primary-inactive-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input:checked{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggl-primary-active-active)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggl-primary-active-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-indicator)}.tedi-toggle--primary-outlined .tedi-toggle__input{border:var(--borders-01) solid var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover{border:var(--borders-01) solid var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:active{border:var(--borders-01) solid var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-primary-inactive-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked{border:var(--borders-01) solid var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover{border:var(--borders-01) solid var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active{border:var(--borders-01) solid var(--form-toggl-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-primary-active-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:hover{background-color:var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:active{background-color:var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggl-colored-inactive-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-indicator)}.tedi-toggle--colored-filled .tedi-toggle__input:checked{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggl-colored-active-active)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggl-colored-active-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-indicator)}.tedi-toggle--colored-outlined .tedi-toggle__input{border:var(--borders-01) solid var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover{border:var(--borders-01) solid var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:active{border:var(--borders-01) solid var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-colored-inactive-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked{border:var(--borders-01) solid var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover{border:var(--borders-01) solid var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active{border:var(--borders-01) solid var(--form-toggl-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-colored-active-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle__input{width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-radius:var(--form-toggl-radius)}.tedi-toggle__input:checked+.tedi-toggle__slider{left:calc(100% - var(--_toggle-indicator) - var(--form-toggl-padding));transform:translateY(-50%)}.tedi-toggle__slider{position:absolute;top:50%;left:var(--form-toggl-padding);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;transform:translateY(-50%);transition:left .17s ease-out}\n"] }]
+        }], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }] } });
+
 class SeparatorComponent {
     /**
      * Axis of separator.
@@ -2601,7 +3911,7 @@ class PopoverComponent {
         this.hidePopover(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<float-ui-content\n  #floatUiComponent\n  looseTrigger=\"none\"\n  ariaRole=\"dialog\"\n  [appendTo]=\"appendTo()\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [targetElement]=\"popoverTrigger().host.nativeElement\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [applyClass]=\"floatUiContainerClass()\"\n  [disableAnimation]=\"true\"\n>\n  <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}float-ui-content .float-ui-container-popover{z-index:var(--z-index-dropdown);padding:0;border:var(--borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-popover--arrow .float-ui-arrow{z-index:var(--z-index-dropdown);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)}float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded)}float-ui-content .float-ui-container-popover--border .float-ui-arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right] .float-ui-arrow{transform: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--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$1.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$1.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<float-ui-content\n  #floatUiComponent\n  looseTrigger=\"none\"\n  ariaRole=\"dialog\"\n  [appendTo]=\"appendTo()\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [targetElement]=\"popoverTrigger().host.nativeElement\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [applyClass]=\"floatUiContainerClass()\"\n  [disableAnimation]=\"true\"\n>\n  <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--borders-02) solid var(--primary-500);outline-offset:var(--borders-01)}float-ui-content .float-ui-container-popover{z-index:var(--z-index-dropdown);padding:0;border:var(--borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-popover--arrow .float-ui-arrow{z-index:var(--z-index-dropdown);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)}float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded)}float-ui-content .float-ui-container-popover--border .float-ui-arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right] .float-ui-arrow{transform: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--none{width:none}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$2.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$2.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
@@ -2674,14 +3984,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ["keydown", ["$event"]]
             }] } });
 
+const DROPDOWN_API = new InjectionToken("DropdownApi");
+const DROPDOWN_CONTENT_API = new InjectionToken("DropdownContentApi");
+
 class DropdownItemComponent {
     /** Item value */
     value = input();
     /** Is item disabled? */
     disabled = input(false);
     host = inject(ElementRef);
-    dropdown = inject(DropdownComponent);
-    dropdownContent = inject(DropdownContentComponent);
+    dropdown = inject(DROPDOWN_API);
+    dropdownContent = inject(DROPDOWN_CONTENT_API);
+    /** Check if custom dropdown-item-value is provided */
+    customItemValue = contentChild(DropdownItemValueComponent);
     isSelected() {
         return this.dropdown.value() === this.value();
     }
@@ -2736,16 +4051,16 @@ class DropdownItemComponent {
         this.dropdown.dropdownTrigger()?.host.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: DropdownItemComponent, isStandalone: true, selector: "li[tedi-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.role": "dropdownContent.dropdownRole() === 'menu' ? 'menuitem' : 'option'", "attr.aria-selected": "dropdownContent.dropdownRole() === 'listbox' ? isSelected() : null", "attr.aria-disabled": "disabled() ? 'true' : null", "tabindex": "dropdownContent.dropdownRole() === 'menu' ? '-1' : (disabled() ? null : '-1')" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["li[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, 8px) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}li[tedi-dropdown-item][aria-selected=true]{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-selected=true]:focus-visible{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item][aria-disabled=true]{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownItemComponent, isStandalone: true, selector: "li[tedi-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.role": "dropdownContent.dropdownRole() === 'menu' ? 'menuitem' : 'option'", "attr.aria-selected": "dropdownContent.dropdownRole() === 'listbox' ? isSelected() : null", "attr.aria-disabled": "disabled() ? 'true' : null", "tabindex": "dropdownContent.dropdownRole() === 'menu' ? '-1' : (disabled() ? null : '-1')" } }, queries: [{ propertyName: "customItemValue", first: true, predicate: DropdownItemValueComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-dropdown-item-value\" />\n\n@if (!customItemValue()) {\n  <tedi-dropdown-item-value>\n    <tedi-dropdown-item-value-label>\n      <ng-content />\n    </tedi-dropdown-item-value-label>\n  </tedi-dropdown-item-value>\n}\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(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--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)}\n"], dependencies: [{ 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "li[tedi-dropdown-item]", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: "li[tedi-dropdown-item]", standalone: true, imports: [DropdownItemValueComponent, DropdownItemValueLabelComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[attr.role]": "dropdownContent.dropdownRole() === 'menu' ? 'menuitem' : 'option'",
                         "[attr.aria-selected]": "dropdownContent.dropdownRole() === 'listbox' ? isSelected() : null",
                         "[attr.aria-disabled]": "disabled() ? 'true' : null",
                         "[tabindex]": "dropdownContent.dropdownRole() === 'menu' ? '-1' : (disabled() ? null : '-1')",
-                    }, styles: ["li[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, 8px) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible{outline:var(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--borders-02))}li[tedi-dropdown-item][aria-selected=true]{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-selected=true]:focus-visible{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item][aria-disabled=true]{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}\n"] }]
+                    }, template: "<ng-content select=\"tedi-dropdown-item-value\" />\n\n@if (!customItemValue()) {\n  <tedi-dropdown-item-value>\n    <tedi-dropdown-item-value-label>\n      <ng-content />\n    </tedi-dropdown-item-value-label>\n  </tedi-dropdown-item-value>\n}\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(--borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--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)}\n"] }]
         }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ["click"]
@@ -2760,17 +4075,28 @@ class DropdownContentComponent {
      * @default menu
      */
     dropdownRole = input("menu");
-    dropdown = inject(DropdownComponent);
+    dropdownApi = inject(DROPDOWN_API);
+    containerId = computed(() => this.dropdownApi.containerId());
     items = contentChildren(DropdownItemComponent);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DropdownContentComponent, isStandalone: true, selector: "tedi-dropdown-content", inputs: { dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-labelledby": "dropdown.containerId() + '_trigger'" } }, queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n<ul [attr.role]=\"dropdownRole()\">\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: ["tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}tedi-dropdown-content ul{margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DropdownContentComponent, isStandalone: true, selector: "tedi-dropdown-content", inputs: { dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-labelledby": "containerId() + '_trigger'" } }, providers: [
+            {
+                provide: DROPDOWN_CONTENT_API,
+                useExisting: forwardRef(() => DropdownContentComponent),
+            },
+        ], queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n<ul [attr.role]=\"dropdownRole()\">\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: ["tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}tedi-dropdown-content ul{margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownContentComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-dropdown-content", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: "presentation",
-                        "[attr.aria-labelledby]": "dropdown.containerId() + '_trigger'",
-                    }, template: "<ng-content />\n<ul [attr.role]=\"dropdownRole()\">\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: ["tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}tedi-dropdown-content ul{margin:0}\n"] }]
+                        "[attr.aria-labelledby]": "containerId() + '_trigger'",
+                    }, providers: [
+                        {
+                            provide: DROPDOWN_CONTENT_API,
+                            useExisting: forwardRef(() => DropdownContentComponent),
+                        },
+                    ], template: "<ng-content />\n<ul [attr.role]=\"dropdownRole()\">\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: ["tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}tedi-dropdown-content ul{margin:0}\n"] }]
         }] });
 
 class DropdownComponent {
@@ -2976,11 +4302,21 @@ class DropdownComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "dropdownTrigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownContent", first: true, predicate: DropdownContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  applyClass=\"float-ui-container-dropdown\"\n  style=\"display: contents\"\n  looseTrigger=\"none\"\n  ariaRole=\"presentation\"\n  [hideOnClickOutside]=\"true\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [disableAnimation]=\"true\"\n  [targetElement]=\"dropdownTrigger().host.nativeElement\"\n  [appendTo]=\"appendTo()\"\n>\n  <ng-content select=\"[tedi-dropdown-trigger]\" />\n</div>\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\">\n  <ng-content select=\"tedi-dropdown-content\" />\n</float-ui-content>\n", styles: ["tedi-dropdown{display:inline-flex}float-ui-content .float-ui-container-dropdown{z-index:var(--z-index-dropdown);padding:0;border:0;border-radius:var(--dropdown-item-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$1.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$1.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: DROPDOWN_API,
+                useExisting: DropdownComponent,
+            },
+        ], queries: [{ propertyName: "dropdownTrigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownContent", first: true, predicate: DropdownContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  applyClass=\"float-ui-container-dropdown\"\n  style=\"display: contents\"\n  looseTrigger=\"none\"\n  ariaRole=\"presentation\"\n  [hideOnClickOutside]=\"true\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [disableAnimation]=\"true\"\n  [targetElement]=\"dropdownTrigger().host.nativeElement\"\n  [appendTo]=\"appendTo()\"\n>\n  <ng-content select=\"[tedi-dropdown-trigger]\" />\n</div>\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\">\n  <ng-content select=\"tedi-dropdown-content\" />\n</float-ui-content>\n", styles: ["tedi-dropdown{display:inline-flex}float-ui-content .float-ui-container-dropdown{z-index:var(--z-index-dropdown);padding:0;border:0;border-radius:var(--dropdown-item-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$2.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$2.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-dropdown", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  applyClass=\"float-ui-container-dropdown\"\n  style=\"display: contents\"\n  looseTrigger=\"none\"\n  ariaRole=\"presentation\"\n  [hideOnClickOutside]=\"true\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [disableAnimation]=\"true\"\n  [targetElement]=\"dropdownTrigger().host.nativeElement\"\n  [appendTo]=\"appendTo()\"\n>\n  <ng-content select=\"[tedi-dropdown-trigger]\" />\n</div>\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\">\n  <ng-content select=\"tedi-dropdown-content\" />\n</float-ui-content>\n", styles: ["tedi-dropdown{display:inline-flex}float-ui-content .float-ui-container-dropdown{z-index:var(--z-index-dropdown);padding:0;border:0;border-radius:var(--dropdown-item-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}\n"] }]
+            args: [{ standalone: true, selector: "tedi-dropdown", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: DROPDOWN_API,
+                            useExisting: DropdownComponent,
+                        },
+                    ], template: "<div\n  applyClass=\"float-ui-container-dropdown\"\n  style=\"display: contents\"\n  looseTrigger=\"none\"\n  ariaRole=\"presentation\"\n  [hideOnClickOutside]=\"true\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [disableAnimation]=\"true\"\n  [targetElement]=\"dropdownTrigger().host.nativeElement\"\n  [appendTo]=\"appendTo()\"\n>\n  <ng-content select=\"[tedi-dropdown-trigger]\" />\n</div>\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\">\n  <ng-content select=\"tedi-dropdown-content\" />\n</float-ui-content>\n", styles: ["tedi-dropdown{display:inline-flex}float-ui-content .float-ui-container-dropdown{z-index:var(--z-index-dropdown);padding:0;border:0;border-radius:var(--dropdown-item-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}\n"] }]
         }], ctorParameters: () => [] });
 
 class DatePickerHeaderComponent {
@@ -3833,383 +5169,47 @@ class DatePickerComponent {
      */
     findNextEnabledDate(from, step) {
         const maxIterations = 365;
-        const target = new Date(from);
-        for (let i = 0; i < maxIterations; i++) {
-            target.setDate(target.getDate() + step);
-            if (!this.isDisabled(target)) {
-                return new Date(target);
-            }
-        }
-        return null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatePickerComponent, isStandalone: true, selector: "tedi-date-picker", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthMode: { classPropertyName: "monthMode", publicName: "monthMode", isSignal: true, isRequired: false, transformFunction: null }, yearMode: { classPropertyName: "yearMode", publicName: "yearMode", isSignal: true, isRequired: false, transformFunction: null }, startYear: { classPropertyName: "startYear", publicName: "startYear", isSignal: true, isRequired: false, transformFunction: null }, endYear: { classPropertyName: "endYear", publicName: "endYear", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, inputState: { classPropertyName: "inputState", publicName: "inputState", isSignal: true, isRequired: false, transformFunction: null }, inputSize: { classPropertyName: "inputSize", publicName: "inputSize", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", month: "monthChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DatePickerComponent),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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(--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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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(--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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: "tedi-date-picker", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ButtonComponent,
-                        IconComponent,
-                        ClosingButtonComponent,
-                        SeparatorComponent,
-                        PopoverComponent,
-                        PopoverTriggerDirective,
-                        PopoverContentComponent,
-                        DatePickerHeaderComponent,
-                        DatePickerCalendarGridComponent,
-                        DatePickerMonthGridComponent,
-                        DatePickerYearGridComponent,
-                        TediTranslationPipe
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatePickerComponent),
-                            multi: true,
-                        },
-                    ], 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().floatUiComponent().state\"\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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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(--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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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(--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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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"] }]
-        }], ctorParameters: () => [] });
-
-class FeedbackTextComponent {
-    /**
-     * Helper text
-     */
-    text = input.required();
-    /**
-     * Type of form-helper.
-     * @default hint
-     */
-    type = input("hint");
-    /**
-     * Position of the helper.
-     * @default left
-     */
-    position = input("left");
-    role = computed(() => {
-        if (this.type() === "valid" || this.type() === "error") {
-            return "alert";
-        }
-        return undefined;
-    });
-    ariaLive = computed(() => {
-        if (this.type() === "error" || this.type() === "valid") {
-            return "assertive";
-        }
-        return "polite";
-    });
-    classes = computed(() => {
-        return `tedi-feedback-text tedi-feedback-text--${this.type()} tedi-feedback-text--${this.position()}`;
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeedbackTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: FeedbackTextComponent, isStandalone: true, selector: "tedi-feedback-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "role()", "attr.aria-live": "ariaLive()" } }, ngImport: i0, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--form-general-feedback-success-text)}.tedi-feedback-text--error{color:var(--form-general-feedback-error-text)}.tedi-feedback-text--left{flex-grow:1;text-align:left}.tedi-feedback-text--right{flex-grow:0;text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeedbackTextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tedi-feedback-text", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        "[class]": "classes()",
-                        "[attr.role]": "role()",
-                        "[attr.aria-live]": "ariaLive()",
-                    }, template: "{{ text() }}\n", styles: [".tedi-feedback-text{display:block;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary)}.tedi-feedback-text--valid{color:var(--form-general-feedback-success-text)}.tedi-feedback-text--error{color:var(--form-general-feedback-error-text)}.tedi-feedback-text--left{flex-grow:1;text-align:left}.tedi-feedback-text--right{flex-grow:0;text-align:right}\n"] }]
-        }] });
-
-class LabelComponent {
-    /**
-     * Size of the label.
-     * @default default
-     */
-    size = input("default");
-    /**
-     * Whether label is required.
-     * @default false
-     */
-    required = input(false);
-    /**
-     * Color of the label.
-     * @default secondary
-     */
-    color = input("secondary");
-    classes = computed(() => {
-        const classList = ["tedi-label", `tedi-label--${this.color()}`];
-        if (this.size() === "small") {
-            classList.push("tedi-label--small");
-        }
-        return classList.join(" ");
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LabelComponent, isStandalone: true, selector: "[tedi-label]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content />\n@if (required()) {\n  <span class=\"tedi-label--required\" aria-hidden=\"true\">*</span>\n  <span class=\"sr-only\">, {{ 'required' | tediTranslate }}</span>\n}\n", styles: [".tedi-label{font-family:var(--family-default);font-size:var(--body-regular-size)}.tedi-label--small{font-size:var(--body-small-regular-size)}.tedi-label--required{margin-left:var(--content-label-inner-spacing-x);color:var(--form-general-feedback-error-border)}.tedi-label--primary{color:var(--general-text-primary)}.tedi-label--secondary{color:var(--general-text-secondary)}.tedi-label:has(input[disabled]),.tedi-label[for]:has(+input[disabled]){color:var(--general-text-disabled)}\n"], dependencies: [{ kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LabelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "[tedi-label]", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        TediTranslationPipe
-                    ], host: {
-                        "[class]": "classes()",
-                    }, template: "<ng-content />\n@if (required()) {\n  <span class=\"tedi-label--required\" aria-hidden=\"true\">*</span>\n  <span class=\"sr-only\">, {{ 'required' | tediTranslate }}</span>\n}\n", styles: [".tedi-label{font-family:var(--family-default);font-size:var(--body-regular-size)}.tedi-label--small{font-size:var(--body-small-regular-size)}.tedi-label--required{margin-left:var(--content-label-inner-spacing-x);color:var(--form-general-feedback-error-border)}.tedi-label--primary{color:var(--general-text-primary)}.tedi-label--secondary{color:var(--general-text-secondary)}.tedi-label:has(input[disabled]),.tedi-label[for]:has(+input[disabled]){color:var(--general-text-disabled)}\n"] }]
-        }] });
-
-class NumberFieldComponent {
-    /**
-     * The unique identifier for the input element that this label is associated with. This ID should match the input element's id attribute to ensure accessibility.
-     */
-    inputId = input.required();
-    /**
-     * The text content of the label that describes the input field.
-     */
-    label = input();
-    /**
-     * Value of the input field. Supports two-way binding, use with form controls.
-     */
-    value = model(0);
-    /**
-     * Is input disabled?
-     * @default false
-     */
-    disabled = input(false);
-    /**
-     * Indicates whether the input field is required. If set to true, the required indicator will be displayed next to the label.
-     * @default false
-     */
-    required = input(false);
-    /**
-     * Minimum allowed value. Disables decrementing below this value and restricts manual input.
-     */
-    min = input();
-    /**
-     * Maximum allowed value. Disables incrementing above this value and restricts manual input.
-     */
-    max = input();
-    /**
-     * Step size for incrementing or decrementing the value.
-     * @default 1
-     */
-    step = input(1);
-    /**
-     * Size of the number field.
-     * @default default
-     */
-    size = input("default");
-    /**
-     * Marks the field as invalid for validation purposes.
-     * @default false
-     */
-    invalid = input(false);
-    /**
-     * Text displayed after the input value, typically a unit.
-     */
-    suffix = input();
-    /**
-     * FeedbackText component inputs.
-     */
-    feedbackText = input();
-    /**
-     * Is input full width?
-     * @default false
-     */
-    fullWidth = input(false);
-    inputRef;
-    formDisabled = signal(false);
-    onChange = () => { };
-    onTouched = () => { };
-    translationService = inject(TediTranslationService);
-    liveAnnouncer = inject(LiveAnnouncer);
-    isInvalid = computed(() => {
-        const min = this.min();
-        const max = this.max();
-        return (this.invalid() ||
-            Boolean(min !== undefined && this.value() < min) ||
-            Boolean(max !== undefined && this.value() > max));
-    });
-    isDisabled = computed(() => this.disabled() || this.formDisabled());
-    decrementDisabled = computed(() => {
-        const min = this.min();
-        return this.isDisabled() || (min !== undefined && this.value() <= min);
-    });
-    incrementDisabled = computed(() => {
-        const max = this.max();
-        return this.isDisabled() || (max !== undefined && this.value() >= max);
-    });
-    feedbackId = computed(() => this.feedbackText() ? `${this.inputId()}-feedback` : null);
-    writeValue(value) {
-        this.value.set(value ? (isNaN(value) ? 0 : value) : 0);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(disabled) {
-        this.formDisabled.set(disabled);
-    }
-    focus() {
-        this.inputRef.nativeElement.focus();
-    }
-    blur() {
-        this.inputRef.nativeElement.blur();
-        this.onTouched();
-    }
-    handleButtonClick(action) {
-        const delta = action === "decrement" ? -1 : 1;
-        const nextValue = this.value() + this.step() * delta;
-        this.value.set(nextValue);
-        this.onChange(nextValue);
-        this.onTouched();
-        this.announceValue(nextValue);
-    }
-    announceValue(value) {
-        this.liveAnnouncer.announce(this.translationService.translate("numberField.quantityUpdated", value), "polite");
-    }
-    handleInputChange(event) {
-        const input = event.target;
-        const value = isNaN(input.valueAsNumber) ? 0 : input.valueAsNumber;
-        if (value !== this.value()) {
-            this.value.set(value);
-            this.onChange(value);
+        const target = new Date(from);
+        for (let i = 0; i < maxIterations; i++) {
+            target.setDate(target.getDate() + step);
+            if (!this.isDisabled(target)) {
+                return new Date(target);
+            }
         }
+        return null;
     }
-    handleBlur() {
-        this.onTouched();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: NumberFieldComponent, isStandalone: true, selector: "tedi-number-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatePickerComponent, isStandalone: true, selector: "tedi-date-picker", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthMode: { classPropertyName: "monthMode", publicName: "monthMode", isSignal: true, isRequired: false, transformFunction: null }, yearMode: { classPropertyName: "yearMode", publicName: "yearMode", isSignal: true, isRequired: false, transformFunction: null }, startYear: { classPropertyName: "startYear", publicName: "startYear", isSignal: true, isRequired: false, transformFunction: null }, endYear: { classPropertyName: "endYear", publicName: "endYear", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, inputState: { classPropertyName: "inputState", publicName: "inputState", isSignal: true, isRequired: false, transformFunction: null }, inputSize: { classPropertyName: "inputSize", publicName: "inputSize", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", month: "monthChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NumberFieldComponent),
+                useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--borders-01)) solid var(--form-input-border-active);outline-offset:var(--borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { 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: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().floatUiComponent().state\"\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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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(--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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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(--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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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", "appendTo", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: NumberFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tedi-number-field", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        LabelComponent,
+            args: [{ standalone: true, selector: "tedi-date-picker", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ButtonComponent,
                         IconComponent,
-                        TextComponent,
-                        FeedbackTextComponent,
-                        TediTranslationPipe,
+                        ClosingButtonComponent,
+                        SeparatorComponent,
+                        PopoverComponent,
+                        PopoverTriggerDirective,
+                        PopoverContentComponent,
+                        DatePickerHeaderComponent,
+                        DatePickerCalendarGridComponent,
+                        DatePickerMonthGridComponent,
+                        DatePickerYearGridComponent,
+                        TediTranslationPipe
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NumberFieldComponent),
+                            useExisting: forwardRef(() => DatePickerComponent),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--borders-01)) solid var(--form-input-border-active);outline-offset:var(--borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
-        }], propDecorators: { inputRef: [{
-                type: ViewChild,
-                args: ["inputElement"]
-            }] } });
-
-class ToggleComponent {
-    /**
-     * The unique identifier for the input element that is associated with label.
-     */
-    inputId = input.required();
-    /**
-     * Is toggle checked? Supports two-way binding, use with form controls.
-     */
-    checked = model(false);
-    /**
-     * Is input disabled?
-     * @default false
-     */
-    disabled = input(false);
-    /**
-     * Indicates whether the input field is required.
-     * @default false
-     */
-    required = input(false);
-    /**
-     * Color variant of the toggle
-     * @default primary
-     */
-    variant = input("primary");
-    /**
-     * Type of the toggle
-     * @default filled
-     */
-    type = input("filled");
-    /**
-     * Size of the toggle
-     * @default default
-     */
-    size = input("default");
-    /**
-     * Should the toggle show lock icon. Works only with large toggle.
-     * @default false
-     */
-    icon = input(false);
-    inputRef;
-    onChange = () => { };
-    onTouched = () => { };
-    writeValue(checked) {
-        this.checked.set(checked);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    focus() {
-        this.inputRef.nativeElement.focus();
-    }
-    blur() {
-        this.inputRef.nativeElement.blur();
-        this.onTouched();
-    }
-    handleChange = (event) => {
-        const target = event.target;
-        this.checked.set(target.checked);
-        this.onChange(target.checked);
-    };
-    classes = computed(() => {
-        return [
-            "tedi-toggle",
-            `tedi-toggle--${this.variant()}-${this.type()}`,
-            `tedi-toggle--size-${this.size()}`,
-        ].join(" ");
-    });
-    iconColor = computed(() => {
-        if (this.type() === "outlined") {
-            return 'white';
-        }
-        switch (this.variant()) {
-            case "primary":
-                return this.checked() ? "brand" : "tertiary";
-            case "colored":
-                return this.checked() ? "success" : "danger";
-        }
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToggleComponent, isStandalone: true, selector: "tedi-toggle", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class": "classes()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ToggleComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<input\n  #inputElement\n  [id]=\"inputId()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-checked]=\"checked()\"\n  type=\"checkbox\"\n  class=\"tedi-toggle__input\"\n  role=\"switch\"\n  (change)=\"handleChange($event)\"\n/>\n<span class=\"tedi-toggle__slider\" aria-hidden=\"true\">\n  @if (icon() && size() === 'large') {\n    <tedi-icon\n      [name]=\"checked() ? 'lock_open_right' : 'lock'\"\n      [color]=\"iconColor()\"\n      [size]=\"16\"\n      class=\"tedi-toggle__icon\"\n    />\n  }\n</span>\n", styles: [".tedi-toggle{position:relative;display:block}.tedi-toggle--size-default{--_toggle-indicator: var(--form-toggl-default-indicator);width:var(--form-toggl-default-width);height:var(--form-toggl-default-height)}.tedi-toggle--size-default .tedi-toggle__slider{width:var(--form-toggl-default-indicator);height:var(--form-toggl-default-indicator)}.tedi-toggle--size-large{--_toggle-indicator: var(--form-toggl-large-indicator);width:var(--form-toggl-large-width);height:var(--form-toggl-large-height)}.tedi-toggle--size-large .tedi-toggle__slider{width:var(--form-toggl-large-indicator);height:var(--form-toggl-large-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:hover{background-color:var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:active{background-color:var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggl-primary-inactive-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input:checked{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggl-primary-active-active)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggl-primary-active-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-indicator)}.tedi-toggle--primary-outlined .tedi-toggle__input{border:var(--borders-01) solid var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover{border:var(--borders-01) solid var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:active{border:var(--borders-01) solid var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-primary-inactive-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked{border:var(--borders-01) solid var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover{border:var(--borders-01) solid var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active{border:var(--borders-01) solid var(--form-toggl-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-primary-active-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:hover{background-color:var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:active{background-color:var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggl-colored-inactive-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-indicator)}.tedi-toggle--colored-filled .tedi-toggle__input:checked{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggl-colored-active-active)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggl-colored-active-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-indicator)}.tedi-toggle--colored-outlined .tedi-toggle__input{border:var(--borders-01) solid var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover{border:var(--borders-01) solid var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:active{border:var(--borders-01) solid var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-colored-inactive-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked{border:var(--borders-01) solid var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover{border:var(--borders-01) solid var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active{border:var(--borders-01) solid var(--form-toggl-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-colored-active-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle__input{width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-radius:var(--form-toggl-radius)}.tedi-toggle__input:checked+.tedi-toggle__slider{left:calc(100% - var(--_toggle-indicator) - var(--form-toggl-padding));transform:translateY(-50%)}.tedi-toggle__slider{position:absolute;top:50%;left:var(--form-toggl-padding);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;transform:translateY(-50%);transition:left .17s ease-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tedi-toggle", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ToggleComponent),
-                            multi: true
-                        }
-                    ], host: {
-                        "[class]": "classes()"
-                    }, template: "<input\n  #inputElement\n  [id]=\"inputId()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-checked]=\"checked()\"\n  type=\"checkbox\"\n  class=\"tedi-toggle__input\"\n  role=\"switch\"\n  (change)=\"handleChange($event)\"\n/>\n<span class=\"tedi-toggle__slider\" aria-hidden=\"true\">\n  @if (icon() && size() === 'large') {\n    <tedi-icon\n      [name]=\"checked() ? 'lock_open_right' : 'lock'\"\n      [color]=\"iconColor()\"\n      [size]=\"16\"\n      class=\"tedi-toggle__icon\"\n    />\n  }\n</span>\n", styles: [".tedi-toggle{position:relative;display:block}.tedi-toggle--size-default{--_toggle-indicator: var(--form-toggl-default-indicator);width:var(--form-toggl-default-width);height:var(--form-toggl-default-height)}.tedi-toggle--size-default .tedi-toggle__slider{width:var(--form-toggl-default-indicator);height:var(--form-toggl-default-indicator)}.tedi-toggle--size-large{--_toggle-indicator: var(--form-toggl-large-indicator);width:var(--form-toggl-large-width);height:var(--form-toggl-large-height)}.tedi-toggle--size-large .tedi-toggle__slider{width:var(--form-toggl-large-indicator);height:var(--form-toggl-large-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:hover{background-color:var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:active{background-color:var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggl-primary-inactive-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input:checked{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggl-primary-active-active)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggl-primary-active-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-indicator)}.tedi-toggle--primary-outlined .tedi-toggle__input{border:var(--borders-01) solid var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover{border:var(--borders-01) solid var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:active{border:var(--borders-01) solid var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-primary-inactive-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked{border:var(--borders-01) solid var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover{border:var(--borders-01) solid var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active{border:var(--borders-01) solid var(--form-toggl-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-primary-active-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:hover{background-color:var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:active{background-color:var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggl-colored-inactive-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-indicator)}.tedi-toggle--colored-filled .tedi-toggle__input:checked{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggl-colored-active-active)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggl-colored-active-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-indicator)}.tedi-toggle--colored-outlined .tedi-toggle__input{border:var(--borders-01) solid var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover{border:var(--borders-01) solid var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:active{border:var(--borders-01) solid var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-colored-inactive-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked{border:var(--borders-01) solid var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover{border:var(--borders-01) solid var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active{border:var(--borders-01) solid var(--form-toggl-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--borders-01)) solid var(--form-toggl-primary-active-default);outline-offset:var(--borders-01);border:var(--borders-01) solid var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--borders-01) solid var(--form-toggl-colored-active-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggl-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle__input{width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-radius:var(--form-toggl-radius)}.tedi-toggle__input:checked+.tedi-toggle__slider{left:calc(100% - var(--_toggle-indicator) - var(--form-toggl-padding));transform:translateY(-50%)}.tedi-toggle__slider{position:absolute;top:50%;left:var(--form-toggl-padding);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;transform:translateY(-50%);transition:left .17s ease-out}\n"] }]
-        }], propDecorators: { inputRef: [{
-                type: ViewChild,
-                args: ['inputElement']
-            }] } });
+                    ], 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().floatUiComponent().state\"\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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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(--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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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(--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(--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(--borders-02) solid var(--tedi-primary-500);outline-offset:var(--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"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Injection token used by `tedi-form-field` to obtain
@@ -4237,7 +5237,22 @@ class FormFieldComponent {
      */
     inputClass = input(null);
     control;
+    ngControl;
     feedback;
+    destroyRef = inject(DestroyRef);
+    ngAfterContentInit() {
+        this.ngControl?.control?.events
+            ?.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.updateValidationState());
+        this.updateValidationState();
+    }
+    updateValidationState() {
+        const invalid = !!this.ngControl?.invalid;
+        const touched = !!this.ngControl?.touched;
+        const dirty = !!this.ngControl?.dirty;
+        const fieldInvalid = invalid && (touched || dirty);
+        this.control?.setInvalidState(fieldInvalid);
+    }
     resolvedIcon = computed(() => {
         const icon = this.icon();
         if (!icon)
@@ -4246,7 +5261,7 @@ class FormFieldComponent {
     });
     validationState = computed(() => {
         const feedbackType = this.feedback?.type();
-        const fieldInvalid = this.control?.invalid();
+        const fieldInvalid = this.control?.invalid?.() ?? false;
         if (fieldInvalid || feedbackType === "error")
             return "invalid";
         if (feedbackType === "valid")
@@ -4280,7 +5295,7 @@ class FormFieldComponent {
         this.control?.clearField?.();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: "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]\"></ng-content>\n\n  @if (showClearButton()) {\n    <div class=\"tedi-form-field__buttons\">\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        [disabled]=\"isDisabled()\"\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{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:hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input: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:active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input: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:focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input: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}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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]\"></ng-content>\n\n  @if (showClearButton()) {\n    <div class=\"tedi-form-field__buttons\">\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        [disabled]=\"isDisabled()\"\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{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:hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input: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:active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input: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:focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input: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}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -4296,6 +5311,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }], propDecorators: { control: [{
                 type: ContentChild,
                 args: [TEDI_FORM_FIELD_CONTROL]
+            }], ngControl: [{
+                type: ContentChild,
+                args: [NgControl]
             }], feedback: [{
                 type: ContentChild,
                 args: [FeedbackTextComponent]
@@ -4303,7 +5321,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class TextFieldComponent {
     el;
-    ngControl;
     /**
      * Value of the input field. Supports two-way binding, use with form controls.
      */
@@ -4317,18 +5334,14 @@ class TextFieldComponent {
      * Callback triggered when the clear button is clicked.
      */
     clear = output();
-    constructor(el, ngControl) {
+    constructor(el) {
         this.el = el;
-        this.ngControl = ngControl;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
     }
     disabled = computed(() => this.el.nativeElement.disabled || this.formDisabled());
-    invalid = computed(() => {
-        const control = this.ngControl?.control;
-        return !!(control?.invalid && (control?.touched || control?.dirty));
-    });
+    invalid = signal(false);
+    setInvalidState(isInvalid) {
+        this.invalid.set(isInvalid);
+    }
     formDisabled = signal(false);
     onChange = () => { };
     onTouched = () => { };
@@ -4366,7 +5379,7 @@ class TextFieldComponent {
         this.clear.emit();
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null" }, classAttribute: "tedi-text-field" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -4398,11 +5411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         "(input)": "handleInputChange($event)",
                         "(blur)": "handleBlur()",
                     }, styles: [".tedi-text-field{flex:1;height:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}.tedi-form-field--with-icon .tedi-text-field{padding-right:0}.tedi-form-field--small .tedi-text-field{padding-block:var(--form-field-padding-y-sm);padding-inline:var(--form-field-padding-x-md-default)}.tedi-form-field--large .tedi-text-field{padding-block:var(--form-field-padding-y-lg);padding-inline:var(--form-field-padding-x-lg)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 class TextGroupLabelComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -6139,7 +7148,7 @@ class TooltipComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  applyClass=\"float-ui-container-tooltip\"\n  ariaRole=\"tooltip\"\n  ariaHidden=\"true\"\n  style=\"display: contents\"\n  looseTrigger=\"none\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [disableAnimation]=\"true\"\n  [targetElement]=\"tooltipTrigger().host.nativeElement\"\n  [appendTo]=\"appendTo()\"\n>\n  <ng-content select=\"tedi-tooltip-trigger\" />\n</div>\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\" aria-hidden=\"true\">\n  <ng-content select=\"tedi-tooltip-content\" />\n</float-ui-content>\n", styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);width:max-content;padding:0;border:0;border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform: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);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$1.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$1.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "floatUiComponent", first: true, predicate: NgxFloatUiContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  applyClass=\"float-ui-container-tooltip\"\n  ariaRole=\"tooltip\"\n  ariaHidden=\"true\"\n  style=\"display: contents\"\n  looseTrigger=\"none\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [disableAnimation]=\"true\"\n  [targetElement]=\"tooltipTrigger().host.nativeElement\"\n  [appendTo]=\"appendTo()\"\n>\n  <ng-content select=\"tedi-tooltip-trigger\" />\n</div>\n@if (contentText()) {\n  <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\n<float-ui-content #floatUiComponent [style.display]=\"floatUiDisplay()\" aria-hidden=\"true\">\n  <ng-content select=\"tedi-tooltip-content\" />\n</float-ui-content>\n", styles: ["tedi-tooltip{display:contents}float-ui-content .float-ui-container-tooltip{z-index:var(--z-index-tooltip);width:max-content;padding:0;border:0;border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-tooltip .float-ui-arrow{width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=top] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-tooltip[data-float-ui-placement=right] .float-ui-arrow{transform: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);background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], dependencies: [{ kind: "ngmodule", type: NgxFloatUiModule }, { kind: "component", type: i1$2.NgxFloatUiContentComponent, selector: "float-ui-content", exportAs: ["ngxFloatUiContent"] }, { kind: "directive", type: i1$2.NgxFloatUiLooseDirective, selector: "[floatUiLoose]", inputs: ["floatUiLoose", "loosePlacement", "looseTrigger"], exportAs: ["floatUiLoose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
@@ -6381,49 +7390,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ["click"]
             }] } });
 
-class SpinnerComponent {
-    /**
-     * Size of the spinner in px.
-     * @default 16
-     */
-    size = input(16);
-    /**
-     * Specifies the color theme of the spinner.
-     * The color should meet accessibility standards for color contrast.
-     * @default primary
-     */
-    color = input("primary");
-    /**
-     * Provides a text label for screen readers to announce the spinner's purpose or status.
-     */
-    label = input();
-    sizeConfig = {
-        10: { strokeWidth: 4.4, r: 19.8 },
-        16: { strokeWidth: 5.5, r: 19.25 },
-        48: { strokeWidth: 3.6667, r: 20.1667 },
-    };
-    strokeWidth = computed(() => this.sizeConfig[this.size()].strokeWidth);
-    r = computed(() => this.sizeConfig[this.size()].r);
-    classes = computed(() => {
-        const classList = [
-            "tedi-spinner",
-            `tedi-spinner--size-${this.size()}`,
-            `tedi-spinner--color-${this.color()}`,
-        ];
-        return classList.join(" ");
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: SpinnerComponent, isStandalone: true, selector: "tedi-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "class": "classes()", "attr.aria-label": "label() ? label() : null", "attr.aria-hidden": "!label()" } }, ngImport: i0, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+class DropdownItemValueMetaComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemValueMetaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DropdownItemValueMetaComponent, isStandalone: true, selector: "tedi-dropdown-item-value-meta", host: { classAttribute: "tedi-dropdown-item-value__meta" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemValueMetaComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tedi-spinner", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        "[class]": "classes()",
-                        "role": "status",
-                        "aria-live": "polite",
-                        "[attr.aria-label]": "label() ? label() : null",
-                        "[attr.aria-hidden]": "!label()"
-                    }, 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"] }]
+            args: [{
+                    selector: "tedi-dropdown-item-value-meta",
+                    template: `<ng-content />`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: "tedi-dropdown-item-value__meta",
+                    },
+                }]
         }] });
 
 class ModalComponent {
@@ -6539,54 +7521,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ standalone: true, selector: "tedi-modal-header", imports: [ClosingButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tedi-modal-header__head\">\n  <ng-content select=\"h1,h2,h3,h4,h5,h6\" />\n  @if (showClose()) {\n    <button tedi-closing-button (click)=\"closeModal()\"></button>\n  }\n</div>\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{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--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--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:var(--modal-max-width-xs)}.tedi-modal--sm .tedi-modal__dialog{max-width:var(--modal-max-width-sm)}.tedi-modal--md .tedi-modal__dialog{max-width:var(--modal-max-width-md)}.tedi-modal--lg .tedi-modal__dialog{max-width:var(--modal-max-width-lg)}.tedi-modal--xl .tedi-modal__dialog{max-width:var(--modal-max-width-xl)}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:95dvh;transform:translate(-50%,-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;height:100%}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;height:100%}.tedi-modal__dialog{position:fixed;display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--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(--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 button[tedi-closing-button]{margin-left:auto}.tedi-modal tedi-modal-content{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal tedi-modal-footer{display:flex;gap:var(--layout-grid-gutters-16);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--borders-01) solid var(--modal-border-inner)}\n"] }]
         }] });
 
-class TagComponent {
-    idGenerator = inject(_IdGenerator);
-    uniqueId = this.idGenerator.getId('tedi-tag');
-    /**
-     * Whether the tag is in loading state.
-     * When true, a spinner will be displayed inside the tag.
-     * @default false
-     */
-    loading = input(false);
-    /**
-     * Whether the tag can be closed.
-     * When true, a close button will be displayed that emits the 'closed' event when clicked.
-     * @default false
-     */
-    closable = input(false);
-    /**
-     * The visual style of the tag.
-     * Possible values: 'primary', 'secondary', 'danger'
-     * @default "primary"
-     */
-    type = input("primary");
-    /**
-     * Event emitted when the close button is clicked.
-     */
-    closed = output();
-    classes = computed(() => {
-        const classList = [];
-        if (this.type()) {
-            classList.push(`tedi-tag--${this.type()}`);
-        }
-        return classList.join(" ");
-    });
-    handleClose(event) {
-        this.closed.emit(event);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 } }, outputs: { closed: "closed" }, host: { properties: { "class.tedi-tag": "true", "class.tedi-tag--loading": "loading()", "class.tedi-tag--closable": "closable()", "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  <ng-content />\n</span>\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__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: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tedi-tag", imports: [SpinnerComponent, IconComponent, ClosingButtonComponent, TediTranslationPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        "[class.tedi-tag]": "true",
-                        "[class.tedi-tag--loading]": "loading()",
-                        "[class.tedi-tag--closable]": "closable()",
-                        "[class]": "classes()",
-                    }, 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  <ng-content />\n</span>\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__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"] }]
-        }] });
-
 class StatusBadgeComponent {
     idGenerator = inject(_IdGenerator);
     uniqueId = this.idGenerator.getId("tedi-status-badge");
@@ -6665,7 +7599,7 @@ class StatusBadgeComponent {
         return null;
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: StatusBadgeComponent, isStandalone: true, selector: "tedi-status-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n  <abbr\n    [ngClass]=\"classes()\"\n    [attr.id]=\"uniqueId\"\n    [attr.title]=\"title()\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\"\n  >\n    <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n  </abbr>\n} @else {\n  <div\n    [ngClass]=\"classes()\"\n    [attr.id]=\"uniqueId\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\"\n  >\n    <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n  </div>\n}\n\n<ng-template #statusBadgeContent>\n  @if (icon()) {\n    <tedi-icon class=\"tedi-status-badge__icon\" [name]=\"icon()\" [size]=\"16\" />\n  }\n\n  @if (text()) {\n    <span class=\"tedi-status-badge__text\">{{ text() }}</span>\n  }\n</ng-template>\n", styles: [".tedi-status-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-default-padding-y) var(--tag-default-padding-x);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--_status-badge-text);text-decoration:none;background:var(--_status-badge-background);border-radius:var(--tag-default-radius);box-shadow:var(--_status-badge-box-shadow)}.tedi-status-badge__text{min-width:fit-content;padding:0 var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.125rem;right:-.125rem;z-index:1;width:var(--status-indicator-sm);height:var(--status-indicator-sm);content:\"\";background-color:var(--_status-badge--indicator-background);border:1px solid var(--status-badge-indicator-border);border-radius:50%}.tedi-status-badge--status.tedi-status-badge--large:before{width:var(--status-indicator-lg);height:var(--status-indicator-lg)}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge .tedi-status-badge__icon{color:inherit}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;padding:var(--tag-status-icon-padding-y) var(--tag-status-icon-padding-x);line-height:var(--body-small-regular-line-height)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: StatusBadgeComponent, isStandalone: true, selector: "tedi-status-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (title()) {\n  <abbr\n    [ngClass]=\"classes()\"\n    [attr.id]=\"uniqueId\"\n    [attr.title]=\"title()\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\"\n  >\n    <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n  </abbr>\n} @else {\n  <div\n    [ngClass]=\"classes()\"\n    [attr.id]=\"uniqueId\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\"\n  >\n    <ng-container *ngTemplateOutlet=\"statusBadgeContent\"></ng-container>\n  </div>\n}\n\n<ng-template #statusBadgeContent>\n  @if (icon()) {\n    <tedi-icon class=\"tedi-status-badge__icon\" [name]=\"icon()\" [size]=\"16\" />\n  }\n\n  @if (text()) {\n    <span class=\"tedi-status-badge__text\">{{ text() }}</span>\n  }\n</ng-template>\n", styles: [".tedi-status-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-default-padding-y) var(--tag-default-padding-x);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--_status-badge-text);text-decoration:none;background:var(--_status-badge-background);border-radius:var(--tag-default-radius);box-shadow:var(--_status-badge-box-shadow)}.tedi-status-badge__text{min-width:fit-content;padding:0 var(--tag-default-padding-x)}.tedi-status-badge--large{min-width:var(--tag-status-large-min-width);padding:var(--tag-status-large-padding-y) var(--tag-status-large-padding-x)}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent );--_status-badge-box-shadow: none}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: var( --status-badge-background-neutral )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: var( --status-badge-background-brand )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: var( --status-badge-background-accent )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: var( --status-badge-background-success )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: var( --status-badge-background-danger )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: var( --status-badge-background-warning )}.tedi-status-badge.tedi-status-badge--variant-filled-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: var( --status-badge-background-transparent )}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-neutral{--_status-badge-text: var(--status-badge-text-neutral);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-neutral);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-brand{--_status-badge-text: var(--status-badge-text-brand);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-brand);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-accent{--_status-badge-text: var(--status-badge-text-accent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-accent);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-success{--_status-badge-text: var(--status-badge-text-success);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-success);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-danger{--_status-badge-text: var(--status-badge-text-danger);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-danger);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-warning{--_status-badge-text: var(--status-badge-text-warning);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-warning);--_status-badge-background: transparent}.tedi-status-badge.tedi-status-badge--variant-bordered.tedi-status-badge--color-transparent{--_status-badge-text: var(--status-badge-text-transparent);--_status-badge-box-shadow: inset 0 0 0 1px var(--status-badge-border-transparent);--_status-badge-background: transparent}.tedi-status-badge--status:before{position:absolute;top:-.125rem;right:-.125rem;z-index:1;width:var(--status-indicator-sm);height:var(--status-indicator-sm);content:\"\";background-color:var(--_status-badge--indicator-background);border:1px solid var(--status-badge-indicator-border);border-radius:50%}.tedi-status-badge--status.tedi-status-badge--large:before{width:var(--status-indicator-lg);height:var(--status-indicator-lg)}.tedi-status-badge--status-inactive:before{--_status-badge--indicator-background: var( --status-badge-indicator-inactive )}.tedi-status-badge--status-success:before{--_status-badge--indicator-background: var( --status-badge-indicator-success )}.tedi-status-badge--status-danger:before{--_status-badge--indicator-background: var( --status-badge-indicator-danger )}.tedi-status-badge--status-warning:before{--_status-badge--indicator-background: var( --status-badge-indicator-warning )}.tedi-status-badge .tedi-status-badge__icon{color:inherit}.tedi-status-badge__icon-only{display:inline-flex;align-items:center;padding:var(--tag-status-icon-padding-y) var(--tag-status-icon-padding-x);line-height:var(--body-small-regular-line-height)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusBadgeComponent, decorators: [{
             type: Component,
@@ -6773,7 +7707,7 @@ class AccordionItemComponent {
         return !this.headerClickable() && !this.showExpandLabel();
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { headerClickable: { classPropertyName: "headerClickable", publicName: "headerClickable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLayout: { classPropertyName: "titleLayout", publicName: "titleLayout", isSignal: true, isRequired: false, transformFunction: null }, showSeparateTitle: { classPropertyName: "showSeparateTitle", publicName: "showSeparateTitle", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, showExpandLabel: { classPropertyName: "showExpandLabel", publicName: "showExpandLabel", isSignal: true, isRequired: false, transformFunction: null }, showDefaultExpandAction: { classPropertyName: "showDefaultExpandAction", publicName: "showDefaultExpandAction", isSignal: true, isRequired: false, transformFunction: null }, expandActionPosition: { classPropertyName: "expandActionPosition", publicName: "expandActionPosition", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, showIconCard: { classPropertyName: "showIconCard", publicName: "showIconCard", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div\n  class=\"tedi-accordion__item\"\n  [class.tedi-accordion__item--selected]=\"selected()\"\n  [class.tedi-accordion__item--expanded]=\"expanded()\"\n>\n  @if (showIconCard()) {\n    <ng-content select=\"[tedi-accordion-icon-card]\"></ng-content>\n  }\n\n  <div class=\"tedi-accordion__header-row\">\n    @if (headerClickable()) {\n      <button\n        [id]=\"headerId\"\n        type=\"button\"\n        [ngClass]=\"headerClasses()\"\n        (click)=\"toggle()\"\n        [attr.aria-expanded]=\"expanded()\"\n        [attr.aria-controls]=\"bodyId\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      </button>\n    } @else {\n      <div [id]=\"headerId\" [ngClass]=\"headerClasses()\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      </div>\n    }\n  </div>\n\n  <div\n    [ngClass]=\"bodyClasses()\"\n    [id]=\"bodyId\"\n    [attr.role]=\"expanded() ? 'region' : null\"\n    [attr.aria-labelledby]=\"headerId\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? '' : null\"\n  >\n    <div class=\"tedi-accordion__body--inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #headerContent>\n  <div class=\"tedi-accordion__start\">\n    <ng-content select=\"[tedi-accordion-start-action]\"></ng-content>\n\n    <ng-content select=\"[tedi-accordion-start-before-title]\"></ng-content>\n\n    <span\n      class=\"tedi-accordion__title\"\n      [class.tedi-accordion__title--with-description]=\"description()\"\n      [class.tedi-accordion__title--grow]=\"titleLayout() === 'fill'\"\n    >\n      <span class=\"tedi-accordion__title--main\">\n        @if (showStartExpandAction()) {\n          <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n        }\n\n        @if (showSeparateTitle()) {\n          <span\n            tedi-text\n            color=\"secondary\"\n            modifiers=\"normal\"\n            [id]=\"headerId + '-title'\"\n            [attr.aria-hidden]=\"hideTitleFromSR() ? 'true' : null\"\n          >\n            {{ title() | tediTranslate }}\n          </span>\n        }\n      </span>\n\n      @if (descriptionPosition() !== \"end\") {\n        <ng-content select=\"[tedi-accordion-start-description]\"></ng-content>\n\n        @if (description(); as desc) {\n          <span tedi-text color=\"tertiary\" modifiers=\"normal\">\n            {{ desc | tediTranslate }}\n          </span>\n        }\n      }\n    </span>\n\n    <ng-content select=\"[tedi-accordion-start-after-title]\"></ng-content>\n  </div>\n\n  @if (descriptionPosition() !== \"start\") {\n    <ng-content select=\"[tedi-accordion-end-description]\"></ng-content>\n\n    @if (description(); as desc) {\n      <span tedi-text color=\"tertiary\" modifiers=\"small\">\n        {{ desc | tediTranslate }}\n      </span>\n    }\n  }\n\n  @if (showEndExpandAction()) {\n    <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n  }\n\n  <ng-content select=\"[tedi-accordion-end-action]\"></ng-content>\n</ng-template>\n\n<ng-template #collapseButton>\n  @if (headerClickable()) {\n    <div\n      tedi-text\n      modifiers=\"normal\"\n      class=\"tedi-accordion__expand-indicator\"\n      [class.tedi-accordion__expand-indicator--with-label]=\"showExpandLabel()\"\n    >\n      {{ (showExpandLabel() ? expandLabel() : \"\") | tediTranslate }}\n      <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n    </div>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"tedi-accordion__toggle-button\"\n      tedi-link\n      [underline]=\"false\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-label]=\"\n        !showExpandLabel() ? (expandLabel() | tediTranslate) : null\n      \"\n      [attr.aria-labelledby]=\"headerId + '-title'\"\n    >\n      @if (showExpandLabel()) {\n        {{ (showSeparateTitle() ? expandLabel() : title()) | tediTranslate }}\n      }\n      <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #expandIcon>\n  <tedi-icon\n    aria-hidden=\"true\"\n    name=\"expand_more\"\n    class=\"tedi-accordion__icon\"\n    [class.tedi-accordion__icon--expanded]=\"expanded()\"\n    [class.tedi-accordion__icon--no-label]=\"!showExpandLabel()\"\n  />\n</ng-template>\n", styles: [".tedi-accordion__item{display:grid;grid-template-rows:max-content minmax(0,0fr);grid-template-columns:auto 1fr;transition:grid-template-rows .3s ease}.tedi-accordion__item--selected{border:1px solid var(--card-border-selected);border-radius:var(--card-radius-rounded)}.tedi-accordion__item--selected .tedi-accordion__header,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body,.tedi-accordion__item--selected [tedi-accordion-icon-card]{border:transparent}.tedi-accordion__item--selected .tedi-accordion__header--with-icon-card,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-left:1px solid var(--card-border-primary)}.tedi-accordion__item--selected .tedi-accordion__header--expanded{border-bottom:1px solid var(--card-border-primary)}.tedi-accordion__item--expanded{grid-template-rows:max-content minmax(0,1fr)}.tedi-accordion__item--expanded .tedi-accordion__body{border:1px solid var(--card-border-primary);border-top:none;border-radius:0 0 var(--card-radius-rounded) var(--card-radius-rounded)}.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-radius:0 0 var(--card-radius-rounded) 0}.tedi-accordion__header-row{display:flex;grid-row:1;grid-column:2;align-items:stretch}.tedi-accordion__header{position:relative;display:flex;flex:1;gap:var(--layout-grid-gutters-16);align-items:center;padding:var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-accordion__header--expanded{border-radius:var(--card-radius-rounded) var(--card-radius-rounded) 0 0}.tedi-accordion__header--expanded.tedi-accordion__header--with-icon-card{border-radius:0 var(--card-radius-rounded) 0 0}.tedi-accordion__header--with-icon-card{border-radius:var(--card-radius-sharp) var(--card-radius-rounded) var(--card-radius-rounded) var(--card-radius-sharp)}.tedi-accordion__header--hoverable{cursor:pointer}.tedi-accordion__header--hoverable:hover{background:var(--general-surface-hover)}.tedi-accordion__header--hoverable:active{background:var(--general-surface-brand-tertiary)}.tedi-accordion__header--hoverable:focus-visible{z-index:1;outline:none;background:var(--card-background-primary);border:1px solid var(--card-border-primary);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-accordion__body{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion__body--inner{padding:var(--card-padding-md-default)}.tedi-accordion__icon{transition:transform .2s ease-in-out}.tedi-accordion__icon--expanded{transform:rotate(-180deg)}.tedi-accordion__start{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}[tedi-accordion-icon-card]{display:inline-flex;grid-row:1/span 2;grid-column:1;gap:var(--layout-grid-gutters-08);align-items:flex-start;align-self:stretch;justify-content:flex-end;padding:var(--card-padding-md-default);background:var(--card-background-secondary);border:1px solid var(--card-border-primary);border-right:none;border-radius:var(--card-radius-rounded) var(--card-radius-sharp) var(--card-radius-sharp) var(--card-radius-rounded)}.tedi-accordion__title{display:flex;gap:var(--layout-grid-gutters-08)}.tedi-accordion__title--main{display:flex;gap:inherit;align-items:center}.tedi-accordion__title--with-description,.tedi-accordion__title:has([tedi-accordion-start-description]){flex-direction:column;gap:0;align-items:flex-start}.tedi-accordion__title--grow{flex:1;justify-content:space-between}.tedi-accordion__toggle-button{display:flex;padding:0;font-size:var(--body-regular-size);background:transparent;border:transparent}.tedi-accordion__expand-indicator{display:flex;align-items:center;color:var(--accordion-action-color)}.tedi-accordion__expand-indicator tedi-icon{color:inherit}.tedi-accordion__expand-indicator--with-label tedi-icon{margin-left:var(--button-sm-inner-spacing);font-size:var(--tedi-size-02);line-height:inherit}.tedi-link tedi-icon.tedi-accordion__icon--no-label{font-size:var(--icon-05)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { headerClickable: { classPropertyName: "headerClickable", publicName: "headerClickable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLayout: { classPropertyName: "titleLayout", publicName: "titleLayout", isSignal: true, isRequired: false, transformFunction: null }, showSeparateTitle: { classPropertyName: "showSeparateTitle", publicName: "showSeparateTitle", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, showExpandLabel: { classPropertyName: "showExpandLabel", publicName: "showExpandLabel", isSignal: true, isRequired: false, transformFunction: null }, showDefaultExpandAction: { classPropertyName: "showDefaultExpandAction", publicName: "showDefaultExpandAction", isSignal: true, isRequired: false, transformFunction: null }, expandActionPosition: { classPropertyName: "expandActionPosition", publicName: "expandActionPosition", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, showIconCard: { classPropertyName: "showIconCard", publicName: "showIconCard", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div\n  class=\"tedi-accordion__item\"\n  [class.tedi-accordion__item--selected]=\"selected()\"\n  [class.tedi-accordion__item--expanded]=\"expanded()\"\n>\n  @if (showIconCard()) {\n    <ng-content select=\"[tedi-accordion-icon-card]\"></ng-content>\n  }\n\n  <div class=\"tedi-accordion__header-row\">\n    @if (headerClickable()) {\n      <button\n        [id]=\"headerId\"\n        type=\"button\"\n        [ngClass]=\"headerClasses()\"\n        (click)=\"toggle()\"\n        [attr.aria-expanded]=\"expanded()\"\n        [attr.aria-controls]=\"bodyId\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      </button>\n    } @else {\n      <div [id]=\"headerId\" [ngClass]=\"headerClasses()\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      </div>\n    }\n  </div>\n\n  <div\n    [ngClass]=\"bodyClasses()\"\n    [id]=\"bodyId\"\n    [attr.role]=\"expanded() ? 'region' : null\"\n    [attr.aria-labelledby]=\"headerId\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? '' : null\"\n  >\n    <div class=\"tedi-accordion__body--inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #headerContent>\n  <div class=\"tedi-accordion__start\">\n    <ng-content select=\"[tedi-accordion-start-action]\"></ng-content>\n\n    <ng-content select=\"[tedi-accordion-start-before-title]\"></ng-content>\n\n    <span\n      class=\"tedi-accordion__title\"\n      [class.tedi-accordion__title--with-description]=\"description()\"\n      [class.tedi-accordion__title--grow]=\"titleLayout() === 'fill'\"\n    >\n      <span class=\"tedi-accordion__title--main\">\n        @if (showStartExpandAction()) {\n          <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n        }\n\n        @if (showSeparateTitle()) {\n          <span\n            tedi-text\n            color=\"secondary\"\n            modifiers=\"normal\"\n            [id]=\"headerId + '-title'\"\n            [attr.aria-hidden]=\"hideTitleFromSR() ? 'true' : null\"\n          >\n            {{ title() | tediTranslate }}\n          </span>\n        }\n      </span>\n\n      @if (descriptionPosition() !== \"end\") {\n        <ng-content select=\"[tedi-accordion-start-description]\"></ng-content>\n\n        @if (description(); as desc) {\n          <span tedi-text color=\"tertiary\" modifiers=\"normal\">\n            {{ desc | tediTranslate }}\n          </span>\n        }\n      }\n    </span>\n\n    <ng-content select=\"[tedi-accordion-start-after-title]\"></ng-content>\n  </div>\n\n  @if (descriptionPosition() !== \"start\") {\n    <ng-content select=\"[tedi-accordion-end-description]\"></ng-content>\n\n    @if (description(); as desc) {\n      <span tedi-text color=\"tertiary\" modifiers=\"small\">\n        {{ desc | tediTranslate }}\n      </span>\n    }\n  }\n\n  @if (showEndExpandAction()) {\n    <ng-container *ngTemplateOutlet=\"collapseButton\"></ng-container>\n  }\n\n  <ng-content select=\"[tedi-accordion-end-action]\"></ng-content>\n</ng-template>\n\n<ng-template #collapseButton>\n  @if (headerClickable()) {\n    <div\n      tedi-text\n      modifiers=\"normal\"\n      class=\"tedi-accordion__expand-indicator\"\n      [class.tedi-accordion__expand-indicator--with-label]=\"showExpandLabel()\"\n    >\n      {{ (showExpandLabel() ? expandLabel() : \"\") | tediTranslate }}\n      <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n    </div>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"tedi-accordion__toggle-button\"\n      tedi-link\n      [underline]=\"false\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"expanded()\"\n      [attr.aria-controls]=\"bodyId\"\n      [attr.aria-label]=\"\n        !showExpandLabel() ? (expandLabel() | tediTranslate) : null\n      \"\n      [attr.aria-labelledby]=\"headerId + '-title'\"\n    >\n      @if (showExpandLabel()) {\n        {{ (showSeparateTitle() ? expandLabel() : title()) | tediTranslate }}\n      }\n      <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #expandIcon>\n  <tedi-icon\n    aria-hidden=\"true\"\n    name=\"expand_more\"\n    class=\"tedi-accordion__icon\"\n    [class.tedi-accordion__icon--expanded]=\"expanded()\"\n    [class.tedi-accordion__icon--no-label]=\"!showExpandLabel()\"\n  />\n</ng-template>\n", styles: [".tedi-accordion__item{display:grid;grid-template-rows:max-content minmax(0,0fr);grid-template-columns:auto 1fr;transition:grid-template-rows .3s ease}.tedi-accordion__item--selected{border:1px solid var(--card-border-selected);border-radius:var(--card-radius-rounded)}.tedi-accordion__item--selected .tedi-accordion__header,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body,.tedi-accordion__item--selected [tedi-accordion-icon-card]{border:transparent}.tedi-accordion__item--selected .tedi-accordion__header--with-icon-card,.tedi-accordion__item--selected.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-left:1px solid var(--card-border-primary)}.tedi-accordion__item--selected .tedi-accordion__header--expanded{border-bottom:1px solid var(--card-border-primary)}.tedi-accordion__item--expanded{grid-template-rows:max-content minmax(0,1fr)}.tedi-accordion__item--expanded .tedi-accordion__body{border:1px solid var(--card-border-primary);border-top:none;border-radius:0 0 var(--card-radius-rounded) var(--card-radius-rounded)}.tedi-accordion__item--expanded .tedi-accordion__body--with-icon-card{border-radius:0 0 var(--card-radius-rounded) 0}.tedi-accordion__header-row{display:flex;grid-row:1;grid-column:2;align-items:stretch}.tedi-accordion__header{position:relative;display:flex;flex:1;gap:var(--layout-grid-gutters-16);align-items:center;padding:var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-accordion__header--expanded{border-radius:var(--card-radius-rounded) var(--card-radius-rounded) 0 0}.tedi-accordion__header--expanded.tedi-accordion__header--with-icon-card{border-radius:0 var(--card-radius-rounded) 0 0}.tedi-accordion__header--with-icon-card{border-radius:var(--card-radius-sharp) var(--card-radius-rounded) var(--card-radius-rounded) var(--card-radius-sharp)}.tedi-accordion__header--hoverable{cursor:pointer}.tedi-accordion__header--hoverable:hover{background:var(--general-surface-hover)}.tedi-accordion__header--hoverable:active{background:var(--general-surface-brand-tertiary)}.tedi-accordion__header--hoverable:focus-visible{z-index:1;outline:none;background:var(--card-background-primary);border:1px solid var(--card-border-primary);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-accordion__body{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion__body--inner{padding:var(--card-padding-md-default)}.tedi-accordion__icon{transition:transform .2s ease-in-out}.tedi-accordion__icon--expanded{transform:rotate(-180deg)}.tedi-accordion__start{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}[tedi-accordion-icon-card]{display:inline-flex;grid-row:1/span 2;grid-column:1;gap:var(--layout-grid-gutters-08);align-items:flex-start;align-self:stretch;justify-content:flex-end;padding:var(--card-padding-md-default);background:var(--card-background-secondary);border:1px solid var(--card-border-primary);border-right:none;border-radius:var(--card-radius-rounded) var(--card-radius-sharp) var(--card-radius-sharp) var(--card-radius-rounded)}.tedi-accordion__title{display:flex;gap:var(--layout-grid-gutters-08)}.tedi-accordion__title--main{display:flex;gap:inherit;align-items:center}.tedi-accordion__title--with-description,.tedi-accordion__title:has([tedi-accordion-start-description]){flex-direction:column;gap:0;align-items:flex-start}.tedi-accordion__title--grow{flex:1;justify-content:space-between}.tedi-accordion__toggle-button{display:flex;padding:0;font-size:var(--body-regular-size);background:transparent;border:transparent}.tedi-accordion__expand-indicator{display:flex;align-items:center;color:var(--accordion-action-color)}.tedi-accordion__expand-indicator tedi-icon{color:inherit}.tedi-accordion__expand-indicator--with-label tedi-icon{margin-left:var(--button-sm-inner-spacing);font-size:var(--tedi-size-02);line-height:inherit}.tedi-link tedi-icon.tedi-accordion__icon--no-label{font-size:var(--icon-05)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: LinkComponent, selector: "[tedi-link]", inputs: ["variant", "size", "underline", "target", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
@@ -6878,5 +7812,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RowComponent, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpinnerComponent, StatusBadgeComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID, provideTedi };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AlertComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxComponent, ClosingButtonComponent, ColComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, FeedbackTextComponent, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, NumberFieldComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, RowComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, generateUUID, provideTedi };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map