npm - @agorapulse/ui-components - Versions diffs - 22.1.7 → 22.2.0 - Mend

@agorapulse/ui-components 22.1.7 → 22.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/fesm2022/agorapulse-ui-components-dropdown-panel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-dropdown-panel.mjs","sources":["../../../libs/ui-components/dropdown-panel/src/dropdown-content.directive.ts","../../../libs/ui-components/dropdown-panel/src/dropdown-panel.component.ts","../../../libs/ui-components/dropdown-panel/src/dropdown-panel.component.html","../../../libs/ui-components/dropdown-panel/src/agorapulse-ui-components-dropdown-panel.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/** Marks the panel's content. A template, not `<ng-content>`, so nothing is created until the panel opens. /\n@Directive({ selector: 'ng-template[apDropdownContent]' })\nexport class DropdownContentDirective {\n readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n","import { createFloatingOverlay, FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { OverlayRef } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, contentChild, input, output, TemplateRef, viewChild } from '@angular/core';\nimport { DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective } from './dropdown-content.directive';\n\n/\n The surface a dropdown opens: white, rounded, elevated — and nothing more. No role and no focus\n * trap: the content brings its own semantics (`menu`, `listbox`…). A dialog wants the popover.\n \n @example\n * <button [apDropdownTrigger]=\"panel\">Columns</button>\n * <ap-dropdown-panel #panel>\n * <ng-template apDropdownContent>…</ng-template>\n * </ap-dropdown-panel>\n /\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-dropdown-panel',\n imports: [NgTemplateOutlet],\n templateUrl: 'dropdown-panel.component.html',\n styleUrls: ['dropdown-panel.component.scss'],\n})\nexport class DropdownPanelComponent implements DropdownOverlay {\n private readonly floating = createFloatingOverlay();\n protected readonly content = contentChild.required(DropdownContentDirective);\n private readonly surface = viewChild.required<TemplateRef<unknown>>('surface');\n\n /* Unset means derived from the anchor mode, i.e. `bottom-start`. /\n readonly placement = input<FloatingPlacement>();\n\n /* On by default: a dropdown keeps its click catcher. /\n readonly showBackdrop = input(true);\n\n readonly panelClass = input<string \| string[]>('');\n\n /* Consulted before an outside click or Escape closes the panel. Return `false` to keep it open. /\n readonly canDismiss = input<() => boolean>(() => true);\n\n readonly opened = output<void>();\n\n /* Fires for every close, asked for or gestured: a host's teardown belongs here, not in its own `close()`. /\n readonly closed = output<void>();\n\n readonly isOpen = this.floating.isOpen;\n\n /* For a host that must hear the gesture before it becomes a dismissal — see the filter dropdown. /\n get overlayRef(): OverlayRef \| null {\n return this.floating.overlayRef;\n }\n\n open(triggerElement?: HTMLElement): void {\n if (this.isOpen()) return;\n\n this.floating.open(this.surface(), triggerElement, {\n placement: this.placement(),\n showBackdrop: this.showBackdrop(),\n panelClass: this.panelClass(),\n onClose: () => this.dismiss(),\n });\n this.opened.emit();\n }\n\n close(): void {\n if (!this.isOpen()) return;\n\n this.floating.close();\n this.closed.emit();\n }\n\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n private dismiss(): void {\n if (this.canDismiss()()) {\n this.close();\n }\n }\n}\n","<ng-template #surface>\n <div class=\"ap-dropdown-panel\">\n <ng-container [ngTemplateOutlet]=\"content().template\" />\n </div>\n</ng-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"agorapulse-ui-components-dropdown-panel.mjs","sources":["../../../libs/ui-components/dropdown-panel/src/dropdown-content.directive.ts","../../../libs/ui-components/dropdown-panel/src/dropdown-panel.component.ts","../../../libs/ui-components/dropdown-panel/src/dropdown-panel.component.html","../../../libs/ui-components/dropdown-panel/src/agorapulse-ui-components-dropdown-panel.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/** Marks the panel's content. A template, not `<ng-content>`, so nothing is created until the panel opens. /\n@Directive({ selector: 'ng-template[apDropdownContent]' })\nexport class DropdownContentDirective {\n readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n","import { createFloatingOverlay, FloatingPlacement } from '@agorapulse/ui-components/floating';\nimport { OverlayRef } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, contentChild, input, output, TemplateRef, viewChild } from '@angular/core';\nimport { DropdownOverlay, interactiveTriggerElement } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective } from './dropdown-content.directive';\n\n/\n The surface a dropdown opens: white, rounded, elevated — and nothing more. No role and no focus\n * trap: the content brings its own semantics (`menu`, `listbox`, and the `dialog` a combobox owns,\n * as the datepicker's calendar is). A dialog that should take focus — heading, close button, Tab\n * confined — wants the popover instead.\n \n @example\n * <button [apDropdownTrigger]=\"panel\">Columns</button>\n * <ap-dropdown-panel #panel>\n * <ng-template apDropdownContent>…</ng-template>\n * </ap-dropdown-panel>\n /\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-dropdown-panel',\n imports: [NgTemplateOutlet],\n templateUrl: 'dropdown-panel.component.html',\n styleUrls: ['dropdown-panel.component.scss'],\n})\nexport class DropdownPanelComponent implements DropdownOverlay {\n private readonly floating = createFloatingOverlay();\n protected readonly content = contentChild.required(DropdownContentDirective);\n private readonly surface = viewChild.required<TemplateRef<unknown>>('surface');\n private returnFocusTo: HTMLElement \| null = null;\n\n /* Unset means derived from the anchor mode, i.e. `bottom-start`. /\n readonly placement = input<FloatingPlacement>();\n\n /* On by default: a dropdown keeps its click catcher. /\n readonly showBackdrop = input(true);\n\n readonly panelClass = input<string \| string[]>('');\n\n /* Consulted before an outside click or Escape closes the panel. Return `false` to keep it open. /\n readonly canDismiss = input<() => boolean>(() => true);\n\n readonly opened = output<void>();\n\n /* Fires for every close, asked for or gestured: a host's teardown belongs here, not in its own `close()`. /\n readonly closed = output<void>();\n\n readonly isOpen = this.floating.isOpen;\n\n /* For a host that must hear the gesture before it becomes a dismissal — see the filter dropdown. /\n get overlayRef(): OverlayRef \| null {\n return this.floating.overlayRef;\n }\n\n open(triggerElement?: HTMLElement): void {\n if (this.isOpen()) return;\n\n this.returnFocusTo = triggerElement ?? this.activeElement();\n\n this.floating.open(this.surface(), triggerElement, {\n placement: this.placement(),\n showBackdrop: this.showBackdrop(),\n panelClass: this.panelClass(),\n onClose: () => this.dismiss(),\n });\n this.focusIn();\n this.opened.emit();\n }\n\n close(): void {\n if (!this.isOpen()) return;\n\n // Read before disposing: the pane is gone by the time we would ask.\n const ours = this.holdsFocus();\n const returnTo = this.returnFocusTo;\n this.returnFocusTo = null;\n\n this.floating.close();\n if (ours && returnTo) this.returnFocus(returnTo);\n this.closed.emit();\n }\n\n /\n The pane sits at the end of `body`, so Tab from the trigger would walk the whole page before\n * reaching it. Focus the content root when it declares a tabindex — a host that wants something\n * finer focuses it afterwards, and wins.\n /\n private focusIn(): void {\n const surface = this.surfaceElement();\n const contentRoot = surface?.firstElementChild;\n const target = contentRoot instanceof HTMLElement && contentRoot.hasAttribute('tabindex') ? contentRoot : surface;\n target?.focus();\n }\n\n private returnFocus(trigger: HTMLElement): void {\n interactiveTriggerElement(trigger).focus();\n }\n\n /* Only give focus back if it is still ours to give: the user may have clicked elsewhere. /\n private holdsFocus(): boolean {\n const active = this.activeElement();\n if (!active \|\| active === document.body) return true;\n return this.floating.overlayRef?.overlayElement.contains(active) ?? false;\n }\n\n /* `<body>` means nobody holds focus: returning focus there would land on the page's first focusable element. /\n private activeElement(): HTMLElement \| null {\n const active = document.activeElement;\n if (!(active instanceof HTMLElement) \|\| active === document.body) return null;\n\n return active;\n }\n\n private surfaceElement(): HTMLElement \| null {\n const child = this.floating.overlayRef?.overlayElement.firstElementChild;\n return child instanceof HTMLElement ? child : null;\n }\n\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n private dismiss(): void {\n if (this.canDismiss()()) {\n this.close();\n }\n }\n}\n","<ng-template #surface>\n <div\n class=\"ap-dropdown-panel\"\n tabindex=\"-1\">\n <ng-container [ngTemplateOutlet]=\"content().template\" />\n </div>\n</ng-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs CHANGED Viewed

@@ -7,9 +7,9 @@ import { InfoboxComponent } from '@agorapulse/ui-components/infobox';
 import { provideUiComponentsSymbols } from '@agorapulse/ui-components/providers';
 import { SymbolComponent, apInfo, apFeatureLock, apReset, apChevronDown as apChevronDown$1, apPlus, apRefresh, withSymbols, apFilter, apFilterFill } from '@agorapulse/ui-symbol';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, input, output, DestroyRef, ChangeDetectionStrategy, Component, viewChild, effect, untracked, booleanAttribute } from '@angular/core';
+import { signal, computed, Injectable, inject, input, output, ElementRef, DestroyRef, ChangeDetectionStrategy, Component, viewChild, effect, untracked, booleanAttribute } from '@angular/core';
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
-import { DatepickerMode, InputDatepickerComponent } from '@agorapulse/ui-components/datepicker';
+import { DatepickerMode, isPeriod, DatepickerSelectComponent } from '@agorapulse/ui-components/datepicker';
 import { RadioComponent } from '@agorapulse/ui-components/radio';
 import { ToggleComponent } from '@agorapulse/ui-components/toggle';
 import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
@@ -253,6 +253,7 @@ class FilterLeafSelectComponent {
     valueChange = output();
     /** Event emitted when a select item feature locked is clicked */
     lockedFeatureClicked = output();
