@tedi-design-system/angular 6.1.0-rc.3 → 6.2.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TEDI Design System
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/community/components/tags/tag/tag.component.d.ts

@@ -1,5 +1,8 @@
 import * as i0 from "@angular/core";
 export type TagType = "primary" | "secondary" | "danger";
+/**
+ * @deprecated Use Tag from TEDI-ready instead. This component will be removed from future versions.
+ */
 export declare class TagComponent {
     /**
      * Whether the tag is in loading state.

package/community/components/tags/tag/tag.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/tags/tag/tag.component.ts"],"names":[],"mappings":";AAcA,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEzD,qBAca,YAAY;IACvB;;;;OAIG;IACH,OAAO,+CAAgB;IAEvB;;;;OAIG;IACH,QAAQ,+CAAgB;IAExB;;;;OAIG;IACH,IAAI,+CAA6B;IAEjC;;;OAGG;IACH,MAAM,kDAAmB;IAEzB,OAAO,yCAMJ;IAEH,WAAW,CAAC,KAAK,EAAE,KAAK;yCApCb,YAAY;2CAAZ,YAAY;CAuCxB"}
+{"version":3,"file":"tag.component.d.ts","sourceRoot":"","sources":["../../../../../community/components/tags/tag/tag.component.ts"],"names":[],"mappings":";AAcA,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEzD;;GAEG;AACH,qBAca,YAAY;IACvB;;;;OAIG;IACH,OAAO,+CAAgB;IAEvB;;;;OAIG;IACH,QAAQ,+CAAgB;IAExB;;;;OAIG;IACH,IAAI,+CAA6B;IAEjC;;;OAGG;IACH,MAAM,kDAAmB;IAEzB,OAAO,yCAMJ;IAEH,WAAW,CAAC,KAAK,EAAE,KAAK;yCApCb,YAAY;2CAAZ,YAAY;CAuCxB"}

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

@@ -1093,7 +1093,7 @@ class DropdownComponent {
         this.keyManager = new FocusKeyManager(this.dropdownItems, this.injector).withWrap();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: 575.98px){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__close-button{margin-left:auto}@media (max-width: 575.98px){.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: 575.98px){.tedi-dropdown__card.tedi-card{position:fixed;inset:0}}.tedi-dropdown__close-button{margin-left:auto}@media (max-width: 575.98px){.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", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -1275,7 +1275,7 @@ class ModalHeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", feedback: "feedbackChange", closeButton: "closeButtonChange" }, ngImport: i0, template: "<div class=\"tedi-modal-header\">\n  <div class=\"tedi-modal-header__title\">\n    <ng-content>\n      <h1 tedi-text modifiers=\"h3\">\n        {{ title() }}\n      </h1>\n    </ng-content>\n\n    <ng-content select=\"[header-exit-button]\">\n      @if (closeButton()) {\n        <button\n          tedi-closing-button\n          variant=\"neutral\"\n          (click)=\"closeModal()\"\n        ></button>\n      }\n    </ng-content>\n  </div>\n\n  @if (feedback()) {\n    <tedi-feedback-text\n      [text]=\"feedback()!.text\"\n      [type]=\"feedback()!.type\"\n      [position]=\"feedback()!.position\"\n    />\n  }\n</div>\n", styles: [".tedi-modal-header{border-bottom:var(--borders-01) solid var(--modal-border-inner);padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x)}.tedi-modal-header__title{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalHeaderComponent, isStandalone: true, selector: "tedi-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", feedback: "feedbackChange", closeButton: "closeButtonChange" }, ngImport: i0, template: "<div class=\"tedi-modal-header\">\n  <div class=\"tedi-modal-header__title\">\n    <ng-content>\n      <h1 tedi-text modifiers=\"h3\">\n        {{ title() }}\n      </h1>\n    </ng-content>\n\n    <ng-content select=\"[header-exit-button]\">\n      @if (closeButton()) {\n        <button\n          tedi-closing-button\n          variant=\"neutral\"\n          (click)=\"closeModal()\"\n        ></button>\n      }\n    </ng-content>\n  </div>\n\n  @if (feedback()) {\n    <tedi-feedback-text\n      [text]=\"feedback()!.text\"\n      [type]=\"feedback()!.type\"\n      [position]=\"feedback()!.position\"\n    />\n  }\n</div>\n", styles: [".tedi-modal-header{border-bottom:var(--borders-01) solid var(--modal-border-inner);padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x)}.tedi-modal-header__title{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalHeaderComponent, decorators: [{
             type: Component,
@@ -1425,7 +1425,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"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "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    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", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1457,6 +1457,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ["window:resize"]
             }] } });
 
+/**
+ * @deprecated Use Tag from TEDI-ready instead. This component will be removed from future versions.
+ */
 class TagComponent {
     /**
      * Whether the tag is in loading state.
@@ -1842,7 +1845,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"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: 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    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", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: 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: "19.2.15", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -2128,7 +2131,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;border:1px solid;align-items:center;border-color:var(--_border-color);border-radius:var(--_border-radius);margin-bottom:var(--_form-field-outer-gap);gap:var(--form-field-inner-spacing)}.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{width:100%;flex-grow:1;border:0;padding:var(--_padding);padding-right:0;margin:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0;letter-spacing:0;font-weight:var(--body-regular-weight);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height)}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0;align-self:stretch}.tedi-search__suffix{display:flex;align-self:stretch;align-items:center;padding:0 var(--_padding);gap:var(--layout-grid-gutters-04)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;border-left:1px solid var(--general-border-primary);height:1em}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);margin:var(--_form-outer-gap) 0;max-height:300px;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{height:auto;width:56px}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button .tedi-icon--size-24{font-size:var(--icon-05)}.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{background-color:var(--form-input-background-disabled);pointer-events:none}\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"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], 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 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;border:1px solid;align-items:center;border-color:var(--_border-color);border-radius:var(--_border-radius);margin-bottom:var(--_form-field-outer-gap);gap:var(--form-field-inner-spacing)}.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{width:100%;flex-grow:1;border:0;padding:var(--_padding);padding-right:0;margin:0;border-radius:var(--_border-radius);border-top-right-radius:0;border-bottom-right-radius:0;letter-spacing:0;font-weight:var(--body-regular-weight);font-size:var(--body-regular-size);line-height:var(--body-regular-line-height)}.tedi-search__trigger.tedi-button{--_border-radius: var(--button-radius-sm);border-radius:var(--_border-radius);border-top-left-radius:0;border-bottom-left-radius:0;align-self:stretch}.tedi-search__suffix{display:flex;align-self:stretch;align-items:center;padding:0 var(--_padding);gap:var(--layout-grid-gutters-04)}.tedi-search--with-button .tedi-search__suffix{padding:0}.tedi-search__suffix-separator{width:1px;border-left:1px solid var(--general-border-primary);height:1em}.tedi-search__panel{--_form-outer-gap: var(--form-field-outer-spacing);margin:var(--_form-outer-gap) 0;max-height:300px;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{height:auto;width:56px}.tedi-search--large.tedi-search--with-button:not(.tedi-search--with-button-text) .tedi-search__trigger.tedi-button .tedi-icon--size-24{font-size:var(--icon-05)}.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{background-color:var(--form-input-background-disabled);pointer-events:none}\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", "ariaLabel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
@@ -2675,7 +2678,7 @@ class FileDropzoneComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileDropzoneComponent, deps: [{ token: i1$2.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FileDropzoneComponent, isStandalone: true, selector: "tedi-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, sizeDisplayStandard: { classPropertyName: "sizeDisplayStandard", publicName: "sizeDisplayStandard", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateIndividually: { classPropertyName: "validateIndividually", publicName: "validateIndividually", isSignal: true, isRequired: false, transformFunction: null }, defaultFiles: { classPropertyName: "defaultFiles", publicName: "defaultFiles", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, uploadFolder: { classPropertyName: "uploadFolder", publicName: "uploadFolder", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", fileDelete: "fileDelete" }, host: { listeners: { "blur": "onBlur()", "keydown.code.enter": "openFilePicker()", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, providers: [FileService], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  class=\"tedi-file-dropzone__input\"\n  type=\"file\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple()\"\n  [id]=\"inputId()\"\n  [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n  [accept]=\"accept()\"\n  (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n  <div class=\"tedi-file-dropzone__label-wrapper\">\n    <tedi-icon\n      [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n      [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n    />\n    <label tedi-label class=\"tedi-file-dropzone__label\">{{\n      (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n    }}</label>\n  </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n  @if (helperText(); as message) {\n    <tedi-feedback-text\n      [text]=\"message.text\"\n      [type]=\"message.type || 'hint'\"\n      [position]=\"message.position || 'left'\"\n    />\n  }\n</ng-content>\n\n<ng-content select=\"[file-list]\">\n  @for (file of files(); track file.name) {\n    <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n      <tedi-card\n        padding=\"none\"\n        [className]=\"fileClasses(file)\"\n        [background]=\"\n          file.fileStatus && file.fileStatus == 'invalid'\n            ? 'danger-primary'\n            : 'tertiary'\n        \"\n      >\n        <tedi-card-content class=\"tedi-file-dropzone__card\" padding=\"xs\">\n          <div class=\"tedi-file-dropzone__file-name\">\n            {{ file.label ?? file.name }}\n\n            @if (file && validateIndividually() && file.helper; as helper) {\n              <tedi-tooltip\n                [className]=\"tooltipClasses(file)\"\n                [position]=\"helper?.position || 'top'\"\n              >\n                <tedi-tooltip-trigger>\n                  <button tedi-info-button [disabled]=\"file.disabled\"></button>\n                </tedi-tooltip-trigger>\n\n                <tedi-tooltip-content>\n                  {{ helper.text }}\n                </tedi-tooltip-content>\n              </tedi-tooltip>\n            }\n          </div>\n          <button\n            tedi-closing-button\n            [title]=\"'clear' | tediTranslate\"\n            [iconSize]=\"18\"\n            (click)=\"removeFile(file)\"\n            size=\"small\"\n          ></button>\n        </tedi-card-content>\n      </tedi-card>\n    </div>\n  }\n</ng-content>\n\n<ng-content select=\"[error-text]\">\n  @if (this.uploadError(); as message) {\n    <tedi-feedback-text [text]=\"message\" type=\"error\" position=\"left\" />\n  }\n</ng-content>\n", styles: [".tedi-file-dropzone{text-align:center;cursor:pointer;background-color:var(--file-dropzone-background-default);border:2px dotted var(--file-dropzone-border-default);transition:border-color .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--form-field-radius);padding:var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);margin-bottom:var(--layout-grid-gutters-04)}.tedi-file-dropzone:hover{background-color:var(--file-dropzone-background-hover);border-color:var(--file-dropzone-border-hover)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper{display:flex;justify-content:center}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{font-weight:500;color:var(--file-dropzone-text-default);font-size:var(--body-regular-size)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label:hover{cursor:pointer}.tedi-file-dropzone--disabled{pointer-events:none;cursor:not-allowed;background-color:var(--file-dropzone-background-disabled);border-color:var(--file-dropzone-border-disabled)}.tedi-file-dropzone--disabled .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{color:var(--general-text-disabled)}.tedi-file-dropzone--invalid{border-color:var(--form-general-feedback-error-border)}.tedi-file-dropzone--valid{border-color:var(--form-general-feedback-success-border)}.tedi-file-dropzone--drop-over{color:var(--file-dropzone-text-drop-over);background-color:var(--file-dropzone-background-drop-over);border-color:var(--file-dropzone-border-drop-over)}.tedi-file-dropzone:focus-visible{outline:2px solid var(--file-dropzone-border-hover);outline-offset:1px}.tedi-file-dropzone__input{display:none}.tedi-file-dropzone__file-list{width:100%;list-style:none;margin-top:var(--layout-grid-gutters-04)}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}.tedi-file-dropzone__card{display:flex;justify-content:space-between;align-items:center;--_card-border: transparent}.tedi-file-dropzone__tooltip--error .tedi-info-button{--button-main-neutral-text-default: var(--red-700)}.tedi-file-dropzone__file-name{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { 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"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "appendTo", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]", inputs: ["aria-label"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: VerticalSpacingDirective, selector: "[tediVerticalSpacing]", inputs: ["tediVerticalSpacing"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FileDropzoneComponent, isStandalone: true, selector: "tedi-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, sizeDisplayStandard: { classPropertyName: "sizeDisplayStandard", publicName: "sizeDisplayStandard", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, validateIndividually: { classPropertyName: "validateIndividually", publicName: "validateIndividually", isSignal: true, isRequired: false, transformFunction: null }, defaultFiles: { classPropertyName: "defaultFiles", publicName: "defaultFiles", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, uploadFolder: { classPropertyName: "uploadFolder", publicName: "uploadFolder", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", fileDelete: "fileDelete" }, host: { listeners: { "blur": "onBlur()", "keydown.code.enter": "openFilePicker()", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, providers: [FileService], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  class=\"tedi-file-dropzone__input\"\n  type=\"file\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple()\"\n  [id]=\"inputId()\"\n  [attr.webkitdirectory]=\"uploadFolder() ? '' : null\"\n  [accept]=\"accept()\"\n  (change)=\"selectionChange($event)\"\n/>\n\n<button [className]=\"classes()\" (click)=\"onContainerClick()\">\n  <div class=\"tedi-file-dropzone__label-wrapper\">\n    <tedi-icon\n      [name]=\"isDragActive() ? 'file_upload' : 'attach_file'\"\n      [color]=\"disabled() ? 'tertiary' : 'secondary'\"\n    />\n    <label tedi-label class=\"tedi-file-dropzone__label\">{{\n      (isDragActive() ? \"file-upload.drag-and-drop\" : label()) | tediTranslate\n    }}</label>\n  </div>\n</button>\n\n<ng-content select=\"[helper-text]\">\n  @if (helperText(); as message) {\n    <tedi-feedback-text\n      [text]=\"message.text\"\n      [type]=\"message.type || 'hint'\"\n      [position]=\"message.position || 'left'\"\n    />\n  }\n</ng-content>\n\n<ng-content select=\"[file-list]\">\n  @for (file of files(); track file.name) {\n    <div class=\"tedi-file-dropzone__file-list\" [tediVerticalSpacing]=\"0.5\">\n      <tedi-card\n        padding=\"none\"\n        [className]=\"fileClasses(file)\"\n        [background]=\"\n          file.fileStatus && file.fileStatus == 'invalid'\n            ? 'danger-primary'\n            : 'tertiary'\n        \"\n      >\n        <tedi-card-content class=\"tedi-file-dropzone__card\" padding=\"xs\">\n          <div class=\"tedi-file-dropzone__file-name\">\n            {{ file.label ?? file.name }}\n\n            @if (file && validateIndividually() && file.helper; as helper) {\n              <tedi-tooltip\n                [className]=\"tooltipClasses(file)\"\n                [position]=\"helper?.position || 'top'\"\n              >\n                <tedi-tooltip-trigger>\n                  <button tedi-info-button [disabled]=\"file.disabled\"></button>\n                </tedi-tooltip-trigger>\n\n                <tedi-tooltip-content>\n                  {{ helper.text }}\n                </tedi-tooltip-content>\n              </tedi-tooltip>\n            }\n          </div>\n          <button\n            tedi-closing-button\n            [title]=\"'clear' | tediTranslate\"\n            [iconSize]=\"18\"\n            (click)=\"removeFile(file)\"\n            size=\"small\"\n          ></button>\n        </tedi-card-content>\n      </tedi-card>\n    </div>\n  }\n</ng-content>\n\n<ng-content select=\"[error-text]\">\n  @if (this.uploadError(); as message) {\n    <tedi-feedback-text [text]=\"message\" type=\"error\" position=\"left\" />\n  }\n</ng-content>\n", styles: [".tedi-file-dropzone{text-align:center;cursor:pointer;background-color:var(--file-dropzone-background-default);border:2px dotted var(--file-dropzone-border-default);transition:border-color .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--form-field-radius);padding:var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);margin-bottom:var(--layout-grid-gutters-04)}.tedi-file-dropzone:hover{background-color:var(--file-dropzone-background-hover);border-color:var(--file-dropzone-border-hover)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper{display:flex;justify-content:center}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{font-weight:500;color:var(--file-dropzone-text-default);font-size:var(--body-regular-size)}.tedi-file-dropzone .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label:hover{cursor:pointer}.tedi-file-dropzone--disabled{pointer-events:none;cursor:not-allowed;background-color:var(--file-dropzone-background-disabled);border-color:var(--file-dropzone-border-disabled)}.tedi-file-dropzone--disabled .tedi-file-dropzone__label-wrapper .tedi-file-dropzone__label{color:var(--general-text-disabled)}.tedi-file-dropzone--invalid{border-color:var(--form-general-feedback-error-border)}.tedi-file-dropzone--valid{border-color:var(--form-general-feedback-success-border)}.tedi-file-dropzone--drop-over{color:var(--file-dropzone-text-drop-over);background-color:var(--file-dropzone-background-drop-over);border-color:var(--file-dropzone-border-drop-over)}.tedi-file-dropzone:focus-visible{outline:2px solid var(--file-dropzone-border-hover);outline-offset:1px}.tedi-file-dropzone__input{display:none}.tedi-file-dropzone__file-list{width:100%;list-style:none;margin-top:var(--layout-grid-gutters-04)}.tedi-file-dropzone__file-name{overflow-wrap:anywhere}\n", ".tedi-file-dropzone{width:100%}.tedi-file-dropzone__label-wrapper{pointer-events:none}.tedi-file-dropzone__card{display:flex;justify-content:space-between;align-items:center;--_card-border: transparent}.tedi-file-dropzone__tooltip--error .tedi-info-button{--button-main-neutral-text-default: var(--red-700)}.tedi-file-dropzone__file-name{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { 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", "ariaLabel"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "appendTo", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]", inputs: ["aria-label"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: VerticalSpacingDirective, selector: "[tediVerticalSpacing]", inputs: ["tediVerticalSpacing"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FileDropzoneComponent, decorators: [{
             type: Component,
@@ -3181,7 +3184,7 @@ class TabsComponent {
             .withHorizontalOrientation("ltr");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 role=\"tabpanel\" [attr.aria-labelledby]=\"activeTabId()\">\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: 575.98px){.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: 576px){.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"] }, { 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: "19.2.15", 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 role=\"tabpanel\" [attr.aria-labelledby]=\"activeTabId()\">\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: 575.98px){.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: 576px){.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", "ariaLabel"] }, { 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: "19.2.15", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,