@tedi-design-system/angular 6.2.0-rc.12 → 6.2.0-rc.13

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

@@ -1,10 +1,11 @@
 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, TemplateRef, viewChildren, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, ContentChild, 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, HostListener, viewChild, contentChild, contentChildren, forwardRef, ViewChild, ContentChild, Optional, Self, TemplateRef, viewChildren, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, makeEnvironmentProviders } from '@angular/core';
 import * as i1 from '@angular/cdk/layout';
-import * as i1$2 from '@angular/common';
+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 { 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 { NgxFloatUiContentComponent, NgxFloatUiModule } from 'ngx-float-ui';
@@ -3905,7 +3906,7 @@ class FeedbackTextComponent {
         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(--general-status-success-text)}.tedi-feedback-text--error{color:var(--general-status-danger-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 });
+    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,
@@ -3913,7 +3914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         "[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(--general-status-success-text)}.tedi-feedback-text--error{color:var(--general-status-danger-text)}.tedi-feedback-text--left{flex-grow:1;text-align:left}.tedi-feedback-text--right{flex-grow:0;text-align:right}\n"] }]
+                    }, 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 {
@@ -4081,7 +4082,7 @@ class NumberFieldComponent {
                 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);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: "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,
@@ -4098,7 +4099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             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);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"] }]
+                    ], 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"]
@@ -4210,6 +4211,199 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['inputElement']
             }] } });
 
+/**
+ * Injection token used by `tedi-form-field` to obtain
+ * the associated control instance.
+ */
+const TEDI_FORM_FIELD_CONTROL = new InjectionToken("TEDI_FORM_FIELD_CONTROL");
+
+class FormFieldComponent {
+    /**
+     * The size of the form field.
+     * @default "default"
+     */
+    size = input("default");
+    /**
+     * Icon name or configuration object.
+     */
+    icon = input();
+    /**
+     * Whether the form field includes a clear button.
+     * @default false
+     */
+    clearable = input(false);
+    /**
+     * Custom CSS classes for the input.
+     */
+    inputClass = input(null);
+    control;
+    feedback;
+    resolvedIcon = computed(() => {
+        const icon = this.icon();
+        if (!icon)
+            return undefined;
+        return typeof icon === "string" ? { name: icon } : icon;
+    });
+    validationState = computed(() => {
+        const feedbackType = this.feedback?.type();
+        const fieldInvalid = this.control?.invalid();
+        if (fieldInvalid || feedbackType === "error")
+            return "invalid";
+        if (feedbackType === "valid")
+            return "valid";
+        return "neutral";
+    });
+    showClearButton = computed(() => {
+        const value = this.control?.value();
+        return this.clearable() && !!value;
+    });
+    isDisabled = computed(() => this.control?.disabled() ?? false);
+    hostClasses = computed(() => {
+        return {
+            "tedi-form-field": true,
+            "tedi-form-field--valid": this.validationState() === "valid",
+            "tedi-form-field--invalid": this.validationState() === "invalid",
+            "tedi-form-field--disabled": this.control?.disabled(),
+            "tedi-form-field--small": this.size() === "small",
+            "tedi-form-field--large": this.size() === "large",
+            "tedi-form-field--with-icon": this.showClearButton() || !!this.icon(),
+        };
+    });
+    inputClasses = computed(() => {
+        const customClass = this.inputClass();
+        return {
+            "tedi-form-field__input": true,
+            ...(customClass ? { [customClass]: true } : {}),
+        };
+    });
+    clear() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-form-field", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        IconComponent,
+                        ClosingButtonComponent,
+                        SeparatorComponent,
+                        TediTranslationPipe,
+                    ], host: {
+                        "[class]": "hostClasses()",
+                    }, 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"] }]
+        }], propDecorators: { control: [{
+                type: ContentChild,
+                args: [TEDI_FORM_FIELD_CONTROL]
+            }], feedback: [{
+                type: ContentChild,
+                args: [FeedbackTextComponent]
+            }] } });
+
+class TextFieldComponent {
+    el;
+    ngControl;
+    /**
+     * Value of the input field. Supports two-way binding, use with form controls.
+     */
+    value = model("");
+    /**
+     * Whether to hide arrows for number inputs.
+     * @default true
+     */
+    arrowsHidden = input(true);
+    /**
+     * Callback triggered when the clear button is clicked.
+     */
+    clear = output();
+    constructor(el, ngControl) {
+        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));
+    });
+    formDisabled = signal(false);
+    onChange = () => { };
+    onTouched = () => { };
+    setValue(value) {
+        this.el.nativeElement.value = value;
+        this.value.set(value);
+    }
+    writeValue(value) {
+        this.setValue(value ?? "");
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+        this.el.nativeElement.disabled = isDisabled;
+    }
+    handleInputChange(event) {
+        const input = event.target;
+        const value = input.value;
+        this.value.set(value);
+        this.onChange(value);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    clearField() {
+        if (this.disabled())
+            return;
+        this.setValue("");
+        this.onChange("");
+        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 ɵ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,
+                useExisting: forwardRef(() => TextFieldComponent),
+                multi: true,
+            },
+            {
+                provide: TEDI_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => TextFieldComponent),
+            },
+        ], ngImport: i0, template: "", isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "input[tedi-text-field]", standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextFieldComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: TEDI_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => TextFieldComponent),
+                        },
+                    ], template: "", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-text-field",
+                        "[class.tedi-text-field--arrows-hidden]": "arrowsHidden()",
+                        "[attr.aria-invalid]": "invalid() || null",
+                        "(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
+                }] }] });
+
 class TextGroupLabelComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TextGroupLabelComponent, isStandalone: true, selector: "tedi-text-group-label", ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -6471,7 +6665,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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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$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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusBadgeComponent, decorators: [{
             type: Component,
@@ -6579,7 +6773,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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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$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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
@@ -6684,5 +6878,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, 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, 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, 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 };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map