@tedi-design-system/angular 8.1.0-rc.7 → 8.1.0-rc.9

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, DestroyRef, HostAttributeToken, viewChild, NgZone, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, linkedSignal, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, 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, DestroyRef, HostAttributeToken, viewChild, NgZone, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, numberAttribute, linkedSignal, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, ContentChild, 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';
@@ -8,7 +8,7 @@ import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, Common
 import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule } from '@angular/forms';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i2 from '@angular/cdk/a11y';
-import { _IdGenerator, CdkTrapFocus, A11yModule, LiveAnnouncer } from '@angular/cdk/a11y';
+import { _IdGenerator, CdkTrapFocus, A11yModule, LiveAnnouncer, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Dialog } from '@angular/cdk/dialog';
 import * as i1$2 from '@angular/cdk/scrolling';
@@ -1680,11 +1680,32 @@ const translationsMap = {
     },
     search: {
         description: "For searching",
-        components: ["TableFilter"],
+        components: ["TableFilter", "Search"],
         et: "Otsi",
         en: "Search",
         ru: "Поиск",
     },
+    "search.no-results": {
+        description: "Shown in the search suggestions panel when nothing matched",
+        components: ["Search"],
+        et: "Tulemusi ei leitud",
+        en: "No results found",
+        ru: "Результаты не найдены",
+    },
+    "search.loading": {
+        description: "Shown in the search suggestions panel while results load",
+        components: ["Search"],
+        et: "Otsin...",
+        en: "Searching...",
+        ru: "Поиск...",
+    },
+    "search.results-count": {
+        description: "Announced politely to screen readers when the number of Search suggestions changes",
+        components: ["Search"],
+        et: (count) => `${count} ${count === 1 ? "vaste" : "vastet"}`,
+        en: (count) => `${count} ${count === 1 ? "result" : "results"}`,
+        ru: (count) => `Совпадений: ${count}`,
+    },
     required: {
         description: "Required field",
         components: ["TableFilter"],
@@ -2346,7 +2367,7 @@ const translationsMap = {
         components: ["Table", "Pagination"],
         et: (count) => `${count ?? 0} ${count === 1 ? "tulemus" : "tulemust"}`,
         en: (count) => `${count ?? 0} ${count === 1 ? "result" : "results"}`,
-        ru: (count) => `${count ?? 0} ${count === 1 ? "результат" : "результа"}`,
+        ru: (count) => `Результатов: ${count ?? 0}`,
     },
     "pagination.page-size": {
         description: "Label of page size select",
@@ -4988,6 +5009,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, template: "<ng-content></ng-content>\n", styles: ["@charset \"UTF-8\";.tedi-card-header--background--accent{background-color:var(--card-background-accent)}.tedi-card-header--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-header--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-header--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-header--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-header--background--primary{background-color:var(--card-background-primary)}.tedi-card-header--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-header--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-header--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-header--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-header--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-header--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-header--background--success-primary{background-color:var(--card-background-success)}.tedi-card-header--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-header--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-header--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-header--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-header--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-header--background--brand-primary,.tedi-card-header--background--brand-secondary{color:var(--general-text-white)}.tedi-card-header{display:block;flex:0 0 auto;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}@media print{.tedi-card-header{color:var(--general-text-primary);background:var(--card-background-primary);border-bottom:1px solid var(--card-border-primary)}}\n"] }]
         }] });
 
