@tedi-design-system/angular 8.1.0-rc.2 → 8.1.0-rc.4

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, inject, computed, ViewEncapsulation, Component, Directive, ChangeDetectionStrategy, model, contentChildren, effect, booleanAttribute, forwardRef, signal, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable, DestroyRef, EventEmitter } from '@angular/core';
+import { input, inject, computed, ViewEncapsulation, Component, model, ChangeDetectionStrategy, contentChildren, effect, Directive, booleanAttribute, forwardRef, signal, viewChild, output, TemplateRef, Injector, contentChild, ElementRef, HostListener, Injectable, DestroyRef, EventEmitter } from '@angular/core';
 import * as i1 from '@tedi-design-system/angular/tedi';
-import { BaseButtonDirective, IconComponent, ButtonComponent, generateUUID, FeedbackTextComponent, LabelComponent, BreakpointService, ClosingButtonComponent, TextComponent, TediTranslationPipe, SpinnerComponent, TediTranslationService, AttachmentComponent, AttachmentActionsComponent, TooltipComponent, TooltipTriggerComponent, TooltipContentComponent, VerticalSpacingDirective, LinkComponent } from '@tedi-design-system/angular/tedi';
+import { BaseButtonDirective, CardComponent as CardComponent$1, CardContentComponent as CardContentComponent$1, IconComponent, ButtonComponent, generateUUID, FeedbackTextComponent, LabelComponent, BreakpointService, ClosingButtonComponent, TextComponent, TediTranslationPipe, SpinnerComponent, TediTranslationService, AttachmentComponent, AttachmentActionsComponent, TooltipComponent, TooltipTriggerComponent, TooltipContentComponent, VerticalSpacingDirective, LinkComponent } from '@tedi-design-system/angular/tedi';
 import { _IdGenerator, FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
 import * as i1$1 from '@angular/common';
 import { NgTemplateOutlet, NgStyle, CommonModule } from '@angular/common';
@@ -63,6 +63,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var(--button-main-primary-background-hover, var(--button-main-primary-background-default));--_btn-hover-border: var(--button-main-primary-border-hover, var(--button-main-primary-border-default));--_btn-hover-text: var(--button-main-primary-text-hover, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-focus-bg: var(--button-main-primary-background-focus, var(--button-main-primary-background-default));--_btn-focus-border: var(--button-main-primary-border-focus, var(--button-main-primary-border-default));--_btn-focus-text: var(--button-main-primary-text-focus, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-active-bg: var(--button-main-primary-background-active, var(--button-main-primary-background-default));--_btn-active-border: var(--button-main-primary-border-active, var(--button-main-primary-border-default));--_btn-active-text: var(--button-main-primary-text-active, var(--button-main-primary-text-default))}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var(--button-main-secondary-background-hover, var(--button-main-secondary-background-default));--_btn-hover-border: var(--button-main-secondary-border-hover, var(--button-main-secondary-border-default));--_btn-hover-text: var(--button-main-secondary-text-hover, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-focus-bg: var(--button-main-secondary-background-focus, var(--button-main-secondary-background-default));--_btn-focus-border: var(--button-main-secondary-border-focus, var(--button-main-secondary-border-default));--_btn-focus-text: var(--button-main-secondary-text-focus, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-active-bg: var(--button-main-secondary-background-active, var(--button-main-secondary-background-default));--_btn-active-border: var(--button-main-secondary-border-active, var(--button-main-secondary-border-default));--_btn-active-text: var(--button-main-secondary-text-active, var(--button-main-secondary-text-default))}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-background-hover, var(--button-main-neutral-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-background-focus, var(--button-main-neutral-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-background-active, var(--button-main-neutral-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var(--button-main-success-background-hover, var(--button-main-success-background-default));--_btn-hover-border: var(--button-main-success-border-hover, var(--button-main-success-border-default));--_btn-hover-text: var(--button-main-success-text-hover, var(--button-main-success-text-default))}.tedi-button--success{--_btn-focus-bg: var(--button-main-success-background-focus, var(--button-main-success-background-default));--_btn-focus-border: var(--button-main-success-border-focus, var(--button-main-success-border-default));--_btn-focus-text: var(--button-main-success-text-focus, var(--button-main-success-text-default))}.tedi-button--success{--_btn-active-bg: var(--button-main-success-background-active, var(--button-main-success-background-default));--_btn-active-border: var(--button-main-success-border-active, var(--button-main-success-border-default));--_btn-active-text: var(--button-main-success-text-active, var(--button-main-success-text-default))}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var(--button-main-danger-background-hover, var(--button-main-danger-background-default));--_btn-hover-border: var(--button-main-danger-border-hover, var(--button-main-danger-border-default));--_btn-hover-text: var(--button-main-danger-text-hover, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-focus-bg: var(--button-main-danger-background-focus, var(--button-main-danger-background-default));--_btn-focus-border: var(--button-main-danger-border-focus, var(--button-main-danger-border-default));--_btn-focus-text: var(--button-main-danger-text-focus, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-active-bg: var(--button-main-danger-background-active, var(--button-main-danger-background-default));--_btn-active-border: var(--button-main-danger-border-active, var(--button-main-danger-border-default));--_btn-active-text: var(--button-main-danger-text-active, var(--button-main-danger-text-default))}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var(--button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default));--_btn-hover-border: var(--button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default));--_btn-hover-text: var(--button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-focus-bg: var(--button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default));--_btn-focus-border: var(--button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default));--_btn-focus-text: var(--button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-active-bg: var(--button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default));--_btn-active-border: var(--button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default));--_btn-active-text: var(--button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default))}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var(--button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default));--_btn-hover-border: var(--button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default));--_btn-hover-text: var(--button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-focus-bg: var(--button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default));--_btn-focus-border: var(--button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default));--_btn-focus-text: var(--button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-active-bg: var(--button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default));--_btn-active-border: var(--button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default));--_btn-active-text: var(--button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default))}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--primary-button-group{--_btn-text: var(--button-group-primary-inactive-text);--_btn-bg: var(--button-group-primary-inactive-background);--_btn-border: var(--button-group-primary-inactive-border);--_btn-hover-text: var(--button-group-primary-hover-text);--_btn-hover-bg: var(--button-group-primary-hover-background);--_btn-hover-border: var(--button-group-primary-hover-border);--_btn-active-text: var(--button-group-primary-selected-text);--_btn-active-bg: var(--button-group-primary-selected-background);--_btn-active-border: var(--button-group-primary-selected-border);--_btn-focus-text: var(--button-group-primary-inactive-text);--_btn-focus-bg: var(--button-group-primary-inactive-background);--_btn-focus-border: var(--button-group-primary-inactive-border);--_btn-disabled-text: var(--button-group-primary-disabled-text);--_btn-disabled-bg: var(--button-group-primary-disabled-background);--_btn-disabled-border: var(--button-group-primary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--primary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-primary-selected-text);background:var(--button-group-primary-selected-background);border-color:var(--button-group-primary-selected-border)}.tedi-button--secondary-button-group{--_btn-text: var(--button-group-secondary-inactive-text);--_btn-bg: var(--button-group-secondary-inactive-background);--_btn-border: var(--button-group-secondary-inactive-border);--_btn-hover-text: var(--button-group-secondary-hover-text);--_btn-hover-bg: var(--button-group-secondary-hover-background);--_btn-hover-border: var(--button-group-secondary-hover-border);--_btn-active-text: var(--button-group-secondary-selected-text);--_btn-active-bg: var(--button-group-secondary-selected-background);--_btn-active-border: var(--button-group-secondary-selected-border);--_btn-focus-text: var(--button-group-secondary-inactive-text);--_btn-focus-bg: var(--button-group-secondary-inactive-background);--_btn-focus-border: var(--button-group-secondary-inactive-border);--_btn-disabled-text: var(--button-group-secondary-disabled-text);--_btn-disabled-bg: var(--button-group-secondary-disabled-background);--_btn-disabled-border: var(--button-group-secondary-disabled-border);--_btn-outline: var(--tedi-primary-500);border-radius:var(--button-radius-sm)}.tedi-button--secondary-button-group[aria-pressed=true]:not(:disabled){z-index:1;color:var(--button-group-secondary-selected-text);background:var(--button-group-secondary-selected-background);border-color:var(--button-group-secondary-selected-border);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--button-group-secondary-selected-border)}.tedi-button[class*=-inverted]:focus-visible{outline:none;border-color:var(--tedi-neutral-100);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-icon-only-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var(--button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-border-hover, var(--button-main-neutral-border-default));--_btn-hover-text: var(--button-main-neutral-text-hover, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var(--button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-border-focus, var(--button-main-neutral-border-default));--_btn-focus-text: var(--button-main-neutral-text-focus, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var(--button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-border-active, var(--button-main-neutral-border-default));--_btn-active-text: var(--button-main-neutral-text-active, var(--button-main-neutral-text-default))}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-icon-only-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var(--button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-hover-border: var(--button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default));--_btn-hover-text: var(--button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var(--button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-focus-border: var(--button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default));--_btn-focus-text: var(--button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var(--button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default));--_btn-active-border: var(--button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default));--_btn-active-text: var(--button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default))}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-icon-only-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var(--button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default));--_btn-hover-border: var(--button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default));--_btn-hover-text: var(--button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var(--button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default));--_btn-focus-border: var(--button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default));--_btn-focus-text: var(--button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var(--button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default));--_btn-active-border: var(--button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default));--_btn-active-text: var(--button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default))}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}button.tedi-floating-button{box-shadow:0 4px 10px 0 var(--tedi-alpha-14)}button.tedi-floating-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}button.tedi-floating-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}button.tedi-floating-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted,.tedi-button--primary-button-group,.tedi-button--secondary-button-group){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}button.tedi-floating-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}button.tedi-floating-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}button.tedi-floating-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}button.tedi-floating-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}button.tedi-floating-button tedi-icon{--_tedi-icon-size: var(--icon-03);color:inherit}button.tedi-floating-button--vertical{min-width:max-content;white-space:nowrap;border-radius:0;transform:rotate(-90deg);transform-origin:center;border-top-right-radius:var(--button-radius-sm);border-top-left-radius:var(--button-radius-sm)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-bg: var(--button-floating-primary-background-default);--_btn-border: var(--button-floating-primary-border-default);--_btn-text: var(--button-floating-primary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--primary{--_btn-hover-bg: var(--button-floating-primary-background-hover, var(--button-floating-primary-background-default));--_btn-hover-border: var(--button-floating-primary-border-hover, var(--button-floating-primary-border-default));--_btn-hover-text: var(--button-floating-primary-text-hover, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-focus-bg: var(--button-floating-primary-background-focus, var(--button-floating-primary-background-default));--_btn-focus-border: var(--button-floating-primary-border-focus, var(--button-floating-primary-border-default));--_btn-focus-text: var(--button-floating-primary-text-focus, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-active-bg: var(--button-floating-primary-background-active, var(--button-floating-primary-background-default));--_btn-active-border: var(--button-floating-primary-border-active, var(--button-floating-primary-border-default));--_btn-active-text: var(--button-floating-primary-text-active, var(--button-floating-primary-text-default))}button.tedi-floating-button.tedi-floating-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-bg: var(--button-floating-secondary-background-default);--_btn-border: var(--button-floating-secondary-border-default);--_btn-text: var(--button-floating-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-hover-bg: var(--button-floating-secondary-background-hover, var(--button-floating-secondary-background-default));--_btn-hover-border: var(--button-floating-secondary-border-hover, var(--button-floating-secondary-border-default));--_btn-hover-text: var(--button-floating-secondary-text-hover, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-focus-bg: var(--button-floating-secondary-background-focus, var(--button-floating-secondary-background-default));--_btn-focus-border: var(--button-floating-secondary-border-focus, var(--button-floating-secondary-border-default));--_btn-focus-text: var(--button-floating-secondary-text-focus, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-active-bg: var(--button-floating-secondary-background-active, var(--button-floating-secondary-background-default));--_btn-active-border: var(--button-floating-secondary-border-active, var(--button-floating-secondary-border-default));--_btn-active-text: var(--button-floating-secondary-text-active, var(--button-floating-secondary-text-default))}button.tedi-floating-button.tedi-floating-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}button.tedi-floating-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}button.tedi-floating-button--large{font-size:var(--button-text-size-lg);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-lg-inner-spacing);--_btn-padding-y: var(--button-lg-padding-y);--_btn-padding-x: var(--button-lg-padding-x)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }] } });
 
