@tedi-design-system/angular 6.5.0-rc.4 → 6.5.0-rc.5

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

@@ -3445,13 +3445,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ standalone: true, selector: "tedi-popover", imports: [NgxFloatUiModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tedi-popover-trigger]\" />\n<float-ui-content\n  #floatUiComponent\n  looseTrigger=\"none\"\n  ariaRole=\"dialog\"\n  [appendTo]=\"appendTo()\"\n  [floatUiLoose]=\"floatUiComponent\"\n  [targetElement]=\"popoverTrigger().host.nativeElement\"\n  [loosePlacement]=\"position()\"\n  [preventOverflow]=\"position().includes('auto') ? false : preventOverflow()\"\n  [applyClass]=\"floatUiContainerClass()\"\n  [disableAnimation]=\"true\"\n>\n  <ng-content select=\"tedi-popover-content\" />\n</float-ui-content>\n", styles: ["tedi-popover{display:block}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}float-ui-content .float-ui-container-popover{z-index:var(--z-index-dropdown);padding:0;border:var(--tedi-borders-01) solid var(--popover-border);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20, rgba(0, 0, 0, .2))}float-ui-content .float-ui-container-popover--arrow .float-ui-arrow{z-index:var(--z-index-dropdown);width:24px;height:24px;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}float-ui-content .float-ui-container-popover--border{border-radius:var(--popover-radius-rounded)}float-ui-content .float-ui-container-popover--border .float-ui-arrow{width:18px;height:18px;border-right:4px solid var(--header-popover-border-top);border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top]{border-bottom:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=top] .float-ui-arrow{bottom:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom]{border-top:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=bottom] .float-ui-arrow{top:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left]{border-right:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=left] .float-ui-arrow{right:-12px!important}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right]{border-left:4px solid var(--header-popover-border-top)}float-ui-content .float-ui-container-popover--border[data-float-ui-placement=right] .float-ui-arrow{left:-12px!important}float-ui-content .float-ui-container-popover[data-float-ui-placement=top]{transform:translateY(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom]{transform:translateY(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=bottom] .float-ui-arrow{transform:rotate(-135deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left]{transform:translate(-4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=left] .float-ui-arrow{transform:rotate(-45deg)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right]{transform:translate(4px)}float-ui-content .float-ui-container-popover[data-float-ui-placement=right] .float-ui-arrow{transform:rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
         }] });
 