+    host = inject(ElementRef);
     constructor() {
         inject(DestroyRef).onDestroy(() => this.filterState.setNestedPanelOpen(this.item().key, false));
     }
@@ -277,6 +278,21 @@ class FilterLeafSelectComponent {
     ...(ngDevMode ? [{ debugName: "onlyText" }] : /* istanbul ignore next */ []));
     onPanelToggle(open) {
         this.filterState.setNestedPanelOpen(this.item().key, open);
+        if (!open) {
+            this.restoreFocusAfterClose();
+        }
+    }
+    /**
+     * `ng-select` drops focus when it closes, and its panel lives on `body`, so a keyboard pick lands
+     * on `<body>`, outside the still-open dialog. Only restore when it was dropped: a click elsewhere
+     * leaves a real element focused and must be left alone.
+     */
+    restoreFocusAfterClose() {
+        queueMicrotask(() => {
+            if (document.activeElement !== document.body)
+                return;
+            this.host.nativeElement.querySelector('input')?.focus();
+        });
     }
     onSingleSelectChange(selected) {
         this.valueChange.emit({ key: this.item().key, value: { filterType: 'select', selectionType: 'single', selected } });
@@ -304,7 +320,7 @@ class FilterLeafSelectComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "multipleSelectValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterLeafSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterLeafSelectComponent, isStandalone: true, selector: "ap-filter-leaf-select", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange", lockedFeatureClicked: "lockedFeatureClicked" }, ngImport: i0, template: "@let selectItem = item();\n<div class=\"ap-filter-leaf__option\">\n    <ap-form-field>\n        @if (selectItem.label) {\n            <label for=\"select-{{ selectItem.key }}\">\n                {{ selectItem.label }}\n            </label>\n        }\n        @if (selectItem.selectionType === 'single') {\n            <ng-select\n                #singleSelect\n                id=\"select-{{ selectItem.key }}\"\n                apSelectSingle\n                bindLabel=\"label\"\n                bindValue=\"value\"\n                [clearable]=\"true\"\n                [disabled]=\"!!selectItem.featureLocked\"\n                [items]=\"selectItem.items\"\n                [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n                [inlineLabel]=\"selectItem.inlineLabel\"\n                [ngModel]=\"singleSelectValue()\"\n                (open)=\"onPanelToggle(true)\"\n                (close)=\"onPanelToggle(false)\"\n                (ngModelChange)=\"onSingleSelectChange($event)\"\n            >\n                <ng-template\n                    let-item=\"item\"\n                    ng-label-tmp>\n                    <ap-select-label-single\n                        [displayType]=\"selectItem.displayType\"\n                        [avatarUrl]=\"item.avatarUrl\"\n                        [network]=\"item.network\"\n                        [label]=\"item.label\" />\n                </ng-template>\n\n                <ng-template\n                    let-item=\"item\"\n                    let-item$=\"item$\"\n                    ng-option-tmp>\n                    @if (item.caption) {\n                        <ap-dropdown-item-single-two-lines\n                            [caption]=\"item$.caption\"\n                            [selected]=\"item$.selected\"\n                            [text]=\"item$.label\"\n                            [avatarUrl]=\"item$.avatarUrl\"\n                            [network]=\"item$.network\"\n                            [symbolId]=\"item$.symbolId\"\n                            [isFeatureLocked]=\"item.featureLocked\"\n                            [dividerEnabled]=\"!!item.dividerEnabled\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n                        />\n                    } @else {\n                        <ap-dropdown-item-single-one-line\n                            [selected]=\"item$.selected\"\n                            [text]=\"item.label\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [network]=\"item.network\"\n                            [symbolId]=\"item.symbolId\"\n                            [isFeatureLocked]=\"item.featureLocked\"\n                            [dividerEnabled]=\"!!item.dividerEnabled\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n                        />\n                    }\n\n                </ng-template>\n\n                @if (selectItem.searchable) {\n                    <ng-template ng-header-tmp>\n                        <ap-dropdown-search-form\n                            [select]=\"singleSelect\"\n                            [searchPlaceholder]=\"selectItem.searchPlaceholder ?? 'Search'\" />\n                    </ng-template>\n                }\n\n            </ng-select>\n        } @else {\n            <ng-select\n                #multipleSelect\n                id=\"select-{{ selectItem.key }}\"\n                apSelectMultiple\n                bindLabel=\"label\"\n                bindValue=\"value\"\n                [clearable]=\"true\"\n                [items]=\"selectItem.items\"\n                [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n                [inlineLabel]=\"selectItem.inlineLabel\"\n                [ngModel]=\"multipleSelectValue()\"\n                (open)=\"onPanelToggle(true)\"\n                (close)=\"onPanelToggle(false)\"\n                (ngModelChange)=\"onMultipleSelectChange($event)\">\n                <ng-template\n                    let-items=\"items\"\n                    let-clear=\"clear\"\n                    ng-multi-label-tmp>\n                    <ap-select-label-multiple\n                        bindValue=\"value\"\n                        bindLabel=\"label\"\n                        bindAvatarUrl=\"avatarUrl\"\n                        bindNetwork=\"network\"\n                        bindSymbolId=\"symbolId\"\n                        bindTagColor=\"tagColor\"\n                        [tagColor]=\"multipleTagColor()\"\n                        [displayType]=\"multipleDisplayType()\"\n                        [selectedItems]=\"items\"\n                        (removeItem)=\"clear($event)\"\n                    />\n                </ng-template>\n\n                <ng-template\n                    let-item=\"item\"\n                    let-item$=\"item$\"\n                    ng-option-tmp>\n                    @if (item.caption) {\n                        <ap-dropdown-item-multiple-two-lines\n                            [selected]=\"item$.selected\"\n                            [onlyEnabled]=\"onlyEnabled() && !item.featureLocked\"\n                            [onlyText]=\"onlyText()\"\n                            [caption]=\"item.caption\"\n                            [text]=\"item.label\"\n                            [htmlId]=\"item$.htmlId\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [network]=\"item.network\"\n                            [symbolId]=\"item.symbolId\"\n                            [isFeatureLocked]=\"item.featureLocked\"\n                            [dividerEnabled]=\"!!item.dividerEnabled\"\n                            (selectOnly)=\"onSelectOnly(item)\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n                        />\n                    } @else {\n                        <ap-dropdown-item-multiple-one-line\n                            [onlyEnabled]=\"onlyEnabled() && !item.featureLocked\"\n                            [onlyText]=\"onlyText()\"\n                            [selected]=\"item$.selected\"\n                            [htmlId]=\"item$.htmlId\"\n                            [text]=\"item.label\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [network]=\"item.network\"\n                            [symbolId]=\"item.symbolId\"\n                            [isFeatureLocked]=\"item.featureLocked\"\n                            [dividerEnabled]=\"!!item.dividerEnabled\"\n                            (selectOnly)=\"onSelectOnly(item)\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n                        />\n                    }\n                </ng-template>\n\n                @if (selectItem.searchable) {\n                    <ng-template ng-header-tmp>\n                        <ap-dropdown-search-form\n                            [select]=\"multipleSelect\"\n                            [searchPlaceholder]=\"selectItem.searchPlaceholder ?? 'Search'\" />\n                    </ng-template>\n                }\n            </ng-select>\n        }\n    </ap-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: SelectMultipleDirective, selector: "ng-select[apSelectMultiple]", inputs: ["maxItemsTooltip", "pinnedItemsEnabled"] }, { kind: "directive", type: SelectSingleDirective, selector: "ng-select[apSelectSingle]" }, { kind: "component", type: SelectLabelSingleComponent, selector: "ap-select-label-single", inputs: ["displayType", "label", "avatarUrl", "network", "showAvatarInitials", "roundedAvatar"] }, { kind: "component", type: SelectLabelMultipleComponent, selector: "ap-select-label-multiple", inputs: ["displayType", "tagColor", "selectedItems", "bindLabel", "bindValue", "bindAvatarUrl", "bindSymbolId", "roundedAvatar", "bindNetwork", "bindTagColor"], outputs: ["removeItem"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: DropdownItemMultipleTwoLinesComponent, selector: "ap-dropdown-item-multiple-two-lines", inputs: ["text", "caption", "selected", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "lockedFeatureClicked"] }, { kind: "component", type: DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "indeterminate", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "lockedFeatureClicked"] }, { kind: "component", type: DropdownItemSingleOneLineComponent, selector: "ap-dropdown-item-single-one-line", inputs: ["text", "selected", "disabled", "avatarUrl", "showAvatarInitials", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked", "standaloneModeEnabled"], outputs: ["lockedFeatureClicked"] }, { kind: "component", type: DropdownItemSingleTwoLinesComponent, selector: "ap-dropdown-item-single-two-lines", inputs: ["text", "caption", "selected", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked"], outputs: ["lockedFeatureClicked"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterLeafSelectComponent, isStandalone: true, selector: "ap-filter-leaf-select", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange", lockedFeatureClicked: "lockedFeatureClicked" }, ngImport: i0, template: "@let selectItem = item();\n<div class=\"ap-filter-leaf__option\">\n    <ap-form-field>\n        @if (selectItem.label) {\n            <label for=\"select-{{ selectItem.key }}\">\n                {{ selectItem.label }}\n            </label>\n        }\n        @if (selectItem.selectionType === 'single') {\n            <ng-select\n                #singleSelect\n                id=\"select-{{ selectItem.key }}\"\n                apSelectSingle\n                bindLabel=\"label\"\n                bindValue=\"value\"\n                [clearable]=\"true\"\n                [disabled]=\"!!selectItem.featureLocked\"\n                [items]=\"selectItem.items\"\n                [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n                [inlineLabel]=\"selectItem.inlineLabel\"\n                [ngModel]=\"singleSelectValue()\"\n                (open)=\"onPanelToggle(true)\"\n                (close)=\"onPanelToggle(false)\"\n                (ngModelChange)=\"onSingleSelectChange($event)\"\n            >\n                <ng-template\n                    let-item=\"item\"\n                    ng-label-tmp>\n                    <ap-select-label-single\n                        [displayType]=\"selectItem.displayType\"\n                        [avatarUrl]=\"item.avatarUrl\"\n                        [network]=\"item.network\"\n                        [label]=\"item.label\" />\n                </ng-template>\n\n                <ng-template\n                    let-item=\"item\"\n                    let-item$=\"item$\"\n                    ng-option-tmp>\n                    @if (item.caption) {\n                        <ap-dropdown-item-single-two-lines\n                            [caption]=\"item$.caption\"\n                            [selected]=\"item$.selected\"\n                            [text]=\"item$.label\"\n                            [avatarUrl]=\"item$.avatarUrl\"\n                            [network]=\"item$.network\"\n                            [symbolId]=\"item$.symbolId\"\n                            [isFeatureLocked]=\"item.featureLocked\"\n                            [dividerEnabled]=\"!!item.dividerEnabled\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n                        />\n                    } @else {\n                        <ap-dropdown-item-single-one-line\n                            [selected]=\"item$.selected\"\n                            [text]=\"item.label\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [network]=\"item.network\"\n                            [symbolId]=\"item.symbolId\"\n                            [isFeatureLocked]=\"item.featureLocked\"\n                            [dividerEnabled]=\"!!item.dividerEnabled\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n                        />\n                    }\n\n                </ng-template>\n\n                @if (selectItem.searchable) {\n                    <ng-template ng-header-tmp>\n                        <ap-dropdown-search-form\n                            [select]=\"singleSelect\"\n                            [searchPlaceholder]=\"selectItem.searchPlaceholder ?? 'Search'\" />\n                    </ng-template>\n                }\n\n            </ng-select>\n        } @else {\n            <ng-select\n                #multipleSelect\n                id=\"select-{{ selectItem.key }}\"\n                apSelectMultiple\n                bindLabel=\"label\"\n                bindValue=\"value\"\n                [clearable]=\"true\"\n                [items]=\"selectItem.items\"\n                [placeholder]=\"selectItem.placeholder ?? 'Select an option'\"\n                [inlineLabel]=\"selectItem.inlineLabel\"\n                [ngModel]=\"multipleSelectValue()\"\n                (open)=\"onPanelToggle(true)\"\n                (close)=\"onPanelToggle(false)\"\n                (ngModelChange)=\"onMultipleSelectChange($event)\">\n                <ng-template\n                    let-items=\"items\"\n                    let-clear=\"clear\"\n                    ng-multi-label-tmp>\n                    <ap-select-label-multiple\n                        bindValue=\"value\"\n                        bindLabel=\"label\"\n                        bindAvatarUrl=\"avatarUrl\"\n                        bindNetwork=\"network\"\n                        bindSymbolId=\"symbolId\"\n                        bindTagColor=\"tagColor\"\n                        [tagColor]=\"multipleTagColor()\"\n                        [displayType]=\"multipleDisplayType()\"\n                        [selectedItems]=\"items\"\n                        (removeItem)=\"clear($event)\"\n                    />\n                </ng-template>\n\n                <ng-template\n                    let-item=\"item\"\n                    let-item$=\"item$\"\n                    ng-option-tmp>\n                    @if (item.caption) {\n                        <ap-dropdown-item-multiple-two-lines\n                            [selected]=\"item$.selected\"\n                            [onlyEnabled]=\"onlyEnabled() && !item.featureLocked\"\n                            [onlyText]=\"onlyText()\"\n                            [caption]=\"item.caption\"\n                            [text]=\"item.label\"\n                            [htmlId]=\"item$.htmlId\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [network]=\"item.network\"\n                            [symbolId]=\"item.symbolId\"\n                            [isFeatureLocked]=\"item.featureLocked\"\n                            [dividerEnabled]=\"!!item.dividerEnabled\"\n                            (selectOnly)=\"onSelectOnly(item)\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n                        />\n                    } @else {\n                        <ap-dropdown-item-multiple-one-line\n                            [onlyEnabled]=\"onlyEnabled() && !item.featureLocked\"\n                            [onlyText]=\"onlyText()\"\n                            [selected]=\"item$.selected\"\n                            [htmlId]=\"item$.htmlId\"\n                            [text]=\"item.label\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [network]=\"item.network\"\n                            [symbolId]=\"item.symbolId\"\n                            [isFeatureLocked]=\"item.featureLocked\"\n                            [dividerEnabled]=\"!!item.dividerEnabled\"\n                            (selectOnly)=\"onSelectOnly(item)\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit(item)\"\n                        />\n                    }\n                </ng-template>\n\n                @if (selectItem.searchable) {\n                    <ng-template ng-header-tmp>\n                        <ap-dropdown-search-form\n                            [select]=\"multipleSelect\"\n                            [searchPlaceholder]=\"selectItem.searchPlaceholder ?? 'Search'\" />\n                    </ng-template>\n                }\n            </ng-select>\n        }\n    </ap-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: SelectMultipleDirective, selector: "ng-select[apSelectMultiple]", inputs: ["maxItemsTooltip", "pinnedItemsEnabled"] }, { kind: "directive", type: SelectSingleDirective, selector: "ng-select[apSelectSingle]" }, { kind: "component", type: SelectLabelSingleComponent, selector: "ap-select-label-single", inputs: ["displayType", "label", "avatarUrl", "network", "showAvatarInitials", "roundedAvatar"] }, { kind: "component", type: SelectLabelMultipleComponent, selector: "ap-select-label-multiple", inputs: ["displayType", "tagColor", "selectedItems", "bindLabel", "bindValue", "bindAvatarUrl", "bindSymbolId", "roundedAvatar", "bindNetwork", "bindTagColor", "disabled"], outputs: ["removeItem"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: DropdownItemMultipleTwoLinesComponent, selector: "ap-dropdown-item-multiple-two-lines", inputs: ["text", "caption", "selected", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "lockedFeatureClicked"] }, { kind: "component", type: DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "indeterminate", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "presentational", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "lockedFeatureClicked"] }, { kind: "component", type: DropdownItemSingleOneLineComponent, selector: "ap-dropdown-item-single-one-line", inputs: ["text", "selected", "disabled", "avatarUrl", "showAvatarInitials", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked", "standaloneModeEnabled"], outputs: ["lockedFeatureClicked"] }, { kind: "component", type: DropdownItemSingleTwoLinesComponent, selector: "ap-dropdown-item-single-two-lines", inputs: ["text", "caption", "selected", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked"], outputs: ["lockedFeatureClicked"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterLeafSelectComponent, decorators: [{
             type: Component,
@@ -353,7 +369,10 @@ class FilterLeafComponent {
     ...(ngDevMode ? [{ debugName: "contentVisible" }] : /* istanbul ignore next */ []));
     displayLabelInLeaf = computed(() => {
         const item = this.item();
-        return item.filterType === 'checkbox' || item.filterType === 'radio' || item.filterType === 'toggle';
+        return (item.filterType === 'checkbox' ||
+            item.filterType === 'radio' ||
+            item.filterType === 'toggle' ||
+            item.filterType === 'date-range');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayLabelInLeaf" }] : /* istanbul ignore next */ []));
     checkboxItem = computed(() => {
@@ -432,14 +451,18 @@ class FilterLeafComponent {
     onToggleChange(checked) {
         this.valueChange.emit({ key: this.item().key, value: { filterType: 'toggle', checked } });
     }
-    onDateRangeChange(period) {
+    onDateRangeChange(value) {
+        // ap-datepicker-select is mode="range" here, so it only ever emits a Period, or one of the two
+        // empties — `undefined` on clear, `null` if a form wrote one down. `isPeriod` narrows without a
+        // cast, per CLAUDE.md, and sorts both empties into the same branch.
+        const period = isPeriod(value) ? value : undefined;
         // A cleared/partial range must register as unfilled: `hasSelection` treats any object as filled,
         // so collapse an incomplete period to `undefined`.
-        const selectedPeriod = period.startDate && period.endDate ? period : undefined;
+        const selectedPeriod = period?.startDate && period?.endDate ? period : undefined;
         this.valueChange.emit({ key: this.item().key, value: { filterType: 'date-range', selectedPeriod } });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterLeafComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterLeafComponent, isStandalone: true, selector: "ap-filter-leaf", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isLastLeaf: { classPropertyName: "isLastLeaf", publicName: "isLastLeaf", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], ngImport: i0, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div\n        class=\"ap-filter-leaf__header\"\n        [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n        [class.ap-filter-leaf__expanded]=\"contentVisible()\"\n        [attr.aria-expanded]=\"closable() ? contentVisible() : null\"\n        (apClick)=\"onHeaderClick()\">\n        <div class=\"ap-filter-leaf__title\">\n            <span>{{ item().title }}</span>\n            @if (item().tooltipText) {\n                <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n            }\n        </div>\n        @if (item().featureLocked) {\n            <div class=\"ap-filter-leaf__actions\">\n                <ap-symbol color=\"purple\" symbolId=\"feature-lock\" size=\"sm\"\n                           [apTooltip]=\"item().featureLockTooltipText\" />\n            </div>\n        } @else if (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!expanded()\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if (contentVisible()) {\n        <div class=\"ap-filter-leaf__content\">\n            @if (item().label && displayLabelInLeaf()) {\n                <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n            }\n            @switch (item().filterType) {\n                @case ('checkbox') {\n                    @if (checkboxItem(); as vCheckboxItem) {\n                        @for (option of vCheckboxItem.items; track option.name) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-checkbox\n                                    class=\"centered\"\n                                    [name]=\"'checkbox-' + item().key + '-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled || item().featureLocked\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-checkbox>\n                            </div>\n                        }\n                    }\n                }\n                @case ('radio') {\n                    @if (radioItem(); as vRadioItem) {\n                        @for (option of vRadioItem.items; track option.radioId) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-radio\n                                    class=\"centered\"\n                                    [radioId]=\"option.radioId\"\n                                    [value]=\"option.value\"\n                                    [disabled]=\"!!option.disabled || !!item().featureLocked\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-radio>\n                            </div>\n                        }\n                    }\n                }\n                @case ('toggle') {\n                    @if (toggleItem(); as vToggleItem) {\n                        <div class=\"ap-filter-leaf__option\">\n                            <ap-toggle\n                                [name]=\"'toggle-' + vToggleItem.item.name\"\n                                [checked]=\"toggleValue()\"\n                                [disabled]=\"vToggleItem.item.disabled || item().featureLocked\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"toggle\"\n                                  [class.disabled]=\"vToggleItem.item.disabled || item().featureLocked\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\"\n                                               (valueChange)=\"valueChange.emit($event)\"\n                                               (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\n                            [disabled]=\"!!item().featureLocked\"\n                            [label]=\"vDateRangeItem.label\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\n                            [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n                            [locale]=\"vDateRangeItem.locale ?? 'en'\"\n                            [firstDayOfWeek]=\"vDateRangeItem.firstDayOfWeek ?? 'monday'\"\n                            [clearable]=\"true\"\n                            [selectedPeriod]=\"dateRangeValue()\"\n                            (periodChanged)=\"onDateRangeChange($event)\"\n                        />\n                    }\n                }\n            }\n        </div>\n    }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}.ap-filter-leaf__option .toggle{font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}.ap-filter-leaf__option span.disabled{color:var(--ref-color-grey-60)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "fullyControlled", "required", "name"], outputs: ["change"] }, { kind: "component", type: RadioComponent, selector: "ap-radio", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "labelPosition", "radioId", "formControlName", "value", "required", "name"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleComponent, selector: "ap-toggle", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "labelPosition", "disabled", "checked", "required", "confirm", "confirmMessage", "confirmOk", "confirmCancel", "confirmTitle", "name"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterLeafSelectComponent, selector: "ap-filter-leaf-select", inputs: ["item"], outputs: ["valueChange", "lockedFeatureClicked"] }, { kind: "component", type: InputDatepickerComponent, selector: "ap-input-datepicker", inputs: ["mode", "label", "placeholder", "firstDayOfWeek", "locale", "dateFormat", "disabled", "minDate", "maxDate", "selectedDate", "selectedDates", "selectedPeriod", "i18n", "showRanges", "showCustomRangeLabel", "rangesConfig", "showBackdrop", "placement", "clearable"], outputs: ["periodChanged", "dateSelected"] }, { kind: "directive", type: ClickDirective, selector: "[apClick]", inputs: ["apClickDisabled", "apClickRole"], outputs: ["apClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterLeafComponent, isStandalone: true, selector: "ap-filter-leaf", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isLastLeaf: { classPropertyName: "isLastLeaf", publicName: "isLastLeaf", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], ngImport: i0, template: "<div\n    [class.with-border-bottom]=\"!isLastLeaf()\"\n    class=\"ap-filter-leaf\">\n    <button\n        type=\"button\"\n        class=\"ap-filter-leaf__header\"\n        [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n        [class.ap-filter-leaf__expanded]=\"contentVisible()\"\n        [attr.aria-expanded]=\"closable() ? contentVisible() : null\"\n        (click)=\"onHeaderClick()\">\n        <div class=\"ap-filter-leaf__title\">\n            <span>{{ item().title }}</span>\n            @if (item().tooltipText) {\n                <ap-symbol\n                    color=\"light-grey\"\n                    symbolId=\"info\"\n                    size=\"sm\"\n                    [apTooltip]=\"item().tooltipText\" />\n            }\n        </div>\n        @if (item().featureLocked) {\n            <div class=\"ap-filter-leaf__actions\">\n                <ap-symbol\n                    color=\"purple\"\n                    symbolId=\"feature-lock\"\n                    size=\"sm\"\n                    [apTooltip]=\"item().featureLockTooltipText\" />\n            </div>\n        } @else if (closable()) {\n            <div\n                class=\"ap-filter-leaf__actions\"\n                [class.ap-filter-leaf__chevron--rotated]=\"!expanded()\">\n                <ap-symbol\n                    symbolId=\"chevron-up\"\n                    size=\"sm\" />\n            </div>\n        }\n    </button>\n\n    @if (contentVisible()) {\n        <div class=\"ap-filter-leaf__content\">\n            @if (item().label && displayLabelInLeaf()) {\n                <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n            }\n            @switch (item().filterType) {\n                @case ('checkbox') {\n                    @if (checkboxItem(); as vCheckboxItem) {\n                        @for (option of vCheckboxItem.items; track option.name) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-checkbox\n                                    class=\"centered\"\n                                    [name]=\"'checkbox-' + item().key + '-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled || item().featureLocked\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\">\n                                    <span>{{ option.label }}</span>\n                                </ap-checkbox>\n                            </div>\n                        }\n                    }\n                }\n                @case ('radio') {\n                    @if (radioItem(); as vRadioItem) {\n                        @for (option of vRadioItem.items; track option.radioId) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-radio\n                                    class=\"centered\"\n                                    [radioId]=\"option.radioId\"\n                                    [value]=\"option.value\"\n                                    [disabled]=\"!!option.disabled || !!item().featureLocked\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\">\n                                    <span>{{ option.label }}</span>\n                                </ap-radio>\n                            </div>\n                        }\n                    }\n                }\n                @case ('toggle') {\n                    @if (toggleItem(); as vToggleItem) {\n                        <div class=\"ap-filter-leaf__option\">\n                            <ap-toggle\n                                [name]=\"'toggle-' + vToggleItem.item.name\"\n                                [checked]=\"toggleValue()\"\n                                [disabled]=\"vToggleItem.item.disabled || item().featureLocked\"\n                                (change)=\"onToggleChange($event)\" />\n                            <span\n                                class=\"toggle\"\n                                [class.disabled]=\"vToggleItem.item.disabled || item().featureLocked\">\n                                {{ vToggleItem.item.label }}\n                            </span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select\n                            [item]=\"vSelectItem\"\n                            (valueChange)=\"valueChange.emit($event)\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-datepicker-select\n                            [ariaLabel]=\"vDateRangeItem.label ?? item().title\"\n                            [disabled]=\"!!item().featureLocked\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\n                            [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n                            [locale]=\"vDateRangeItem.locale ?? 'en'\"\n                            [firstDayOfWeek]=\"vDateRangeItem.firstDayOfWeek ?? 'monday'\"\n                            [clearable]=\"true\"\n                            [value]=\"dateRangeValue()\"\n                            (valueChange)=\"onDateRangeChange($event)\" />\n                    }\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;font:inherit;color:inherit;text-align:left;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header:focus-visible{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:-2px}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}.ap-filter-leaf__option .toggle{font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}.ap-filter-leaf__option span.disabled{color:var(--ref-color-grey-60)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "fullyControlled", "presentational", "required", "name"], outputs: ["change"] }, { kind: "component", type: RadioComponent, selector: "ap-radio", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "labelPosition", "radioId", "formControlName", "value", "required", "name"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleComponent, selector: "ap-toggle", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "labelPosition", "disabled", "checked", "required", "confirm", "confirmMessage", "confirmOk", "confirmCancel", "confirmTitle", "name"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterLeafSelectComponent, selector: "ap-filter-leaf-select", inputs: ["item"], outputs: ["valueChange", "lockedFeatureClicked"] }, { kind: "component", type: DatepickerSelectComponent, selector: "ap-datepicker-select", inputs: ["mode", "value", "disabled", "minDate", "maxDate", "maxRangeDays", "panelHint", "panelFooter", "canSelect", "presets", "placeholder", "ariaLabel", "dateFormat", "locale", "firstDayOfWeek", "placement", "clearable", "timeZone", "timeZoneTooltip"], outputs: ["valueChange", "touch", "selectionChange", "selectionRejected", "opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterLeafComponent, decorators: [{
             type: Component,
@@ -451,11 +474,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ToggleComponent,
                         FormsModule,
                         FilterLeafSelectComponent,
-                        InputDatepickerComponent,
+                        DatepickerSelectComponent,
                         SymbolComponent,
                         SymbolComponent,
                         ClickDirective,
-                    ], providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.with-border-bottom]=\"!isLastLeaf()\" class=\"ap-filter-leaf\">\n\n    <div\n        class=\"ap-filter-leaf__header\"\n        [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n        [class.ap-filter-leaf__expanded]=\"contentVisible()\"\n        [attr.aria-expanded]=\"closable() ? contentVisible() : null\"\n        (apClick)=\"onHeaderClick()\">\n        <div class=\"ap-filter-leaf__title\">\n            <span>{{ item().title }}</span>\n            @if (item().tooltipText) {\n                <ap-symbol color=\"light-grey\" symbolId=\"info\" size=\"sm\" [apTooltip]=\"item().tooltipText\" />\n            }\n        </div>\n        @if (item().featureLocked) {\n            <div class=\"ap-filter-leaf__actions\">\n                <ap-symbol color=\"purple\" symbolId=\"feature-lock\" size=\"sm\"\n                           [apTooltip]=\"item().featureLockTooltipText\" />\n            </div>\n        } @else if (closable()) {\n            <div class=\"ap-filter-leaf__actions\" [class.ap-filter-leaf__chevron--rotated]=\"!expanded()\">\n                <ap-symbol symbolId=\"chevron-up\" size=\"sm\" />\n            </div>\n        }\n    </div>\n\n    @if (contentVisible()) {\n        <div class=\"ap-filter-leaf__content\">\n            @if (item().label && displayLabelInLeaf()) {\n                <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n            }\n            @switch (item().filterType) {\n                @case ('checkbox') {\n                    @if (checkboxItem(); as vCheckboxItem) {\n                        @for (option of vCheckboxItem.items; track option.name) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-checkbox\n                                    class=\"centered\"\n                                    [name]=\"'checkbox-' + item().key + '-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled || item().featureLocked\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-checkbox>\n                            </div>\n                        }\n                    }\n                }\n                @case ('radio') {\n                    @if (radioItem(); as vRadioItem) {\n                        @for (option of vRadioItem.items; track option.radioId) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-radio\n                                    class=\"centered\"\n                                    [radioId]=\"option.radioId\"\n                                    [value]=\"option.value\"\n                                    [disabled]=\"!!option.disabled || !!item().featureLocked\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\"\n                                >\n                                    <span>{{ option.label }}</span>\n                                </ap-radio>\n                            </div>\n                        }\n                    }\n                }\n                @case ('toggle') {\n                    @if (toggleItem(); as vToggleItem) {\n                        <div class=\"ap-filter-leaf__option\">\n                            <ap-toggle\n                                [name]=\"'toggle-' + vToggleItem.item.name\"\n                                [checked]=\"toggleValue()\"\n                                [disabled]=\"vToggleItem.item.disabled || item().featureLocked\"\n                                (change)=\"onToggleChange($event)\"\n                            />\n                            <span class=\"toggle\"\n                                  [class.disabled]=\"vToggleItem.item.disabled || item().featureLocked\">{{ vToggleItem.item.label }}</span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select [item]=\"vSelectItem\"\n                                               (valueChange)=\"valueChange.emit($event)\"\n                                               (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-input-datepicker\n                            [disabled]=\"!!item().featureLocked\"\n                            [label]=\"vDateRangeItem.label\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\n                            [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n                            [locale]=\"vDateRangeItem.locale ?? 'en'\"\n                            [firstDayOfWeek]=\"vDateRangeItem.firstDayOfWeek ?? 'monday'\"\n                            [clearable]=\"true\"\n                            [selectedPeriod]=\"dateRangeValue()\"\n                            (periodChanged)=\"onDateRangeChange($event)\"\n                        />\n                    }\n                }\n            }\n        </div>\n    }\n\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}.ap-filter-leaf__option .toggle{font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}.ap-filter-leaf__option span.disabled{color:var(--ref-color-grey-60)}\n"] }]
+                    ], providers: [provideUiComponentsSymbols(apChevronDown, apInfo, apFeatureLock)], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [class.with-border-bottom]=\"!isLastLeaf()\"\n    class=\"ap-filter-leaf\">\n    <button\n        type=\"button\"\n        class=\"ap-filter-leaf__header\"\n        [class.ap-filter-leaf__closable]=\"closable() || item().featureLocked\"\n        [class.ap-filter-leaf__expanded]=\"contentVisible()\"\n        [attr.aria-expanded]=\"closable() ? contentVisible() : null\"\n        (click)=\"onHeaderClick()\">\n        <div class=\"ap-filter-leaf__title\">\n            <span>{{ item().title }}</span>\n            @if (item().tooltipText) {\n                <ap-symbol\n                    color=\"light-grey\"\n                    symbolId=\"info\"\n                    size=\"sm\"\n                    [apTooltip]=\"item().tooltipText\" />\n            }\n        </div>\n        @if (item().featureLocked) {\n            <div class=\"ap-filter-leaf__actions\">\n                <ap-symbol\n                    color=\"purple\"\n                    symbolId=\"feature-lock\"\n                    size=\"sm\"\n                    [apTooltip]=\"item().featureLockTooltipText\" />\n            </div>\n        } @else if (closable()) {\n            <div\n                class=\"ap-filter-leaf__actions\"\n                [class.ap-filter-leaf__chevron--rotated]=\"!expanded()\">\n                <ap-symbol\n                    symbolId=\"chevron-up\"\n                    size=\"sm\" />\n            </div>\n        }\n    </button>\n\n    @if (contentVisible()) {\n        <div class=\"ap-filter-leaf__content\">\n            @if (item().label && displayLabelInLeaf()) {\n                <span class=\"ap-filter-leaf__label\">{{ item().label }}</span>\n            }\n            @switch (item().filterType) {\n                @case ('checkbox') {\n                    @if (checkboxItem(); as vCheckboxItem) {\n                        @for (option of vCheckboxItem.items; track option.name) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-checkbox\n                                    class=\"centered\"\n                                    [name]=\"'checkbox-' + item().key + '-' + option.name\"\n                                    [checked]=\"checkboxValue()[option.name]\"\n                                    [disabled]=\"!!option.disabled || item().featureLocked\"\n                                    (change)=\"onCheckboxChange(option.name, $event)\">\n                                    <span>{{ option.label }}</span>\n                                </ap-checkbox>\n                            </div>\n                        }\n                    }\n                }\n                @case ('radio') {\n                    @if (radioItem(); as vRadioItem) {\n                        @for (option of vRadioItem.items; track option.radioId) {\n                            <div class=\"ap-filter-leaf__option\">\n                                <ap-radio\n                                    class=\"centered\"\n                                    [radioId]=\"option.radioId\"\n                                    [value]=\"option.value\"\n                                    [disabled]=\"!!option.disabled || !!item().featureLocked\"\n                                    [name]=\"item().key\"\n                                    [ngModel]=\"radioValue()\"\n                                    (ngModelChange)=\"onRadioClick($event)\">\n                                    <span>{{ option.label }}</span>\n                                </ap-radio>\n                            </div>\n                        }\n                    }\n                }\n                @case ('toggle') {\n                    @if (toggleItem(); as vToggleItem) {\n                        <div class=\"ap-filter-leaf__option\">\n                            <ap-toggle\n                                [name]=\"'toggle-' + vToggleItem.item.name\"\n                                [checked]=\"toggleValue()\"\n                                [disabled]=\"vToggleItem.item.disabled || item().featureLocked\"\n                                (change)=\"onToggleChange($event)\" />\n                            <span\n                                class=\"toggle\"\n                                [class.disabled]=\"vToggleItem.item.disabled || item().featureLocked\">\n                                {{ vToggleItem.item.label }}\n                            </span>\n                        </div>\n                    }\n                }\n                @case ('select') {\n                    @if (selectItem(); as vSelectItem) {\n                        <ap-filter-leaf-select\n                            [item]=\"vSelectItem\"\n                            (valueChange)=\"valueChange.emit($event)\"\n                            (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n                    }\n                }\n                @case ('date-range') {\n                    @if (dateRangeItem(); as vDateRangeItem) {\n                        <ap-datepicker-select\n                            [ariaLabel]=\"vDateRangeItem.label ?? item().title\"\n                            [disabled]=\"!!item().featureLocked\"\n                            [mode]=\"DatepickerMode.Range\"\n                            [placeholder]=\"vDateRangeItem.placeholder ?? 'Select date range'\"\n                            [minDate]=\"vDateRangeItem.minDate\"\n                            [maxDate]=\"vDateRangeItem.maxDate\"\n                            [dateFormat]=\"vDateRangeItem.dateFormat ?? 'MMMM DD, YYYY'\"\n                            [locale]=\"vDateRangeItem.locale ?? 'en'\"\n                            [firstDayOfWeek]=\"vDateRangeItem.firstDayOfWeek ?? 'monday'\"\n                            [clearable]=\"true\"\n                            [value]=\"dateRangeValue()\"\n                            (valueChange)=\"onDateRangeChange($event)\" />\n                    }\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".ap-filter-leaf{display:flex;flex-direction:column}.ap-filter-leaf.with-border-bottom{border-bottom:1px solid var(--ref-color-grey-10)}.ap-filter-leaf__header{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;font:inherit;color:inherit;text-align:left;padding:var(--ref-spacing-sm)}.ap-filter-leaf__header:focus-visible{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:-2px}.ap-filter-leaf__header.ap-filter-leaf__expanded{padding-bottom:var(--ref-spacing-xs)}.ap-filter-leaf__closable{cursor:pointer}.ap-filter-leaf__title{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1 0 0;color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__label{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.ap-filter-leaf__chevron--rotated{transform:rotate(180deg)}.ap-filter-leaf__content{display:flex;flex-direction:column;gap:var(--ref-spacing-xs);padding:0 var(--ref-spacing-sm) var(--ref-spacing-sm)}.ap-filter-leaf__option{display:flex;gap:var(--ref-spacing-xxs);align-items:center;justify-content:flex-start}.ap-filter-leaf__option .toggle{font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}.ap-filter-leaf__option span.disabled{color:var(--ref-color-grey-60)}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], isLastLeaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLastLeaf", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
 class FilterDropdownComponent {
@@ -533,6 +556,9 @@ class FilterDropdownComponent {
     /** Extra class(es) set on the body-appended overlay pane, so a consumer can scope global styles to this dropdown. */
     panelClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** Names the dialog — a dialog owes a name. */
+    ariaLabel = input('Filters', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     saveNewPresetsText = input('Save new presets', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "saveNewPresetsText" }] : /* istanbul ignore next */ []));
     saveAsNewPresetText = input('Save as new preset', /* @ts-ignore */
@@ -688,7 +714,7 @@ class FilterDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { infobox: { classPropertyName: "infobox", publicName: "infobox", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, savedValue: { classPropertyName: "savedValue", publicName: "savedValue", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, needClearButton: { classPropertyName: "needClearButton", publicName: "needClearButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, expandOnOpen: { classPropertyName: "expandOnOpen", publicName: "expandOnOpen", isSignal: true, isRequired: false, transformFunction: null }, presetsFeatureLocked: { classPropertyName: "presetsFeatureLocked", publicName: "presetsFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { infoboxLinkClick: "infoboxLinkClick", opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [panelClass]=\"panelClass()\"\n    [canDismiss]=\"canDismiss\"\n    (closed)=\"onPanelClosed()\">\n    <div\n        *apDropdownContent\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        aria-label=\"Filter dropdown\">\n\n        <div class=\"ap-filter-dropdown__content\">\n            @for (item of filterState.groups(); let last = $last; track item.key) {\n                <ap-filter-leaf\n                    [item]=\"item\"\n                    [closable]=\"closable()\"\n                    [isLastLeaf]=\"last\"\n                    (valueChange)=\"onLeafEdit($event)\"\n                    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n                    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n            }\n        </div>\n\n        @if (infobox(); as infobox) {\n            <div class=\"ap-filter-dropdown__infobox\">\n                <ap-infobox\n                    [type]=\"infobox.type ?? 'info'\"\n                    [title]=\"infobox.title\">\n                    @if (infobox.link; as link) {\n                        @if (link.href) {\n                            <a [href]=\"link.href\">{{ link.label }}</a>\n                        } @else {\n                            <a (apClick)=\"infoboxLinkClick.emit()\">{{ link.label }}</a>\n                        }\n                    }\n                    {{ infobox.text }}\n                </ap-infobox>\n            </div>\n        }\n\n        <div class=\"ap-filter-dropdown__footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown__footer--presets\">\n                    @if (!editingPresetsMode() || presetsFeatureLocked()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n                            [locked]=\"presetsFeatureLocked()\"\n                            (click)=\"onSavePresets()\">\n                            {{ saveNewPresetsText() }}\n                        </ap-button>\n                    } @else {\n                        <ap-button\n                            name=\"filter-dropdown-edit-presets\"\n                            symbolId=\"chevron-down\"\n                            symbolPosition=\"right\"\n                            [apDropdownTrigger]=\"updatePresetsDropdown\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                        >\n                            {{ savePresetText() }}\n                        </ap-button>\n                    }\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.buttonsDisabled()\"\n                        (click)=\"onResetFilters()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown__footer--apply\">\n                    @if (needClearButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-clear-filters\"\n                            [config]=\"{ color: 'blue', style: 'ghost' }\"\n                            [disabled]=\"filterState.clearDisabled()\"\n                            (click)=\"onClearFilters()\">\n                            {{ clearFilterText() }}\n                        </ap-button>\n                    }\n\n                    @if (needApplyButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-apply-filters\"\n                            [config]=\"{ color: 'blue', style: 'primary' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                            (click)=\"onApplyFilters()\">\n                            {{ applyFiltersText() }}\n                        </ap-button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n</ap-dropdown-panel>\n\n<ap-action-dropdown\n    #updatePresetsDropdown\n    [items]=\"savePresetsDropdownItems()\"\n    (itemClick)=\"onActionDropdownItemClick($event)\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;outline:none;max-height:min(90vh,750px,var(--ap-floating-available-height, 100vh))}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__infobox{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: FilterLeafComponent, selector: "ap-filter-leaf", inputs: ["item", "closable", "isLastLeaf"], outputs: ["valueChange", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "placement"], outputs: ["opened", "closed", "itemClick"] }, { kind: "component", type: InfoboxComponent, selector: "ap-infobox", inputs: ["buttonId", "buttonLabel", "buttonDataTrack", "buttonSymbolId", "closable", "title", "type"], outputs: ["buttonClicked", "closed"] }, { kind: "directive", type: ClickDirective, selector: "[apClick]", inputs: ["apClickDisabled", "apClickRole"], outputs: ["apClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterDropdownComponent, isStandalone: true, selector: "ap-filter-dropdown", inputs: { infobox: { classPropertyName: "infobox", publicName: "infobox", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, savedValue: { classPropertyName: "savedValue", publicName: "savedValue", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, needClearButton: { classPropertyName: "needClearButton", publicName: "needClearButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, expandOnOpen: { classPropertyName: "expandOnOpen", publicName: "expandOnOpen", isSignal: true, isRequired: false, transformFunction: null }, presetsFeatureLocked: { classPropertyName: "presetsFeatureLocked", publicName: "presetsFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { infoboxLinkClick: "infoboxLinkClick", opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [panelClass]=\"panelClass()\"\n    [canDismiss]=\"canDismiss\"\n    (closed)=\"onPanelClosed()\">\n    <!-- `dialog`, not `menu`: checkboxes, selects, Apply and Clear are not menuitems. A dialog owes a\n         name, hence `aria-label`. No focus trap \u2014 the leaf selects render outside this DOM, and a trap\n         would put them out of reach. -->\n    <div\n        *apDropdownContent\n        class=\"ap-filter-dropdown\"\n        role=\"dialog\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"ariaLabel()\">\n\n        <div class=\"ap-filter-dropdown__content\">\n            @for (item of filterState.groups(); let last = $last; track item.key) {\n                <ap-filter-leaf\n                    [item]=\"item\"\n                    [closable]=\"closable()\"\n                    [isLastLeaf]=\"last\"\n                    (valueChange)=\"onLeafEdit($event)\"\n                    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n                    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n            }\n        </div>\n\n        @if (infobox(); as infobox) {\n            <div class=\"ap-filter-dropdown__infobox\">\n                <ap-infobox\n                    [type]=\"infobox.type ?? 'info'\"\n                    [title]=\"infobox.title\">\n                    @if (infobox.link; as link) {\n                        @if (link.href) {\n                            <a [href]=\"link.href\">{{ link.label }}</a>\n                        } @else {\n                            <a (apClick)=\"infoboxLinkClick.emit()\">{{ link.label }}</a>\n                        }\n                    }\n                    {{ infobox.text }}\n                </ap-infobox>\n            </div>\n        }\n\n        <div class=\"ap-filter-dropdown__footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown__footer--presets\">\n                    @if (!editingPresetsMode() || presetsFeatureLocked()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n                            [locked]=\"presetsFeatureLocked()\"\n                            (click)=\"onSavePresets()\">\n                            {{ saveNewPresetsText() }}\n                        </ap-button>\n                    } @else {\n                        <ap-button\n                            name=\"filter-dropdown-edit-presets\"\n                            symbolId=\"chevron-down\"\n                            symbolPosition=\"right\"\n                            [apDropdownTrigger]=\"updatePresetsDropdown\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                        >\n                            {{ savePresetText() }}\n                        </ap-button>\n                    }\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.buttonsDisabled()\"\n                        (click)=\"onResetFilters()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown__footer--apply\">\n                    @if (needClearButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-clear-filters\"\n                            [config]=\"{ color: 'blue', style: 'ghost' }\"\n                            [disabled]=\"filterState.clearDisabled()\"\n                            (click)=\"onClearFilters()\">\n                            {{ clearFilterText() }}\n                        </ap-button>\n                    }\n\n                    @if (needApplyButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-apply-filters\"\n                            [config]=\"{ color: 'blue', style: 'primary' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                            (click)=\"onApplyFilters()\">\n                            {{ applyFiltersText() }}\n                        </ap-button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n</ap-dropdown-panel>\n\n<ap-action-dropdown\n    #updatePresetsDropdown\n    [items]=\"savePresetsDropdownItems()\"\n    (itemClick)=\"onActionDropdownItemClick($event)\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;outline:none;max-height:min(90vh,750px,var(--ap-floating-available-height, 100vh))}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__infobox{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: FilterLeafComponent, selector: "ap-filter-leaf", inputs: ["item", "closable", "isLastLeaf"], outputs: ["valueChange", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "largeModeEnabled", "customWidth", "showBackdrop", "disabled", "placement"], outputs: ["opened", "closed", "itemClick"] }, { kind: "component", type: InfoboxComponent, selector: "ap-infobox", inputs: ["buttonId", "buttonLabel", "buttonDataTrack", "buttonSymbolId", "closable", "title", "type"], outputs: ["buttonClicked", "closed"] }, { kind: "directive", type: ClickDirective, selector: "[apClick]", inputs: ["apClickDisabled", "apClickRole"], outputs: ["apClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterDropdownComponent, decorators: [{
             type: Component,
@@ -701,8 +727,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ActionDropdownComponent,
                         InfoboxComponent,
                         ClickDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [panelClass]=\"panelClass()\"\n    [canDismiss]=\"canDismiss\"\n    (closed)=\"onPanelClosed()\">\n    <div\n        *apDropdownContent\n        class=\"ap-filter-dropdown\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        aria-label=\"Filter dropdown\">\n\n        <div class=\"ap-filter-dropdown__content\">\n            @for (item of filterState.groups(); let last = $last; track item.key) {\n                <ap-filter-leaf\n                    [item]=\"item\"\n                    [closable]=\"closable()\"\n                    [isLastLeaf]=\"last\"\n                    (valueChange)=\"onLeafEdit($event)\"\n                    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n                    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n            }\n        </div>\n\n        @if (infobox(); as infobox) {\n            <div class=\"ap-filter-dropdown__infobox\">\n                <ap-infobox\n                    [type]=\"infobox.type ?? 'info'\"\n                    [title]=\"infobox.title\">\n                    @if (infobox.link; as link) {\n                        @if (link.href) {\n                            <a [href]=\"link.href\">{{ link.label }}</a>\n                        } @else {\n                            <a (apClick)=\"infoboxLinkClick.emit()\">{{ link.label }}</a>\n                        }\n                    }\n                    {{ infobox.text }}\n                </ap-infobox>\n            </div>\n        }\n\n        <div class=\"ap-filter-dropdown__footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown__footer--presets\">\n                    @if (!editingPresetsMode() || presetsFeatureLocked()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n                            [locked]=\"presetsFeatureLocked()\"\n                            (click)=\"onSavePresets()\">\n                            {{ saveNewPresetsText() }}\n                        </ap-button>\n                    } @else {\n                        <ap-button\n                            name=\"filter-dropdown-edit-presets\"\n                            symbolId=\"chevron-down\"\n                            symbolPosition=\"right\"\n                            [apDropdownTrigger]=\"updatePresetsDropdown\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                        >\n                            {{ savePresetText() }}\n                        </ap-button>\n                    }\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.buttonsDisabled()\"\n                        (click)=\"onResetFilters()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown__footer--apply\">\n                    @if (needClearButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-clear-filters\"\n                            [config]=\"{ color: 'blue', style: 'ghost' }\"\n                            [disabled]=\"filterState.clearDisabled()\"\n                            (click)=\"onClearFilters()\">\n                            {{ clearFilterText() }}\n                        </ap-button>\n                    }\n\n                    @if (needApplyButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-apply-filters\"\n                            [config]=\"{ color: 'blue', style: 'primary' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                            (click)=\"onApplyFilters()\">\n                            {{ applyFiltersText() }}\n                        </ap-button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n</ap-dropdown-panel>\n\n<ap-action-dropdown\n    #updatePresetsDropdown\n    [items]=\"savePresetsDropdownItems()\"\n    (itemClick)=\"onActionDropdownItemClick($event)\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;outline:none;max-height:min(90vh,750px,var(--ap-floating-available-height, 100vh))}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__infobox{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"] }]
-        }], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], infobox: [{ type: i0.Input, args: [{ isSignal: true, alias: "infobox", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], savedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "savedValue", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], needClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needClearButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], expandOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnOpen", required: false }] }], presetsFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsFeatureLocked", required: false }] }], savePresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsMode", required: false }] }], editingPresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingPresetsMode", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], saveNewPresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveNewPresetsText", required: false }] }], saveAsNewPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveAsNewPresetText", required: false }] }], savePresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetText", required: false }] }], updateExistingPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateExistingPresetText", required: false }] }], resetFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterText", required: false }] }], applyFiltersText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFiltersText", required: false }] }], clearFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearFilterText", required: false }] }], infoboxLinkClick: [{ type: i0.Output, args: ["infoboxLinkClick"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], presetsLockedClicked: [{ type: i0.Output, args: ["presetsLockedClicked"] }], saveNewPresets: [{ type: i0.Output, args: ["saveNewPresets"] }], updatePresets: [{ type: i0.Output, args: ["updatePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [FilterState, provideUiComponentsSymbols(apReset, apChevronDown$1, apPlus, apRefresh, apFeatureLock)], template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    [panelClass]=\"panelClass()\"\n    [canDismiss]=\"canDismiss\"\n    (closed)=\"onPanelClosed()\">\n    <!-- `dialog`, not `menu`: checkboxes, selects, Apply and Clear are not menuitems. A dialog owes a\n         name, hence `aria-label`. No focus trap \u2014 the leaf selects render outside this DOM, and a trap\n         would put them out of reach. -->\n    <div\n        *apDropdownContent\n        class=\"ap-filter-dropdown\"\n        role=\"dialog\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"ariaLabel()\">\n\n        <div class=\"ap-filter-dropdown__content\">\n            @for (item of filterState.groups(); let last = $last; track item.key) {\n                <ap-filter-leaf\n                    [item]=\"item\"\n                    [closable]=\"closable()\"\n                    [isLastLeaf]=\"last\"\n                    (valueChange)=\"onLeafEdit($event)\"\n                    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n                    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\" />\n            }\n        </div>\n\n        @if (infobox(); as infobox) {\n            <div class=\"ap-filter-dropdown__infobox\">\n                <ap-infobox\n                    [type]=\"infobox.type ?? 'info'\"\n                    [title]=\"infobox.title\">\n                    @if (infobox.link; as link) {\n                        @if (link.href) {\n                            <a [href]=\"link.href\">{{ link.label }}</a>\n                        } @else {\n                            <a (apClick)=\"infoboxLinkClick.emit()\">{{ link.label }}</a>\n                        }\n                    }\n                    {{ infobox.text }}\n                </ap-infobox>\n            </div>\n        }\n\n        <div class=\"ap-filter-dropdown__footer\">\n            @if (savePresetsMode()) {\n                <div class=\"ap-filter-dropdown__footer--presets\">\n                    @if (!editingPresetsMode() || presetsFeatureLocked()) {\n                        <ap-button\n                            name=\"filter-dropdown-save-preset\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled() && !presetsFeatureLocked()\"\n                            [locked]=\"presetsFeatureLocked()\"\n                            (click)=\"onSavePresets()\">\n                            {{ saveNewPresetsText() }}\n                        </ap-button>\n                    } @else {\n                        <ap-button\n                            name=\"filter-dropdown-edit-presets\"\n                            symbolId=\"chevron-down\"\n                            symbolPosition=\"right\"\n                            [apDropdownTrigger]=\"updatePresetsDropdown\"\n                            [config]=\"{ color: 'blue', style: 'stroked-transparent' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                        >\n                            {{ savePresetText() }}\n                        </ap-button>\n                    }\n\n                    <ap-button\n                        name=\"filter-dropdown-reset-filters\"\n                        [symbolId]=\"'reset'\"\n                        [symbolPosition]=\"'left'\"\n                        [config]=\"{ color: 'blue', style: 'ghost' }\"\n                        [disabled]=\"filterState.buttonsDisabled()\"\n                        (click)=\"onResetFilters()\">\n                        {{ resetFilterText() }}\n                    </ap-button>\n                </div>\n            } @else {\n                <div class=\"ap-filter-dropdown__footer--apply\">\n                    @if (needClearButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-clear-filters\"\n                            [config]=\"{ color: 'blue', style: 'ghost' }\"\n                            [disabled]=\"filterState.clearDisabled()\"\n                            (click)=\"onClearFilters()\">\n                            {{ clearFilterText() }}\n                        </ap-button>\n                    }\n\n                    @if (needApplyButton()) {\n                        <ap-button\n                            name=\"filter-dropdown-apply-filters\"\n                            [config]=\"{ color: 'blue', style: 'primary' }\"\n                            [disabled]=\"filterState.buttonsDisabled()\"\n                            (click)=\"onApplyFilters()\">\n                            {{ applyFiltersText() }}\n                        </ap-button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n\n</ap-dropdown-panel>\n\n<ap-action-dropdown\n    #updatePresetsDropdown\n    [items]=\"savePresetsDropdownItems()\"\n    (itemClick)=\"onActionDropdownItemClick($event)\"\n/>\n", styles: [":host{display:none}.ap-filter-dropdown{display:flex;flex-direction:column;width:420px;outline:none;max-height:min(90vh,750px,var(--ap-floating-available-height, 100vh))}.ap-filter-dropdown__footer{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__content{overflow-x:hidden;overflow-y:auto}.ap-filter-dropdown__infobox{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-filter-dropdown__footer{border-top:1px solid var(--comp-action-dropdown-divider-color)}.ap-filter-dropdown__footer--presets{display:flex;justify-content:space-between}.ap-filter-dropdown__footer--apply{display:flex;justify-content:flex-end;gap:var(--ref-spacing-sm)}\n"] }]
+        }], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], infobox: [{ type: i0.Input, args: [{ isSignal: true, alias: "infobox", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], savedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "savedValue", required: false }] }], needApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needApplyButton", required: false }] }], needClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "needClearButton", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], expandOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnOpen", required: false }] }], presetsFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsFeatureLocked", required: false }] }], savePresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetsMode", required: false }] }], editingPresetsMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingPresetsMode", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], saveNewPresetsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveNewPresetsText", required: false }] }], saveAsNewPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveAsNewPresetText", required: false }] }], savePresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetText", required: false }] }], updateExistingPresetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateExistingPresetText", required: false }] }], resetFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterText", required: false }] }], applyFiltersText: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFiltersText", required: false }] }], clearFilterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearFilterText", required: false }] }], infoboxLinkClick: [{ type: i0.Output, args: ["infoboxLinkClick"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], presetsLockedClicked: [{ type: i0.Output, args: ["presetsLockedClicked"] }], saveNewPresets: [{ type: i0.Output, args: ["saveNewPresets"] }], updatePresets: [{ type: i0.Output, args: ["updatePresets"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], clearFilters: [{ type: i0.Output, args: ["clearFilters"] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], filterDropdownGroupLockedClicked: [{ type: i0.Output, args: ["filterDropdownGroupLockedClicked"] }] } });
 class FilterDropdownButtonComponent {
     // The dropdown decides whether the badge follows the draft or the applied value, so read its counter.
@@ -804,7 +830,7 @@ class FilterDropdownButtonComponent {
     /** Event emitted when a group with locked feature is clicked */
     filterDropdownGroupLockedClicked = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterDropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterDropdownButtonComponent, isStandalone: true, selector: "ap-filter-dropdown-button", inputs: { buttonFilterText: { classPropertyName: "buttonFilterText", publicName: "buttonFilterText", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, infobox: { classPropertyName: "infobox", publicName: "infobox", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, savedValue: { classPropertyName: "savedValue", publicName: "savedValue", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, needClearButton: { classPropertyName: "needClearButton", publicName: "needClearButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, expandOnOpen: { classPropertyName: "expandOnOpen", publicName: "expandOnOpen", isSignal: true, isRequired: false, transformFunction: null }, presetsFeatureLocked: { classPropertyName: "presetsFeatureLocked", publicName: "presetsFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { infoboxLinkClick: "infoboxLinkClick", opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [withSymbols(apFilter, apFilterFill)], viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: FilterDropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconOnly()) {\n    <ap-icon-button\n        type=\"stroked\"\n        name=\"toggle-filter\"\n        [apDropdownTrigger]=\"filterDropdown\"\n        [color]=\"isFilterCountActive() ? 'blue' : 'none'\"\n        [ariaLabel]=\"buttonFilterText()\">\n        <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n    </ap-icon-button>\n} @else {\n    <ap-button\n        [apDropdownTrigger]=\"filterDropdown\"\n        [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n        ariaLabel=\"Button toggling filters\"\n        name=\"toggle-filter\"\n        symbolPosition=\"left\">\n        <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n        @if (isFilterCountActive()) {\n            <ap-counter\n                size=\"big\"\n                color=\"blue\"\n                [background]=\"true\">\n                {{ activeFilterCount() }}\n            </ap-counter>\n        }\n        {{ buttonFilterText() }}\n    </ap-button>\n}\n\n<ap-filter-dropdown\n    #filterDropdown\n    [presetsFeatureLocked]=\"presetsFeatureLocked()\"\n    [applyFiltersText]=\"applyFiltersText()\"\n    [clearFilterText]=\"clearFilterText()\"\n    [closable]=\"closable()\"\n    [placement]=\"placement()\"\n    [panelClass]=\"panelClass()\"\n    [editingPresetsMode]=\"editingPresetsMode()\"\n    [groups]=\"groups()\"\n    [value]=\"value()\"\n    [savedValue]=\"savedValue()\"\n    [expandOnOpen]=\"expandOnOpen()\"\n    [needApplyButton]=\"needApplyButton()\"\n    [needClearButton]=\"needClearButton()\"\n    [resetFilterText]=\"resetFilterText()\"\n    [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n    [saveNewPresetsText]=\"saveNewPresetsText()\"\n    [savePresetText]=\"savePresetText()\"\n    [savePresetsMode]=\"savePresetsMode()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (applyFilters)=\"applyFilters.emit($event)\"\n    (clearFilters)=\"clearFilters.emit()\"\n    (closed)=\"closed.emit()\"\n    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\"\n    (opened)=\"opened.emit()\"\n    (presetsLockedClicked)=\"presetsLockedClicked.emit()\"\n    (resetFilters)=\"resetFilters.emit()\"\n    (saveNewPresets)=\"saveNewPresets.emit($event)\"\n    (updatePresets)=\"updatePresets.emit($event)\"\n    [infobox]=\"infobox()\"\n    (infoboxLinkClick)=\"infoboxLinkClick.emit()\"\n    [updateExistingPresetText]=\"updateExistingPresetText()\" />\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FilterDropdownComponent, selector: "ap-filter-dropdown", inputs: ["infobox", "groups", "value", "savedValue", "needApplyButton", "needClearButton", "closable", "expandOnOpen", "presetsFeatureLocked", "savePresetsMode", "editingPresetsMode", "showBackdrop", "placement", "panelClass", "saveNewPresetsText", "saveAsNewPresetText", "savePresetText", "updateExistingPresetText", "resetFilterText", "applyFiltersText", "clearFilterText"], outputs: ["infoboxLinkClick", "opened", "closed", "presetsLockedClicked", "saveNewPresets", "updatePresets", "applyFilters", "clearFilters", "resetFilters", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterDropdownButtonComponent, isStandalone: true, selector: "ap-filter-dropdown-button", inputs: { buttonFilterText: { classPropertyName: "buttonFilterText", publicName: "buttonFilterText", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, infobox: { classPropertyName: "infobox", publicName: "infobox", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, savedValue: { classPropertyName: "savedValue", publicName: "savedValue", isSignal: true, isRequired: false, transformFunction: null }, needApplyButton: { classPropertyName: "needApplyButton", publicName: "needApplyButton", isSignal: true, isRequired: false, transformFunction: null }, needClearButton: { classPropertyName: "needClearButton", publicName: "needClearButton", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, expandOnOpen: { classPropertyName: "expandOnOpen", publicName: "expandOnOpen", isSignal: true, isRequired: false, transformFunction: null }, presetsFeatureLocked: { classPropertyName: "presetsFeatureLocked", publicName: "presetsFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, savePresetsMode: { classPropertyName: "savePresetsMode", publicName: "savePresetsMode", isSignal: true, isRequired: false, transformFunction: null }, editingPresetsMode: { classPropertyName: "editingPresetsMode", publicName: "editingPresetsMode", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, saveNewPresetsText: { classPropertyName: "saveNewPresetsText", publicName: "saveNewPresetsText", isSignal: true, isRequired: false, transformFunction: null }, saveAsNewPresetText: { classPropertyName: "saveAsNewPresetText", publicName: "saveAsNewPresetText", isSignal: true, isRequired: false, transformFunction: null }, savePresetText: { classPropertyName: "savePresetText", publicName: "savePresetText", isSignal: true, isRequired: false, transformFunction: null }, updateExistingPresetText: { classPropertyName: "updateExistingPresetText", publicName: "updateExistingPresetText", isSignal: true, isRequired: false, transformFunction: null }, resetFilterText: { classPropertyName: "resetFilterText", publicName: "resetFilterText", isSignal: true, isRequired: false, transformFunction: null }, applyFiltersText: { classPropertyName: "applyFiltersText", publicName: "applyFiltersText", isSignal: true, isRequired: false, transformFunction: null }, clearFilterText: { classPropertyName: "clearFilterText", publicName: "clearFilterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { infoboxLinkClick: "infoboxLinkClick", opened: "opened", closed: "closed", presetsLockedClicked: "presetsLockedClicked", saveNewPresets: "saveNewPresets", updatePresets: "updatePresets", applyFilters: "applyFilters", clearFilters: "clearFilters", resetFilters: "resetFilters", lockedFeatureClicked: "lockedFeatureClicked", filterDropdownGroupLockedClicked: "filterDropdownGroupLockedClicked" }, providers: [withSymbols(apFilter, apFilterFill)], viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: FilterDropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconOnly()) {\n    <ap-icon-button\n        type=\"stroked\"\n        name=\"toggle-filter\"\n        [apDropdownTrigger]=\"filterDropdown\"\n        [color]=\"isFilterCountActive() ? 'blue' : 'none'\"\n        [ariaLabel]=\"buttonFilterText()\">\n        <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n    </ap-icon-button>\n} @else {\n    <ap-button\n        [apDropdownTrigger]=\"filterDropdown\"\n        [config]=\"{ style: 'stroked', color: isFilterCountActive() ? 'blue' : 'grey' }\"\n        ariaLabel=\"Button toggling filters\"\n        name=\"toggle-filter\"\n        symbolPosition=\"left\">\n        <ap-symbol [symbolId]=\"isFilterCountActive() ? 'filter_fill' : 'filter'\" />\n        @if (isFilterCountActive()) {\n            <ap-counter\n                size=\"big\"\n                color=\"blue\"\n                [background]=\"true\">\n                {{ activeFilterCount() }}\n            </ap-counter>\n        }\n        {{ buttonFilterText() }}\n    </ap-button>\n}\n\n<ap-filter-dropdown\n    #filterDropdown\n    [presetsFeatureLocked]=\"presetsFeatureLocked()\"\n    [applyFiltersText]=\"applyFiltersText()\"\n    [clearFilterText]=\"clearFilterText()\"\n    [closable]=\"closable()\"\n    [placement]=\"placement()\"\n    [panelClass]=\"panelClass()\"\n    [editingPresetsMode]=\"editingPresetsMode()\"\n    [groups]=\"groups()\"\n    [value]=\"value()\"\n    [savedValue]=\"savedValue()\"\n    [expandOnOpen]=\"expandOnOpen()\"\n    [needApplyButton]=\"needApplyButton()\"\n    [needClearButton]=\"needClearButton()\"\n    [resetFilterText]=\"resetFilterText()\"\n    [saveAsNewPresetText]=\"saveAsNewPresetText()\"\n    [saveNewPresetsText]=\"saveNewPresetsText()\"\n    [savePresetText]=\"savePresetText()\"\n    [savePresetsMode]=\"savePresetsMode()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (applyFilters)=\"applyFilters.emit($event)\"\n    (clearFilters)=\"clearFilters.emit()\"\n    (closed)=\"closed.emit()\"\n    (filterDropdownGroupLockedClicked)=\"filterDropdownGroupLockedClicked.emit($event)\"\n    (lockedFeatureClicked)=\"lockedFeatureClicked.emit($event)\"\n    (opened)=\"opened.emit()\"\n    (presetsLockedClicked)=\"presetsLockedClicked.emit()\"\n    (resetFilters)=\"resetFilters.emit()\"\n    (saveNewPresets)=\"saveNewPresets.emit($event)\"\n    (updatePresets)=\"updatePresets.emit($event)\"\n    [infobox]=\"infobox()\"\n    (infoboxLinkClick)=\"infoboxLinkClick.emit()\"\n    [updateExistingPresetText]=\"updateExistingPresetText()\" />\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "symbolId"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FilterDropdownComponent, selector: "ap-filter-dropdown", inputs: ["infobox", "groups", "value", "savedValue", "needApplyButton", "needClearButton", "closable", "expandOnOpen", "presetsFeatureLocked", "savePresetsMode", "editingPresetsMode", "showBackdrop", "placement", "panelClass", "ariaLabel", "saveNewPresetsText", "saveAsNewPresetText", "savePresetText", "updateExistingPresetText", "resetFilterText", "applyFiltersText", "clearFilterText"], outputs: ["infoboxLinkClick", "opened", "closed", "presetsLockedClicked", "saveNewPresets", "updatePresets", "applyFilters", "clearFilters", "resetFilters", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterDropdownButtonComponent, decorators: [{
             type: Component,