+class AccordionItemComponent {
+    /**
+     * Accordion item id
+     */
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    /**
+     * Whether accordion item is selected
+     */
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
+    idGenerator = inject(_IdGenerator);
+    itemId = computed(() => this.id() || this.idGenerator.getId("accordion"), ...(ngDevMode ? [{ debugName: "itemId" }] : []));
+    headerId = computed(() => {
+        return `tedi-accordion-header-${this.itemId()}`;
+    }, ...(ngDevMode ? [{ debugName: "headerId" }] : []));
+    contentId = computed(() => {
+        return `tedi-accordion-content-${this.itemId()}`;
+    }, ...(ngDevMode ? [{ debugName: "contentId" }] : []));
+    open() {
+        this.opened.set(true);
+    }
+    close() {
+        this.opened.set(false);
+    }
+    toggle() {
+        this.opened.update((wasOpened) => !wasOpened);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, host: { properties: { "class.tedi-accordion-item": "true" } }, ngImport: i0, template: "<tedi-card\n  class=\"tedi-accordion-item__card\"\n  [borderless]=\"true\"\n  [padding]=\"0\"\n  [class.tedi-accordion-item__card--expanded]=\"opened()\"\n  [class.tedi-accordion-item__card--selected]=\"selected()\"\n>\n  <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_card-radius: var(--card-radius-rounded);--_card-border: var(--card-border-primary);--_card-bg: var(--card-background-primary);--_card-padding-top: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header,.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border:1px solid var(--_card-border)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--selected{outline:1px solid var(--card-border-selected);outline-offset:-1px}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"], dependencies: [{ kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-accordion-item", standalone: true, imports: [CardComponent$1], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class.tedi-accordion-item]": "true",
+                    }, template: "<tedi-card\n  class=\"tedi-accordion-item__card\"\n  [borderless]=\"true\"\n  [padding]=\"0\"\n  [class.tedi-accordion-item__card--expanded]=\"opened()\"\n  [class.tedi-accordion-item__card--selected]=\"selected()\"\n>\n  <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_card-radius: var(--card-radius-rounded);--_card-border: var(--card-border-primary);--_card-bg: var(--card-background-primary);--_card-padding-top: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header,.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border:1px solid var(--_card-border)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--selected{outline:1px solid var(--card-border-selected);outline-offset:-1px}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
+
+/**
+ * @deprecated Use Accordion from TEDI-ready instead. This component will be removed from future versions.
+ */
+class AccordionComponent {
+    /**
+     * id-s of items that should be opened by default.
+     */
+    defaultOpenItems = input(...(ngDevMode ? [undefined, { debugName: "defaultOpenItems" }] : []));
+    /**
+     * Whether only one accordion item can be opened at once.
+     * @default false
+     */
+    singleOpen = input(false, ...(ngDevMode ? [{ debugName: "singleOpen" }] : []));
+    accordionItems = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "accordionItems", descendants: true }] : [{
+            descendants: true,
+        }]));
+    prevOpens = [];
+    constructor() {
+        effect(() => {
+            const single = this.singleOpen();
+            const items = this.accordionItems();
+            const opens = items.map((it) => it.opened());
+            let newlyOpenedIndex = -1;
+            if (single && items.length > 0) {
+                for (let i = 0; i < opens.length; i++) {
+                    const prev = i < this.prevOpens.length ? this.prevOpens[i] : false;
+                    if (!prev && opens[i]) {
+                        newlyOpenedIndex = i;
+                    }
+                }
+                if (newlyOpenedIndex >= 0) {
+                    for (let i = 0; i < items.length; i++) {
+                        if (i !== newlyOpenedIndex && items[i].opened()) {
+                            items[i].close();
+                        }
+                    }
+                }
+            }
+            this.prevOpens = opens;
+        });
+    }
+    openDefaultOpenItems() {
+        const defaultOpenItems = this.defaultOpenItems();
+        this.accordionItems().forEach((item) => {
+            if (defaultOpenItems?.includes(item.id())) {
+                item.open();
+            }
+        });
+    }
+    ngOnInit() {
+        this.openDefaultOpenItems();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: AccordionComponent, isStandalone: true, selector: "tedi-accordion", inputs: { defaultOpenItems: { classPropertyName: "defaultOpenItems", publicName: "defaultOpenItems", isSignal: true, isRequired: false, transformFunction: null }, singleOpen: { classPropertyName: "singleOpen", publicName: "singleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-accordion", standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { defaultOpenItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpenItems", required: false }] }], singleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleOpen", required: false }] }], accordionItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
+
+class AccordionIconComponent {
+    /**
+     * Background colour of the icon column.
+     */
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    _backgroundClass = computed(() => {
+        const background = this.background();
+        return background ? `tedi-accordion-icon--background--${background}` : "";
+    }, ...(ngDevMode ? [{ debugName: "_backgroundClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionIconComponent, isStandalone: true, selector: "tedi-accordion-icon", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-icon": "true", "class": "_backgroundClass()" } }, ngImport: i0, template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon--background--accent{--_card-bg: var(--card-background-accent)}.tedi-accordion-icon--border--accent{--_card-border: var(--card-background-accent)}.tedi-accordion-icon--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-accordion-icon--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-accordion-icon--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-accordion-icon--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-accordion-icon--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-accordion-icon--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-accordion-icon--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-accordion-icon--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-accordion-icon--background--primary{--_card-bg: var(--card-background-primary)}.tedi-accordion-icon--border--primary{--_card-border: var(--card-background-primary)}.tedi-accordion-icon--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-accordion-icon--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-accordion-icon--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-accordion-icon--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-accordion-icon--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-accordion-icon--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-accordion-icon--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-accordion-icon--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-accordion-icon--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-accordion-icon--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-accordion-icon--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-accordion-icon--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-accordion-icon--border--success-primary{--_card-border: var(--card-background-success)}.tedi-accordion-icon--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-accordion-icon--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-accordion-icon--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-accordion-icon--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-accordion-icon--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-accordion-icon--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-accordion-icon--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-accordion-icon--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-accordion-icon--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-accordion-icon--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-accordion-icon", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class.tedi-accordion-icon]": "true",
+                        "[class]": "_backgroundClass()",
+                    }, template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon--background--accent{--_card-bg: var(--card-background-accent)}.tedi-accordion-icon--border--accent{--_card-border: var(--card-background-accent)}.tedi-accordion-icon--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-accordion-icon--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-accordion-icon--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-accordion-icon--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-accordion-icon--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-accordion-icon--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-accordion-icon--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-accordion-icon--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-accordion-icon--background--primary{--_card-bg: var(--card-background-primary)}.tedi-accordion-icon--border--primary{--_card-border: var(--card-background-primary)}.tedi-accordion-icon--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-accordion-icon--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-accordion-icon--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-accordion-icon--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-accordion-icon--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-accordion-icon--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-accordion-icon--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-accordion-icon--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-accordion-icon--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-accordion-icon--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-accordion-icon--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-accordion-icon--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-accordion-icon--border--success-primary{--_card-border: var(--card-background-success)}.tedi-accordion-icon--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-accordion-icon--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-accordion-icon--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-accordion-icon--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-accordion-icon--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-accordion-icon--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-accordion-icon--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-accordion-icon--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-accordion-icon--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-accordion-icon--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"] }]
+        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
+
+class AccordionItemContentComponent {
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    accordionItem = inject(AccordionItemComponent);
+    headerId = this.accordionItem.headerId;
+    contentId = this.accordionItem.contentId;
+    opened = this.accordionItem.opened;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true" } }, ngImport: i0, template: "<tedi-card-content\n  [background]=\"background() ?? 'primary'\"\n  [padding]=\"1\"\n  [id]=\"contentId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.aria-hidden]=\"!opened()\"\n  [attr.inert]=\"!opened() ? '' : null\"\n>\n  <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"], dependencies: [{ kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-accordion-item-content", standalone: true, imports: [CardContentComponent$1], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class.tedi-accordion-item-content]": "true",
+                    }, template: "<tedi-card-content\n  [background]=\"background() ?? 'primary'\"\n  [padding]=\"1\"\n  [id]=\"contentId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.aria-hidden]=\"!opened()\"\n  [attr.inert]=\"!opened() ? '' : null\"\n>\n  <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"] }]
+        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
+
+const WHITE_ICON_VARIANTS = ["brand", "brand-dark"];
+class AccordionItemHeaderComponent {
+    /**
+     * Whether accordion header should have indicator arrow
+     * @default false
+     */
+    indicator = input(false, ...(ngDevMode ? [{ debugName: "indicator" }] : []));
+    /**
+     * Open button text. Visible if both openText and closeText are provided.
+     */
+    openText = input(...(ngDevMode ? [undefined, { debugName: "openText" }] : []));
+    /**
+     * Close button text. Visible if both openText and closeText are provided.
+     */
+    closeText = input(...(ngDevMode ? [undefined, { debugName: "closeText" }] : []));
+    /**
+     * Accordion header variant
+     */
+    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+    /**
+     * Accordion header background
+     */
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    _modifierClasses = computed(() => {
+        const classes = [];
+        const variant = this.variant();
+        const background = this.background();
+        if (variant) {
+            classes.push(`tedi-accordion-item-header--variant--${variant}`);
+        }
+        if (background) {
+            classes.push(`tedi-accordion-item-header--background--${background}`);
+        }
+        return classes.join(" ");
+    }, ...(ngDevMode ? [{ debugName: "_modifierClasses" }] : []));
+    /**
+     * Color of the indicator arrow
+     */
+    indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : []));
+    /**
+     * Whether indicator is displayed before or after the main content
+     */
+    indicatorPosition = input("end", ...(ngDevMode ? [{ debugName: "indicatorPosition" }] : []));
+    /**
+     * Whether header is clickable
+     */
+    clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+    accordionItem = inject(AccordionItemComponent);
+    opened = this.accordionItem.opened;
+    headerId = this.accordionItem.headerId;
+    contentId = this.accordionItem.contentId;
+    toggleButtonText = computed(() => {
+        if (this.openText() && this.closeText()) {
+            return this.opened() ? this.closeText() : this.openText();
+        }
+        return;
+    }, ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : []));
+    indicatorIconColor = computed(() => {
+        if (this.indicatorColor()) {
+            return this.indicatorColor();
+        }
+        return WHITE_ICON_VARIANTS.includes(this.variant())
+            ? "white"
+            : "brand";
+    }, ...(ngDevMode ? [{ debugName: "indicatorIconColor" }] : []));
+    toggle() {
+        this.accordionItem.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AccordionItemHeaderComponent, isStandalone: true, selector: "tedi-accordion-item-header", inputs: { indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-header-host": "true" } }, ngImport: i0, template: "<button\n  [id]=\"headerId()\"\n  class=\"tedi-accordion-item-header\"\n  [class]=\"_modifierClasses()\"\n  [class.tedi-accordion-item-header--opened]=\"opened()\"\n  [class.tedi-accordion-item-header--brand]=\"variant() === 'brand'\"\n  [attr.aria-expanded]=\"opened()\"\n  [attr.aria-controls]=\"contentId()\"\n  (click)=\"toggle()\"\n  [disabled]=\"!clickable()\"\n>\n  <div class=\"tedi-accordion-item-header__title\">\n    @if (indicator() && indicatorPosition() === \"start\") {\n      <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n    }\n    <ng-content></ng-content>\n  </div>\n  @if (indicator() && indicatorPosition() === \"end\") {\n    <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n  }\n  @if (toggleButtonText()) {\n    <span\n      tedi-button\n      variant=\"neutral\"\n      class=\"tedi-accordion-item-header__toggle\"\n    >\n      {{ toggleButtonText() }}\n      <tedi-icon\n        name=\"keyboard_arrow_down\"\n        class=\"tedi-accordion-item-header__indicator\"\n        color=\"brand\"\n      />\n    </span>\n  }\n  <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n  ><tedi-icon\n    name=\"keyboard_arrow_down\"\n    class=\"tedi-accordion-item-header__indicator\"\n    [size]=\"24\"\n    [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header--variant--primary{--_card-bg: var(--card-background-primary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--secondary{--_card-bg: var(--card-background-secondary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--tertiary{--_card-bg: var(--card-background-tertiary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--brand{--_card-bg: linear-gradient(140deg, #005295 -17.66%, #1769ab 71.2%);--_card-border: transparent}.tedi-accordion-item-header--variant--brand-dark{--_card-bg: var(--card-background-brand-secondary);--_card-border: transparent}.tedi-accordion-item-header--background--accent{--_card-bg: var(--card-background-accent)}.tedi-accordion-item-header--border--accent{--_card-border: var(--card-background-accent)}.tedi-accordion-item-header--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-accordion-item-header--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-accordion-item-header--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-accordion-item-header--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-accordion-item-header--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-accordion-item-header--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-accordion-item-header--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-accordion-item-header--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-accordion-item-header--background--primary{--_card-bg: var(--card-background-primary)}.tedi-accordion-item-header--border--primary{--_card-border: var(--card-background-primary)}.tedi-accordion-item-header--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-accordion-item-header--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-accordion-item-header--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-accordion-item-header--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-accordion-item-header--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-accordion-item-header--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-accordion-item-header--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-accordion-item-header--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-accordion-item-header--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-accordion-item-header--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-accordion-item-header--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-accordion-item-header--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-accordion-item-header--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-accordion-item-header--border--success-primary{--_card-border: var(--card-background-success)}.tedi-accordion-item-header--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-accordion-item-header--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-accordion-item-header--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-accordion-item-header--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-accordion-item-header--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-accordion-item-header--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-accordion-item-header--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-accordion-item-header--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-accordion-item-header--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-accordion-item-header--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-accordion-item-header{padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start;background:var(--_card-bg)}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"], dependencies: [{ 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: "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: AccordionItemHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-accordion-item-header", standalone: true, imports: [
+                        IconComponent,
+                        ButtonComponent,
+                        NgTemplateOutlet,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class.tedi-accordion-item-header-host]": "true",
+                    }, template: "<button\n  [id]=\"headerId()\"\n  class=\"tedi-accordion-item-header\"\n  [class]=\"_modifierClasses()\"\n  [class.tedi-accordion-item-header--opened]=\"opened()\"\n  [class.tedi-accordion-item-header--brand]=\"variant() === 'brand'\"\n  [attr.aria-expanded]=\"opened()\"\n  [attr.aria-controls]=\"contentId()\"\n  (click)=\"toggle()\"\n  [disabled]=\"!clickable()\"\n>\n  <div class=\"tedi-accordion-item-header__title\">\n    @if (indicator() && indicatorPosition() === \"start\") {\n      <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n    }\n    <ng-content></ng-content>\n  </div>\n  @if (indicator() && indicatorPosition() === \"end\") {\n    <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n  }\n  @if (toggleButtonText()) {\n    <span\n      tedi-button\n      variant=\"neutral\"\n      class=\"tedi-accordion-item-header__toggle\"\n    >\n      {{ toggleButtonText() }}\n      <tedi-icon\n        name=\"keyboard_arrow_down\"\n        class=\"tedi-accordion-item-header__indicator\"\n        color=\"brand\"\n      />\n    </span>\n  }\n  <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n  ><tedi-icon\n    name=\"keyboard_arrow_down\"\n    class=\"tedi-accordion-item-header__indicator\"\n    [size]=\"24\"\n    [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header--variant--primary{--_card-bg: var(--card-background-primary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--secondary{--_card-bg: var(--card-background-secondary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--tertiary{--_card-bg: var(--card-background-tertiary);--_card-border: var(--card-border-primary)}.tedi-accordion-item-header--variant--brand{--_card-bg: linear-gradient(140deg, #005295 -17.66%, #1769ab 71.2%);--_card-border: transparent}.tedi-accordion-item-header--variant--brand-dark{--_card-bg: var(--card-background-brand-secondary);--_card-border: transparent}.tedi-accordion-item-header--background--accent{--_card-bg: var(--card-background-accent)}.tedi-accordion-item-header--border--accent{--_card-border: var(--card-background-accent)}.tedi-accordion-item-header--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-accordion-item-header--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-accordion-item-header--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-accordion-item-header--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-accordion-item-header--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-accordion-item-header--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-accordion-item-header--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-accordion-item-header--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-accordion-item-header--background--primary{--_card-bg: var(--card-background-primary)}.tedi-accordion-item-header--border--primary{--_card-border: var(--card-background-primary)}.tedi-accordion-item-header--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-accordion-item-header--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-accordion-item-header--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-accordion-item-header--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-accordion-item-header--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-accordion-item-header--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-accordion-item-header--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-accordion-item-header--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-accordion-item-header--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-accordion-item-header--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-accordion-item-header--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-accordion-item-header--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-accordion-item-header--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-accordion-item-header--border--success-primary{--_card-border: var(--card-background-success)}.tedi-accordion-item-header--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-accordion-item-header--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-accordion-item-header--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-accordion-item-header--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-accordion-item-header--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-accordion-item-header--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-accordion-item-header--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-accordion-item-header--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-accordion-item-header--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-accordion-item-header--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-accordion-item-header{padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start;background:var(--_card-bg)}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"] }]
+        }], propDecorators: { indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] } });
+
 /**
  * @deprecated Use background and border inputs on TEDI-ready Card components instead. This directive will be removed from future versions.
  */