+const FOCUSABLE_SELECTOR = "button, a[href], [tabindex]";
 class DropdownTriggerDirective {
     /** Defines the aria-haspopup attribute for the trigger, informing assistive technologies whether it opens a menu or listbox. Improves accessibility by describing the type of popup. */
     ariaHaspopup = input("menu");
     host = inject(ElementRef);
     dropdown = inject(DropdownComponent);
-    get isButton() {
-        return this.host.nativeElement.tagName === "BUTTON";
+    renderer = inject(Renderer2);
+    /**
+     * The element that actually receives focus and ARIA semantics. When the directive
+     * sits on a native `<button>`/`<a href>` that element is used directly. When it wraps
+     * a button component (e.g. `<app-button>` that renders its own native button), the
+     * inner focusable element is used instead — otherwise the wrapper and the inner button
+     * would both be tab stops, and the ARIA state would land on the wrong element.
+     */
+    triggerElement = signal(null);
+    constructor() {
+        effect(() => {
+            const el = this.triggerElement();
+            if (!el)
+                return;
+            this.renderer.setAttribute(el, "id", `${this.dropdown.containerId()}_trigger`);
+            this.renderer.setAttribute(el, "aria-controls", this.dropdown.containerId());
+            this.renderer.setAttribute(el, "aria-haspopup", this.ariaHaspopup());
+            this.renderer.setAttribute(el, "aria-expanded", String(this.dropdown.opened()));
+            if (!this.isNativelyFocusable(el)) {
+                this.renderer.setAttribute(el, "role", "button");
+                this.renderer.setAttribute(el, "tabindex", "0");
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.triggerElement.set(this.resolveTriggerElement());
+    }
+    focus() {
+        this.triggerElement()?.focus();
+    }
+    /** The element that is actually in the tab order — the resolved interactive
+     * element, which may be a button nested inside a wrapping component. */
+    get focusableElement() {
+        return this.triggerElement() ?? this.host.nativeElement;
     }
     onClick() {
         this.dropdown.toggleDropdown();
@@ -3470,10 +3503,19 @@ class DropdownTriggerDirective {
             case "Escape":
                 event.preventDefault();
                 this.dropdown.hideDropdown();
-                this.host.nativeElement.focus();
+                this.focus();
                 break;
         }
     }
+    resolveTriggerElement() {
+        const el = this.host.nativeElement;
+        if (this.isNativelyFocusable(el))
+            return el;
+        return el.querySelector(FOCUSABLE_SELECTOR) ?? el;
+    }
+    isNativelyFocusable(el) {
+        return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
+    }
     openAndFocusFirst() {
         if (!this.dropdown.floatUiComponent().state) {
             this.dropdown.showDropdown();
@@ -3487,23 +3529,15 @@ class DropdownTriggerDirective {
         this.dropdown.focusLastItem?.();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "dropdown.containerId() + '_trigger'", "attr.aria-controls": "dropdown.containerId()", "attr.aria-expanded": "dropdown.floatUiComponent().state", "attr.aria-haspopup": "ariaHaspopup()", "attr.role": "isButton ? null : 'button'", "attr.tabindex": "isButton ? null : '0'" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: DropdownTriggerDirective, isStandalone: true, selector: "[tedi-dropdown-trigger]", inputs: { ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: "[tedi-dropdown-trigger]",
-                    host: {
-                        "[attr.id]": "dropdown.containerId() + '_trigger'",
-                        "[attr.aria-controls]": "dropdown.containerId()",
-                        "[attr.aria-expanded]": "dropdown.floatUiComponent().state",
-                        "[attr.aria-haspopup]": "ariaHaspopup()",
-                        "[attr.role]": "isButton ? null : 'button'",
-                        "[attr.tabindex]": "isButton ? null : '0'",
-                    },
                 }]
-        }], propDecorators: { onClick: [{
+        }], ctorParameters: () => [], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ["click"]
             }], onKeydown: [{
@@ -3640,7 +3674,11 @@ class DropdownItemComponent {
             case "Escape":
                 event.preventDefault();
                 this.dropdown.hideDropdown();
-                this.dropdown.dropdownTrigger()?.host.nativeElement.focus();
+                this.dropdown.dropdownTrigger()?.focus();
+                break;
+            case "Tab":
+                event.preventDefault();
+                this.dropdown.tabOutOfDropdown(event.shiftKey);
                 break;
         }
     }
@@ -3652,7 +3690,7 @@ class DropdownItemComponent {
         if (!this.closeOnSelect())
             return;
         this.dropdown.hideDropdown();
-        this.dropdown.dropdownTrigger()?.host.nativeElement.focus();
+        this.dropdown.dropdownTrigger()?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownItemComponent, isStandalone: true, selector: "li[tedi-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.role": "dropdownContent.dropdownRole() === 'menu' ? 'menuitem' : 'option'", "attr.aria-selected": "dropdownContent.dropdownRole() === 'listbox' ? isSelected() : null", "attr.aria-disabled": "disabled() ? 'true' : null", "tabindex": "dropdownContent.dropdownRole() === 'menu' ? '-1' : (disabled() ? null : '-1')" } }, queries: [{ propertyName: "customItemValue", first: true, predicate: DropdownItemValueComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-dropdown-item-value\" />\n\n@if (!customItemValue()) {\n  <tedi-dropdown-item-value>\n    <tedi-dropdown-item-value-label>\n      <ng-content />\n    </tedi-dropdown-item-value-label>\n  </tedi-dropdown-item-value>\n}\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}\n"], dependencies: [{ kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -3722,6 +3760,11 @@ class DropdownComponent {
      * @default ""
      */
     appendTo = input("");
+    /**
+     * Does the dropdown hide when the page scrolls?
+     * @default false
+     */
+    hideOnScroll = input(false);
     dropdownTrigger = contentChild.required(DropdownTriggerDirective);
     dropdownContent = contentChild.required(DropdownContentComponent);
     floatUiComponent = viewChild.required(NgxFloatUiContentComponent);
@@ -3729,16 +3772,23 @@ class DropdownComponent {
     containerId = signal("");
     isContentHovered = signal(false);
     floatUiDisplay = signal("inline");
+    opened = computed(() => this.floatUiDisplay() === "block");
     platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    renderer = inject(Renderer2);
+    scrollListener;
     constructor() {
         if (isPlatformBrowser(this.platformId)) {
             document.addEventListener("pointerdown", this.handleOutsideClick, true);
+            document.addEventListener("focusin", this.handleFocusOut, true);
         }
     }
     ngOnDestroy() {
         if (isPlatformBrowser(this.platformId)) {
             document.removeEventListener("pointerdown", this.handleOutsideClick, true);
+            document.removeEventListener("focusin", this.handleFocusOut, true);
         }
+        this.cleanupScrollListener();
     }
     ngAfterContentChecked() {
         const floatUiEl = this.floatUiComponent().elRef
@@ -3762,10 +3812,14 @@ class DropdownComponent {
         if (triggerWidth) {
             floatUiEl.style.setProperty("--_tedi-dropdown-trigger-width", `${triggerWidth}px`);
         }
+        if (this.hideOnScroll()) {
+            this.setupScrollListener();
+        }
         setTimeout(() => this.focusActiveItem());
     }
     hideDropdown() {
         if (this.floatUiComponent().state) {
+            this.cleanupScrollListener();
             this.floatUiComponent().hide();
             this.floatUiDisplay.set("inline");
             this.activeIndex.set(null);
@@ -3790,9 +3844,35 @@ class DropdownComponent {
         const clickedInside = triggerEl.contains(target) || contentEl.contains(target);
         if (!clickedInside) {
             this.hideDropdown();
-            triggerEl.focus();
+            this.dropdownTrigger().focus();
         }
     };
+    handleFocusOut = (event) => {
+        if (!this.floatUiComponent().state)
+            return;
+        const target = event.target;
+        const triggerEl = this.dropdownTrigger().host.nativeElement;
+        const contentEl = this.floatUiComponent().elRef
+            .nativeElement;
+        const focusedInside = triggerEl.contains(target) || contentEl.contains(target);
+        if (!focusedInside) {
+            this.hideDropdown();
+        }
+    };
+    tabOutOfDropdown(shiftKey) {
+        const triggerEl = this.dropdownTrigger().focusableElement;
+        const contentEl = this.floatUiComponent().elRef
+            .nativeElement;
+        const focusable = getFocusableElements(this.document.body).filter((el) => !contentEl.contains(el));
+        const triggerIndex = focusable.indexOf(triggerEl);
+        const next = shiftKey
+            ? focusable[triggerIndex - 1]
+            : focusable[triggerIndex + 1];
+        this.hideDropdown();
+        if (next) {
+            setTimeout(() => next.focus());
+        }
+    }
     focusFirstItem() {
         const items = this.dropdownContent().items();
         const index = items.findIndex((item) => !item.disabled());
@@ -3884,6 +3964,20 @@ class DropdownComponent {
             }
         });
     }
+    setupScrollListener() {
+        this.cleanupScrollListener();
+        this.scrollListener = this.renderer.listen(this.document, "scroll", () => {
+            if (this.floatUiComponent().state) {
+                this.hideDropdown();
+            }
+        }, { capture: true, passive: true });
+    }
+    cleanupScrollListener() {
+        if (this.scrollListener) {
+            this.scrollListener();
+            this.scrollListener = undefined;
+        }
+    }
     findIndexByElement(el) {
         return this.dropdownContent()
             .items()
@@ -3906,7 +4000,7 @@ class DropdownComponent {
         return null;
     }
     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.2.0", version: "19.2.15", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DropdownComponent, isStandalone: true, selector: "tedi-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
             {
                 provide: DROPDOWN_API,
                 useExisting: DropdownComponent,
@@ -4004,7 +4098,7 @@ class DatePickerHeaderComponent {
         this.nextYearPage.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatePickerHeaderComponent, isStandalone: true, selector: "tedi-date-picker-header", inputs: { uniqueId: { classPropertyName: "uniqueId", publicName: "uniqueId", isSignal: true, isRequired: true, transformFunction: null }, currentView: { classPropertyName: "currentView", publicName: "currentView", isSignal: true, isRequired: true, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthMode: { classPropertyName: "monthMode", publicName: "monthMode", isSignal: true, isRequired: false, transformFunction: null }, yearMode: { classPropertyName: "yearMode", publicName: "yearMode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, canGoPrev: { classPropertyName: "canGoPrev", publicName: "canGoPrev", isSignal: true, isRequired: false, transformFunction: null }, canGoNext: { classPropertyName: "canGoNext", publicName: "canGoNext", isSignal: true, isRequired: false, transformFunction: null }, selectedYear: { classPropertyName: "selectedYear", publicName: "selectedYear", isSignal: true, isRequired: true, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: true, isRequired: true, transformFunction: null }, pagedYears: { classPropertyName: "pagedYears", publicName: "pagedYears", isSignal: true, isRequired: true, transformFunction: null }, hasPrevYearPage: { classPropertyName: "hasPrevYearPage", publicName: "hasPrevYearPage", isSignal: true, isRequired: false, transformFunction: null }, hasNextYearPage: { classPropertyName: "hasNextYearPage", publicName: "hasNextYearPage", isSignal: true, isRequired: false, transformFunction: null }, disabledMonths: { classPropertyName: "disabledMonths", publicName: "disabledMonths", isSignal: true, isRequired: false, transformFunction: null }, disabledYears: { classPropertyName: "disabledYears", publicName: "disabledYears", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevMonth: "prevMonth", nextMonth: "nextMonth", monthSelect: "monthSelect", yearSelect: "yearSelect", monthClick: "monthClick", yearClick: "yearClick", prevYearPage: "prevYearPage", nextYearPage: "nextYearPage" }, ngImport: i0, template: "<div class=\"tedi-date-picker__header\">\n  @if (currentView() === \"calendar-grid\") {\n    @if (showNavigation()) {\n      <button\n        tedi-button\n        variant=\"neutral\"\n        size=\"small\"\n        class=\"tedi-date-picker__nav\"\n        [attr.aria-label]=\"translationService.track('date-picker.go-prev-month')()\"\n        [attr.aria-controls]=\"uniqueId()\"\n        (click)=\"onPrevMonth()\"\n        [disabled]=\"!canGoPrev()\"\n      >\n        <tedi-icon name=\"arrow_back\" />\n      </button>\n    }\n\n    <div class=\"tedi-date-picker__controls\">\n      @if (monthMode() === \"dropdown\") {\n        <tedi-dropdown\n          [value]=\"month().getMonth().toString()\"\n          (valueChange)=\"onMonthSelect($event)\"\n        >\n          <button\n            tedi-dropdown-trigger\n            ariaHaspopup=\"listbox\"\n            class=\"tedi-date-picker__dropdown-trigger\"\n            [attr.aria-label]=\"translationService.track('date-picker.select-month')()\"\n          >\n            {{ monthNames[month().getMonth()]() }}\n            <tedi-icon\n              name=\"arrow_drop_down\"\n              class=\"tedi-date-picker__dropdown-arrow\"\n              size=\"inherit\"\n            />\n          </button>\n          <tedi-dropdown-content\n            dropdownRole=\"listbox\"\n            class=\"tedi-date-picker__dropdown-content tedi-date-picker__dropdown-content--month\"\n          >\n            @for (monthName of monthNames; track i; let i = $index) {\n              <li\n                tedi-dropdown-item\n                [value]=\"i.toString()\"\n                [disabled]=\"disabledMonths().has(i)\"\n              >\n                {{ monthName() }}\n              </li>\n            }\n          </tedi-dropdown-content>\n        </tedi-dropdown>\n      } @else if (monthMode() === \"grid\") {\n        <button\n          class=\"tedi-date-picker__dropdown-trigger\"\n          [attr.aria-label]=\"translationService.track('date-picker.select-month')()\"\n          (click)=\"onMonthClick()\"\n        >\n          {{ monthNames[month().getMonth()]() }}\n          <tedi-icon\n            name=\"arrow_drop_down\"\n            class=\"tedi-date-picker__dropdown-arrow\"\n            size=\"inherit\"\n          />\n        </button>\n      } @else if (monthMode() === \"label\") {\n        <div class=\"tedi-date-picker__label\">\n          {{ monthNames[month().getMonth()]() }}\n        </div>\n      }\n\n      @if (yearMode() === \"dropdown\") {\n        <tedi-dropdown\n          position=\"bottom-end\"\n          [value]=\"selectedYear().toString()\"\n          (valueChange)=\"onYearSelect($event)\"\n        >\n          <button\n            tedi-dropdown-trigger\n            ariaHaspopup=\"listbox\"\n            class=\"tedi-date-picker__dropdown-trigger\"\n            [attr.aria-label]=\"translationService.track('date-picker.select-year')()\"\n          >\n            {{ selectedYear() }}\n            <tedi-icon\n              name=\"arrow_drop_down\"\n              class=\"tedi-date-picker__dropdown-arrow\"\n              size=\"inherit\"\n            />\n          </button>\n          <tedi-dropdown-content\n            dropdownRole=\"listbox\"\n            class=\"tedi-date-picker__dropdown-content tedi-date-picker__dropdown-content--year\"\n          >\n            @for (year of years(); track year) {\n              <li\n                tedi-dropdown-item\n                [value]=\"year.toString()\"\n                [disabled]=\"disabledYears().has(year)\"\n              >\n                {{ year }}\n              </li>\n            }\n          </tedi-dropdown-content>\n        </tedi-dropdown>\n      } @else if (yearMode() === \"grid\") {\n        <button\n          class=\"tedi-date-picker__dropdown-trigger\"\n          [attr.aria-label]=\"translationService.track('date-picker.select-year')()\"\n          (click)=\"onYearClick()\"\n        >\n          {{ selectedYear() }}\n          <tedi-icon\n            name=\"arrow_drop_down\"\n            class=\"tedi-date-picker__dropdown-arrow\"\n            size=\"inherit\"\n          />\n        </button>\n      } @else if (yearMode() === \"label\") {\n        <div class=\"tedi-date-picker__label\">\n          {{ selectedYear() }}\n        </div>\n      }\n    </div>\n\n    @if (showNavigation()) {\n      <button\n        tedi-button\n        variant=\"neutral\"\n        size=\"small\"\n        class=\"tedi-date-picker__nav\"\n        [attr.aria-label]=\"translationService.track('date-picker.go-next-month')()\"\n        [attr.aria-controls]=\"uniqueId()\"\n        (click)=\"onNextMonth()\"\n        [disabled]=\"!canGoNext()\"\n      >\n        <tedi-icon name=\"arrow_forward\" />\n      </button>\n    }\n  } @else if (currentView() === \"month-grid\") {\n    <div class=\"tedi-date-picker__controls\">\n      {{ monthNames[month().getMonth()]() }}\n    </div>\n  } @else if (currentView() === \"year-grid\") {\n    <button\n      tedi-button\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__nav\"\n      [attr.aria-label]=\"translationService.track('date-picker.previous-years')()\"\n      (click)=\"onPrevYearPage()\"\n      [disabled]=\"!hasPrevYearPage()\"\n    >\n      <tedi-icon name=\"arrow_back\" />\n    </button>\n    <div class=\"tedi-date-picker__controls\">{{ selectedYear() }}</div>\n    <button\n      tedi-button\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__nav\"\n      [attr.aria-label]=\"translationService.track('date-picker.next-years')()\"\n      (click)=\"onNextYearPage()\"\n      [disabled]=\"!hasNextYearPage()\"\n    >\n      <tedi-icon name=\"arrow_forward\" />\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "appendTo"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatePickerHeaderComponent, isStandalone: true, selector: "tedi-date-picker-header", inputs: { uniqueId: { classPropertyName: "uniqueId", publicName: "uniqueId", isSignal: true, isRequired: true, transformFunction: null }, currentView: { classPropertyName: "currentView", publicName: "currentView", isSignal: true, isRequired: true, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthMode: { classPropertyName: "monthMode", publicName: "monthMode", isSignal: true, isRequired: false, transformFunction: null }, yearMode: { classPropertyName: "yearMode", publicName: "yearMode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, canGoPrev: { classPropertyName: "canGoPrev", publicName: "canGoPrev", isSignal: true, isRequired: false, transformFunction: null }, canGoNext: { classPropertyName: "canGoNext", publicName: "canGoNext", isSignal: true, isRequired: false, transformFunction: null }, selectedYear: { classPropertyName: "selectedYear", publicName: "selectedYear", isSignal: true, isRequired: true, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: true, isRequired: true, transformFunction: null }, pagedYears: { classPropertyName: "pagedYears", publicName: "pagedYears", isSignal: true, isRequired: true, transformFunction: null }, hasPrevYearPage: { classPropertyName: "hasPrevYearPage", publicName: "hasPrevYearPage", isSignal: true, isRequired: false, transformFunction: null }, hasNextYearPage: { classPropertyName: "hasNextYearPage", publicName: "hasNextYearPage", isSignal: true, isRequired: false, transformFunction: null }, disabledMonths: { classPropertyName: "disabledMonths", publicName: "disabledMonths", isSignal: true, isRequired: false, transformFunction: null }, disabledYears: { classPropertyName: "disabledYears", publicName: "disabledYears", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevMonth: "prevMonth", nextMonth: "nextMonth", monthSelect: "monthSelect", yearSelect: "yearSelect", monthClick: "monthClick", yearClick: "yearClick", prevYearPage: "prevYearPage", nextYearPage: "nextYearPage" }, ngImport: i0, template: "<div class=\"tedi-date-picker__header\">\n  @if (currentView() === \"calendar-grid\") {\n    @if (showNavigation()) {\n      <button\n        tedi-button\n        variant=\"neutral\"\n        size=\"small\"\n        class=\"tedi-date-picker__nav\"\n        [attr.aria-label]=\"translationService.track('date-picker.go-prev-month')()\"\n        [attr.aria-controls]=\"uniqueId()\"\n        (click)=\"onPrevMonth()\"\n        [disabled]=\"!canGoPrev()\"\n      >\n        <tedi-icon name=\"arrow_back\" />\n      </button>\n    }\n\n    <div class=\"tedi-date-picker__controls\">\n      @if (monthMode() === \"dropdown\") {\n        <tedi-dropdown\n          [value]=\"month().getMonth().toString()\"\n          (valueChange)=\"onMonthSelect($event)\"\n        >\n          <button\n            tedi-dropdown-trigger\n            ariaHaspopup=\"listbox\"\n            class=\"tedi-date-picker__dropdown-trigger\"\n            [attr.aria-label]=\"translationService.track('date-picker.select-month')()\"\n          >\n            {{ monthNames[month().getMonth()]() }}\n            <tedi-icon\n              name=\"arrow_drop_down\"\n              class=\"tedi-date-picker__dropdown-arrow\"\n              size=\"inherit\"\n            />\n          </button>\n          <tedi-dropdown-content\n            dropdownRole=\"listbox\"\n            class=\"tedi-date-picker__dropdown-content tedi-date-picker__dropdown-content--month\"\n          >\n            @for (monthName of monthNames; track i; let i = $index) {\n              <li\n                tedi-dropdown-item\n                [value]=\"i.toString()\"\n                [disabled]=\"disabledMonths().has(i)\"\n              >\n                {{ monthName() }}\n              </li>\n            }\n          </tedi-dropdown-content>\n        </tedi-dropdown>\n      } @else if (monthMode() === \"grid\") {\n        <button\n          class=\"tedi-date-picker__dropdown-trigger\"\n          [attr.aria-label]=\"translationService.track('date-picker.select-month')()\"\n          (click)=\"onMonthClick()\"\n        >\n          {{ monthNames[month().getMonth()]() }}\n          <tedi-icon\n            name=\"arrow_drop_down\"\n            class=\"tedi-date-picker__dropdown-arrow\"\n            size=\"inherit\"\n          />\n        </button>\n      } @else if (monthMode() === \"label\") {\n        <div class=\"tedi-date-picker__label\">\n          {{ monthNames[month().getMonth()]() }}\n        </div>\n      }\n\n      @if (yearMode() === \"dropdown\") {\n        <tedi-dropdown\n          position=\"bottom-end\"\n          [value]=\"selectedYear().toString()\"\n          (valueChange)=\"onYearSelect($event)\"\n        >\n          <button\n            tedi-dropdown-trigger\n            ariaHaspopup=\"listbox\"\n            class=\"tedi-date-picker__dropdown-trigger\"\n            [attr.aria-label]=\"translationService.track('date-picker.select-year')()\"\n          >\n            {{ selectedYear() }}\n            <tedi-icon\n              name=\"arrow_drop_down\"\n              class=\"tedi-date-picker__dropdown-arrow\"\n              size=\"inherit\"\n            />\n          </button>\n          <tedi-dropdown-content\n            dropdownRole=\"listbox\"\n            class=\"tedi-date-picker__dropdown-content tedi-date-picker__dropdown-content--year\"\n          >\n            @for (year of years(); track year) {\n              <li\n                tedi-dropdown-item\n                [value]=\"year.toString()\"\n                [disabled]=\"disabledYears().has(year)\"\n              >\n                {{ year }}\n              </li>\n            }\n          </tedi-dropdown-content>\n        </tedi-dropdown>\n      } @else if (yearMode() === \"grid\") {\n        <button\n          class=\"tedi-date-picker__dropdown-trigger\"\n          [attr.aria-label]=\"translationService.track('date-picker.select-year')()\"\n          (click)=\"onYearClick()\"\n        >\n          {{ selectedYear() }}\n          <tedi-icon\n            name=\"arrow_drop_down\"\n            class=\"tedi-date-picker__dropdown-arrow\"\n            size=\"inherit\"\n          />\n        </button>\n      } @else if (yearMode() === \"label\") {\n        <div class=\"tedi-date-picker__label\">\n          {{ selectedYear() }}\n        </div>\n      }\n    </div>\n\n    @if (showNavigation()) {\n      <button\n        tedi-button\n        variant=\"neutral\"\n        size=\"small\"\n        class=\"tedi-date-picker__nav\"\n        [attr.aria-label]=\"translationService.track('date-picker.go-next-month')()\"\n        [attr.aria-controls]=\"uniqueId()\"\n        (click)=\"onNextMonth()\"\n        [disabled]=\"!canGoNext()\"\n      >\n        <tedi-icon name=\"arrow_forward\" />\n      </button>\n    }\n  } @else if (currentView() === \"month-grid\") {\n    <div class=\"tedi-date-picker__controls\">\n      {{ monthNames[month().getMonth()]() }}\n    </div>\n  } @else if (currentView() === \"year-grid\") {\n    <button\n      tedi-button\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__nav\"\n      [attr.aria-label]=\"translationService.track('date-picker.previous-years')()\"\n      (click)=\"onPrevYearPage()\"\n      [disabled]=\"!hasPrevYearPage()\"\n    >\n      <tedi-icon name=\"arrow_back\" />\n    </button>\n    <div class=\"tedi-date-picker__controls\">{{ selectedYear() }}</div>\n    <button\n      tedi-button\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__nav\"\n      [attr.aria-label]=\"translationService.track('date-picker.next-years')()\"\n      (click)=\"onNextYearPage()\"\n      [disabled]=\"!hasNextYearPage()\"\n    >\n      <tedi-icon name=\"arrow_forward\" />\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "appendTo", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerHeaderComponent, decorators: [{
             type: Component,
@@ -10063,7 +10157,7 @@ class TediTableColumnsMenuComponent {
         column.toggleVisibility();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TediTableColumnsMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TediTableColumnsMenuComponent, isStandalone: true, selector: "tedi-table-columns-menu", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-name": "tedi-table-columns-menu" }, classAttribute: "tedi-table-columns-menu" }, ngImport: i0, template: "<tedi-dropdown position=\"bottom-end\">\n  <button tedi-button tedi-dropdown-trigger variant=\"neutral\" type=\"button\">\n    <tedi-icon name=\"tune\" [size]=\"18\" color=\"inherit\" />\n    {{ triggerLabel() ?? defaultLabel() }}\n  </button>\n  <tedi-dropdown-content>\n    @for (column of hideableColumns(); track column.id) {\n      @let isVisible = column.getIsVisible();\n      @let isLastVisible = isVisible && visibleCount() === 1;\n      <li\n        tedi-dropdown-item\n        [value]=\"column.id\"\n        [disabled]=\"isLastVisible\"\n        [closeOnSelect]=\"false\"\n        (itemSelect)=\"handleToggle(column)\"\n      >\n        <tedi-dropdown-item-value\n          type=\"checkbox\"\n          [selected]=\"isVisible\"\n          [disabled]=\"isLastVisible\"\n        >\n          <tedi-dropdown-item-value-label>\n            {{ resolveHeader(column) }}\n          </tedi-dropdown-item-value-label>\n        </tedi-dropdown-item-value>\n      </li>\n    }\n  </tedi-dropdown-content>\n</tedi-dropdown>\n", styles: [".tedi-table-columns-menu{display:inline-flex}.tedi-table-columns-menu__option{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "appendTo"], outputs: ["valueChange"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TediTableColumnsMenuComponent, isStandalone: true, selector: "tedi-table-columns-menu", inputs: { triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-name": "tedi-table-columns-menu" }, classAttribute: "tedi-table-columns-menu" }, ngImport: i0, template: "<tedi-dropdown position=\"bottom-end\">\n  <button tedi-button tedi-dropdown-trigger variant=\"neutral\" type=\"button\">\n    <tedi-icon name=\"tune\" [size]=\"18\" color=\"inherit\" />\n    {{ triggerLabel() ?? defaultLabel() }}\n  </button>\n  <tedi-dropdown-content>\n    @for (column of hideableColumns(); track column.id) {\n      @let isVisible = column.getIsVisible();\n      @let isLastVisible = isVisible && visibleCount() === 1;\n      <li\n        tedi-dropdown-item\n        [value]=\"column.id\"\n        [disabled]=\"isLastVisible\"\n        [closeOnSelect]=\"false\"\n        (itemSelect)=\"handleToggle(column)\"\n      >\n        <tedi-dropdown-item-value\n          type=\"checkbox\"\n          [selected]=\"isVisible\"\n          [disabled]=\"isLastVisible\"\n        >\n          <tedi-dropdown-item-value-label>\n            {{ resolveHeader(column) }}\n          </tedi-dropdown-item-value-label>\n        </tedi-dropdown-item-value>\n      </li>\n    }\n  </tedi-dropdown-content>\n</tedi-dropdown>\n", styles: [".tedi-table-columns-menu{display:inline-flex}.tedi-table-columns-menu__option{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "appendTo", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "closeOnSelect"], outputs: ["itemSelect"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TediTableColumnsMenuComponent, decorators: [{
             type: Component,
@@ -10756,7 +10850,7 @@ class FilterComponent {
                 useExisting: forwardRef(() => FilterComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown [appendTo]=\"appendTo()\" position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (option of filteredOptions(); track option.value; let i = $index) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n                [class.tedi-filter-dropdown__item--selected]=\"isOptionSelected(option.value)\"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"allFilteredSelected() ? 'true' : someFilteredSelected() ? 'mixed' : 'false'\"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{ resolvedSelectAllLabel() }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (option of filteredOptions(); track option.value; let i = $index) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon class=\"tedi-filter__icon\" name=\"check\" [size]=\"iconSize()\" color=\"inherit\" />\n  }\n\n  <div class=\"tedi-filter__prepend\" [class.tedi-filter__prepend--hidden]=\"hidePrepend()\">\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge class=\"tedi-filter__count\" [text]=\"'' + selectedCount()\" color=\"brand\" />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon class=\"tedi-filter__icon\" name=\"arrow_drop_down\" variant=\"filled\" [size]=\"iconSize()\" color=\"inherit\" />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "appendTo"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n  <tedi-dropdown #dropdown [appendTo]=\"appendTo()\" position=\"bottom-start\">\n    <button\n      #triggerBtn\n      tedi-dropdown-trigger\n      ariaHaspopup=\"dialog\"\n      class=\"tedi-filter__button\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"focusDropdownContent()\"\n      (keydown.arrowDown)=\"focusDropdownContent(true)\"\n      (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-dropdown-content>\n      <div\n        #dropdownPanel\n        class=\"tedi-filter-dropdown\"\n        [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n        role=\"dialog\"\n        [attr.aria-label]=\"text()\"\n        (keydown)=\"handleDropdownKeydown($event)\"\n      >\n        @if (hasCustomContent()) {\n          <div class=\"tedi-filter-dropdown__custom-content\">\n            <ng-content select=\"[tediFilterContent]\" />\n          </div>\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"onCustomClear()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else if (isSingleSelect()) {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (option of filteredOptions(); track option.value; let i = $index) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n                [class.tedi-filter-dropdown__item--selected]=\"isOptionSelected(option.value)\"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && selectOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSingleSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        } @else {\n          @if (showSearch()) {\n            <ng-container *ngTemplateOutlet=\"searchField\" />\n          }\n\n          @if (showSelectAll() && filteredOptions().length > 0) {\n            <div\n              class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"allFilteredSelected() ? 'true' : someFilteredSelected() ? 'mixed' : 'false'\"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll()\"\n              (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n              tabindex=\"0\"\n            >\n              <tedi-dropdown-item-value\n                type=\"checkbox\"\n                [selected]=\"allFilteredSelected()\"\n                [indeterminate]=\"someFilteredSelected()\"\n              >\n                <tedi-dropdown-item-value-label>{{ resolvedSelectAllLabel() }}</tedi-dropdown-item-value-label>\n              </tedi-dropdown-item-value>\n            </div>\n            <tedi-separator />\n          }\n\n          <div\n            #optionsList\n            class=\"tedi-filter-dropdown__options\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [attr.aria-label]=\"text()\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            tabindex=\"0\"\n            (focus)=\"onOptionsFocus()\"\n            (blur)=\"onOptionsBlur()\"\n            (mousedown)=\"onOptionsMousedown()\"\n            (keydown)=\"onOptionsKeydown($event)\"\n          >\n            @for (option of filteredOptions(); track option.value; let i = $index) {\n              <div\n                class=\"tedi-filter-dropdown__item\"\n                [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n                [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n                role=\"option\"\n                [attr.aria-selected]=\"isOptionSelected(option.value)\"\n                [attr.aria-disabled]=\"option.disabled || null\"\n                [id]=\"getOptionId(i)\"\n                (click)=\"!option.disabled && toggleOption(option.value)\"\n              >\n                <tedi-dropdown-item-value\n                  type=\"checkbox\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </div>\n            }\n          </div>\n\n          @if (showClear()) {\n            <tedi-separator />\n            <div class=\"tedi-filter-dropdown__clear\">\n              <button\n                tedi-button\n                variant=\"neutral\"\n                size=\"small\"\n                type=\"button\"\n                (click)=\"clearSelection()\"\n              >\n                <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n                <span>{{ resolvedClearLabel() }}</span>\n              </button>\n            </div>\n          }\n        }\n      </div>\n    </tedi-dropdown-content>\n  </tedi-dropdown>\n} @else {\n  <button\n    class=\"tedi-filter__button\"\n    type=\"button\"\n    [disabled]=\"isDisabled()\"\n    [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n    [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n    [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"buttonContent\" />\n  </button>\n}\n\n<ng-template #buttonContent>\n  @if (!hasDropdown() && isSelected()) {\n    <tedi-icon class=\"tedi-filter__icon\" name=\"check\" [size]=\"iconSize()\" color=\"inherit\" />\n  }\n\n  <div class=\"tedi-filter__prepend\" [class.tedi-filter__prepend--hidden]=\"hidePrepend()\">\n    <ng-content select=\"[tediFilterPrepend]\" />\n  </div>\n\n  <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n  <div class=\"tedi-filter__append\">\n    <ng-content select=\"[tediFilterAppend]\" />\n  </div>\n\n  @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n    <tedi-status-badge class=\"tedi-filter__count\" [text]=\"'' + selectedCount()\" color=\"brand\" />\n  }\n\n  @if (hasDropdown()) {\n    <tedi-icon class=\"tedi-filter__icon\" name=\"arrow_drop_down\" variant=\"filled\" [size]=\"iconSize()\" color=\"inherit\" />\n  }\n</ng-template>\n\n<ng-template #searchField>\n  <div class=\"tedi-filter-dropdown__search\">\n    <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n      <input\n        tedi-text-field\n        type=\"text\"\n        role=\"searchbox\"\n        [attr.aria-label]=\"text()\"\n        [(value)]=\"searchTerm\"\n        (clear)=\"onSearchClear()\"\n      />\n    </tedi-form-field>\n  </div>\n  <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "appendTo", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,