@tedi-design-system/angular 7.1.0-rc.12 → 7.1.0-rc.14

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, viewChild, NgZone, DestroyRef, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, ContentChild, HostAttributeToken, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, makeEnvironmentProviders } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, viewChild, NgZone, DestroyRef, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, ContentChild, TemplateRef, HostAttributeToken, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, makeEnvironmentProviders } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/common';
-import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgFor, NgIf } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgIf } from '@angular/common';
 import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -13,9 +13,9 @@ import { _IdGenerator, CdkTrapFocus, A11yModule, LiveAnnouncer } from '@angular/
 import { Dialog } from '@angular/cdk/dialog';
 import * as i1$2 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/cdk/listbox';
 import { CdkListbox, CdkListboxModule } from '@angular/cdk/listbox';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { createAngularTable, getPaginationRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, FlexRenderDirective } from '@tanstack/angular-table';
 import { RouterLink } from '@angular/router';
@@ -5288,6 +5288,11 @@ class TextFieldComponent {
     handleBlur() {
         this.onTouched();
     }
+    focus() {
+        if (this.disabled())
+            return;
+        this.el.nativeElement.focus();
+    }
     clearField() {
         if (this.disabled())
             return;
@@ -5307,7 +5312,7 @@ class TextFieldComponent {
                 provide: TEDI_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TextFieldComponent),
             },
-        ], ngImport: i0, template: "", isInline: true, styles: [".tedi-text-field{flex:1;min-width:0;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 });
+        ], ngImport: i0, template: "", isInline: true, styles: [".tedi-text-field{flex:1;min-width:0;height:100%;padding:0;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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
@@ -5328,7 +5333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[disabled]": "disabled()",
                         "(input)": "handleInputChange($event)",
                         "(blur)": "handleBlur()",
-                    }, styles: [".tedi-text-field{flex:1;min-width:0;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"] }]
+                    }, styles: [".tedi-text-field{flex:1;min-width:0;height:100%;padding:0;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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], arrowsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsHidden", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class SpinnerComponent {
@@ -5993,6 +5998,11 @@ class DateInputComponent {
         (this.inputValue() !== "" || this.hasTags()), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
     iconAriaLabel = this.translationService.track("date-picker.open-calendar");
     clearAriaLabel = this.translationService.track("date-picker.clear-date");
+    /** Moves focus to the text input. Used by the wrapping field. */
+    focusInput() {
+        const target = this.inputElement()?.nativeElement;
+        target?.focus();
+    }
     handleInput(event) {
         const target = event.target;
         this.inputChange.emit(target.value);
@@ -6037,7 +6047,7 @@ class DateInputComponent {
         return width - inputMinWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0;padding-right:var(--form-field-padding-x-md-default)}.tedi-date-input--with-tags{padding-block:calc(var(--form-field-padding-y-md-default) - var(--tedi-borders-01));padding-inline:var(--form-field-padding-x-md-default)}.tedi-date-input--with-tags .tedi-date-input__input{height:auto;padding:0}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -6056,7 +6066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-date-input--tags-single-row]": "hasTags() && !multiRow()",
                         "[class.tedi-date-input--tags-measuring]": "hasTags() && !multiRow() && visibleTagsCount() === null",
                         "(window:resize)": "onResize()",
-                    }, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0;padding-right:var(--form-field-padding-x-md-default)}.tedi-date-input--with-tags{padding-block:calc(var(--form-field-padding-y-md-default) - var(--tedi-borders-01));padding-inline:var(--form-field-padding-x-md-default)}.tedi-date-input--with-tags .tedi-date-input__input{height:auto;padding:0}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"] }]
+                    }, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [type]=\"inputType()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--form-field-height)}.tedi-form-field .tedi-form-field__input:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}.tedi-form-field--small .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:has(.tedi-date-input--tags-wrap){min-height:var(--form-field-height-lg)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconActive", required: false }] }], iconDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDisabled", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], nativeIsoValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeIsoValue", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], iconClick: [{ type: i0.Output, args: ["iconClick"] }], tagRemove: [{ type: i0.Output, args: ["tagRemove"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], fieldElement: [{ type: i0.ViewChild, args: ["fieldElement", { isSignal: true }] }], tagElements: [{ type: i0.ViewChildren, args: ["tagElement", { ...{
@@ -8646,6 +8656,11 @@ class DateFieldComponent {
     setInvalidState(isInvalid) {
         this.formInvalid.set(isInvalid);
     }
+    focus() {
+        if (this.fieldDisabled())
+            return;
+        this.dateInput().focusInput();
+    }
     clearField() {
         if (this.fieldDisabled() || this.readOnly())
             return;
@@ -10420,6 +10435,286 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 args: ["inputElement"]
             }] } });
 
+class FormFieldComponent {
+    /**
+     * The size of the form field.
+     * @default "default"
+     */
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Icon name or configuration object.
+     */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    /**
+     * Whether the form field includes a clear button.
+     * @default false
+     */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    /**
+     * Custom CSS classes for the input.
+     */
+    inputClass = input(null, ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
+    control;
+    ngControl;
+    feedback;
+    destroyRef = inject(DestroyRef);
+    inputGroup = inject(TEDI_INPUT_GROUP, { optional: true });
+    constructor() {
+        effect(() => {
+            const invalid = this.computeInvalid();
+            this.control?.setInvalidState(invalid);
+        });
+    }
+    ngAfterContentInit() {
+        this.ngControl?.control?.events
+            ?.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.updateValidationState());
+        this.updateValidationState();
+    }
+    updateValidationState() {
+        this.control?.setInvalidState(this.computeInvalid());
+    }
+    computeInvalid() {
+        const invalid = !!this.ngControl?.invalid;
+        const touched = !!this.ngControl?.touched;
+        const dirty = !!this.ngControl?.dirty;
+        const fieldInvalid = invalid && (touched || dirty);
+        return fieldInvalid || (this.inputGroup?.invalid() ?? false);
+    }
+    resolvedIcon = computed(() => {
+        const icon = this.icon();
+        if (!icon)
+            return undefined;
+        return typeof icon === "string" ? { name: icon } : icon;
+    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : []));
+    validationState = computed(() => {
+        const feedbackType = this.feedback?.type();
+        const fieldInvalid = this.control?.invalid?.() ?? false;
+        if (fieldInvalid || feedbackType === "error")
+            return "invalid";
+        if (feedbackType === "valid")
+            return "valid";
+        return "neutral";
+    }, ...(ngDevMode ? [{ debugName: "validationState" }] : []));
+    showClearButton = computed(() => {
+        const value = this.control?.value();
+        return this.clearable() && !!value;
+    }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    isDisabled = computed(() => (this.control?.disabled() ?? false) || (this.inputGroup?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    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.isDisabled(),
+            "tedi-form-field--small": this.size() === "small",
+            "tedi-form-field--large": this.size() === "large",
+            "tedi-form-field--with-icon": this.clearable() || !!this.icon(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    inputClasses = computed(() => {
+        const customClass = this.inputClass();
+        return {
+            "tedi-form-field__input": true,
+            ...(customClass ? { [customClass]: true } : {}),
+        };
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    clear() {
+        this.control?.clearField?.();
+    }
+    /**
+     * The control never fills the whole box — the box padding and the layout
+     * wrappers around the control are outside its hit area — so clicking there
+     * would otherwise leave the field unfocused. Focus the control instead, unless
+     * the click landed on something interactive that handles it itself (the
+     * control, the clear/calendar buttons, a tag's close button).
+     */
+    handleBoxMouseDown(event) {
+        if (this.isDisabled())
+            return;
+        const target = event.target;
+        if (target?.closest("button, input, textarea, select, a"))
+            return;
+        // Keep the browser from moving focus off the control we are about to focus.
+        event.preventDefault();
+        this.control?.focus?.();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n  <ng-content select=\"input[tedi-text-field], tedi-time-field, tedi-date-field\"></ng-content>\n\n  @if (clearable()) {\n    <div\n      class=\"tedi-form-field__buttons\"\n      [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n      [attr.aria-hidden]=\"!showClearButton() || null\"\n    >\n      <button\n        class=\"tedi-form-field__clear\"\n        tedi-closing-button\n        type=\"button\"\n        size=\"small\"\n        [ariaLabel]=\"'clear' | tediTranslate\"\n        [iconSize]=\"18\"\n        [tabIndex]=\"showClearButton() ? 0 : -1\"\n        [disabled]=\"isDisabled() || !showClearButton()\"\n        (click)=\"clear()\"\n      ></button>\n\n      @if (icon()) {\n        <tedi-separator axis=\"vertical\" size=\"1rem\" />\n      }\n    </div>\n  }\n\n  @if (resolvedIcon(); as icon) {\n    <div class=\"tedi-form-field__icon\">\n      <tedi-icon\n        [name]=\"icon.name\"\n        [size]=\"icon.size ?? (size() === 'small' ? 16 : size() === 'large' ? 24 : 18)\"\n        [color]=\"icon.color ?? 'inherit'\"\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\n<div class=\"tedi-form-field__extra\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);padding:var(--_field-padding-y) var(--_field-padding-x);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{--_field-padding-y: var(--form-field-padding-y-sm);height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);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:inset 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:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:active){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback,.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            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()\" (mousedown)=\"handleBoxMouseDown($event)\">\n  <ng-content select=\"input[tedi-text-field], tedi-time-field, tedi-date-field\"></ng-content>\n\n  @if (clearable()) {\n    <div\n      class=\"tedi-form-field__buttons\"\n      [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n      [attr.aria-hidden]=\"!showClearButton() || null\"\n    >\n      <button\n        class=\"tedi-form-field__clear\"\n        tedi-closing-button\n        type=\"button\"\n        size=\"small\"\n        [ariaLabel]=\"'clear' | tediTranslate\"\n        [iconSize]=\"18\"\n        [tabIndex]=\"showClearButton() ? 0 : -1\"\n        [disabled]=\"isDisabled() || !showClearButton()\"\n        (click)=\"clear()\"\n      ></button>\n\n      @if (icon()) {\n        <tedi-separator axis=\"vertical\" size=\"1rem\" />\n      }\n    </div>\n  }\n\n  @if (resolvedIcon(); as icon) {\n    <div class=\"tedi-form-field__icon\">\n      <tedi-icon\n        [name]=\"icon.name\"\n        [size]=\"icon.size ?? (size() === 'small' ? 16 : size() === 'large' ? 24 : 18)\"\n        [color]=\"icon.color ?? 'inherit'\"\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\n<div class=\"tedi-form-field__extra\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);padding:var(--_field-padding-y) var(--_field-padding-x);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{--_field-padding-y: var(--form-field-padding-y-sm);height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);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:inset 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:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:active){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback,.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], control: [{
+                type: ContentChild,
+                args: [TEDI_FORM_FIELD_CONTROL]
+            }], ngControl: [{
+                type: ContentChild,
+                args: [NgControl]
+            }], feedback: [{
+                type: ContentChild,
+                args: [FeedbackTextComponent]
+            }] } });
+
+class SearchComponent {
+    /**
+     * Unique identifier for the input element, used to associate the label.
+     */
+    inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /**
+     * Visible label text. When omitted, provide `ariaLabel` for accessibility.
+     */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /**
+     * Value of the search input. Supports two-way binding and reactive forms.
+     */
+    value = model("", ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Placeholder text for the search input.
+     */
+    placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /**
+     * Size of the search field.
+     * @default "default"
+     */
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Whether the input shows a clear button once it has a value.
+     * @default true
+     */
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    /**
+     * Icon shown inside the input. Ignored when `button` is set.
+     * @default "search"
+     */
+    searchIcon = input("search", ...(ngDevMode ? [{ debugName: "searchIcon" }] : []));
+    /**
+     * Whether the search field is disabled.
+     * @default false
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * When set, renders a trailing search button and hides the inline icon.
+     */
+    button = input(...(ngDevMode ? [undefined, { debugName: "button" }] : []));
+    /**
+     * FeedbackText component inputs (hint / validation message).
+     */
+    feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
+    /**
+     * Accessible name for the search region. Falls back to `label`, then
+     * `placeholder`, then the translated "search" label.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /**
+     * Emitted when the search is executed (Enter key or button click).
+     */
+    searchEvent = output();
+    /**
+     * Emitted when the clear button is clicked.
+     */
+    clear = output();
+    inputRef = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "inputRef", read: ElementRef }] : [{ read: ElementRef }]));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    translationService = inject(TediTranslationService);
+    onChange = () => { };
+    onTouched = () => { };
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    fieldIcon = computed(() => this.button() ? undefined : this.searchIcon(), ...(ngDevMode ? [{ debugName: "fieldIcon" }] : []));
+    fieldHeight = computed(() => {
+        switch (this.size()) {
+            case "small":
+                return "var(--form-field-height-sm)";
+            case "large":
+                return "var(--form-field-height-lg)";
+            default:
+                return "var(--form-field-height)";
+        }
+    }, ...(ngDevMode ? [{ debugName: "fieldHeight" }] : []));
+    buttonSize = computed(() => this.size() === "small" ? "small" : "default", ...(ngDevMode ? [{ debugName: "buttonSize" }] : []));
+    buttonIconSize = computed(() => (this.size() === "large" ? 24 : 18), ...(ngDevMode ? [{ debugName: "buttonIconSize" }] : []));
+    buttonAriaLabel = computed(() => {
+        const button = this.button();
+        if (button?.text)
+            return null;
+        return button?.ariaLabel ?? this.translationService.translate("search");
+    }, ...(ngDevMode ? [{ debugName: "buttonAriaLabel" }] : []));
+    feedbackId = computed(() => this.feedbackText() ? `${this.inputId()}-feedback` : null, ...(ngDevMode ? [{ debugName: "feedbackId" }] : []));
+    searchAriaLabel = computed(() => this.ariaLabel() ||
+        this.label() ||
+        this.placeholder() ||
+        this.translationService.translate("search"), ...(ngDevMode ? [{ debugName: "searchAriaLabel" }] : []));
+    onInputValue(value) {
+        this.value.set(value);
+        this.onChange(value);
+    }
+    onClear() {
+        this.clear.emit();
+        this.onTouched();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    emitSearch() {
+        this.searchEvent.emit(this.value());
+    }
+    focus() {
+        const input = this.inputRef()?.nativeElement;
+        input?.focus();
+    }
+    writeValue(value) {
+        this.value.set(value ?? "");
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchComponent, isStandalone: true, selector: "tedi-search", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searchEvent: "searchEvent", clear: "clear" }, host: { attributes: { "role": "search" }, properties: { "attr.aria-label": "searchAriaLabel()", "style.--tedi-search-field-height": "fieldHeight()", "class.tedi-search--button-icon-only": "!!button() && !button()?.text" }, classAttribute: "tedi-search" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SearchComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n  class=\"tedi-search__field\"\n  [size]=\"size()\"\n  [icon]=\"fieldIcon()\"\n  [clearable]=\"clearable() && !isDisabled()\"\n  [inputClass]=\"button() ? 'tedi-search__input--has-button' : null\"\n>\n  @if (label()) {\n    <label\n      tedi-label\n      [for]=\"inputId()\"\n      [size]=\"size() === 'small' ? 'small' : 'default'\"\n    >\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    #searchInput\n    tedi-text-field\n    type=\"text\"\n    role=\"searchbox\"\n    [id]=\"inputId()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-describedby]=\"feedbackId()\"\n    (valueChange)=\"onInputValue($event)\"\n    (clear)=\"onClear()\"\n    (keydown.enter)=\"emitSearch()\"\n    (blur)=\"onBlur()\"\n  />\n\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</tedi-form-field>\n\n@if (button(); as btn) {\n  <button\n    tedi-button\n    type=\"button\"\n    class=\"tedi-search__button\"\n    [variant]=\"btn.variant ?? 'primary'\"\n    [size]=\"buttonSize()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"buttonAriaLabel()\"\n    (click)=\"emitSearch()\"\n  >\n    <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n    @if (btn.text) {\n      {{ btn.text }}\n    }\n  </button>\n}\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search .tedi-search__input--has-button{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):active,.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):has(input:active){box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):focus-within,.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-search .tedi-form-field--valid .tedi-search__input--has-button:focus-within,.tedi-search .tedi-form-field--valid .tedi-search__input--has-button:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search .tedi-form-field--invalid .tedi-search__input--has-button:focus-within,.tedi-search .tedi-form-field--invalid .tedi-search__input--has-button:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-search", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        FormFieldComponent,
+                        TextFieldComponent,
+                        LabelComponent,
+                        FeedbackTextComponent,
+                        ButtonComponent,
+                        IconComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SearchComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        role: "search",
+                        class: "tedi-search",
+                        "[attr.aria-label]": "searchAriaLabel()",
+                        "[style.--tedi-search-field-height]": "fieldHeight()",
+                        "[class.tedi-search--button-icon-only]": "!!button() && !button()?.text",
+                    }, template: "<tedi-form-field\n  class=\"tedi-search__field\"\n  [size]=\"size()\"\n  [icon]=\"fieldIcon()\"\n  [clearable]=\"clearable() && !isDisabled()\"\n  [inputClass]=\"button() ? 'tedi-search__input--has-button' : null\"\n>\n  @if (label()) {\n    <label\n      tedi-label\n      [for]=\"inputId()\"\n      [size]=\"size() === 'small' ? 'small' : 'default'\"\n    >\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    #searchInput\n    tedi-text-field\n    type=\"text\"\n    role=\"searchbox\"\n    [id]=\"inputId()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-describedby]=\"feedbackId()\"\n    (valueChange)=\"onInputValue($event)\"\n    (clear)=\"onClear()\"\n    (keydown.enter)=\"emitSearch()\"\n    (blur)=\"onBlur()\"\n  />\n\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</tedi-form-field>\n\n@if (button(); as btn) {\n  <button\n    tedi-button\n    type=\"button\"\n    class=\"tedi-search__button\"\n    [variant]=\"btn.variant ?? 'primary'\"\n    [size]=\"buttonSize()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"buttonAriaLabel()\"\n    (click)=\"emitSearch()\"\n  >\n    <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n    @if (btn.text) {\n      {{ btn.text }}\n    }\n  </button>\n}\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search .tedi-search__input--has-button{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):active,.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):has(input:active){box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):focus-within,.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-search .tedi-form-field--valid .tedi-search__input--has-button:focus-within,.tedi-search .tedi-form-field--valid .tedi-search__input--has-button:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search .tedi-form-field--invalid .tedi-search__input--has-button:focus-within,.tedi-search .tedi-form-field--invalid .tedi-search__input--has-button:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}\n"] }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ["searchInput", { ...{ read: ElementRef }, isSignal: true }] }] } });
+
 class InfoTooltipComponent {
     /**
      * Position of the tooltip relative to the info button.
@@ -11782,118 +12077,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 args: ['inputElement']
             }] } });
 
-class FormFieldComponent {
-    /**
-     * The size of the form field.
-     * @default "default"
-     */
-    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /**
-     * Icon name or configuration object.
-     */
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-    /**
-     * Whether the form field includes a clear button.
-     * @default false
-     */
-    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
-    /**
-     * Custom CSS classes for the input.
-     */
-    inputClass = input(null, ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
-    control;
-    ngControl;
-    feedback;
-    destroyRef = inject(DestroyRef);
-    inputGroup = inject(TEDI_INPUT_GROUP, { optional: true });
-    constructor() {
-        effect(() => {
-            const invalid = this.computeInvalid();
-            this.control?.setInvalidState(invalid);
-        });
-    }
-    ngAfterContentInit() {
-        this.ngControl?.control?.events
-            ?.pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.updateValidationState());
-        this.updateValidationState();
-    }
-    updateValidationState() {
-        this.control?.setInvalidState(this.computeInvalid());
-    }
-    computeInvalid() {
-        const invalid = !!this.ngControl?.invalid;
-        const touched = !!this.ngControl?.touched;
-        const dirty = !!this.ngControl?.dirty;
-        const fieldInvalid = invalid && (touched || dirty);
-        return fieldInvalid || (this.inputGroup?.invalid() ?? false);
-    }
-    resolvedIcon = computed(() => {
-        const icon = this.icon();
-        if (!icon)
-            return undefined;
-        return typeof icon === "string" ? { name: icon } : icon;
-    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : []));
-    validationState = computed(() => {
-        const feedbackType = this.feedback?.type();
-        const fieldInvalid = this.control?.invalid?.() ?? false;
-        if (fieldInvalid || feedbackType === "error")
-            return "invalid";
-        if (feedbackType === "valid")
-            return "valid";
-        return "neutral";
-    }, ...(ngDevMode ? [{ debugName: "validationState" }] : []));
-    showClearButton = computed(() => {
-        const value = this.control?.value();
-        return this.clearable() && !!value;
-    }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
-    isDisabled = computed(() => (this.control?.disabled() ?? false) || (this.inputGroup?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    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.isDisabled(),
-            "tedi-form-field--small": this.size() === "small",
-            "tedi-form-field--large": this.size() === "large",
-            "tedi-form-field--with-icon": this.clearable() || !!this.icon(),
-        };
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    inputClasses = computed(() => {
-        const customClass = this.inputClass();
-        return {
-            "tedi-form-field__input": true,
-            ...(customClass ? { [customClass]: true } : {}),
-        };
-    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
-    clear() {
-        this.control?.clearField?.();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n  <ng-content select=\"input[tedi-text-field], tedi-time-field, tedi-date-field\"></ng-content>\n\n  @if (clearable()) {\n    <div\n      class=\"tedi-form-field__buttons\"\n      [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n      [attr.aria-hidden]=\"!showClearButton() || null\"\n    >\n      <button\n        class=\"tedi-form-field__clear\"\n        tedi-closing-button\n        type=\"button\"\n        size=\"small\"\n        [ariaLabel]=\"'clear' | tediTranslate\"\n        [iconSize]=\"18\"\n        [tabIndex]=\"showClearButton() ? 0 : -1\"\n        [disabled]=\"isDisabled() || !showClearButton()\"\n        (click)=\"clear()\"\n      ></button>\n\n      @if (icon()) {\n        <tedi-separator axis=\"vertical\" size=\"1rem\" />\n      }\n    </div>\n  }\n\n  @if (resolvedIcon(); as icon) {\n    <div class=\"tedi-form-field__icon\">\n      <tedi-icon\n        [name]=\"icon.name\"\n        [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n        [color]=\"icon.color ?? 'secondary'\"\n        [type]=\"icon.type ?? 'outlined'\"\n        [variant]=\"icon.variant ?? 'outlined'\"\n        [attr.aria-hidden]=\"true\"\n      />\n    </div>\n  }\n</div>\n\n@if (feedback) {\n  <div class=\"tedi-form-field__feedback\">\n    <ng-content select=\"tedi-feedback-text\"></ng-content>\n  </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n  <ng-content></ng-content>\n</div>\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:inset 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:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field--with-icon .tedi-form-field__input{padding-right:var(--form-field-padding-x-md-default)}.tedi-form-field--with-icon.tedi-form-field--large .tedi-form-field__input{padding-right:var(--form-field-padding-x-lg)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:active){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback,.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, decorators: [{
-            type: Component,
-            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], tedi-time-field, tedi-date-field\"></ng-content>\n\n  @if (clearable()) {\n    <div\n      class=\"tedi-form-field__buttons\"\n      [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n      [attr.aria-hidden]=\"!showClearButton() || null\"\n    >\n      <button\n        class=\"tedi-form-field__clear\"\n        tedi-closing-button\n        type=\"button\"\n        size=\"small\"\n        [ariaLabel]=\"'clear' | tediTranslate\"\n        [iconSize]=\"18\"\n        [tabIndex]=\"showClearButton() ? 0 : -1\"\n        [disabled]=\"isDisabled() || !showClearButton()\"\n        (click)=\"clear()\"\n      ></button>\n\n      @if (icon()) {\n        <tedi-separator axis=\"vertical\" size=\"1rem\" />\n      }\n    </div>\n  }\n\n  @if (resolvedIcon(); as icon) {\n    <div class=\"tedi-form-field__icon\">\n      <tedi-icon\n        [name]=\"icon.name\"\n        [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n        [color]=\"icon.color ?? 'secondary'\"\n        [type]=\"icon.type ?? 'outlined'\"\n        [variant]=\"icon.variant ?? 'outlined'\"\n        [attr.aria-hidden]=\"true\"\n      />\n    </div>\n  }\n</div>\n\n@if (feedback) {\n  <div class=\"tedi-form-field__feedback\">\n    <ng-content select=\"tedi-feedback-text\"></ng-content>\n  </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n  <ng-content></ng-content>\n</div>\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:inset 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:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field--with-icon .tedi-form-field__input{padding-right:var(--form-field-padding-x-md-default)}.tedi-form-field--with-icon.tedi-form-field--large .tedi-form-field__input{padding-right:var(--form-field-padding-x-lg)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:active){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled)):has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback,.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], control: [{
-                type: ContentChild,
-                args: [TEDI_FORM_FIELD_CONTROL]
-            }], ngControl: [{
-                type: ContentChild,
-                args: [NgControl]
-            }], feedback: [{
-                type: ContentChild,
-                args: [FeedbackTextComponent]
-            }] } });
-
 /**
  * Shared behavior for the prefix/suffix addon directives: reads the group's
  * disabled state and detects whether the addon holds plain text (so the
@@ -12712,6 +12895,11 @@ class TimeFieldComponent {
         this.onChange(null);
         this.inputElement().nativeElement.focus();
     }
+    focus() {
+        if (this.isDisabled())
+            return;
+        this.inputElement().nativeElement.focus();
+    }
     clearField() {
         this.clearInput();
     }
@@ -12865,7 +13053,7 @@ class TimeFieldComponent {
                 provide: TEDI_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TimeFieldComponent),
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.role]=\"null\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0;padding-right:var(--form-field-padding-x-md-default)}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.role]=\"null\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding:0;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
             type: Component,
@@ -12892,7 +13080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         },
                     ], host: {
                         class: "tedi-time-field",
-                    }, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.role]=\"null\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0;padding-right:var(--form-field-padding-x-md-default)}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
+                    }, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.role]=\"null\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding:0;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pickerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerVariant", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], pickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTrigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ["fieldEl", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ["popover", { isSignal: true }] }], timePicker: [{ type: i0.ViewChild, args: ["timePicker", { isSignal: true }] }] } });
 
 class TextGroupLabelComponent {
@@ -18291,7 +18479,7 @@ class HeaderRoleComponent {
     isTabletView = computed(() => this.breakpointService.isBelowBreakpoint("lg")(), ...(ngDevMode ? [{ debugName: "isTabletView" }] : []));
     hasRoleSelection = computed(() => this.showRoleSwitch() ?? this.representatives().length > 1, ...(ngDevMode ? [{ debugName: "hasRoleSelection" }] : []));
     popover = viewChild(PopoverComponent, ...(ngDevMode ? [{ debugName: "popover" }] : []));
-    searchInput = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    searchInput = viewChild(SearchComponent, ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
     previousPopoverOpen;
     parentProfile = inject(HeaderProfileComponent, {
         optional: true,
@@ -18307,7 +18495,7 @@ class HeaderRoleComponent {
         // popover's setTimeout and cause focus loss.
         effect(() => {
             if (this.popover()?.isOpen() && this.showSearch()) {
-                setTimeout(() => this.searchInput()?.nativeElement.focus());
+                setTimeout(() => this.searchInput()?.focus());
             }
         });
         effect(() => {
@@ -18379,11 +18567,9 @@ class HeaderRoleComponent {
         }
         this.popover()?.hidePopover();
     }
-    handleInputChange(event) {
-        const value = event.target.value;
+    handleInputChange(value) {
         this.inputValue.set(value);
     }
-    trackById = (_, r) => r.id;
     resolveIcon(icon) {
         if (!icon)
             return null;
@@ -18392,13 +18578,11 @@ class HeaderRoleComponent {
         return { name: icon.name, size: icon.size ?? 24 };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <ng-container *ngIf=\"hasRoleSelection(); else normalText\">\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon\n          name=\"expand_more\"\n          [size]=\"16\"\n          class=\"tedi-header-role__chevron\"\n        />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <div>\n      <label [attr.for]=\"inputId\">{{ searchText() }}</label>\n      <input\n        #searchInput\n        [id]=\"inputId\"\n        class=\"tedi-header-role__input\"\n        [value]=\"inputValue()\"\n        (input)=\"handleInputChange($event)\"\n      />\n    </div>\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  <button\n    *ngFor=\"let r of filteredRepresentatives(); trackBy: trackById\"\n    type=\"button\"\n    class=\"tedi-header-role__representative\"\n    [attr.data-selected]=\"r.id === currentRepresentative().id\"\n    (click)=\"handleSelectRepresentative(r)\"\n  >\n    @if (resolveIcon(r.icon); as icon) {\n      <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n    }\n    <div>\n      <div>{{ r.name }}</div>\n      @if (r.description) {\n        <div tedi-text modifiers=\"small\">\n          {{ r.description }}\n        </div>\n      }\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #normalText>\n  <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: SearchComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  @if (hasRoleSelection()) {\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon\n          name=\"expand_more\"\n          [size]=\"16\"\n          class=\"tedi-header-role__chevron\"\n        />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  } @else {\n    <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n  }\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <tedi-search\n      [inputId]=\"inputId\"\n      [label]=\"searchText()\"\n      [value]=\"inputValue()\"\n      [clearable]=\"searchClearable()\"\n      (valueChange)=\"handleInputChange($event)\"\n    />\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  @for (r of filteredRepresentatives(); track r.id) {\n    <button\n      type=\"button\"\n      class=\"tedi-header-role__representative\"\n      [attr.data-selected]=\"r.id === currentRepresentative().id\"\n      (click)=\"handleSelectRepresentative(r)\"\n    >\n      @if (resolveIcon(r.icon); as icon) {\n        <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n      }\n      <div>\n        <div>{{ r.name }}</div>\n        @if (r.description) {\n          <div tedi-text modifiers=\"small\">\n            {{ r.description }}\n          </div>\n        }\n      </div>\n    </button>\n  }\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: SearchComponent, selector: "tedi-search", inputs: ["inputId", "label", "value", "placeholder", "size", "clearable", "searchIcon", "disabled", "button", "feedbackText", "ariaLabel"], outputs: ["valueChange", "searchEvent", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-header-role", standalone: true, imports: [
-                        NgFor,
-                        NgIf,
                         NgTemplateOutlet,
                         PopoverComponent,
                         PopoverTriggerDirective,
@@ -18409,10 +18593,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         ShowAtDirective,
                         HideAtDirective,
                         SeparatorComponent,
+                        SearchComponent,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: "tedi-header-role",
-                    }, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  <ng-container *ngIf=\"hasRoleSelection(); else normalText\">\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon\n          name=\"expand_more\"\n          [size]=\"16\"\n          class=\"tedi-header-role__chevron\"\n        />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  </ng-container>\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <div>\n      <label [attr.for]=\"inputId\">{{ searchText() }}</label>\n      <input\n        #searchInput\n        [id]=\"inputId\"\n        class=\"tedi-header-role__input\"\n        [value]=\"inputValue()\"\n        (input)=\"handleInputChange($event)\"\n      />\n    </div>\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  <button\n    *ngFor=\"let r of filteredRepresentatives(); trackBy: trackById\"\n    type=\"button\"\n    class=\"tedi-header-role__representative\"\n    [attr.data-selected]=\"r.id === currentRepresentative().id\"\n    (click)=\"handleSelectRepresentative(r)\"\n  >\n    @if (resolveIcon(r.icon); as icon) {\n      <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n    }\n    <div>\n      <div>{{ r.name }}</div>\n      @if (r.description) {\n        <div tedi-text modifiers=\"small\">\n          {{ r.description }}\n        </div>\n      }\n    </div>\n  </button>\n</ng-template>\n\n<ng-template #normalText>\n  <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__input{gap:var(--form-field-inner-spacing);width:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], titleContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleTitleDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleContentDirective), { isSignal: true }] }], noResultsContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleNoResultsDirective), { isSignal: true }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchClearable", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], isOrganization: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOrganization", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], organizationSearchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "organizationSearchLabel", required: false }] }], showRoleSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRoleSwitch", required: false }] }], representatives: [{ type: i0.Input, args: [{ isSignal: true, alias: "representatives", required: true }] }], currentRepresentative: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRepresentative", required: true }] }, { type: i0.Output, args: ["currentRepresentativeChange"] }], roleSelectionToggle: [{ type: i0.Output, args: ["roleSelectionToggle"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }] } });
+                    }, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  @if (hasRoleSelection()) {\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon\n          name=\"expand_more\"\n          [size]=\"16\"\n          class=\"tedi-header-role__chevron\"\n        />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  } @else {\n    <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n  }\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <tedi-search\n      [inputId]=\"inputId\"\n      [label]=\"searchText()\"\n      [value]=\"inputValue()\"\n      [clearable]=\"searchClearable()\"\n      (valueChange)=\"handleInputChange($event)\"\n    />\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  @for (r of filteredRepresentatives(); track r.id) {\n    <button\n      type=\"button\"\n      class=\"tedi-header-role__representative\"\n      [attr.data-selected]=\"r.id === currentRepresentative().id\"\n      (click)=\"handleSelectRepresentative(r)\"\n    >\n      @if (resolveIcon(r.icon); as icon) {\n        <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n      }\n      <div>\n        <div>{{ r.name }}</div>\n        @if (r.description) {\n          <div tedi-text modifiers=\"small\">\n            {{ r.description }}\n          </div>\n        }\n      </div>\n    </button>\n  }\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], titleContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleTitleDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleContentDirective), { isSignal: true }] }], noResultsContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderRoleNoResultsDirective), { isSignal: true }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchClearable", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], isOrganization: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOrganization", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], organizationSearchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "organizationSearchLabel", required: false }] }], showRoleSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRoleSwitch", required: false }] }], representatives: [{ type: i0.Input, args: [{ isSignal: true, alias: "representatives", required: true }] }], currentRepresentative: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRepresentative", required: true }] }, { type: i0.Output, args: ["currentRepresentativeChange"] }], roleSelectionToggle: [{ type: i0.Output, args: ["roleSelectionToggle"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SearchComponent), { isSignal: true }] }] } });
 
 class HeaderSearchComponent {
     /**
@@ -19580,5 +19765,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map