@@ -186,121 +403,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     ], template: "<ng-content></ng-content>\n", styles: [".tedi-card{--_card-border: var(--card-border-primary);--_card-selected-border: var(--card-border-selected);--_card-bg: var(--card-background-primary);--_card-timeline-color: var(--general-border-accent);--_card-radius: var(--card-radius-rounded);border-radius:var(--_card-radius);display:flex;flex-direction:column;position:relative}.tedi-card--background--accent{--_card-bg: var(--card-background-accent)}.tedi-card--border--accent{--_card-border: var(--card-background-accent)}.tedi-card--background--brand-primary{--_card-bg: var(--card-background-brand-primary)}.tedi-card--border--brand-primary{--_card-border: var(--card-background-brand-primary)}.tedi-card--background--brand-secondary{--_card-bg: var(--card-background-brand-secondary)}.tedi-card--border--brand-secondary{--_card-border: var(--card-background-brand-secondary)}.tedi-card--background--brand-tertiary{--_card-bg: var(--card-background-brand-tertiary)}.tedi-card--border--brand-tertiary{--_card-border: var(--card-background-brand-tertiary)}.tedi-card--background--brand-quaternary{--_card-bg: var(--card-background-brand-quaternary)}.tedi-card--border--brand-quaternary{--_card-border: var(--card-background-brand-quaternary)}.tedi-card--background--primary{--_card-bg: var(--card-background-primary)}.tedi-card--border--primary{--_card-border: var(--card-background-primary)}.tedi-card--background--secondary{--_card-bg: var(--card-background-secondary)}.tedi-card--border--secondary{--_card-border: var(--card-background-secondary)}.tedi-card--background--tertiary{--_card-bg: var(--card-background-tertiary)}.tedi-card--border--tertiary{--_card-border: var(--card-background-tertiary)}.tedi-card--background--info-primary{--_card-bg: var(--general-status-info-background-light)}.tedi-card--border--info-primary{--_card-border: var(--general-status-info-background-light)}.tedi-card--background--info-secondary{--_card-bg: var(--general-status-info-background-dark)}.tedi-card--border--info-secondary{--_card-border: var(--general-status-info-background-dark)}.tedi-card--background--neutral-primary{--_card-bg: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-primary{--_card-border: var(--general-status-neutral-background-light)}.tedi-card--background--neutral-secondary{--_card-bg: var(--general-status-neutral-background-dark)}.tedi-card--border--neutral-secondary{--_card-border: var(--general-status-neutral-background-dark)}.tedi-card--background--success-primary{--_card-bg: var(--card-background-success)}.tedi-card--border--success-primary{--_card-border: var(--card-background-success)}.tedi-card--background--success-secondary{--_card-bg: var(--general-status-success-background-secondary)}.tedi-card--border--success-secondary{--_card-border: var(--general-status-success-background-secondary)}.tedi-card--background--danger-primary{--_card-bg: var(--general-status-danger-background-primary)}.tedi-card--border--danger-primary{--_card-border: var(--general-status-danger-background-primary)}.tedi-card--background--danger-secondary{--_card-bg: var(--general-status-danger-background-secondary)}.tedi-card--border--danger-secondary{--_card-border: var(--general-status-danger-background-secondary)}.tedi-card--background--warning-primary{--_card-bg: var(--general-status-warning-background-light)}.tedi-card--border--warning-primary{--_card-border: var(--general-status-warning-background-light)}.tedi-card--background--warning-secondary{--_card-bg: var(--general-status-warning-background-dark)}.tedi-card--border--warning-secondary{--_card-border: var(--general-status-warning-background-dark)}.tedi-card--spacing-xs{--_card-padding-top: var(--card-padding-xs);--_card-padding-bottom: var(--card-padding-xs);--_card-padding-left: var(--card-padding-xs);--_card-padding-right: var(--card-padding-xs)}.tedi-card--spacing-sm{--_card-padding-top: var(--card-padding-sm);--_card-padding-bottom: var(--card-padding-sm);--_card-padding-left: var(--card-padding-sm);--_card-padding-right: var(--card-padding-sm)}.tedi-card--spacing-md{--_card-padding-top: var(--card-padding-md-default);--_card-padding-bottom: var(--card-padding-md-default);--_card-padding-left: var(--card-padding-md-default);--_card-padding-right: var(--card-padding-md-default)}.tedi-card--spacing-lg{--_card-padding-top: var(--card-padding-lg);--_card-padding-bottom: var(--card-padding-lg);--_card-padding-left: var(--card-padding-lg);--_card-padding-right: var(--card-padding-lg)}.tedi-card--spacing-none{--_card-padding-top: 0;--_card-padding-bottom: 0;--_card-padding-left: 0;--_card-padding-right: 0}.tedi-card--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-top: 0}.tedi-card--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-bottom: 0}.tedi-card--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-left: 0}.tedi-card--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-none{--_card-padding-right: 0}.tedi-card--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-top: 0}.tedi-card--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-left: 0}.tedi-card--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-horizontal-none{--_card-padding-right: 0}.tedi-card--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card--padding-top-none{--_card-padding-top: 0}.tedi-card--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card--padding-left-none{--_card-padding-left: 0}.tedi-card--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card--padding-right-none{--_card-padding-right: 0}.tedi-card--accent-border:before{content:\"\";display:block;position:absolute;left:0;top:0;bottom:0;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius);border-left:4px solid var(--_card-border-accent)}.tedi-card--accent-border--info{--_card-border-accent: var(--general-status-info-background-dark)}.tedi-card--accent-border--success{--_card-border-accent: var(--general-status-success-background-secondary)}.tedi-card--accent-border--warning{--_card-border-accent: var(--general-status-warning-background-dark)}.tedi-card--accent-border--danger{--_card-border-accent: var(--general-status-danger-background-secondary)}.tedi-card>.tedi-card-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:not(:first-child){border-top:transparent}.tedi-card>.tedi-card-content:not(.tedi-card-content--has-separator,:last-child){border-bottom:transparent}.tedi-card>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-content:last-child{border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row>.tedi-card-content:not(:first-child){border-left:transparent}.tedi-card>.tedi-card-row>.tedi-card-content:not(:last-child,.tedi-card-content--has-separator){border-right:transparent}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:first-child{border-top-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:first-child>.tedi-card-content:last-child{border-top-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:first-child{border-bottom-left-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:last-child>.tedi-card-content:last-child{border-bottom-right-radius:var(--_card-radius)}.tedi-card>.tedi-card-row:not(:first-child)>.tedi-card-content{border-top:transparent}.tedi-card>.tedi-card-row:not(:last-child,.tedi-card-row--has-separator)>.tedi-card-content{border-bottom:transparent}.tedi-card--selected{outline:1px solid var(--_card-selected-border);outline-offset:-1px}.tedi-card--borderless{--_card-border: transparent}\n"] }]
         }], propDecorators: { borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], accentBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentBorder", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
 
-class AccordionItemComponent {
-    /**
-     * Accordion item id
-     */
-    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
-    /**
-     * Whether accordion item is selected
-     */
-    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-    opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
-    idGenerator = inject(_IdGenerator);
-    itemId = computed(() => this.id() || this.idGenerator.getId("accordion"), ...(ngDevMode ? [{ debugName: "itemId" }] : []));
-    headerId = computed(() => {
-        return `tedi-accordion-header-${this.itemId()}`;
-    }, ...(ngDevMode ? [{ debugName: "headerId" }] : []));
-    contentId = computed(() => {
-        return `tedi-accordion-content-${this.itemId()}`;
-    }, ...(ngDevMode ? [{ debugName: "contentId" }] : []));
-    open() {
-        this.opened.set(true);
-    }
-    close() {
-        this.opened.set(false);
-    }
-    toggle() {
-        this.opened.update((wasOpened) => !wasOpened);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemComponent, isStandalone: true, selector: "tedi-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, host: { properties: { "class.tedi-accordion-item": "true" } }, ngImport: i0, template: "<tedi-card\n  [selected]=\"selected()\"\n  class=\"tedi-accordion-item__card\"\n  [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n  <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tedi-accordion-item", standalone: true, imports: [CardComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        "[class.tedi-accordion-item]": "true",
-                    }, template: "<tedi-card\n  [selected]=\"selected()\"\n  class=\"tedi-accordion-item__card\"\n  [class.tedi-accordion-item__card--expanded]=\"opened()\"\n>\n  <ng-content></ng-content>\n</tedi-card>\n", styles: [".tedi-accordion-item{--_accordion-columns: minmax(auto, 200px) auto;--_accordion-header-spacing: 16px;--_accordion-header-title-spacing: 8px;--_accordion-title-color: var(--general-text-secondary)}.tedi-accordion-item>.tedi-accordion-item__card{display:grid;grid-template-rows:max-content 0fr;transition:grid-template-rows .3s}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-top-left-radius:var(--_card-radius);border-top-right-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card>.tedi-accordion-item-content>.tedi-card-content{border-top:transparent;border-bottom-left-radius:var(--_card-radius);border-bottom-right-radius:var(--_card-radius)}.tedi-accordion-item>.tedi-accordion-item__card--expanded{grid-template-rows:max-content 1fr}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-header-host>.tedi-accordion-item-header{border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-accordion-item>.tedi-accordion-item__card--expanded>.tedi-accordion-item-content{animation:accordion-content-overflow-transition;animation-delay:.3s;animation-fill-mode:forwards}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon){grid-template-areas:\"accordion-icon-content accordion-header\" \"accordion-icon-fill accordion-content\";grid-template-columns:var(--_accordion-columns)}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-header-host>.tedi-accordion-item-header{grid-area:accordion-header;border-top-left-radius:0;border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content>.tedi-card-content{border-bottom-left-radius:0;border-left:transparent}.tedi-accordion-item>.tedi-accordion-item__card:has(.tedi-accordion-icon)>.tedi-accordion-item-content{grid-area:accordion-content}@keyframes accordion-content-overflow-transition{to{overflow:visible}}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
-
-/**
- * @deprecated Use Accordion from TEDI-ready instead. This component will be removed from future versions.
- */
-class AccordionComponent {
-    /**
-     * id-s of items that should be opened by default.
-     */
-    defaultOpenItems = input(...(ngDevMode ? [undefined, { debugName: "defaultOpenItems" }] : []));
-    /**
-     * Whether only one accordion item can be opened at once.
-     * @default false
-     */
-    singleOpen = input(false, ...(ngDevMode ? [{ debugName: "singleOpen" }] : []));
-    accordionItems = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "accordionItems", descendants: true }] : [{
-            descendants: true,
-        }]));
-    prevOpens = [];
-    constructor() {
-        effect(() => {
-            const single = this.singleOpen();
-            const items = this.accordionItems();
-            const opens = items.map((it) => it.opened());
-            let newlyOpenedIndex = -1;
-            if (single && items.length > 0) {
-                for (let i = 0; i < opens.length; i++) {
-                    const prev = i < this.prevOpens.length ? this.prevOpens[i] : false;
-                    if (!prev && opens[i]) {
-                        newlyOpenedIndex = i;
-                    }
-                }
-                if (newlyOpenedIndex >= 0) {
-                    for (let i = 0; i < items.length; i++) {
-                        if (i !== newlyOpenedIndex && items[i].opened()) {
-                            items[i].close();
-                        }
-                    }
-                }
-            }
-            this.prevOpens = opens;
-        });
-    }
-    openDefaultOpenItems() {
-        const defaultOpenItems = this.defaultOpenItems();
-        this.accordionItems().forEach((item) => {
-            if (defaultOpenItems?.includes(item.id())) {
-                item.open();
-            }
-        });
-    }
-    ngOnInit() {
-        this.openDefaultOpenItems();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: AccordionComponent, isStandalone: true, selector: "tedi-accordion", inputs: { defaultOpenItems: { classPropertyName: "defaultOpenItems", publicName: "defaultOpenItems", isSignal: true, isRequired: false, transformFunction: null }, singleOpen: { classPropertyName: "singleOpen", publicName: "singleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tedi-accordion", standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { defaultOpenItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpenItems", required: false }] }], singleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleOpen", required: false }] }], accordionItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { ...{
-                            descendants: true,
-                        }, isSignal: true }] }] } });
-
-class AccordionIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: AccordionIconComponent, isStandalone: true, selector: "tedi-accordion-icon", host: { properties: { "class.tedi-accordion-icon": "true" } }, hostDirectives: [{ directive: CardColorsDirective, inputs: ["background", "background"] }], ngImport: i0, template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionIconComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: "tedi-accordion-icon", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        "[class.tedi-accordion-icon]": "true",
-                    }, hostDirectives: [
-                        {
-                            directive: CardColorsDirective,
-                            inputs: ["background"],
-                        },
-                    ], template: "<div class=\"tedi-accordion-icon__content\"><ng-content></ng-content></div>\n<div class=\"tedi-accordion-icon__fill\"></div>\n", styles: [".tedi-accordion-icon{display:contents;--_card-bg: var(--card-background-secondary)}.tedi-accordion-icon__content{display:block;padding:var(--_card-padding-top) var(--_card-padding-right) var(--_card-padding-bottom) var(--_card-padding-left);grid-area:accordion-icon-content;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-bottom:transparent;border-top-left-radius:var(--_card-radius);border-bottom-left-radius:var(--_card-radius)}.tedi-accordion-icon__fill{display:block;grid-area:accordion-icon-fill;background-color:var(--_card-bg);border:1px solid var(--_card-border);border-top:transparent;border-bottom-left-radius:var(--_card-radius);margin-top:-4px}\n"] }]
-        }] });
-
 /**
  * @deprecated Use CardContent from TEDI-ready instead. This component will be removed from future versions.
  */