+const isHeadingModifier = (modifier) => /^h[1-6]$/.test(modifier);
+class HeadingWithIconComponent {
+    /**
+     * Name of the Material Icon
+     * https://fonts.google.com/icons
+     *
+     * Rendered as decorative and hidden from assistive technology — the
+     * projected text is the accessible heading name.
+     */
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /**
+     * Semantic heading tag. Also sets the typography unless a heading modifier
+     * overrides it, so pick the tag that fits the surrounding document outline.
+     * @default h4
+     */
+    element = input("h4", ...(ngDevMode ? [{ debugName: "element" }] : []));
+    /**
+     * Single or multiple modifiers to change the heading behavior. A heading
+     * modifier here styles the heading as that level while `element` keeps the
+     * semantics — e.g. an `h2` that looks like an `h4`.
+     */
+    modifiers = input(...(ngDevMode ? [undefined, { debugName: "modifiers" }] : []));
+    /**
+     * Heading text color.
+     * @default primary
+     */
+    headingColor = input("primary", ...(ngDevMode ? [{ debugName: "headingColor" }] : []));
+    /**
+     * Color of the icon.
+     * @default primary
+     */
+    iconColor = input("primary", ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    /**
+     * Size of the icon in pixels.
+     * @default 24
+     */
+    iconSize = input(24, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    /**
+     * Whether the icon should be filled or outlined.
+     * @default outlined
+     */
+    iconVariant = input("outlined", ...(ngDevMode ? [{ debugName: "iconVariant" }] : []));
+    // A heading modifier wins on specificity over the `element` tag in core's CSS,
+    // so `element="h2" modifiers="h4"` renders at h4's line height — which is what
+    // the icon has to be centered against.
+    visualLevel = computed(() => {
+        const modifiers = this.modifiers();
+        const modifierList = Array.isArray(modifiers)
+            ? modifiers
+            : modifiers
+                ? [modifiers]
+                : [];
+        return modifierList.find(isHeadingModifier) ?? this.element();
+    }, ...(ngDevMode ? [{ debugName: "visualLevel" }] : []));
+    lineHeightVar = computed(() => `var(--heading-${this.visualLevel()}-line-height)`, ...(ngDevMode ? [{ debugName: "lineHeightVar" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeadingWithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeadingWithIconComponent, isStandalone: true, selector: "tedi-heading-with-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, headingColor: { classPropertyName: "headingColor", publicName: "headingColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_tedi-heading-with-icon-line-height": "lineHeightVar()" }, classAttribute: "tedi-heading-with-icon" }, ngImport: i0, template: "<tedi-icon\n  class=\"tedi-heading-with-icon__icon\"\n  [name]=\"icon()\"\n  [color]=\"iconColor()\"\n  [size]=\"iconSize()\"\n  [variant]=\"iconVariant()\"\n/>\n\n@switch (element()) {\n  @case (\"h1\") {\n    <h1\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h1>\n  }\n  @case (\"h2\") {\n    <h2\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h2>\n  }\n  @case (\"h3\") {\n    <h3\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h3>\n  }\n  @case (\"h4\") {\n    <h4\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h4>\n  }\n  @case (\"h5\") {\n    <h5\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h5>\n  }\n  @case (\"h6\") {\n    <h6\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h6>\n  }\n}\n\n<ng-template #heading><ng-content></ng-content></ng-template>\n", styles: [".tedi-heading-with-icon{display:flex;gap:var(--content-heading-inner-spacing-x);align-items:flex-start}.tedi-heading-with-icon__icon{height:var(--_tedi-heading-with-icon-line-height)}.tedi-heading-with-icon__heading{flex:1;min-width:0;overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeadingWithIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-heading-with-icon", standalone: true, imports: [NgTemplateOutlet, IconComponent, TextComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: "tedi-heading-with-icon",
+                        "[style.--_tedi-heading-with-icon-line-height]": "lineHeightVar()",
+                    }, template: "<tedi-icon\n  class=\"tedi-heading-with-icon__icon\"\n  [name]=\"icon()\"\n  [color]=\"iconColor()\"\n  [size]=\"iconSize()\"\n  [variant]=\"iconVariant()\"\n/>\n\n@switch (element()) {\n  @case (\"h1\") {\n    <h1\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h1>\n  }\n  @case (\"h2\") {\n    <h2\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h2>\n  }\n  @case (\"h3\") {\n    <h3\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h3>\n  }\n  @case (\"h4\") {\n    <h4\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h4>\n  }\n  @case (\"h5\") {\n    <h5\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h5>\n  }\n  @case (\"h6\") {\n    <h6\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h6>\n  }\n}\n\n<ng-template #heading><ng-content></ng-content></ng-template>\n", styles: [".tedi-heading-with-icon{display:flex;gap:var(--content-heading-inner-spacing-x);align-items:flex-start}.tedi-heading-with-icon__icon{height:var(--_tedi-heading-with-icon-line-height)}.tedi-heading-with-icon__heading{flex:1;min-width:0;overflow-wrap:break-word}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], headingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingColor", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }] } });
+
 class ListComponent {
     /**
      * Is list styled?
@@ -11196,6 +11283,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             descendants: true,
                         }, isSignal: true }] }] } });
 
+/** Splits `text` so the segment matching `query` can be emphasised. */
+function highlightParts(text, query) {
+    const trimmed = query.trim();
+    const index = trimmed
+        ? text.toLowerCase().indexOf(trimmed.toLowerCase())
+        : -1;
+    if (index === -1) {
+        return [{ text, match: false }];
+    }
+    const parts = [];
+    if (index > 0) {
+        parts.push({ text: text.slice(0, index), match: false });
+    }
+    parts.push({
+        text: text.slice(index, index + trimmed.length),
+        match: true,
+    });
+    if (index + trimmed.length < text.length) {
+        parts.push({ text: text.slice(index + trimmed.length), match: false });
+    }
+    return parts;
+}
+
+class SearchSuggestionComponent {
+    /** Resolved display label. */
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Secondary line under the label. */
+    description = input("", ...(ngDevMode ? [{ debugName: "description" }] : []));
+    /** Current field value, used to bold the matching segment. */
+    query = input("", ...(ngDevMode ? [{ debugName: "query" }] : []));
+    /** Whether a custom suggestion template supplies the row content. */
+    custom = input(false, ...(ngDevMode ? [{ debugName: "custom", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", 
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            alias: "disabled",
+            transform: booleanAttribute }] : [{
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            alias: "disabled",
+            transform: booleanAttribute,
+        }]));
+    host = inject(ElementRef);
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    isActive = this.active.asReadonly();
+    parts = computed(() => highlightParts(this.label(), this.query()), ...(ngDevMode ? [{ debugName: "parts" }] : []));
+    /**
+     * `Highlightable` requires a plain boolean, so the signal input is aliased and
+     * this getter satisfies the CDK contract — a signal would always read truthy.
+     */
+    get disabled() {
+        return this.disabledInput();
+    }
+    setActiveStyles() {
+        this.active.set(true);
+    }
+    setInactiveStyles() {
+        this.active.set(false);
+    }
+    getLabel() {
+        return this.label();
+    }
+    scrollIntoView() {
+        this.host.nativeElement.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchSuggestionComponent, isStandalone: true, selector: "li[tedi-search-suggestion]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, custom: { classPropertyName: "custom", publicName: "custom", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option", "tabindex": "-1" }, properties: { "class.tedi-search-suggestion--active": "isActive()", "class.tedi-search-suggestion--custom": "custom()", "class.tedi-search-suggestion--disabled": "disabledInput()", "attr.aria-selected": "isActive()", "attr.aria-disabled": "disabledInput() || null" }, classAttribute: "tedi-search-suggestion" }, ngImport: i0, template: "@if (custom()) {\n  <ng-content />\n} @else {\n  <span class=\"tedi-search-suggestion__label\">\n    @for (part of parts(); track $index) {\n      <span tedi-text [modifiers]=\"part.match ? 'bold' : undefined\">{{\n        part.text\n      }}</span>\n    }\n  </span>\n\n  @if (description()) {\n    <span\n      tedi-text\n      class=\"tedi-search-suggestion__description\"\n      color=\"tertiary\"\n      modifiers=\"small\"\n      >{{ description() }}</span\n    >\n  }\n}\n", styles: [".tedi-search-suggestion{display:block;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:inherit;cursor:pointer;background:transparent}.tedi-search-suggestion:hover,.tedi-search-suggestion--active{background:var(--dropdown-item-hover-background)}.tedi-search-suggestion--custom{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center}.tedi-search-suggestion--disabled,.tedi-search-suggestion--disabled:hover{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-search-suggestion--disabled [class*=tedi-text--]{color:inherit}.tedi-search-suggestion__label,.tedi-search-suggestion__description{display:block}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchSuggestionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "li[tedi-search-suggestion]", standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TextComponent], host: {
+                        class: "tedi-search-suggestion",
+                        role: "option",
+                        tabindex: "-1",
+                        "[class.tedi-search-suggestion--active]": "isActive()",
+                        "[class.tedi-search-suggestion--custom]": "custom()",
+                        "[class.tedi-search-suggestion--disabled]": "disabledInput()",
+                        "[attr.aria-selected]": "isActive()",
+                        "[attr.aria-disabled]": "disabledInput() || null",
+                    }, template: "@if (custom()) {\n  <ng-content />\n} @else {\n  <span class=\"tedi-search-suggestion__label\">\n    @for (part of parts(); track $index) {\n      <span tedi-text [modifiers]=\"part.match ? 'bold' : undefined\">{{\n        part.text\n      }}</span>\n    }\n  </span>\n\n  @if (description()) {\n    <span\n      tedi-text\n      class=\"tedi-search-suggestion__description\"\n      color=\"tertiary\"\n      modifiers=\"small\"\n      >{{ description() }}</span\n    >\n  }\n}\n", styles: [".tedi-search-suggestion{display:block;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:inherit;cursor:pointer;background:transparent}.tedi-search-suggestion:hover,.tedi-search-suggestion--active{background:var(--dropdown-item-hover-background)}.tedi-search-suggestion--custom{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center}.tedi-search-suggestion--disabled,.tedi-search-suggestion--disabled:hover{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-search-suggestion--disabled [class*=tedi-text--]{color:inherit}.tedi-search-suggestion__label,.tedi-search-suggestion__description{display:block}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], custom: [{ type: i0.Input, args: [{ isSignal: true, alias: "custom", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Renders each suggestion row. Without it, rows show the resolved label with the
+ * matched substring bolded.
+ *
+ * @example
+ * ```html
+ * <tedi-search [suggestions]="people" bindLabel="name">
+ *   <ng-template tediSearchSuggestion let-item>
+ *     <span tedi-text modifiers="bold">{{ item.name }}</span>
+ *     <span tedi-text color="tertiary">{{ item.code }}</span>
+ *   </ng-template>
+ * </tedi-search>
+ * ```
+ */
+class SearchSuggestionTemplateDirective {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchSuggestionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: SearchSuggestionTemplateDirective, isStandalone: true, selector: "[tediSearchSuggestion]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchSuggestionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediSearchSuggestion]",
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Extra content pinned below the suggestions — fallback actions and a hint, for
+ * example. It shows whenever the panel is open, including the no-results state,
+ * which is what makes it useful for "nothing matched, try this instead".
+ *
+ * Suggestions keep behaving exactly as they do without it: filtering, arrow-key
+ * navigation and Enter to select are unchanged. Tab moves from the field into the
+ * footer's controls.
+ *
+ * @example
+ * ```html
+ * <tedi-search [suggestions]="matches()">
+ *   <ng-template tediSearchFooter>
+ *     <tedi-search-footer-actions>
+ *       <button tedi-button variant="secondary">Isik teadmata</button>
+ *     </tedi-search-footer-actions>
+ *   </ng-template>
+ * </tedi-search>
+ * ```
+ */
+class SearchFooterTemplateDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: SearchFooterTemplateDirective, isStandalone: true, selector: "[tediSearchFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediSearchFooter]",
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Flush against the field, flipping above when it would overflow. The panel
+ * border meets the field border, so there is no offset.
+ */
+const SEARCH_OVERLAY_POSITIONS = [
+    { originX: "start", originY: "bottom", overlayX: "start", overlayY: "top" },
+    { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom" },
+];
 class SearchComponent {
     /**
      * Unique identifier for the input element, used to associate the label.
@@ -11246,6 +11486,62 @@ class SearchComponent {
      * `placeholder`, then the translated "search" label.
      */
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /**
+     * Suggestions to show in the panel, already filtered by the consumer. Bind an
+     * empty array to keep the combobox behaviour while nothing matches; leave it
+     * unbound for a plain search field.
+     */
+    suggestions = input(undefined, ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    /**
+     * Property holding the display label when suggestions are objects.
+     * @default "label"
+     */
+    bindLabel = input("label", ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
+    /**
+     * Property holding a secondary line shown under the label. Unset by default,
+     * so rows are a single line unless asked for.
+     */
+    bindDescription = input(...(ngDevMode ? [undefined, { debugName: "bindDescription" }] : []));
+    /**
+     * Property marking a suggestion as unselectable. Disabled rows are greyed out
+     * and skipped by keyboard navigation.
+     * @default "disabled"
+     */
+    bindDisabled = input("disabled", ...(ngDevMode ? [{ debugName: "bindDisabled" }] : []));
+    /**
+     * Characters required before the panel opens. Below it nothing is shown, not
+     * even the no-results row, so short queries stay quiet.
+     * @default 0
+     */
+    minQueryLength = input(0, ...(ngDevMode ? [{ debugName: "minQueryLength", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /**
+     * Shows a loading row instead of results.
+     * @default false
+     */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Closes the suggestion panel when the page (or a scrollable ancestor)
+     * scrolls. Scrolling the option list itself keeps the panel open.
+     * @default false
+     */
+    hideOnScroll = input(false, ...(ngDevMode ? [{ debugName: "hideOnScroll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Whether the suggestion panel is open.
+     * @default false
+     */
+    panelOpen = model(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : []));
+    /**
+     * Overrides the translated "no results" row.
+     */
+    noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : []));
+    /**
+     * Overrides the translated loading row.
+     */
+    loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : []));
+    /**
+     * Overrides the translated screen-reader result count.
+     */
+    resultsCountText = input(...(ngDevMode ? [undefined, { debugName: "resultsCountText" }] : []));
     /**
      * Emitted when the search is executed (Enter key or button click).
      */
@@ -11254,11 +11550,41 @@ class SearchComponent {
      * Emitted when the clear button is clicked.
      */
     clear = output();
+    /**
+     * Emitted when a suggestion is accepted. The field is filled with its label.
+     */
+    suggestionSelect = output();
+    suggestionTemplate = contentChild(SearchSuggestionTemplateDirective, ...(ngDevMode ? [{ debugName: "suggestionTemplate" }] : []));
+    footerTemplate = contentChild(SearchFooterTemplateDirective, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
     inputRef = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "inputRef", read: ElementRef }] : [{ read: ElementRef }]));
+    overlayOrigin = viewChild.required(CdkOverlayOrigin);
+    connectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : []));
+    suggestionRows = viewChildren(SearchSuggestionComponent, ...(ngDevMode ? [{ debugName: "suggestionRows" }] : []));
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    hostElement = inject(ElementRef);
     translationService = inject(TediTranslationService);
+    renderer = inject(Renderer2);
+    document = inject(DOCUMENT);
+    injector = inject(Injector);
+    scrollListener;
     onChange = () => { };
     onTouched = () => { };
+    /** Suppresses the focus-driven reopen after a selection, until the next edit. */
+    justSelected = false;
+    /**
+     * Navigation is driven from `event.key` via the explicit `set*ItemActive`
+     * methods rather than `keyManager.onKeydown`, which switches on the deprecated
+     * `event.keyCode` and so ignores synthesised events.
+     */
+    keyManager = new ActiveDescendantKeyManager(this.suggestionRows, this.injector).withWrap();
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    overlayPositions = SEARCH_OVERLAY_POSITIONS;
+    panelWidth = signal(0, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    /**
+     * True while the panel sits above the field on the fallback position, so the
+     * rounded edge can move to the side that is not joined to the field.
+     */
+    panelAbove = signal(false, ...(ngDevMode ? [{ debugName: "panelAbove" }] : []));
     isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     fieldIcon = computed(() => this.button() ? undefined : this.searchIcon(), ...(ngDevMode ? [{ debugName: "fieldIcon" }] : []));
     fieldHeight = computed(() => {
@@ -11290,9 +11616,90 @@ class SearchComponent {
      * otherwise `aria-label` would silently override the visible text.
      */
     inputAriaLabel = computed(() => this.label() ? null : this.searchAriaLabel(), ...(ngDevMode ? [{ debugName: "inputAriaLabel" }] : []));
+    /**
+     * Derived from capability, never from current content — an empty
+     * `suggestions` array still means the consumer opted into the combobox.
+     */
+    autocomplete = computed(() => this.suggestions() !== undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+    resolvedSuggestions = computed(() => {
+        const items = this.suggestions() ?? [];
+        const bindLabel = this.bindLabel();
+        const bindDescription = this.bindDescription();
+        const bindDisabled = this.bindDisabled();
+        return items.map((item) => {
+            const record = item !== null && typeof item === "object"
+                ? item
+                : undefined;
+            return {
+                item,
+                label: record ? String(record[bindLabel] ?? item) : String(item),
+                description: record && bindDescription
+                    ? String(record[bindDescription] ?? "")
+                    : "",
+                disabled: !!record?.[bindDisabled],
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "resolvedSuggestions" }] : []));
+    query = computed(() => this.value().trim(), ...(ngDevMode ? [{ debugName: "query" }] : []));
+    hasSuggestions = computed(() => !this.loading() && this.resolvedSuggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : []));
+    listboxId = computed(() => `${this.inputId()}-listbox`, ...(ngDevMode ? [{ debugName: "listboxId" }] : []));
+    meetsMinQueryLength = computed(() => this.query().length >= this.minQueryLength(), ...(ngDevMode ? [{ debugName: "meetsMinQueryLength" }] : []));
+    panelVisible = computed(() => {
+        if (!this.autocomplete() || !this.panelOpen())
+            return false;
+        if (!this.meetsMinQueryLength())
+            return false;
+        return this.loading() || this.hasSuggestions() || this.query().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "panelVisible" }] : []));
+    inputRole = computed(() => this.autocomplete() ? "combobox" : "searchbox", ...(ngDevMode ? [{ debugName: "inputRole" }] : []));
+    ariaAutocomplete = computed(() => this.autocomplete() ? "list" : null, ...(ngDevMode ? [{ debugName: "ariaAutocomplete" }] : []));
+    ariaExpanded = computed(() => this.autocomplete() ? this.panelVisible() : null, ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : []));
+    ariaControls = computed(() => this.panelVisible() && this.hasSuggestions() ? this.listboxId() : null, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
+    activeOptionId = computed(() => {
+        const index = this.activeIndex();
+        return index >= 0 ? this.optionId(index) : null;
+    }, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
+    resolvedNoResultsText = computed(() => this.noResultsText() ??
+        this.translationService.translate("search.no-results"), ...(ngDevMode ? [{ debugName: "resolvedNoResultsText" }] : []));
+    resolvedLoadingText = computed(() => this.loadingText() ?? this.translationService.translate("search.loading"), ...(ngDevMode ? [{ debugName: "resolvedLoadingText" }] : []));
+    announcement = computed(() => {
+        if (!this.panelVisible())
+            return "";
+        if (this.loading())
+            return this.resolvedLoadingText();
+        const count = this.resolvedSuggestions().length;
+        if (!count)
+            return this.resolvedNoResultsText();
+        const override = this.resultsCountText();
+        return override
+            ? override(count)
+            : this.translationService.translate("search.results-count", count);
+    }, ...(ngDevMode ? [{ debugName: "announcement" }] : []));
+    constructor() {
+        this.keyManager.change.pipe(takeUntilDestroyed()).subscribe((index) => {
+            this.activeIndex.set(index);
+            this.keyManager.activeItem?.scrollIntoView();
+        });
+        // A stale active index would point at a different item once results change.
+        // The reset runs untracked because `setActiveItem` reads the option query,
+        // which would otherwise make this effect re-run on every render and clear
+        // the option the user just highlighted.
+        effect(() => {
+            this.resolvedSuggestions();
+            untracked(() => this.resetActiveOption());
+        });
+        inject(DestroyRef).onDestroy(() => this.cleanupScrollListener());
+    }
+    optionId(index) {
+        return `${this.inputId()}-opt-${index}`;
+    }
     onInputValue(value) {
+        this.justSelected = false;
         this.value.set(value);
         this.onChange(value);
+        if (this.autocomplete()) {
+            this.openPanel();
+        }
     }
     onClear() {
         this.clear.emit();
@@ -11301,6 +11708,170 @@ class SearchComponent {
     onBlur() {
         this.onTouched();
     }
+    onInputFocus() {
+        if (this.justSelected) {
+            this.justSelected = false;
+            return;
+        }
+        this.openPanel();
+    }
+    openPanel() {
+        if (!this.autocomplete())
+            return;
+        this.panelWidth.set(this.hostElement.nativeElement.offsetWidth);
+        this.panelOpen.set(true);
+    }
+    closePanel() {
+        this.cleanupScrollListener();
+        this.panelOpen.set(false);
+        // The options leave the DOM with the panel, so a lingering active index
+        // would leave `aria-activedescendant` pointing at a removed element.
+        this.resetActiveOption();
+    }
+    onPositionChange(change) {
+        this.panelAbove.set(change.connectionPair.overlayY === "bottom");
+    }
+    onOverlayAttach() {
+        if (this.hideOnScroll()) {
+            this.setupScrollListener();
+        }
+    }
+    onOverlayDetach() {
+        this.cleanupScrollListener();
+    }
+    /**
+     * Listens on the document in the capture phase so scrolls in any ancestor are
+     * seen — a scroll event does not bubble past the element that scrolled.
+     */
+    setupScrollListener() {
+        this.cleanupScrollListener();
+        this.scrollListener = this.renderer.listen(this.document, "scroll", (event) => {
+            if (!this.panelVisible())
+                return;
+            // Scrolling inside the component is not the page moving away from it:
+            // the option list scrolls its own rows.
+            const target = event.target;
+            const insideSearch = !!target &&
+                (this.hostElement.nativeElement.contains(target) ||
+                    !!this.panelElement()?.contains(target));
+            if (insideSearch)
+                return;
+            this.closePanel();
+        }, { capture: true, passive: true });
+    }
+    cleanupScrollListener() {
+        if (this.scrollListener) {
+            this.scrollListener();
+            this.scrollListener = undefined;
+        }
+    }
+    /** Closes the panel and hands focus back to the input. */
+    closeAndRestoreFocus() {
+        this.closePanel();
+        this.justSelected = true;
+        this.focus();
+    }
+    onKeydown(event) {
+        if (!this.autocomplete()) {
+            if (event.key === "Enter")
+                this.emitSearch();
+            return;
+        }
+        switch (event.key) {
+            case "Escape":
+                this.closePanel();
+                return;
+            case "ArrowDown":
+            case "ArrowUp":
+                event.preventDefault();
+                this.onArrowKey(event);
+                return;
+            case "Tab":
+                this.onTabFromInput(event);
+                return;
+            case "Enter":
+                this.onEnter(event);
+                return;
+        }
+    }
+    /**
+     * Footer controls live in the overlay, which sits at the end of the document,
+     * so they are not next in tab order. Tab reaches them explicitly; without this
+     * they would be mouse-only.
+     */
+    onTabFromInput(event) {
+        if (event.shiftKey || !this.panelVisible())
+            return;
+        const first = this.footerFocusables()[0];
+        if (!first)
+            return;
+        event.preventDefault();
+        first.focus();
+    }
+    /**
+     * Tabbing past the footer leaves the component: close the panel and continue to
+     * whatever follows the field in document order, so the footer is not a trap.
+     */
+    onFooterKeydown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            this.closeAndRestoreFocus();
+            return;
+        }
+        if (event.key !== "Tab")
+            return;
+        const focusables = this.footerFocusables();
+        const index = focusables.indexOf(event.target);
+        if (event.shiftKey && index === 0) {
+            event.preventDefault();
+            this.justSelected = true;
+            this.focus();
+            return;
+        }
+        if (!event.shiftKey && index === focusables.length - 1) {
+            event.preventDefault();
+            this.closePanel();
+            this.focusAfterField();
+        }
+    }
+    footerFocusables() {
+        const footer = this.panelElement()?.querySelector(".tedi-search__footer");
+        return footer ? getFocusableElements(footer) : [];
+    }
+    focusAfterField() {
+        const input = this.inputRef()?.nativeElement;
+        if (!input)
+            return;
+        const panel = this.panelElement();
+        const focusables = getFocusableElements(this.hostElement.nativeElement.ownerDocument.body).filter((el) => !panel?.contains(el));
+        const next = focusables[focusables.indexOf(input) + 1];
+        next?.focus();
+    }
+    selectSuggestion(suggestion) {
+        if (suggestion.disabled)
+            return;
+        this.justSelected = true;
+        this.value.set(suggestion.label);
+        this.onChange(suggestion.label);
+        this.suggestionSelect.emit(suggestion.item);
+        this.closePanel();
+    }
+    /**
+     * The panel is portalled into the overlay container, so it is not a descendant
+     * of the host — both roots have to be consulted before deciding focus left.
+     */
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next) {
+            this.closePanel();
+            return;
+        }
+        const stillInside = this.hostElement.nativeElement.contains(next) ||
+            !!this.panelElement()?.contains(next);
+        if (!stillInside) {
+            this.closePanel();
+        }
+    }
     emitSearch() {
         this.searchEvent.emit(this.value());
     }
@@ -11320,14 +11891,47 @@ class SearchComponent {
     setDisabledState(isDisabled) {
         this.formDisabled.set(isDisabled);
     }
+    onArrowKey(event) {
+        if (!this.panelVisible()) {
+            this.openPanel();
+            return;
+        }
+        if (!this.hasSuggestions())
+            return;
+        if (event.key === "ArrowDown") {
+            this.keyManager.setNextItemActive();
+        }
+        else {
+            this.keyManager.setPreviousItemActive();
+        }
+    }
+    onEnter(event) {
+        const active = this.keyManager.activeItem;
+        const index = this.activeIndex();
+        if (this.panelVisible() && active && index >= 0) {
+            event.preventDefault();
+            const suggestion = this.resolvedSuggestions()[index];
+            if (suggestion)
+                this.selectSuggestion(suggestion);
+            return;
+        }
+        this.emitSearch();
+    }
+    panelElement() {
+        return this.connectedOverlay()?.overlayRef?.overlayElement;
+    }
+    resetActiveOption() {
+        this.keyManager.setActiveItem(-1);
+        this.activeIndex.set(-1);
+    }
     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", "class.tedi-search--has-button": "!!button()" }, classAttribute: "tedi-search" }, providers: [
+    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 }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindDescription: { classPropertyName: "bindDescription", publicName: "bindDescription", isSignal: true, isRequired: false, transformFunction: null }, bindDisabled: { classPropertyName: "bindDisabled", publicName: "bindDisabled", isSignal: true, isRequired: false, transformFunction: null }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, panelOpen: { classPropertyName: "panelOpen", publicName: "panelOpen", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, resultsCountText: { classPropertyName: "resultsCountText", publicName: "resultsCountText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", panelOpen: "panelOpenChange", searchEvent: "searchEvent", clear: "clear", suggestionSelect: "suggestionSelect" }, host: { attributes: { "role": "search" }, listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.aria-label": "searchAriaLabel()", "style.--tedi-search-field-height": "fieldHeight()", "class.tedi-search--button-icon-only": "!!button() && !button()?.text", "class.tedi-search--has-button": "!!button()" }, 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>\n  @if (label()) {\n    <label tedi-label [for]=\"inputId()\">\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-label]=\"inputAriaLabel()\"\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      [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--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "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 });
+        ], queries: [{ propertyName: "suggestionTemplate", first: true, predicate: SearchSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SearchFooterTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "suggestionRows", predicate: SearchSuggestionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n  class=\"tedi-search__field\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  [size]=\"size()\"\n  [icon]=\"fieldIcon()\"\n  [clearable]=\"clearable() && !isDisabled()\"\n>\n  @if (label()) {\n    <label tedi-label [for]=\"inputId()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    #searchInput\n    tedi-text-field\n    type=\"text\"\n    [attr.role]=\"inputRole()\"\n    [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [id]=\"inputId()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"inputAriaLabel()\"\n    (valueChange)=\"onInputValue($event)\"\n    (clear)=\"onClear()\"\n    (focus)=\"onInputFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (feedbackText(); as feedback) {\n    <tedi-feedback-text\n      [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\n<div\n  class=\"tedi-search__announcement sr-only\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  {{ announcement() }}\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"panelVisible()\"\n  [cdkConnectedOverlayWidth]=\"panelWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayDisableClose]=\"true\"\n  (overlayOutsideClick)=\"closePanel()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <div\n    class=\"tedi-search__panel\"\n    [class.tedi-search__panel--above]=\"panelAbove()\"\n  >\n    @if (loading()) {\n      <div class=\"tedi-search__panel-status\">\n        <tedi-spinner [size]=\"16\" />\n        <span tedi-text color=\"tertiary\">{{ resolvedLoadingText() }}</span>\n      </div>\n    } @else if (hasSuggestions()) {\n      <ul class=\"tedi-search__panel-list\" role=\"listbox\" [id]=\"listboxId()\">\n        @for (\n          suggestion of resolvedSuggestions();\n          track suggestion.label + $index;\n          let i = $index\n        ) {\n          <li\n            tedi-search-suggestion\n            [label]=\"suggestion.label\"\n            [description]=\"suggestion.description\"\n            [disabled]=\"suggestion.disabled\"\n            [query]=\"query()\"\n            [custom]=\"!!suggestionTemplate()\"\n            [id]=\"optionId(i)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"selectSuggestion(suggestion)\"\n          >\n            @if (suggestionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: suggestion.item,\n                  item: suggestion.item,\n                  index: i,\n                  label: suggestion.label,\n                  description: suggestion.description,\n                  disabled: suggestion.disabled,\n                  query: query(),\n                }\"\n              />\n            }\n          </li>\n        }\n      </ul>\n    } @else {\n      <div class=\"tedi-search__panel-status\">\n        <span tedi-text color=\"tertiary\">{{ resolvedNoResultsText() }}</span>\n      </div>\n    }\n\n    @if (footerTemplate(); as footer) {\n      <div\n        class=\"tedi-search__footer\"\n        (keydown)=\"onFooterKeydown($event)\"\n        (focusout)=\"onFocusOut($event)\"\n      >\n        <ng-container [ngTemplateOutlet]=\"footer.template\" />\n      </div>\n    }\n  </div>\n</ng-template>\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--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:0 0 var(--form-select-area-radius) var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel--above{border-radius:var(--form-select-area-radius) var(--form-select-area-radius) 0 0}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "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"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: SearchSuggestionComponent, selector: "li[tedi-search-suggestion]", inputs: ["label", "description", "query", "custom", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
@@ -11338,6 +11942,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         FeedbackTextComponent,
                         ButtonComponent,
                         IconComponent,
+                        TextComponent,
+                        SpinnerComponent,
+                        SearchSuggestionComponent,
+                        OverlayModule,
+                        NgTemplateOutlet,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -11347,12 +11956,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     ], host: {
                         role: "search",
                         class: "tedi-search",
+                        "(focusout)": "onFocusOut($event)",
                         "[attr.aria-label]": "searchAriaLabel()",
                         "[style.--tedi-search-field-height]": "fieldHeight()",
                         "[class.tedi-search--button-icon-only]": "!!button() && !button()?.text",
                         "[class.tedi-search--has-button]": "!!button()",
-                    }, template: "<tedi-form-field\n  class=\"tedi-search__field\"\n  [size]=\"size()\"\n  [icon]=\"fieldIcon()\"\n  [clearable]=\"clearable() && !isDisabled()\"\n>\n  @if (label()) {\n    <label tedi-label [for]=\"inputId()\">\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-label]=\"inputAriaLabel()\"\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      [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--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}\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 }] }] } });
+                    }, template: "<tedi-form-field\n  class=\"tedi-search__field\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  [size]=\"size()\"\n  [icon]=\"fieldIcon()\"\n  [clearable]=\"clearable() && !isDisabled()\"\n>\n  @if (label()) {\n    <label tedi-label [for]=\"inputId()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    #searchInput\n    tedi-text-field\n    type=\"text\"\n    [attr.role]=\"inputRole()\"\n    [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [id]=\"inputId()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"inputAriaLabel()\"\n    (valueChange)=\"onInputValue($event)\"\n    (clear)=\"onClear()\"\n    (focus)=\"onInputFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (feedbackText(); as feedback) {\n    <tedi-feedback-text\n      [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\n<div\n  class=\"tedi-search__announcement sr-only\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  {{ announcement() }}\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"panelVisible()\"\n  [cdkConnectedOverlayWidth]=\"panelWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayDisableClose]=\"true\"\n  (overlayOutsideClick)=\"closePanel()\"\n  (positionChange)=\"onPositionChange($event)\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <div\n    class=\"tedi-search__panel\"\n    [class.tedi-search__panel--above]=\"panelAbove()\"\n  >\n    @if (loading()) {\n      <div class=\"tedi-search__panel-status\">\n        <tedi-spinner [size]=\"16\" />\n        <span tedi-text color=\"tertiary\">{{ resolvedLoadingText() }}</span>\n      </div>\n    } @else if (hasSuggestions()) {\n      <ul class=\"tedi-search__panel-list\" role=\"listbox\" [id]=\"listboxId()\">\n        @for (\n          suggestion of resolvedSuggestions();\n          track suggestion.label + $index;\n          let i = $index\n        ) {\n          <li\n            tedi-search-suggestion\n            [label]=\"suggestion.label\"\n            [description]=\"suggestion.description\"\n            [disabled]=\"suggestion.disabled\"\n            [query]=\"query()\"\n            [custom]=\"!!suggestionTemplate()\"\n            [id]=\"optionId(i)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"selectSuggestion(suggestion)\"\n          >\n            @if (suggestionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: suggestion.item,\n                  item: suggestion.item,\n                  index: i,\n                  label: suggestion.label,\n                  description: suggestion.description,\n                  disabled: suggestion.disabled,\n                  query: query(),\n                }\"\n              />\n            }\n          </li>\n        }\n      </ul>\n    } @else {\n      <div class=\"tedi-search__panel-status\">\n        <span tedi-text color=\"tertiary\">{{ resolvedNoResultsText() }}</span>\n      </div>\n    }\n\n    @if (footerTemplate(); as footer) {\n      <div\n        class=\"tedi-search__footer\"\n        (keydown)=\"onFooterKeydown($event)\"\n        (focusout)=\"onFocusOut($event)\"\n      >\n        <ng-container [ngTemplateOutlet]=\"footer.template\" />\n      </div>\n    }\n  </div>\n</ng-template>\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--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:0 0 var(--form-select-area-radius) var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel--above{border-radius:var(--form-select-area-radius) var(--form-select-area-radius) 0 0}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"] }]
+        }], ctorParameters: () => [], 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 }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindDescription", required: false }] }], bindDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindDisabled", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], panelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelOpen", required: false }] }, { type: i0.Output, args: ["panelOpenChange"] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], resultsCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultsCountText", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], clear: [{ type: i0.Output, args: ["clear"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }], suggestionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SearchSuggestionTemplateDirective), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SearchFooterTemplateDirective), { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ["searchInput", { ...{ read: ElementRef }, isSignal: true }] }], overlayOrigin: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], suggestionRows: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SearchSuggestionComponent), { isSignal: true }] }] } });
+
+/**
+ * Row of buttons inside a `tediSearchFooter`. Centres them and wraps to a new
+ * line when they no longer fit side by side.
+ */
+class SearchFooterActionsComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: SearchFooterActionsComponent, isStandalone: true, selector: "tedi-search-footer-actions", host: { classAttribute: "tedi-search-footer-actions" }, ngImport: i0, template: "<ng-content />", isInline: true, 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--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:0 0 var(--form-select-area-radius) var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel--above{border-radius:var(--form-select-area-radius) var(--form-select-area-radius) 0 0}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchFooterActionsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-search-footer-actions", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-search-footer-actions",
+                    }, 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--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:0 0 var(--form-select-area-radius) var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel--above{border-radius:var(--form-select-area-radius) var(--form-select-area-radius) 0 0}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"] }]
+        }] });
 
 class InfoTooltipComponent {
     /**
@@ -20461,7 +21086,7 @@ 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: 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\">\n      {{ currentRepresentative().name }}\n    </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", "interactive"] }, { 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 });
+    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\">\n      {{ currentRepresentative().name }}\n    </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", "interactive"] }, { 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", "suggestions", "bindLabel", "bindDescription", "bindDisabled", "minQueryLength", "loading", "hideOnScroll", "panelOpen", "noResultsText", "loadingText", "resultsCountText"], outputs: ["valueChange", "panelOpenChange", "searchEvent", "clear", "suggestionSelect"] }], 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,
@@ -21910,5 +22535,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, FormFieldExtraDirective, 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, SkeletonBlockComponent, SkeletonComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, 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, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, 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, FormFieldExtraDirective, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HeadingWithIconComponent, 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, SearchFooterActionsComponent, SearchFooterTemplateDirective, SearchSuggestionComponent, SearchSuggestionTemplateDirective, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SkeletonBlockComponent, SkeletonComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, 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, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, highlightParts, 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