@@ -344,22 +446,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     ], template: "<ng-content></ng-content>\n", styles: [".tedi-card-content{display:block;background-color:var(--_card-bg);border:1px solid var(--_card-border);padding:var(--_card-padding-top, 0) var(--_card-padding-right, 0) var(--_card-padding-bottom, 0) var(--_card-padding-left, 0)}.tedi-card-content--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-top: 0}.tedi-card-content--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-bottom: 0}.tedi-card-content--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-left: 0}.tedi-card-content--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-none{--_card-padding-right: 0}.tedi-card-content--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-vertical-none{--_card-padding-top: 0}.tedi-card-content--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card-content--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-horizontal-none{--_card-padding-left: 0}.tedi-card-content--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-horizontal-none{--_card-padding-right: 0}.tedi-card-content--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-content--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-content--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-content--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-content--padding-top-none{--_card-padding-top: 0}.tedi-card-content--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-content--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-content--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-content--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-content--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card-content--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-content--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-content--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-content--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-content--padding-left-none{--_card-padding-left: 0}.tedi-card-content--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-content--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-content--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-content--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-content--padding-right-none{--_card-padding-right: 0}.tedi-card-content{flex:1 1 0}.tedi-card-content--auto-width{flex-grow:0}.tedi-card-content--timeline{position:relative;border-right:1px solid var(--_card-timeline-color)}.tedi-card-content--timeline:after{content:\"\";display:block;background-color:var(--_card-timeline-color);position:absolute;top:22px;right:-.5px;transform:translate(50%);width:9px;height:9px;border-radius:50%}\n"] }]
         }], propDecorators: { hasSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeparator", required: false }] }], autoWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoWidth", required: false }] }], timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: false }] }] } });
 
-class AccordionItemContentComponent {
-    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
-    accordionItem = inject(AccordionItemComponent);
-    headerId = this.accordionItem.headerId;
-    contentId = this.accordionItem.contentId;
-    opened = this.accordionItem.opened;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true" } }, ngImport: i0, template: "<tedi-card-content\n  [background]=\"background()\"\n  [id]=\"contentId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.aria-hidden]=\"!opened()\"\n  [attr.inert]=\"!opened() ? '' : null\"\n>\n  <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"], dependencies: [{ kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tedi-accordion-item-content", standalone: true, imports: [CardContentComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        "[class.tedi-accordion-item-content]": "true",
-                    }, template: "<tedi-card-content\n  [background]=\"background()\"\n  [id]=\"contentId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId()\"\n  [attr.aria-hidden]=\"!opened()\"\n  [attr.inert]=\"!opened() ? '' : null\"\n>\n  <ng-content></ng-content>\n</tedi-card-content>\n", styles: [".tedi-accordion-item-content{display:block;overflow:hidden}\n"] }]
-        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
-
 /**
  * @deprecated Use CardHeader from TEDI-ready instead. This component will be removed from future versions.
  */
@@ -391,77 +477,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     ], template: "<ng-content></ng-content>\n", styles: [".tedi-card-header{border:1px solid var(--_card-border);background:var(--_card-bg);padding:var(--_card-padding-top, 0) var(--_card-padding-right, 0) var(--_card-padding-bottom, 0) var(--_card-padding-left, 0)}.tedi-card-header--padding-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-top: 0}.tedi-card-header--padding-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-bottom: 0}.tedi-card-header--padding-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-left: 0}.tedi-card-header--padding-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-none{--_card-padding-right: 0}.tedi-card-header--padding-vertical-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-vertical-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-vertical-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-vertical-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-vertical-none{--_card-padding-top: 0}.tedi-card-header--padding-vertical-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-vertical-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-vertical-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-vertical-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-vertical-none{--_card-padding-bottom: 0}.tedi-card-header--padding-horizontal-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-horizontal-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-horizontal-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-horizontal-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-horizontal-none{--_card-padding-left: 0}.tedi-card-header--padding-horizontal-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-horizontal-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-horizontal-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-horizontal-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-horizontal-none{--_card-padding-right: 0}.tedi-card-header--padding-top-xs{--_card-padding-top: var(--card-padding-xs)}.tedi-card-header--padding-top-sm{--_card-padding-top: var(--card-padding-sm)}.tedi-card-header--padding-top-md{--_card-padding-top: var(--card-padding-md-default)}.tedi-card-header--padding-top-lg{--_card-padding-top: var(--card-padding-lg)}.tedi-card-header--padding-top-none{--_card-padding-top: 0}.tedi-card-header--padding-bottom-xs{--_card-padding-bottom: var(--card-padding-xs)}.tedi-card-header--padding-bottom-sm{--_card-padding-bottom: var(--card-padding-sm)}.tedi-card-header--padding-bottom-md{--_card-padding-bottom: var(--card-padding-md-default)}.tedi-card-header--padding-bottom-lg{--_card-padding-bottom: var(--card-padding-lg)}.tedi-card-header--padding-bottom-none{--_card-padding-bottom: 0}.tedi-card-header--padding-left-xs{--_card-padding-left: var(--card-padding-xs)}.tedi-card-header--padding-left-sm{--_card-padding-left: var(--card-padding-sm)}.tedi-card-header--padding-left-md{--_card-padding-left: var(--card-padding-md-default)}.tedi-card-header--padding-left-lg{--_card-padding-left: var(--card-padding-lg)}.tedi-card-header--padding-left-none{--_card-padding-left: 0}.tedi-card-header--padding-right-xs{--_card-padding-right: var(--card-padding-xs)}.tedi-card-header--padding-right-sm{--_card-padding-right: var(--card-padding-sm)}.tedi-card-header--padding-right-md{--_card-padding-right: var(--card-padding-md-default)}.tedi-card-header--padding-right-lg{--_card-padding-right: var(--card-padding-lg)}.tedi-card-header--padding-right-none{--_card-padding-right: 0}.tedi-card-header--primary{--_card-bg: var(--card-background-primary);--_card-border: var(--card-border-primary)}.tedi-card-header--secondary{--_card-bg: var(--card-background-secondary);--_card-border: var(--card-border-primary)}.tedi-card-header--tertiary{--_card-bg: var(--card-background-tertiary);--_card-border: var(--card-border-primary)}.tedi-card-header--brand{--_card-bg: linear-gradient(140deg, #005295 -17.66%, #1769ab 71.2%);--_card-border: transparent}.tedi-card-header--brand-dark{--_card-bg: var(--card-background-brand-secondary);--_card-border: transparent}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
-const WHITE_ICON_VARIANTS = ["brand", "brand-dark"];
-class AccordionItemHeaderComponent {
-    /**
-     * Whether accordion header should have indicator arrow
-     * @default false
-     */
-    indicator = input(false, ...(ngDevMode ? [{ debugName: "indicator" }] : []));
-    /**
-     * Open button text. Visible if both openText and closeText are provided.
-     */
-    openText = input(...(ngDevMode ? [undefined, { debugName: "openText" }] : []));
-    /**
-     * Close button text. Visible if both openText and closeText are provided.
-     */
-    closeText = input(...(ngDevMode ? [undefined, { debugName: "closeText" }] : []));
-    /**
-     * Accordion header variant
-     */
-    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
-    /**
-     * Accordion header background
-     */
-    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
-    /**
-     * Color of the indicator arrow
-     */
-    indicatorColor = input(...(ngDevMode ? [undefined, { debugName: "indicatorColor" }] : []));
-    /**
-     * Whether indicator is displayed before or after the main content
-     */
-    indicatorPosition = input("end", ...(ngDevMode ? [{ debugName: "indicatorPosition" }] : []));
-    /**
-     * Whether header is clickable
-     */
-    clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
-    accordionItem = inject(AccordionItemComponent);
-    opened = this.accordionItem.opened;
-    headerId = this.accordionItem.headerId;
-    contentId = this.accordionItem.contentId;
-    toggleButtonText = computed(() => {
-        if (this.openText() && this.closeText()) {
-            return this.opened() ? this.closeText() : this.openText();
-        }
-        return;
-    }, ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : []));
-    indicatorIconColor = computed(() => {
-        if (this.indicatorColor()) {
-            return this.indicatorColor();
-        }
-        return WHITE_ICON_VARIANTS.includes(this.variant())
-            ? "white"
-            : "brand";
-    }, ...(ngDevMode ? [{ debugName: "indicatorIconColor" }] : []));
-    toggle() {
-        this.accordionItem.toggle();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AccordionItemHeaderComponent, isStandalone: true, selector: "tedi-accordion-item-header", inputs: { indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-header-host": "true" } }, ngImport: i0, template: "<button\n  [id]=\"headerId()\"\n  tedi-card-header\n  [variant]=\"variant()\"\n  [background]=\"background()\"\n  class=\"tedi-accordion-item-header\"\n  [class.tedi-accordion-item-header--opened]=\"opened()\"\n  [attr.aria-expanded]=\"opened()\"\n  [attr.aria-controls]=\"contentId()\"\n  (click)=\"toggle()\"\n  [disabled]=\"!clickable()\"\n>\n  <div class=\"tedi-accordion-item-header__title\">\n    @if (indicator() && indicatorPosition() === \"start\") {\n      <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n    }\n    <ng-content></ng-content>\n  </div>\n  @if (indicator() && indicatorPosition() === \"end\") {\n    <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n  }\n  @if (toggleButtonText()) {\n    <span\n      tedi-button\n      variant=\"neutral\"\n      class=\"tedi-accordion-item-header__toggle\"\n    >\n      {{ toggleButtonText() }}\n      <tedi-icon\n        name=\"keyboard_arrow_down\"\n        class=\"tedi-accordion-item-header__indicator\"\n        color=\"brand\"\n      />\n    </span>\n  }\n  <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n  ><tedi-icon\n    name=\"keyboard_arrow_down\"\n    class=\"tedi-accordion-item-header__indicator\"\n    [size]=\"24\"\n    [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header{font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"], dependencies: [{ kind: "component", type: CardHeaderComponent, selector: "tedi-card-header, [tedi-card-header]", inputs: ["variant"] }, { 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: "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: AccordionItemHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "tedi-accordion-item-header", standalone: true, imports: [
-                        CardHeaderComponent,
-                        IconComponent,
-                        ButtonComponent,
-                        NgTemplateOutlet,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        "[class.tedi-accordion-item-header-host]": "true",
-                    }, template: "<button\n  [id]=\"headerId()\"\n  tedi-card-header\n  [variant]=\"variant()\"\n  [background]=\"background()\"\n  class=\"tedi-accordion-item-header\"\n  [class.tedi-accordion-item-header--opened]=\"opened()\"\n  [attr.aria-expanded]=\"opened()\"\n  [attr.aria-controls]=\"contentId()\"\n  (click)=\"toggle()\"\n  [disabled]=\"!clickable()\"\n>\n  <div class=\"tedi-accordion-item-header__title\">\n    @if (indicator() && indicatorPosition() === \"start\") {\n      <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n    }\n    <ng-content></ng-content>\n  </div>\n  @if (indicator() && indicatorPosition() === \"end\") {\n    <ng-container [ngTemplateOutlet]=\"indicatorIcon\" />\n  }\n  @if (toggleButtonText()) {\n    <span\n      tedi-button\n      variant=\"neutral\"\n      class=\"tedi-accordion-item-header__toggle\"\n    >\n      {{ toggleButtonText() }}\n      <tedi-icon\n        name=\"keyboard_arrow_down\"\n        class=\"tedi-accordion-item-header__indicator\"\n        color=\"brand\"\n      />\n    </span>\n  }\n  <ng-content select=\"[tedi-accordion-header-end]\"></ng-content>\n</button>\n\n<ng-template #indicatorIcon\n  ><tedi-icon\n    name=\"keyboard_arrow_down\"\n    class=\"tedi-accordion-item-header__indicator\"\n    [size]=\"24\"\n    [color]=\"indicatorIconColor()\"\n/></ng-template>\n", styles: [".tedi-accordion-item-header-host{display:contents}.tedi-accordion-item-header{font-size:inherit;display:flex;gap:var(--_accordion-header-spacing);align-items:center;text-align:start}.tedi-accordion-item-header:not([disabled]){cursor:pointer}.tedi-accordion-item-header__title{flex-grow:1;display:flex;gap:var(--_accordion-header-title-spacing);color:var(--_accordion-title-color);align-items:center}.tedi-accordion-item-header__indicator{transition:transform .3s}.tedi-accordion-item-header .tedi-accordion-item-header__toggle{--_btn-padding-y: 0}.tedi-accordion-item-header--opened>.tedi-accordion-item-header__indicator,.tedi-accordion-item-header--opened>.tedi-accordion-item-header__toggle>.tedi-accordion-item-header__indicator{transform:rotateX(180deg)}\n"] }]
-        }], propDecorators: { indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] } });
-
 /**
  * @deprecated Use CardRow from TEDI-ready instead. This component will be removed from future versions.
  */
@@ -1155,16 +1170,16 @@ class DropdownComponent {
         this.keyManager = new FocusKeyManager(this.dropdownItems, this.injector).withWrap();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: true, isRequired: true, transformFunction: null }, dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownItems", predicate: i0.forwardRef(() => DropdownItemComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"opened()\"\n  [cdkConnectedOverlayOffsetY]=\"4\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayViewportMargin]=\"16\"\n  cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n  (overlayKeydown)=\"onKeyDown($event)\"\n  (overlayOutsideClick)=\"close()\"\n>\n  <tedi-card\n    padding=\"none\"\n    class=\"tedi-dropdown__card\"\n    [attr.role]=\"dropdownRole()\"\n    [attr.id]=\"dropdownId()\"\n  >\n    @if (isMobile()) {\n      <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n        <button\n          tedi-closing-button\n          (click)=\"close()\"\n          size=\"small\"\n          class=\"tedi-dropdown__close-button\"\n        ></button>\n      </tedi-card-content>\n    }\n    <tedi-card-content>\n      <ng-content />\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: true, isRequired: true, transformFunction: null }, dropdownRole: { classPropertyName: "dropdownRole", publicName: "dropdownRole", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownItems", predicate: i0.forwardRef(() => DropdownItemComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"opened()\"\n  [cdkConnectedOverlayOffsetY]=\"4\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayViewportMargin]=\"16\"\n  cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n  (overlayKeydown)=\"onKeyDown($event)\"\n  (overlayOutsideClick)=\"close()\"\n>\n  <tedi-card\n    class=\"tedi-dropdown__card\"\n    background=\"primary\"\n    [padding]=\"0\"\n    [attr.role]=\"dropdownRole()\"\n    [attr.id]=\"dropdownId()\"\n  >\n    @if (isMobile()) {\n      <tedi-card-content\n        class=\"tedi-dropdown__mobile-header\"\n        [autoWidth]=\"true\"\n        [padding]=\"0.5\"\n      >\n        <button\n          tedi-closing-button\n          (click)=\"close()\"\n          size=\"small\"\n          class=\"tedi-dropdown__close-button\"\n        ></button>\n      </tedi-card-content>\n    }\n    <tedi-card-content>\n      <ng-content />\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__mobile-header{border-bottom:1px solid var(--card-border-primary)}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-dropdown", imports: [
                         OverlayModule,
-                        CardComponent,
-                        CardContentComponent,
+                        CardComponent$1,
+                        CardContentComponent$1,
                         ClosingButtonComponent,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"opened()\"\n  [cdkConnectedOverlayOffsetY]=\"4\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayViewportMargin]=\"16\"\n  cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n  (overlayKeydown)=\"onKeyDown($event)\"\n  (overlayOutsideClick)=\"close()\"\n>\n  <tedi-card\n    padding=\"none\"\n    class=\"tedi-dropdown__card\"\n    [attr.role]=\"dropdownRole()\"\n    [attr.id]=\"dropdownId()\"\n  >\n    @if (isMobile()) {\n      <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n        <button\n          tedi-closing-button\n          (click)=\"close()\"\n          size=\"small\"\n          class=\"tedi-dropdown__close-button\"\n        ></button>\n      </tedi-card-content>\n    }\n    <tedi-card-content>\n      <ng-content />\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"opened()\"\n  [cdkConnectedOverlayOffsetY]=\"4\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayViewportMargin]=\"16\"\n  cdkConnectedOverlayPanelClass=\"tedi-dropdown__overlay-pane\"\n  (overlayKeydown)=\"onKeyDown($event)\"\n  (overlayOutsideClick)=\"close()\"\n>\n  <tedi-card\n    class=\"tedi-dropdown__card\"\n    background=\"primary\"\n    [padding]=\"0\"\n    [attr.role]=\"dropdownRole()\"\n    [attr.id]=\"dropdownId()\"\n  >\n    @if (isMobile()) {\n      <tedi-card-content\n        class=\"tedi-dropdown__mobile-header\"\n        [autoWidth]=\"true\"\n        [padding]=\"0.5\"\n      >\n        <button\n          tedi-closing-button\n          (click)=\"close()\"\n          size=\"small\"\n          class=\"tedi-dropdown__close-button\"\n        ></button>\n      </tedi-card-content>\n    }\n    <tedi-card-content>\n      <ng-content />\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-dropdown__card.tedi-card{box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2));overflow-y:auto}@media(max-width:35.98rem){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__mobile-header{border-bottom:1px solid var(--card-border-primary)}.tedi-dropdown__close-button{margin-left:auto}@media(max-width:35.98rem){.tedi-dropdown__overlay-pane{transform:none!important}}\n"] }]
         }], propDecorators: { dropdownId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownId", required: true }] }], dropdownRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRole", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], triggerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownTriggerDirective), { isSignal: true }] }], dropdownItems: [{ type: i0.ContentChildren, args: [forwardRef(() => DropdownItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
 const itemRole = {
@@ -1489,7 +1504,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedLabels().length) {\n      {{ selectedLabels() }}\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n      >\n        @if (options().length) {\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length > 0) {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [selected]=\"isOptionSelected(option.value())\"\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                @if (option.templateRef(); as optionNgContent) {\n                  <div class=\"tedi-select__dropdown-item--custom-content\">\n                    <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n                  </div>\n                  <span class=\"tedi-select__dropdown-item--label\">\n                    {{ option.label() }}\n                  </span>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedLabels().length) {\n      {{ selectedLabels() }}\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    background=\"primary\"\n    [padding]=\"0\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n      >\n        @if (options().length) {\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length > 0) {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [selected]=\"isOptionSelected(option.value())\"\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                @if (option.templateRef(); as optionNgContent) {\n                  <div class=\"tedi-select__dropdown-item--custom-content\">\n                    <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n                  </div>\n                  <span class=\"tedi-select__dropdown-item--label\">\n                    {{ option.label() }}\n                  </span>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1498,8 +1513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         OverlayModule,
                         CdkListboxModule,
                         InputComponent,
-                        CardComponent,
-                        CardContentComponent,
+                        CardComponent$1,
+                        CardContentComponent$1,
                         DropdownItemComponent,
                         ClosingButtonComponent,
                         IconComponent,
@@ -1515,7 +1530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedLabels().length) {\n      {{ selectedLabels() }}\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n      >\n        @if (options().length) {\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length > 0) {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [selected]=\"isOptionSelected(option.value())\"\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                @if (option.templateRef(); as optionNgContent) {\n                  <div class=\"tedi-select__dropdown-item--custom-content\">\n                    <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n                  </div>\n                  <span class=\"tedi-select__dropdown-item--label\">\n                    {{ option.label() }}\n                  </span>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
+                    ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedLabels().length) {\n      {{ selectedLabels() }}\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    background=\"primary\"\n    [padding]=\"0\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n      >\n        @if (options().length) {\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length > 0) {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [selected]=\"isOptionSelected(option.value())\"\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                @if (option.templateRef(); as optionNgContent) {\n                  <div class=\"tedi-select__dropdown-item--custom-content\">\n                    <ng-container [ngTemplateOutlet]=\"optionNgContent\" />\n                  </div>\n                  <span class=\"tedi-select__dropdown-item--label\">\n                    {{ option.label() }}\n                  </span>\n                }\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionComponent), { isSignal: true }] }], onWindowResize: [{
                 type: HostListener,
                 args: ["window:resize"]
@@ -1912,7 +1927,7 @@ class MultiselectComponent {
                 useExisting: forwardRef(() => MultiselectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedOptions().length) {\n      <div\n        class=\"tedi-select__multiselect-container\"\n        [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n      >\n        @for (value of selectedOptions(); track value) {\n          <tedi-tag\n            [closable]=\"clearableTags()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      </div>\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxMultiple\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (options().length) {\n          @if (selectAll()) {\n            <li\n              tedi-dropdown-item\n              [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n            >\n              <tedi-checkbox\n                class=\"tedi-select__multiselect-checkbox\"\n                [inputId]=\"inputId() + '-select-all'\"\n                [checked]=\"allOptionsSelected()\"\n              >\n                {{ \"select.select-all\" | tediTranslate }}\n              </tedi-checkbox>\n            </li>\n          }\n\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length) {\n              @if (selectableGroups()) {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n                >\n                  <div class=\"tedi-select__group-checkbox\">\n                    <tedi-checkbox\n                      class=\"tedi-select__multiselect-checkbox\"\n                      [inputId]=\"'group-' + group.label\"\n                      [checked]=\"isGroupSelected(group.label)\"\n                    >\n                      <span tedi-text color=\"tertiary\">\n                        {{ group.label }}\n                      </span>\n                    </tedi-checkbox>\n                  </div>\n                </li>\n              } @else {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name\"\n                  role=\"presentation\"\n                >\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                <tedi-checkbox\n                  class=\"tedi-select__multiselect-checkbox\"\n                  [inputId]=\"'option-' + option.value()\"\n                  [checked]=\"isOptionSelected(option.value())\"\n                >\n                  @if (option.templateRef(); as optionTemplate) {\n                    <span class=\"tedi-select__dropdown-item--custom-content\">\n                      <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n                    </span>\n                    <span class=\"tedi-select__dropdown-item--label\">\n                      {{ option.label() }}\n                    </span>\n                  } @else {\n                    {{ option.label() }}\n                  }\n                </tedi-checkbox>\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedOptions().length) {\n      <div\n        class=\"tedi-select__multiselect-container\"\n        [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n      >\n        @for (value of selectedOptions(); track value) {\n          <tedi-tag\n            [closable]=\"clearableTags()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      </div>\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    background=\"primary\"\n    [padding]=\"0\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxMultiple\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (options().length) {\n          @if (selectAll()) {\n            <li\n              tedi-dropdown-item\n              [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n            >\n              <tedi-checkbox\n                class=\"tedi-select__multiselect-checkbox\"\n                [inputId]=\"inputId() + '-select-all'\"\n                [checked]=\"allOptionsSelected()\"\n              >\n                {{ \"select.select-all\" | tediTranslate }}\n              </tedi-checkbox>\n            </li>\n          }\n\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length) {\n              @if (selectableGroups()) {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n                >\n                  <div class=\"tedi-select__group-checkbox\">\n                    <tedi-checkbox\n                      class=\"tedi-select__multiselect-checkbox\"\n                      [inputId]=\"'group-' + group.label\"\n                      [checked]=\"isGroupSelected(group.label)\"\n                    >\n                      <span tedi-text color=\"tertiary\">\n                        {{ group.label }}\n                      </span>\n                    </tedi-checkbox>\n                  </div>\n                </li>\n              } @else {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name\"\n                  role=\"presentation\"\n                >\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                <tedi-checkbox\n                  class=\"tedi-select__multiselect-checkbox\"\n                  [inputId]=\"'option-' + option.value()\"\n                  [checked]=\"isOptionSelected(option.value())\"\n                >\n                  @if (option.templateRef(); as optionTemplate) {\n                    <span class=\"tedi-select__dropdown-item--custom-content\">\n                      <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n                    </span>\n                    <span class=\"tedi-select__dropdown-item--label\">\n                      {{ option.label() }}\n                    </span>\n                  } @else {\n                    {{ option.label() }}\n                  }\n                </tedi-checkbox>\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: InputComponent, selector: "[tedi-input]", inputs: ["size", "state"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: CheckboxComponent, selector: "tedi-checkbox", inputs: ["inputId", "checked", "indeterminate", "value", "disabled", "size", "hasError", "feedbackText"], outputs: ["checkedChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -1921,8 +1936,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         OverlayModule,
                         CdkListboxModule,
                         InputComponent,
-                        CardComponent,
-                        CardContentComponent,
+                        CardComponent$1,
+                        CardContentComponent$1,
                         DropdownItemComponent,
                         ClosingButtonComponent,
                         IconComponent,
@@ -1940,7 +1955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useExisting: forwardRef(() => MultiselectComponent),
                             multi: true,
                         },
-                    ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedOptions().length) {\n      <div\n        class=\"tedi-select__multiselect-container\"\n        [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n      >\n        @for (value of selectedOptions(); track value) {\n          <tedi-tag\n            [closable]=\"clearableTags()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      </div>\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    spacing=\"none\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxMultiple\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (options().length) {\n          @if (selectAll()) {\n            <li\n              tedi-dropdown-item\n              [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n            >\n              <tedi-checkbox\n                class=\"tedi-select__multiselect-checkbox\"\n                [inputId]=\"inputId() + '-select-all'\"\n                [checked]=\"allOptionsSelected()\"\n              >\n                {{ \"select.select-all\" | tediTranslate }}\n              </tedi-checkbox>\n            </li>\n          }\n\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length) {\n              @if (selectableGroups()) {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n                >\n                  <div class=\"tedi-select__group-checkbox\">\n                    <tedi-checkbox\n                      class=\"tedi-select__multiselect-checkbox\"\n                      [inputId]=\"'group-' + group.label\"\n                      [checked]=\"isGroupSelected(group.label)\"\n                    >\n                      <span tedi-text color=\"tertiary\">\n                        {{ group.label }}\n                      </span>\n                    </tedi-checkbox>\n                  </div>\n                </li>\n              } @else {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name\"\n                  role=\"presentation\"\n                >\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                <tedi-checkbox\n                  class=\"tedi-select__multiselect-checkbox\"\n                  [inputId]=\"'option-' + option.value()\"\n                  [checked]=\"isOptionSelected(option.value())\"\n                >\n                  @if (option.templateRef(); as optionTemplate) {\n                    <span class=\"tedi-select__dropdown-item--custom-content\">\n                      <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n                    </span>\n                    <span class=\"tedi-select__dropdown-item--label\">\n                      {{ option.label() }}\n                    </span>\n                  } @else {\n                    {{ option.label() }}\n                  }\n                </tedi-checkbox>\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
+                    ], template: "@let listboxId = inputId() + \"-listbox\";\n@let labelId = inputId() + \"-label\";\n\n@if (label()) {\n  <label\n    [id]=\"labelId\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"inputId()\"\n  class=\"tedi-select__trigger\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  tedi-input\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"listboxId\"\n  [attr.aria-labelledby]=\"labelId\"\n  [tabindex]=\"disabled() ? -1 : 0\"\n  [state]=\"state()\"\n  [size]=\"size()\"\n  (click)=\"toggleIsOpen()\"\n  (keydown.enter)=\"toggleIsOpen()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"tedi-select__label\">\n    @if (selectedOptions().length) {\n      <div\n        class=\"tedi-select__multiselect-container\"\n        [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n      >\n        @for (value of selectedOptions(); track value) {\n          <tedi-tag\n            [closable]=\"clearableTags()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      </div>\n    } @else {\n      <span class=\"tedi-select__label--placeholder\">\n        {{ placeholder() }}\n      </span>\n    }\n  </span>\n\n  @if (clearable() && selectedOptions().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      title=\"Clear\"\n      (click)=\"clear($event)\"\n    ></button>\n  }\n\n  <tedi-icon class=\"tedi-select__arrow\" name=\"arrow_drop_down\" />\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleIsOpen(false)\"\n  (detach)=\"toggleIsOpen(false)\"\n>\n  <tedi-card\n    class=\"tedi-select__dropdown\"\n    background=\"primary\"\n    [padding]=\"0\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n  >\n    <tedi-card-content>\n      <ul\n        [id]=\"listboxId\"\n        class=\"tedi-select__options\"\n        cdkListbox\n        cdkListboxMultiple\n        [cdkListboxValue]=\"selectedOptions()\"\n        (cdkListboxValueChange)=\"handleValueChange($event)\"\n        #listbox=\"cdkListbox\"\n      >\n        @if (options().length) {\n          @if (selectAll()) {\n            <li\n              tedi-dropdown-item\n              [cdkOption]=\"specialOptionControls.SELECT_ALL\"\n            >\n              <tedi-checkbox\n                class=\"tedi-select__multiselect-checkbox\"\n                [inputId]=\"inputId() + '-select-all'\"\n                [checked]=\"allOptionsSelected()\"\n              >\n                {{ \"select.select-all\" | tediTranslate }}\n              </tedi-checkbox>\n            </li>\n          }\n\n          @for (group of optionGroups(); track $index) {\n            @if (group.label.length) {\n              @if (selectableGroups()) {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name tedi-select__group-name--selectable\"\n                  [cdkOption]=\"specialOptionControls.SELECTGROUP + group.label\"\n                >\n                  <div class=\"tedi-select__group-checkbox\">\n                    <tedi-checkbox\n                      class=\"tedi-select__multiselect-checkbox\"\n                      [inputId]=\"'group-' + group.label\"\n                      [checked]=\"isGroupSelected(group.label)\"\n                    >\n                      <span tedi-text color=\"tertiary\">\n                        {{ group.label }}\n                      </span>\n                    </tedi-checkbox>\n                  </div>\n                </li>\n              } @else {\n                <li\n                  tedi-dropdown-item\n                  class=\"tedi-select__group-name\"\n                  role=\"presentation\"\n                >\n                  <span tedi-text color=\"tertiary\">\n                    {{ group.label }}\n                  </span>\n                </li>\n              }\n            }\n\n            @for (option of group.options; track option.value()) {\n              <li\n                tedi-dropdown-item\n                [cdkOption]=\"option.value()\"\n                [cdkOptionDisabled]=\"option.disabled()\"\n                [disabled]=\"option.disabled()\"\n              >\n                <tedi-checkbox\n                  class=\"tedi-select__multiselect-checkbox\"\n                  [inputId]=\"'option-' + option.value()\"\n                  [checked]=\"isOptionSelected(option.value())\"\n                >\n                  @if (option.templateRef(); as optionTemplate) {\n                    <span class=\"tedi-select__dropdown-item--custom-content\">\n                      <ng-container [ngTemplateOutlet]=\"optionTemplate\" />\n                    </span>\n                    <span class=\"tedi-select__dropdown-item--label\">\n                      {{ option.label() }}\n                    </span>\n                  } @else {\n                    {{ option.label() }}\n                  }\n                </tedi-checkbox>\n              </li>\n            }\n          }\n        } @else {\n          <li tedi-dropdown-item class=\"tedi-select__no-options\">\n            {{ \"select.no-options\" | tediTranslate }}\n          </li>\n        }\n      </ul>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-select{display:block;width:100%}.tedi-select__trigger{display:flex;width:100%;justify-content:space-between}.tedi-select__label{overflow:hidden;text-align:left;flex-grow:1;cursor:default}.tedi-select__label--placeholder{pointer-events:none;color:var(--_placeholder-color)}.tedi-select__clear{padding:0;margin:0;border:none;background:none;flex-grow:0;color:var(--button-close-text-default);cursor:pointer}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;cursor:default;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing)}.tedi-select__dropdown{box-shadow:0 1px 5px 0 var(--tedi-alpha-20);margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing)}.tedi-select__options{margin:0;padding:0;max-height:300px;overflow-y:auto}.tedi-select__options:focus .cdk-option-active{background:var(--dropdown-item-hover-background);color:var(--dropdown-item-hover-text)}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;text-transform:uppercase;letter-spacing:0px;padding:8px 12px 4px;font-weight:var(--heading-subtitle-small-weight);font-size:var(--heading-subtitle-small-size);line-height:var(--heading-subtitle-small-line-height)}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{overflow:hidden;flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-checkbox{pointer-events:none}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], clearableTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableTags", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectableGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroups", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dropdownWidthRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidthRef", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{ read: ElementRef }, isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionComponent), { isSignal: true }] }], onWindowResize: [{
                 type: HostListener,
                 args: ["window:resize"]
@@ -2210,7 +2225,7 @@ class SearchComponent {
                 useExisting: forwardRef(() => SearchComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "_cdkMenuRef", first: true, predicate: CdkMenu, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_overlayOriginRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\">\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-search__container\">\n  <input\n    cdkOverlayOrigin\n    [id]=\"inputId()\"\n    class=\"tedi-search__input\"\n    type=\"text\"\n    [(ngModel)]=\"_inputValue\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"_disabled()\"\n    (focus)=\"focusInput()\"\n    (keydown.enter)=\"focusDropdown($event)\"\n    (keydown.arrowDown)=\"focusDropdown($event)\"\n    (ngModelChange)=\"inputChanged($event)\"\n    (blur)=\"onTouched()\"\n    #trigger=\"cdkOverlayOrigin\"\n  />\n\n  <div class=\"tedi-search__suffix\">\n    @if (clearable() && _inputValue()) {\n      <button\n        type=\"reset\"\n        tedi-closing-button\n        [size]=\"size() === 'large' ? 'default' : 'small'\"\n        [iconSize]=\"size() === 'large' ? 24 : 18\"\n        (click)=\"$event.stopPropagation(); clearResult()\"\n      ></button>\n      @if (!withButton()) {\n        <div class=\"tedi-search__suffix-separator\"></div>\n      }\n    }\n    @if (!withButton()) {\n      @if (!loading()) {\n        <tedi-icon\n          class=\"tedi-search__search-icon\"\n          name=\"search\"\n          color=\"secondary\"\n          [size]=\"iconSize()\"\n        />\n      } @else {\n        <tedi-spinner />\n      }\n    }\n  </div>\n\n  @if (withButton()) {\n    @if (loading()) {\n      <tedi-spinner />\n    }\n    <button\n      tedi-button\n      class=\"tedi-search__trigger\"\n      [size]=\"buttonSize()\"\n      (click)=\"searchButtonClick()\"\n      [disabled]=\"_disabled()\"\n    >\n      <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"_isVisible()\"\n  [cdkConnectedOverlayDisableClose]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay(false)\"\n  (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n  #searchPanel\n>\n  <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n    @if (loading()) {\n      <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n        <tedi-spinner />\n      </tedi-card-content>\n    } @else if (_foundOptions().length) {\n      <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n        @for (option of _foundOptions(); track option.value) {\n          <button\n            cdkMenuItem\n            tedi-dropdown-item\n            [value]=\"option.value\"\n            [selected]=\"option.value === _selectedOption()?.value\"\n            (click)=\"selectResult(option)\"\n            #autocompleteOption\n          >\n            @if (option.description) {\n              <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n            } @else {\n              {{ option.label }}\n            }\n          </button>\n        }\n      </tedi-card-content>\n    } @else {\n      <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n        {{ noResultText() }}\n      </tedi-card-content>\n    }\n\n    <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n      <ng-content></ng-content>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);max-height:300px;margin:var(--_form-outer-gap) 0;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "_cdkMenuRef", first: true, predicate: CdkMenu, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_overlayOriginRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\">\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-search__container\">\n  <input\n    cdkOverlayOrigin\n    [id]=\"inputId()\"\n    class=\"tedi-search__input\"\n    type=\"text\"\n    [(ngModel)]=\"_inputValue\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"_disabled()\"\n    (focus)=\"focusInput()\"\n    (keydown.enter)=\"focusDropdown($event)\"\n    (keydown.arrowDown)=\"focusDropdown($event)\"\n    (ngModelChange)=\"inputChanged($event)\"\n    (blur)=\"onTouched()\"\n    #trigger=\"cdkOverlayOrigin\"\n  />\n\n  <div class=\"tedi-search__suffix\">\n    @if (clearable() && _inputValue()) {\n      <button\n        type=\"reset\"\n        tedi-closing-button\n        [size]=\"size() === 'large' ? 'default' : 'small'\"\n        [iconSize]=\"size() === 'large' ? 24 : 18\"\n        (click)=\"$event.stopPropagation(); clearResult()\"\n      ></button>\n      @if (!withButton()) {\n        <div class=\"tedi-search__suffix-separator\"></div>\n      }\n    }\n    @if (!withButton()) {\n      @if (!loading()) {\n        <tedi-icon\n          class=\"tedi-search__search-icon\"\n          name=\"search\"\n          color=\"secondary\"\n          [size]=\"iconSize()\"\n        />\n      } @else {\n        <tedi-spinner />\n      }\n    }\n  </div>\n\n  @if (withButton()) {\n    @if (loading()) {\n      <tedi-spinner />\n    }\n    <button\n      tedi-button\n      class=\"tedi-search__trigger\"\n      [size]=\"buttonSize()\"\n      (click)=\"searchButtonClick()\"\n      [disabled]=\"_disabled()\"\n    >\n      <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"_isVisible()\"\n  [cdkConnectedOverlayDisableClose]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay(false)\"\n  (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n  #searchPanel\n>\n  <tedi-card\n    class=\"tedi-search__panel\"\n    background=\"primary\"\n    [style.width.px]=\"_width()\"\n  >\n    @if (loading()) {\n      <tedi-card-content [padding]=\"1\">\n        <tedi-spinner />\n      </tedi-card-content>\n    } @else if (_foundOptions().length) {\n      <tedi-card-content [padding]=\"0\" cdkMenu>\n        @for (option of _foundOptions(); track option.value) {\n          <button\n            cdkMenuItem\n            tedi-dropdown-item\n            [value]=\"option.value\"\n            [selected]=\"option.value === _selectedOption()?.value\"\n            (click)=\"selectResult(option)\"\n            #autocompleteOption\n          >\n            @if (option.description) {\n              <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n            } @else {\n              {{ option.label }}\n            }\n          </button>\n        }\n      </tedi-card-content>\n    } @else {\n      <tedi-card-content [padding]=\"1\">\n        {{ noResultText() }}\n      </tedi-card-content>\n    }\n\n    <tedi-card-content class=\"tedi-search__footer-content\" [padding]=\"1\">\n      <ng-content></ng-content>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);margin:var(--_form-outer-gap) 0}.tedi-search__panel.tedi-card{max-height:300px;overflow-y:auto}.tedi-search__footer-content:not(:empty){border-top:1px solid var(--card-border-primary)}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$1.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2$1.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: DropdownItemComponent, selector: "[tedi-dropdown-item]", inputs: ["selected", "disabled"], outputs: ["itemSelected"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }], 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,
@@ -2220,8 +2235,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         IconComponent,
                         CdkMenuModule,
                         OverlayModule,
-                        CardComponent,
-                        CardContentComponent,
+                        CardComponent$1,
+                        CardContentComponent$1,
                         DropdownItemComponent,
                         ClosingButtonComponent,
                         A11yModule,
@@ -2240,7 +2255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useExisting: forwardRef(() => SearchComponent),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\">\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-search__container\">\n  <input\n    cdkOverlayOrigin\n    [id]=\"inputId()\"\n    class=\"tedi-search__input\"\n    type=\"text\"\n    [(ngModel)]=\"_inputValue\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"_disabled()\"\n    (focus)=\"focusInput()\"\n    (keydown.enter)=\"focusDropdown($event)\"\n    (keydown.arrowDown)=\"focusDropdown($event)\"\n    (ngModelChange)=\"inputChanged($event)\"\n    (blur)=\"onTouched()\"\n    #trigger=\"cdkOverlayOrigin\"\n  />\n\n  <div class=\"tedi-search__suffix\">\n    @if (clearable() && _inputValue()) {\n      <button\n        type=\"reset\"\n        tedi-closing-button\n        [size]=\"size() === 'large' ? 'default' : 'small'\"\n        [iconSize]=\"size() === 'large' ? 24 : 18\"\n        (click)=\"$event.stopPropagation(); clearResult()\"\n      ></button>\n      @if (!withButton()) {\n        <div class=\"tedi-search__suffix-separator\"></div>\n      }\n    }\n    @if (!withButton()) {\n      @if (!loading()) {\n        <tedi-icon\n          class=\"tedi-search__search-icon\"\n          name=\"search\"\n          color=\"secondary\"\n          [size]=\"iconSize()\"\n        />\n      } @else {\n        <tedi-spinner />\n      }\n    }\n  </div>\n\n  @if (withButton()) {\n    @if (loading()) {\n      <tedi-spinner />\n    }\n    <button\n      tedi-button\n      class=\"tedi-search__trigger\"\n      [size]=\"buttonSize()\"\n      (click)=\"searchButtonClick()\"\n      [disabled]=\"_disabled()\"\n    >\n      <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"_isVisible()\"\n  [cdkConnectedOverlayDisableClose]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay(false)\"\n  (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n  #searchPanel\n>\n  <tedi-card class=\"tedi-search__panel\" [style.width.px]=\"_width()\">\n    @if (loading()) {\n      <tedi-card-content padding=\"md\" [hasSeparator]=\"true\">\n        <tedi-spinner />\n      </tedi-card-content>\n    } @else if (_foundOptions().length) {\n      <tedi-card-content padding=\"none\" [hasSeparator]=\"true\" cdkMenu>\n        @for (option of _foundOptions(); track option.value) {\n          <button\n            cdkMenuItem\n            tedi-dropdown-item\n            [value]=\"option.value\"\n            [selected]=\"option.value === _selectedOption()?.value\"\n            (click)=\"selectResult(option)\"\n            #autocompleteOption\n          >\n            @if (option.description) {\n              <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n            } @else {\n              {{ option.label }}\n            }\n          </button>\n        }\n      </tedi-card-content>\n    } @else {\n      <tedi-card-content [hasSeparator]=\"true\" padding=\"md\">\n        {{ noResultText() }}\n      </tedi-card-content>\n    }\n\n    <tedi-card-content class=\"tedi-search__footer-content\" padding=\"md\">\n      <ng-content></ng-content>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);max-height:300px;margin:var(--_form-outer-gap) 0;overflow-y:auto}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"] }]
+                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\">\n    {{ label() }}\n  </label>\n}\n\n<div class=\"tedi-search__container\">\n  <input\n    cdkOverlayOrigin\n    [id]=\"inputId()\"\n    class=\"tedi-search__input\"\n    type=\"text\"\n    [(ngModel)]=\"_inputValue\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"_disabled()\"\n    (focus)=\"focusInput()\"\n    (keydown.enter)=\"focusDropdown($event)\"\n    (keydown.arrowDown)=\"focusDropdown($event)\"\n    (ngModelChange)=\"inputChanged($event)\"\n    (blur)=\"onTouched()\"\n    #trigger=\"cdkOverlayOrigin\"\n  />\n\n  <div class=\"tedi-search__suffix\">\n    @if (clearable() && _inputValue()) {\n      <button\n        type=\"reset\"\n        tedi-closing-button\n        [size]=\"size() === 'large' ? 'default' : 'small'\"\n        [iconSize]=\"size() === 'large' ? 24 : 18\"\n        (click)=\"$event.stopPropagation(); clearResult()\"\n      ></button>\n      @if (!withButton()) {\n        <div class=\"tedi-search__suffix-separator\"></div>\n      }\n    }\n    @if (!withButton()) {\n      @if (!loading()) {\n        <tedi-icon\n          class=\"tedi-search__search-icon\"\n          name=\"search\"\n          color=\"secondary\"\n          [size]=\"iconSize()\"\n        />\n      } @else {\n        <tedi-spinner />\n      }\n    }\n  </div>\n\n  @if (withButton()) {\n    @if (loading()) {\n      <tedi-spinner />\n    }\n    <button\n      tedi-button\n      class=\"tedi-search__trigger\"\n      [size]=\"buttonSize()\"\n      (click)=\"searchButtonClick()\"\n      [disabled]=\"_disabled()\"\n    >\n      <tedi-icon name=\"search\" color=\"white\" [size]=\"iconSize()\" />\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"_isVisible()\"\n  [cdkConnectedOverlayDisableClose]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay(false)\"\n  (overlayKeydown)=\"$event.key === 'Escape' ? closeOverlay(true) : null\"\n  #searchPanel\n>\n  <tedi-card\n    class=\"tedi-search__panel\"\n    background=\"primary\"\n    [style.width.px]=\"_width()\"\n  >\n    @if (loading()) {\n      <tedi-card-content [padding]=\"1\">\n        <tedi-spinner />\n      </tedi-card-content>\n    } @else if (_foundOptions().length) {\n      <tedi-card-content [padding]=\"0\" cdkMenu>\n        @for (option of _foundOptions(); track option.value) {\n          <button\n            cdkMenuItem\n            tedi-dropdown-item\n            [value]=\"option.value\"\n            [selected]=\"option.value === _selectedOption()?.value\"\n            (click)=\"selectResult(option)\"\n            #autocompleteOption\n          >\n            @if (option.description) {\n              <strong>{{ option.label }}</strong> \u00B7 {{ option.description }}\n            } @else {\n              {{ option.label }}\n            }\n          </button>\n        }\n      </tedi-card-content>\n    } @else {\n      <tedi-card-content [padding]=\"1\">\n        {{ noResultText() }}\n      </tedi-card-content>\n    }\n\n    <tedi-card-content class=\"tedi-search__footer-content\" [padding]=\"1\">\n      <ng-content></ng-content>\n    </tedi-card-content>\n  </tedi-card>\n</ng-template>\n", styles: [".tedi-search{--_border-color: var(--form-input-border-default);--_form-field-outer-gap: var(--form-field-outer-spacing);--_border-radius: var(--form-field-radius);--_padding: var(--form-field-padding-y-md-default)}.tedi-search__container{display:flex;gap:var(--form-field-inner-spacing);align-items:center;margin-bottom:var(--_form-field-outer-gap);border:1px solid;border-color:var(--_border-color);border-radius:var(--_border-radius)}.tedi-search__container:hover{--_border-color: var(--form-input-border-hover)}.tedi-search__container:focus-within{--_border-color: var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:hover{--_border-color: var(--form-general-feedback-error-border)}.tedi-search--error:not(.tedi-search--disabled) .tedi-search__container:focus-within{--_border-color: var(--form-general-feedback-error-border);box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container{--_border-color: var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus,.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:active{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:hover{border-color:var(--form-general-feedback-success-border)}.tedi-search--valid:not(.tedi-search--disabled) .tedi-search__container:focus-within{border-color:var(--form-general-feedback-success-border);box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search__input{flex-grow:1;width:100%;padding:var(--_padding);padding-right:0;margin:0;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);letter-spacing:0;border:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);align-self:stretch;border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.tedi-search__suffix{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:stretch;padding:0 var(--_padding)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;height:1em;border-left:1px solid var(--general-border-primary)}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);margin:var(--_form-outer-gap) 0}.tedi-search__panel.tedi-card{max-height:300px;overflow-y:auto}.tedi-search__footer-content:not(:empty){border-top:1px solid var(--card-border-primary)}.tedi-search__footer-content:empty{display:none}.tedi-search--small .tedi-search__container{--_padding: var(--form-field-padding-y-sm)}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button{width:56px;height:auto}.tedi-search--large .tedi-search__container{--_padding: var(--form-field-padding-y-lg)}.tedi-search--disabled .tedi-search__container{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-search--disabled .tedi-search__input{pointer-events:none;background-color:var(--form-input-background-disabled)}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], autocompleteOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteOptions", required: false }] }], autocompleteFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteFrom", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], withButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "withButton", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], clearEvent: [{ type: i0.Output, args: ["clearEvent"] }], _inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "_inputValue", required: false }] }, { type: i0.Output, args: ["_inputValueChange"] }], _selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "_selectedOption", required: false }] }, { type: i0.Output, args: ["_selectedOptionChange"] }], _cdkMenuRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenu), { ...{ read: ElementRef }, isSignal: true }] }], _overlayOriginRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 const IECkiloBytes = 1024;
@@ -3122,19 +3137,19 @@ class TableOfContentsComponent {
         this.intersectionObservers = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, scrollOnClick: { classPropertyName: "scrollOnClick", publicName: "scrollOnClick", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, modalBreakpoint: { classPropertyName: "modalBreakpoint", publicName: "modalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, scrollAware: { classPropertyName: "scrollAware", publicName: "scrollAware", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tableItems", predicate: TableOfContentsItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["defaultTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n  <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n    <tedi-card>\n      <tedi-card-content class=\"table-of-contents__content\">\n        <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n          {{ heading() }}\n        </h1>\n        <div class=\"table-of-contents__items\">\n          <ng-content />\n        </div>\n      </tedi-card-content>\n    </tedi-card>\n  </nav>\n</ng-template>\n\n@if (!isOpen()) {\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n  <tedi-card [class]=\"footerClasses()\">\n    <tedi-card-content>\n      <button\n        class=\"table-of-contents__footer-trigger\"\n        (click)=\"openMobileModal()\"\n      >\n        <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n          {{ heading() }}\n\n          <div tedi-button variant=\"neutral\">\n            {{ \"open\" | tediTranslate }}\n            <tedi-icon name=\"expand_more\" />\n          </div>\n        </h1>\n      </button>\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--tedi-dimensions-10)}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0;--_card-padding-top: 0;--_card-padding-left: 0;--_card-padding-bottom: 0;--_card-padding-right: 0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableOfContentsComponent, isStandalone: true, selector: "tedi-table-of-contents", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, scrollOnClick: { classPropertyName: "scrollOnClick", publicName: "scrollOnClick", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, modalBreakpoint: { classPropertyName: "modalBreakpoint", publicName: "modalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, scrollAware: { classPropertyName: "scrollAware", publicName: "scrollAware", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tableItems", predicate: TableOfContentsItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["defaultTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n  <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n    <tedi-card background=\"primary\" [padding]=\"0\">\n      <tedi-card-content\n        class=\"table-of-contents__content\"\n        [padding]=\"{ top: 0, right: 0, bottom: 1, left: 0 }\"\n      >\n        <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n          {{ heading() }}\n        </h1>\n        <div class=\"table-of-contents__items\">\n          <ng-content />\n        </div>\n      </tedi-card-content>\n    </tedi-card>\n  </nav>\n</ng-template>\n\n@if (!isOpen()) {\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n  <tedi-card [class]=\"footerClasses()\" background=\"primary\" [padding]=\"0\">\n    <tedi-card-content>\n      <button\n        class=\"table-of-contents__footer-trigger\"\n        (click)=\"openMobileModal()\"\n      >\n        <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n          {{ heading() }}\n\n          <div tedi-button variant=\"neutral\">\n            {{ \"open\" | tediTranslate }}\n            <tedi-icon name=\"expand_more\" />\n          </div>\n        </h1>\n      </button>\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"], dependencies: [{ kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableOfContentsComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-table-of-contents", imports: [
-                        CardComponent,
-                        CardContentComponent,
+                        CardComponent$1,
+                        CardContentComponent$1,
                         TextComponent,
                         ButtonComponent,
                         IconComponent,
                         TediTranslationPipe,
                         NgTemplateOutlet,
-                    ], template: "<ng-template #defaultTemplate>\n  <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n    <tedi-card>\n      <tedi-card-content class=\"table-of-contents__content\">\n        <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n          {{ heading() }}\n        </h1>\n        <div class=\"table-of-contents__items\">\n          <ng-content />\n        </div>\n      </tedi-card-content>\n    </tedi-card>\n  </nav>\n</ng-template>\n\n@if (!isOpen()) {\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n  <tedi-card [class]=\"footerClasses()\">\n    <tedi-card-content>\n      <button\n        class=\"table-of-contents__footer-trigger\"\n        (click)=\"openMobileModal()\"\n      >\n        <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n          {{ heading() }}\n\n          <div tedi-button variant=\"neutral\">\n            {{ \"open\" | tediTranslate }}\n            <tedi-icon name=\"expand_more\" />\n          </div>\n        </h1>\n      </button>\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__content{padding:0;padding-bottom:var(--tedi-dimensions-10)}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0;--_card-padding-top: 0;--_card-padding-left: 0;--_card-padding-bottom: 0;--_card-padding-right: 0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"] }]
+                    ], template: "<ng-template #defaultTemplate>\n  <nav [attr.aria-label]=\"ariaLabel()\" [class]=\"classes()\">\n    <tedi-card background=\"primary\" [padding]=\"0\">\n      <tedi-card-content\n        class=\"table-of-contents__content\"\n        [padding]=\"{ top: 0, right: 0, bottom: 1, left: 0 }\"\n      >\n        <h1 tedi-text modifiers=\"h4\" class=\"table-of-contents__header\">\n          {{ heading() }}\n        </h1>\n        <div class=\"table-of-contents__items\">\n          <ng-content />\n        </div>\n      </tedi-card-content>\n    </tedi-card>\n  </nav>\n</ng-template>\n\n@if (!isOpen()) {\n  <ng-container *ngTemplateOutlet=\"defaultTemplate\" />\n\n  <tedi-card [class]=\"footerClasses()\" background=\"primary\" [padding]=\"0\">\n    <tedi-card-content>\n      <button\n        class=\"table-of-contents__footer-trigger\"\n        (click)=\"openMobileModal()\"\n      >\n        <h1 tedi-text modifiers=\"normal\" class=\"table-of-contents__header\">\n          {{ heading() }}\n\n          <div tedi-button variant=\"neutral\">\n            {{ \"open\" | tediTranslate }}\n            <tedi-icon name=\"expand_more\" />\n          </div>\n        </h1>\n      </button>\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".table-of-contents{display:none;max-height:100vh}.table-of-contents--position-sticky{position:sticky;top:var(--tedi-dimensions-10)}.table-of-contents--position-fixed{position:fixed}.table-of-contents__header{width:100%;padding:var(--tedi-dimensions-10);display:flex;align-items:center;justify-content:space-between}.table-of-contents__items{gap:var(--tedi-dimensions-05);display:flex;flex-direction:column}.table-of-contents--modal-active{display:initial}@media(min-width:36rem){.table-of-contents--modal-breakpoint-mobile{display:initial}}@media(min-width:48rem){.table-of-contents--modal-breakpoint-tablet{display:initial}}@media(min-width:62rem){.table-of-contents--modal-breakpoint-desktop{display:initial}}.table-of-contents__footer{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);padding:0}.table-of-contents__footer-trigger{border:none;width:100%;background-color:transparent;padding:0;cursor:pointer}.table-of-contents__footer-trigger .tedi-button{padding:0}.table-of-contents__footer-trigger:hover{background-color:transparent}.table-of-contents__footer .table-of-contents__header{padding:var(--tedi-dimensions-10)}@media(min-width:36rem){.table-of-contents__footer--modal-breakpoint-mobile{display:none}}@media(min-width:48rem){.table-of-contents__footer--modal-breakpoint-tablet{display:none}}@media(min-width:62rem){.table-of-contents__footer--modal-breakpoint-desktop{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], scrollOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollOnClick", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], modalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalBreakpoint", required: false }] }], scrollAware: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollAware", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ["defaultTemplate", { isSignal: true }] }], tableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableOfContentsItemComponent), { ...{
                             descendants: true,
                         }, isSignal: true }] }] } });
@@ -3273,21 +3288,21 @@ class TabsComponent {
             .withHorizontalOrientation("ltr");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsComponent, isStandalone: true, selector: "tedi-tabs", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.tedi-tabs": "true" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "tabContents", predicate: TabContentComponent, isSignal: true }], ngImport: i0, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card padding=\"none\">\n  <tedi-card-content>\n    <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n      @if (!mobileTabsOpened()) {\n        <ng-container *ngTemplateOutlet=\"tabsList\" />\n      }\n      <button\n        aria-haspopup=\"menu\"\n        (click)=\"mobileTabsOpened.set(true)\"\n        class=\"tedi-tab tedi-tab--more-btn\"\n      >\n        {{ \"more\" | tediTranslate }}\n        <tedi-icon name=\"expand_more\" [size]=\"18\" />\n      </button>\n    </div>\n  </tedi-card-content>\n\n  <tedi-card-content\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"activeTabId()\"\n    [padding]=\"{ horizontal: 'md', vertical: 'lg' }\"\n  >\n    @if (activeTabContent(); as activeContent) {\n      <ng-container *ngTemplateOutlet=\"activeContent\" />\n    }\n    <ng-content></ng-content>\n  </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n  <tedi-card padding=\"none\" class=\"tedi-tabs__mobile-dropdown\">\n    <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n      <button\n        tedi-closing-button\n        size=\"small\"\n        (click)=\"mobileTabsOpened.set(false)\"\n      ></button>\n    </tedi-card-content>\n    <tedi-card-content class=\"tedi-tabs__mobile-list\">\n      <ng-container *ngTemplateOutlet=\"tabsList\" />\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent, selector: "tedi-card", inputs: ["borderless", "spacing", "accentBorder", "selected"] }, { kind: "component", type: CardContentComponent, selector: "tedi-card-content", inputs: ["hasSeparator", "autoWidth", "timeline"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TabsComponent, isStandalone: true, selector: "tedi-tabs", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.tedi-tabs": "true" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "tabContents", predicate: TabContentComponent, isSignal: true }], ngImport: i0, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card background=\"primary\" [padding]=\"0\">\n  <tedi-card-content>\n    <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n      @if (!mobileTabsOpened()) {\n        <ng-container *ngTemplateOutlet=\"tabsList\" />\n      }\n      <button\n        aria-haspopup=\"menu\"\n        (click)=\"mobileTabsOpened.set(true)\"\n        class=\"tedi-tab tedi-tab--more-btn\"\n      >\n        {{ \"more\" | tediTranslate }}\n        <tedi-icon name=\"expand_more\" [size]=\"18\" />\n      </button>\n    </div>\n  </tedi-card-content>\n\n  <tedi-card-content\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"activeTabId()\"\n    [padding]=\"{ horizontal: 1, vertical: 1.5 }\"\n  >\n    @if (activeTabContent(); as activeContent) {\n      <ng-container *ngTemplateOutlet=\"activeContent\" />\n    }\n    <ng-content></ng-content>\n  </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n  <tedi-card\n    class=\"tedi-tabs__mobile-dropdown\"\n    background=\"primary\"\n    [padding]=\"0\"\n  >\n    <tedi-card-content\n      class=\"tedi-tabs__mobile-header\"\n      [autoWidth]=\"true\"\n      [padding]=\"0.5\"\n    >\n      <button\n        tedi-closing-button\n        size=\"small\"\n        (click)=\"mobileTabsOpened.set(false)\"\n      ></button>\n    </tedi-card-content>\n    <tedi-card-content class=\"tedi-tabs__mobile-list\">\n      <ng-container *ngTemplateOutlet=\"tabsList\" />\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-header{border-bottom:1px solid var(--card-border-primary)}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent$1, selector: "tedi-card", inputs: ["background", "padding", "borderRadius", "borderless", "border", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: CardContentComponent$1, selector: "tedi-card-content", inputs: ["background", "padding", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "autoWidth", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-tabs", imports: [
                         CommonModule,
-                        CardComponent,
-                        CardContentComponent,
+                        CardComponent$1,
+                        CardContentComponent$1,
                         ClosingButtonComponent,
                         IconComponent,
                         TediTranslationPipe,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class.tedi-tabs]": "true",
                         "(keydown)": "onKeyDown($event)",
-                    }, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card padding=\"none\">\n  <tedi-card-content>\n    <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n      @if (!mobileTabsOpened()) {\n        <ng-container *ngTemplateOutlet=\"tabsList\" />\n      }\n      <button\n        aria-haspopup=\"menu\"\n        (click)=\"mobileTabsOpened.set(true)\"\n        class=\"tedi-tab tedi-tab--more-btn\"\n      >\n        {{ \"more\" | tediTranslate }}\n        <tedi-icon name=\"expand_more\" [size]=\"18\" />\n      </button>\n    </div>\n  </tedi-card-content>\n\n  <tedi-card-content\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"activeTabId()\"\n    [padding]=\"{ horizontal: 'md', vertical: 'lg' }\"\n  >\n    @if (activeTabContent(); as activeContent) {\n      <ng-container *ngTemplateOutlet=\"activeContent\" />\n    }\n    <ng-content></ng-content>\n  </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n  <tedi-card padding=\"none\" class=\"tedi-tabs__mobile-dropdown\">\n    <tedi-card-content hasSeparator autoWidth padding=\"xs\">\n      <button\n        tedi-closing-button\n        size=\"small\"\n        (click)=\"mobileTabsOpened.set(false)\"\n      ></button>\n    </tedi-card-content>\n    <tedi-card-content class=\"tedi-tabs__mobile-list\">\n      <ng-container *ngTemplateOutlet=\"tabsList\" />\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"] }]
+                    }, template: "<ng-template #tabsList><ng-content select=\"[tedi-tab]\" /></ng-template>\n\n<tedi-card background=\"primary\" [padding]=\"0\">\n  <tedi-card-content>\n    <div role=\"tablist\" class=\"tedi-tabs__tab-list\">\n      @if (!mobileTabsOpened()) {\n        <ng-container *ngTemplateOutlet=\"tabsList\" />\n      }\n      <button\n        aria-haspopup=\"menu\"\n        (click)=\"mobileTabsOpened.set(true)\"\n        class=\"tedi-tab tedi-tab--more-btn\"\n      >\n        {{ \"more\" | tediTranslate }}\n        <tedi-icon name=\"expand_more\" [size]=\"18\" />\n      </button>\n    </div>\n  </tedi-card-content>\n\n  <tedi-card-content\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"activeTabId()\"\n    [padding]=\"{ horizontal: 1, vertical: 1.5 }\"\n  >\n    @if (activeTabContent(); as activeContent) {\n      <ng-container *ngTemplateOutlet=\"activeContent\" />\n    }\n    <ng-content></ng-content>\n  </tedi-card-content>\n</tedi-card>\n\n@if (mobileTabsOpened()) {\n  <tedi-card\n    class=\"tedi-tabs__mobile-dropdown\"\n    background=\"primary\"\n    [padding]=\"0\"\n  >\n    <tedi-card-content\n      class=\"tedi-tabs__mobile-header\"\n      [autoWidth]=\"true\"\n      [padding]=\"0.5\"\n    >\n      <button\n        tedi-closing-button\n        size=\"small\"\n        (click)=\"mobileTabsOpened.set(false)\"\n      ></button>\n    </tedi-card-content>\n    <tedi-card-content class=\"tedi-tabs__mobile-list\">\n      <ng-container *ngTemplateOutlet=\"tabsList\" />\n    </tedi-card-content>\n  </tedi-card>\n}\n", styles: [".tedi-tabs{--_tab-list-background: var(--tab-background)}.tedi-tabs__tab-list{display:flex;justify-content:start;overflow:auto;border-top-left-radius:var(--tab-top-radius, 4px);border-top-right-radius:var(--tab-top-radius, 4px);background:var(--_tab-list-background)}@media(max-width:35.98rem){.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--more-btn){flex-grow:1}.tedi-tabs__tab-list .tedi-tab:not(.tedi-tab--active,.tedi-tab--selected,.tedi-tab--more-btn){display:none}}@media(min-width:36rem){.tedi-tabs .tedi-tab--more-btn{display:none}}.tedi-tabs__mobile-dropdown.tedi-card{position:fixed;inset:0;z-index:1050}.tedi-tabs__mobile-header{border-bottom:1px solid var(--card-border-primary)}.tedi-tabs__mobile-list.tedi-card-content{display:flex;flex-direction:column}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active{--_tab-background: var(--dropdown-item-active-background);--_tab-color: var(--dropdown-item-active-text);font-weight:var(--body-regular-weight)}.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--selected:after,.tedi-tabs__mobile-list.tedi-card-content .tedi-tab--active:after{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabContentComponent), { isSignal: true }] }] } });
 
 class VerticalStepperComponent {