@agorapulse/ui-components 22.1.7 → 22.2.0

package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, HostListener, Directive, viewChild, contentChild, output, model, computed, effect, untracked, linkedSignal, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, HostListener, Directive, viewChild, viewChildren, signal, Injector, computed, contentChild, output, model, effect, untracked, linkedSignal, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
+import { ActiveDescendantKeyManager, FocusKeyManager } from '@angular/cdk/a11y';
+import { DropdownOptionDirective } from '@agorapulse/ui-components/dropdown-base';
 import { DropdownPanelComponent, DropdownContentDirective } from '@agorapulse/ui-components/dropdown-panel';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
 import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
@@ -65,11 +67,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
+/** The only keys a search field hands to the list: Home and End belong to the caret, not the options. */
+const NAVIGATION_FROM_SEARCH = new Set(['ArrowUp', 'ArrowDown']);
 /** A dropdown of options on any trigger. `multiple` = checkbox rows with search; `single` = rows, closes on pick. */
 class SelectionDropdownComponent {
+    static nextId = 0;
     symbolRegistry = inject(SymbolRegistry);
     panel = viewChild(DropdownPanelComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    options = viewChildren(DropdownOptionDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Mirrors the key manager's active index, so the roving tabindex can be bound. */
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    /** Names the dialog. Falls back to the visible title, then to a generic label rather than none. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Names the listbox holding what is already selected. */
+    selectedSectionText = input('Selected', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSectionText" }] : /* istanbul ignore next */ []));
+    /** Names a listbox of ungrouped options when the dropdown has no title. */
+    optionsSectionText = input('Options', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionsSectionText" }] : /* istanbul ignore next */ []));
+    panelLabel = computed(() => this.ariaLabel() ?? this.title() ?? 'Selection', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelLabel" }] : /* istanbul ignore next */ []));
+    listboxId = `ap-selection-dropdown-list-${SelectionDropdownComponent.nextId++}`;
+    keyManager = null;
+    primed = false;
     trigger = contentChild('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
     /** ID for the header button */
@@ -108,6 +133,9 @@ class SelectionDropdownComponent {
     /** Text to display when no search results are found */
     noSearchResultsText = input('No results found', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "noSearchResultsText" }] : /* istanbul ignore next */ []));
+    /** Announced once a search settles. `{count}` is replaced by how many options matched. */
+    searchResultsText = input('{count} results', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchResultsText" }] : /* istanbul ignore next */ []));
     /** Whether to show a backdrop that closes the dropdown when clicked */
     showBackdrop = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
@@ -152,6 +180,18 @@ class SelectionDropdownComponent {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focusInput" }] : /* istanbul ignore next */ []));
+    /** Single-select opens on its first option; multi does not, since marking one the user never chose announces a selection. */
+    primeOptions = effect(() => {
+        const open = this.isOpen();
+        const options = this.options();
+        untracked(() => {
+            if (open && options.length > 0 && !this.primed && this.isSingleSelect()) {
+                this.primed = true;
+                this.activeManager().setFirstItemActive();
+            }
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primeOptions" }] : /* istanbul ignore next */ []));
     isSingleSelect = computed(() => this.selectionMode() === 'single', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isSingleSelect" }] : /* istanbul ignore next */ []));
     /** Always true in `multiple` mode, leaving that layout untouched; only `single` collapses the header. */
@@ -165,6 +205,9 @@ class SelectionDropdownComponent {
     ...(ngDevMode ? [{ debugName: "internalItems" }] : /* istanbul ignore next */ []));
     filteredItems = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    /** What the live region holds. Empty outside a search: the list is on screen, unchanged. */
+    resultsAnnouncement = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultsAnnouncement" }] : /* istanbul ignore next */ []));
     initiallySelectedItems = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "initiallySelectedItems" }] : /* istanbul ignore next */ []));
     // Computed properties for template usage
@@ -207,6 +250,28 @@ class SelectionDropdownComponent {
         return entries;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayEntries" }] : /* istanbul ignore next */ []));
+    /**
+     * A listbox owns only options, so a group's checkbox cannot sit inside one: each group gets its own
+     * listbox, and the ungrouped items between two groups are collected into one rather than one each.
+     */
+    displayRuns = computed(() => {
+        const runs = [];
+        for (const entry of this.displayEntries()) {
+            if (entry.kind === 'group') {
+                runs.push(entry);
+                continue;
+            }
+            const last = runs[runs.length - 1];
+            if (last?.kind === 'items') {
+                last.items.push(entry.item);
+            }
+            else {
+                runs.push({ kind: 'items', items: [entry.item] });
+            }
+        }
+        return runs;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayRuns" }] : /* istanbul ignore next */ []));
     // Computed maps for template usage
     groupSelectionStates = computed(() => {
         const states = {};
@@ -243,6 +308,7 @@ class SelectionDropdownComponent {
         this.searchTermSubject.pipe(debounceTime(100), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(term => {
             const items = this.internalItems();
             this.updateFilteredItems(term?.toLowerCase() ?? '', items);
+            this.announceResults(term);
         });
         // Feed the debounced filter pipeline from the search term signal, so the list re-filters
         // both on user typing and on an external set (a consumer resetting searchTerm to '').
@@ -274,6 +340,8 @@ class SelectionDropdownComponent {
         this.panel()?.close();
     }
     onPanelClosed() {
+        this.primed = false;
+        this.activeIndex.set(-1);
         this.initiallySelectedItems.set([]);
         this.closed.emit();
     }
@@ -322,24 +390,87 @@ class SelectionDropdownComponent {
     onFooterButtonClick() {
         this.footerButtonClick.emit();
     }
-    /** Handles footer button keyboard events */
-    onFooterButtonKeydown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.footerButtonClick.emit();
+    /**
+     * A search field keeps focus, so the list is marked rather than focused and the field says which
+     * option through `aria-activedescendant`. Without a field, focus is the only affordance there is,
+     * and the type-ahead is free — it is only a rival to a field that does the same job.
+     */
+    activeManager() {
+        if (!this.keyManager) {
+            this.keyManager = this.searchVisible()
+                ? new ActiveDescendantKeyManager(this.options, this.injector).withWrap()
+                : new FocusKeyManager(this.options, this.injector).withWrap().withHomeAndEnd().withTypeAhead();
+            this.keyManager.change.subscribe(index => this.activeIndex.set(index));
+            // No close on `tabOut`: the rest of the dialog must stay reachable. The manager does not
+            // preventDefault on Tab, so leaving it alone is enough.
+        }
+        return this.keyManager;
+    }
+    /** `@for` gives a per-loop index, and the options span several listboxes, so identity decides. */
+    runKey(run) {
+        return run.kind === 'items' ? `items:${run.items[0]?.htmlId ?? ''}` : `group:${run.label}`;
+    }
+    /** With a search field the list is no tab stop at all: the field owns it and reaches it by arrow. */
+    optionTabIndex(carriesIt) {
+        return carriesIt && !this.searchVisible() ? 0 : -1;
+    }
+    /**
+     * Roving tabindex across every listbox at once: the options are a single tab stop. Before any
+     * arrow key the first option carries it, or nothing in the list could be tabbed to.
+     */
+    tabbableOption(item) {
+        const options = this.options();
+        const active = this.activeIndex();
+        const carrier = active >= 0 ? options[active] : options[0];
+        return carrier?.id === this.optionId(item);
+    }
+    /** The option the search field names as active, or nothing until an arrow key marks one. */
+    activeDescendantId = computed(() => {
+        const active = this.activeIndex();
+        return active >= 0 ? (this.options()[active]?.id ?? null) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    /** An option needs an id of its own: the consumer's htmlId is not unique across a page. */
+    optionId(item) {
+        return `${this.listboxId}-${item.htmlId}`;
+    }
+    /**
+     * The manager owns the arrows and Home/End. An option is a button, so it activates itself.
+     *
+     * Keys from the search field arrive here by bubbling, so only navigation crosses over: anything
+     * else is the text being typed, and the manager would answer it instead of the field.
+     */
+    onOptionsKeyDown(event) {
+        if (this.searchVisible()) {
+            // Only the field drives the list, because only the field says which option is active.
+            // Driven from the clear button or a group checkbox, the arrows would move a marker no
+            // key could then commit, and no screen reader would hear.
+            if (!this.fromSearchField(event)) {
+                return;
+            }
+            if (event.key === 'Enter') {
+                // The marked option has no focus of its own to answer with.
+                this.activeManager().activeItem?.activate();
+                event.preventDefault();
+                return;
+            }
+            if (!NAVIGATION_FROM_SEARCH.has(event.key)) {
+                return;
+            }
         }
+        this.activeManager().onKeydown(event);
+    }
+    /** Leaving the field ends its hold on the list: a marker nothing can commit only misleads. */
+    onSearchBlur() {
+        this.activeManager().setActiveItem(-1);
+    }
+    fromSearchField(event) {
+        return event.target === this.inputSearchComponent()?.inputElement().nativeElement;
     }
     /** Handles header button clicks */
     onHeaderButtonClick() {
         this.headerButtonClick.emit();
     }
-    /** Handles header button keyboard events */
-    onHeaderButtonKeydown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.headerButtonClick.emit();
-        }
-    }
     /** Handles search input changes from the rendered field. Filtering is driven by the
      *  `searchTerm` effect, so this only updates the term and notifies listeners. */
     onSearchTermChange(term) {
@@ -364,6 +495,18 @@ class SelectionDropdownComponent {
     entryKey(entry) {
         return entry.kind === 'item' ? `item:${entry.item.htmlId}` : `group:${entry.label}`;
     }
+    /**
+     * A filtered list changes under a screen reader with nothing said, and the field keeps the focus,
+     * so there is no new focus to read either. Announced after the debounce, once the count is final.
+     */
+    announceResults(term) {
+        if (!term) {
+            this.resultsAnnouncement.set('');
+            return;
+        }
+        const count = this.filteredItems().length;
+        this.resultsAnnouncement.set(count === 0 ? this.noSearchResultsText() : this.searchResultsText().replace('{count}', String(count)));
+    }
     /** Updates the filtered items based on search term */
     updateFilteredItems(searchTerm, items) {
         if (!searchTerm) {
@@ -374,13 +517,14 @@ class SelectionDropdownComponent {
         this.filteredItems.set(filtered);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectionDropdownComponent, isStandalone: true, selector: "ap-selection-dropdown", inputs: { headerButtonId: { classPropertyName: "headerButtonId", publicName: "headerButtonId", isSignal: true, isRequired: false, transformFunction: null }, footerButtonId: { classPropertyName: "footerButtonId", publicName: "footerButtonId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, searchEnabled: { classPropertyName: "searchEnabled", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, footerButtonText: { classPropertyName: "footerButtonText", publicName: "footerButtonText", isSignal: true, isRequired: false, transformFunction: null }, footerButtonSymbolId: { classPropertyName: "footerButtonSymbolId", publicName: "footerButtonSymbolId", isSignal: true, isRequired: false, transformFunction: null }, headerButtonText: { classPropertyName: "headerButtonText", publicName: "headerButtonText", isSignal: true, isRequired: false, transformFunction: null }, headerButtonSymbolId: { classPropertyName: "headerButtonSymbolId", publicName: "headerButtonSymbolId", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderText: { classPropertyName: "searchPlaceholderText", publicName: "searchPlaceholderText", isSignal: true, isRequired: false, transformFunction: null }, noSearchResultsText: { classPropertyName: "noSearchResultsText", publicName: "noSearchResultsText", 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 }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", selectionChange: "selectionChange", footerButtonClick: "footerButtonClick", headerButtonClick: "headerButtonClick", searchInputChange: "searchInputChange", searchTerm: "searchTermChange" }, queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "inputSearchComponent", first: true, predicate: ["inputSearchElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <div\n        *apDropdownContent\n        class=\"ap-selection-dropdown__content\"\n        [class.ap-selection-dropdown__content--single]=\"isSingleSelect()\">\n        <!-- Header -->\n        @if (headerVisible()) {\n            <div class=\"ap-selection-dropdown__header\">\n                @if (headerTopVisible()) {\n                    <div class=\"ap-selection-dropdown__header-top\">\n                        @if (title()) {\n                            <h3 class=\"ap-selection-dropdown__title\">\n                                {{ title() }}\n                            </h3>\n                        }\n                        @if (headerButtonText()) {\n                            <a\n                                class=\"standalone\"\n                                role=\"link\"\n                                tabindex=\"0\"\n                                [id]=\"headerButtonId()\"\n                                (click)=\"onHeaderButtonClick()\"\n                                (keydown)=\"onHeaderButtonKeydown($event)\">\n                                <ap-symbol [symbolId]=\"headerButtonSymbolId()\" />\n                                {{ headerButtonText() }}\n                            </a>\n                        }\n                    </div>\n                }\n                @if (searchVisible()) {\n                    <ap-input-search\n                        #inputSearchElement\n                        [placeholder]=\"searchPlaceholderText()\"\n                        [clearable]=\"true\"\n                        [ngModel]=\"searchTerm()\"\n                        (ngModelChange)=\"onSearchTermChange($event)\" />\n                }\n            </div>\n        }\n\n        <!-- Selection dropdown items -->\n        <div\n            class=\"ap-selection-dropdown__items\"\n            [attr.role]=\"isSingleSelect() ? 'listbox' : null\"\n            [attr.aria-label]=\"isSingleSelect() ? title() : null\">\n            @if (filteredItems().length === 0 && searchTerm()) {\n                <div class=\"ap-selection-dropdown__no-results\">\n                    {{ noSearchResultsText() }}\n                </div>\n            } @else if (isSingleSelect()) {\n                @for (item of filteredItems(); track item.htmlId) {\n                    <button\n                        type=\"button\"\n                        role=\"option\"\n                        class=\"ap-selection-dropdown__option\"\n                        [attr.aria-selected]=\"item.selected\"\n                        [attr.aria-disabled]=\"item.disabled || item.isFeatureLocked\"\n                        [attr.data-track]=\"item.dataTrack\"\n                        [apTooltip]=\"item.disabled ? (item.disabledTooltip ?? null) : null\"\n                        apTooltipPosition=\"right\"\n                        (click)=\"onItemToggle(item)\">\n                        <ap-dropdown-item-single-one-line\n                            [text]=\"item.text\"\n                            [selected]=\"item.selected\"\n                            [disabled]=\"item.disabled || false\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [symbolId]=\"item.symbolId\"\n                            [badgeText]=\"item.badgeText\"\n                            [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                            [roundedAvatar]=\"!!item.roundedAvatar\"\n                            [network]=\"item.network\"\n                            [standaloneModeEnabled]=\"true\" />\n                    </button>\n                }\n            } @else {\n                <!-- Selected items section (at the top) -->\n                @if (selectedItems().length > 0) {\n                    <div class=\"ap-selection-dropdown__selected-section\">\n                        @for (item of selectedItems(); track item.htmlId) {\n                            <div [apTooltip]=\"item.disabledTooltip\">\n                                <button\n                                    type=\"button\"\n                                    tabindex=\"-1\"\n                                    aria-hidden=\"true\"\n                                    class=\"ap-selection-dropdown__item-button\"\n                                    [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                    (click)=\"onItemToggle(item)\">\n                                    <ap-dropdown-item-multiple-one-line\n                                        class=\"ap-selection-dropdown__item\"\n                                        [text]=\"item.text\"\n                                        [selected]=\"item.selected\"\n                                        [indeterminate]=\"item.indeterminate ?? false\"\n                                        [htmlId]=\"item.htmlId\"\n                                        [disabled]=\"item.disabled || false\"\n                                        [avatarUrl]=\"item.avatarUrl\"\n                                        [symbolId]=\"item.symbolId\"\n                                        [badgeText]=\"item.badgeText\"\n                                        [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                        [roundedAvatar]=\"!!item.roundedAvatar\"\n                                        [network]=\"item.network\"\n                                        [symbolColor]=\"item.symbolColor\"\n                                        [symbolTooltipText]=\"item.symbolTooltipText\" />\n                                </button>\n                            </div>\n                        }\n                    </div>\n                }\n\n                <!-- Unselected zone: items & groups in first-encounter order -->\n                @for (entry of displayEntries(); track entryKey(entry)) {\n                    @if (entry.kind === 'item') {\n                        <div [apTooltip]=\"entry.item.disabledTooltip\">\n                            <button\n                                type=\"button\"\n                                tabindex=\"-1\"\n                                aria-hidden=\"true\"\n                                class=\"ap-selection-dropdown__item-button\"\n                                [class.ap-selection-dropdown__item-button--disabled]=\"entry.item.disabled || entry.item.isFeatureLocked\"\n                                (click)=\"onItemToggle(entry.item)\">\n                                <ap-dropdown-item-multiple-one-line\n                                    class=\"ap-selection-dropdown__item\"\n                                    [text]=\"entry.item.text\"\n                                    [selected]=\"entry.item.selected\"\n                                    [indeterminate]=\"entry.item.indeterminate ?? false\"\n                                    [htmlId]=\"entry.item.htmlId\"\n                                    [disabled]=\"entry.item.disabled || false\"\n                                    [avatarUrl]=\"entry.item.avatarUrl\"\n                                    [symbolId]=\"entry.item.symbolId\"\n                                    [badgeText]=\"entry.item.badgeText\"\n                                    [isFeatureLocked]=\"entry.item.isFeatureLocked || false\"\n                                    [roundedAvatar]=\"!!entry.item.roundedAvatar\"\n                                    [network]=\"entry.item.network\"\n                                    [symbolColor]=\"entry.item.symbolColor\"\n                                    [symbolTooltipText]=\"entry.item.symbolTooltipText\" />\n                            </button>\n                        </div>\n                    } @else {\n                        <div class=\"ap-selection-dropdown__group\">\n                            <!-- Group header with checkbox -->\n                            <div class=\"ap-selection-dropdown__group-header\">\n                                <div class=\"ap-selection-dropdown__group-label\">\n                                    <ap-checkbox\n                                        class=\"centered\"\n                                        [name]=\"entry.label\"\n                                        [checked]=\"groupSelectionStates()[entry.label] === 'selected'\"\n                                        [indeterminate]=\"groupSelectionStates()[entry.label] === 'partial'\"\n                                        (change)=\"onGroupToggle(entry.label, $event)\">\n                                        {{ entry.label }}\n                                    </ap-checkbox>\n                                </div>\n                            </div>\n\n                            <!-- Group items -->\n                            @for (item of entry.items; track item.htmlId) {\n                                <div [apTooltip]=\"item.disabledTooltip\">\n                                    <button\n                                        type=\"button\"\n                                        tabindex=\"-1\"\n                                        aria-hidden=\"true\"\n                                        class=\"ap-selection-dropdown__item-button\"\n                                        [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                        (click)=\"onItemToggle(item)\">\n                                        <ap-dropdown-item-multiple-one-line\n                                            class=\"ap-selection-dropdown__item ap-selection-dropdown__item--grouped\"\n                                            [text]=\"item.text\"\n                                            [selected]=\"item.selected\"\n                                            [indeterminate]=\"item.indeterminate ?? false\"\n                                            [htmlId]=\"item.htmlId\"\n                                            [disabled]=\"item.disabled || false\"\n                                            [avatarUrl]=\"item.avatarUrl\"\n                                            [symbolId]=\"item.symbolId\"\n                                            [badgeText]=\"item.badgeText\"\n                                            [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                            [roundedAvatar]=\"!!item.roundedAvatar\"\n                                            [network]=\"item.network\"\n                                            [symbolColor]=\"item.symbolColor\"\n                                            [symbolTooltipText]=\"item.symbolTooltipText\" />\n                                    </button>\n                                </div>\n                            }\n                        </div>\n                    }\n                }\n            }\n        </div>\n\n        <!-- Footer -->\n        @if (footerButtonText()) {\n            <div class=\"ap-selection-dropdown__footer\">\n                <a\n                    class=\"standalone\"\n                    role=\"link\"\n                    tabindex=\"0\"\n                    [id]=\"footerButtonId()\"\n                    (click)=\"onFooterButtonClick()\"\n                    (keydown)=\"onFooterButtonKeydown($event)\">\n                    <ap-symbol [symbolId]=\"footerButtonSymbolId()\" />\n                    {{ footerButtonText() }}\n                </a>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-selection-dropdown__content{border-radius:inherit;overflow:hidden;z-index:1000;width:370px;display:flex;flex-direction:column;max-height:min(400px,var(--ap-floating-available-height, 100vh))}.ap-selection-dropdown__content--single{width:auto;min-width:160px}.ap-selection-dropdown__option{display:block;width:100%;padding:0;border:none;background:none;font:inherit;text-align:inherit}.ap-selection-dropdown__item-button{display:block;width:100%;padding:0;margin:0;border:none;background:transparent;text-align:left;cursor:pointer;outline:none}.ap-selection-dropdown__item-button:hover{background-color:var(--ref-color-electric-blue-10)}.ap-selection-dropdown__item-button:active{background-color:var(--ref-color-electric-blue-20)}.ap-selection-dropdown__item-button:focus{outline:none}.ap-selection-dropdown__item-button:focus-visible{outline:none}.ap-selection-dropdown__item-button.ap-selection-dropdown__item-button--disabled{pointer-events:none}.ap-selection-dropdown__item{display:flex;align-items:center;width:100%;min-height:40px;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);background:transparent;cursor:pointer;font-family:Averta}.ap-selection-dropdown__group-header{display:flex;align-items:center;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border-top:1px solid var(--ref-color-grey-10);background:var(--ref-color-grey-bg)}.ap-selection-dropdown__group-label{display:flex;align-items:center;flex:1;font-weight:700;color:var(--ref-color-grey-100)}.ap-selection-dropdown__group-label ap-checkbox{--comp-forms-label-font-weight: 700}.ap-selection-dropdown__header{border-bottom:1px solid var(--ref-color-grey-10);flex-shrink:0;display:flex;flex-direction:column}.ap-selection-dropdown__header .ap-selection-dropdown__header-top{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-xs) var(--ref-spacing-sm)}.ap-selection-dropdown__header .ap-selection-dropdown__title{margin:0;font-size:var(--ref-font-size-md);font-weight:var(--ref-font-weight-bold);color:var(--ref-color-grey-100);flex:1}.ap-selection-dropdown__header ap-input-search{width:100%;padding:0 var(--ref-spacing-xxs) var(--ref-spacing-xxs)}.ap-selection-dropdown__items{padding:var(--ref-spacing-xxs) 0;flex:1;overflow-y:auto;min-height:0}.ap-selection-dropdown__no-results{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);color:var(--ref-color-grey-80);font-size:var(--ref-font-size-sm);font-style:italic}.ap-selection-dropdown__footer{height:40px;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);border-top:1px solid var(--ref-color-grey-10);flex-shrink:0;display:flex;align-items:center;justify-content:flex-start}.ap-selection-dropdown__selected-section{margin-bottom:var(--ref-spacing-xxs);border-bottom:1px solid var(--ref-color-grey-10);padding-bottom:var(--ref-spacing-xxs)}.ap-selection-dropdown__selected-section ::ng-deep ap-checkbox{--comp-forms-label-font-weight: 700}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "fullyControlled", "required", "name"], outputs: ["change"] }, { kind: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { 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: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { 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: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectionDropdownComponent, isStandalone: true, selector: "ap-selection-dropdown", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedSectionText: { classPropertyName: "selectedSectionText", publicName: "selectedSectionText", isSignal: true, isRequired: false, transformFunction: null }, optionsSectionText: { classPropertyName: "optionsSectionText", publicName: "optionsSectionText", isSignal: true, isRequired: false, transformFunction: null }, headerButtonId: { classPropertyName: "headerButtonId", publicName: "headerButtonId", isSignal: true, isRequired: false, transformFunction: null }, footerButtonId: { classPropertyName: "footerButtonId", publicName: "footerButtonId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, searchEnabled: { classPropertyName: "searchEnabled", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, footerButtonText: { classPropertyName: "footerButtonText", publicName: "footerButtonText", isSignal: true, isRequired: false, transformFunction: null }, footerButtonSymbolId: { classPropertyName: "footerButtonSymbolId", publicName: "footerButtonSymbolId", isSignal: true, isRequired: false, transformFunction: null }, headerButtonText: { classPropertyName: "headerButtonText", publicName: "headerButtonText", isSignal: true, isRequired: false, transformFunction: null }, headerButtonSymbolId: { classPropertyName: "headerButtonSymbolId", publicName: "headerButtonSymbolId", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderText: { classPropertyName: "searchPlaceholderText", publicName: "searchPlaceholderText", isSignal: true, isRequired: false, transformFunction: null }, noSearchResultsText: { classPropertyName: "noSearchResultsText", publicName: "noSearchResultsText", isSignal: true, isRequired: false, transformFunction: null }, searchResultsText: { classPropertyName: "searchResultsText", publicName: "searchResultsText", 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 }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", selectionChange: "selectionChange", footerButtonClick: "footerButtonClick", headerButtonClick: "headerButtonClick", searchInputChange: "searchInputChange", searchTerm: "searchTermChange" }, queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "options", predicate: DropdownOptionDirective, descendants: true, isSignal: true }, { propertyName: "inputSearchComponent", first: true, predicate: ["inputSearchElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <!-- `dialog`, not a combobox: a combobox must close when focus leaves it, and this panel holds a\n         search field, a header, a footer and group checkboxes beside its lists \u2014 closing on Tab left\n         every one of them unreachable. -->\n    <div\n        *apDropdownContent\n        class=\"ap-selection-dropdown__content\"\n        role=\"dialog\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"panelLabel()\"\n        (keydown)=\"onOptionsKeyDown($event)\"\n        [class.ap-selection-dropdown__content--single]=\"isSingleSelect()\">\n        <!-- Header -->\n        @if (headerVisible()) {\n            <div class=\"ap-selection-dropdown__header\">\n                @if (headerTopVisible()) {\n                    <div class=\"ap-selection-dropdown__header-top\">\n                        @if (title()) {\n                            <h3 class=\"ap-selection-dropdown__title\">\n                                {{ title() }}\n                            </h3>\n                        }\n                        @if (headerButtonText()) {\n                            <button\n                                type=\"button\"\n                                class=\"ap-link standalone\"\n                                [id]=\"headerButtonId()\"\n                                (click)=\"onHeaderButtonClick()\">\n                                <ap-symbol [symbolId]=\"headerButtonSymbolId()\" />\n                                {{ headerButtonText() }}\n                            </button>\n                        }\n                    </div>\n                }\n                @if (searchVisible()) {\n                    <ap-input-search\n                        #inputSearchElement\n                        [placeholder]=\"searchPlaceholderText()\"\n                        [clearable]=\"true\"\n                        [ariaControls]=\"listboxId\"\n                        [ariaActiveDescendant]=\"activeDescendantId()\"\n                        [ngModel]=\"searchTerm()\"\n                        (blur)=\"onSearchBlur()\"\n                        (ngModelChange)=\"onSearchTermChange($event)\" />\n                }\n            </div>\n        }\n\n        <!-- Selection dropdown items -->\n        <div\n            class=\"ap-selection-dropdown__items\"\n            [id]=\"listboxId\"\n            [attr.role]=\"isSingleSelect() ? 'listbox' : null\"\n            [attr.aria-label]=\"isSingleSelect() ? (title() ?? null) : null\">\n            @if (filteredItems().length === 0 && searchTerm()) {\n                <div class=\"ap-selection-dropdown__no-results\">\n                    {{ noSearchResultsText() }}\n                </div>\n            } @else if (isSingleSelect()) {\n                @for (item of filteredItems(); track item.htmlId) {\n                    <button\n                        type=\"button\"\n                        role=\"option\"\n                        class=\"ap-selection-dropdown__option\"\n                        [id]=\"optionId(item)\"\n                        [apDropdownOption]=\"item.text\"\n                        [apDropdownOptionDisabled]=\"!!(item.disabled || item.isFeatureLocked)\"\n                        [tabindex]=\"optionTabIndex(activeIndex() === $index)\"\n                        [attr.aria-selected]=\"item.selected\"\n                        [attr.aria-disabled]=\"item.disabled || item.isFeatureLocked\"\n                        [attr.data-track]=\"item.dataTrack\"\n                        [apTooltip]=\"item.disabled ? (item.disabledTooltip ?? null) : null\"\n                        apTooltipPosition=\"right\"\n                        (click)=\"onItemToggle(item)\">\n                        <ap-dropdown-item-single-one-line\n                            [text]=\"item.text\"\n                            [selected]=\"item.selected\"\n                            [disabled]=\"item.disabled || false\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [symbolId]=\"item.symbolId\"\n                            [badgeText]=\"item.badgeText\"\n                            [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                            [roundedAvatar]=\"!!item.roundedAvatar\"\n                            [network]=\"item.network\"\n                            [standaloneModeEnabled]=\"true\" />\n                    </button>\n                }\n            } @else {\n                <!-- A listbox owns only options, so each section is its own, and a group's checkbox sits beside it. -->\n                @if (selectedItems().length > 0) {\n                    <div\n                        role=\"listbox\"\n                        aria-multiselectable=\"true\"\n                        class=\"ap-selection-dropdown__selected-section\"\n                        [attr.aria-label]=\"selectedSectionText()\">\n                        @for (item of selectedItems(); track item.htmlId) {\n                            @let grouped = false;\n                            <button\n                                type=\"button\"\n                                role=\"option\"\n                                class=\"ap-selection-dropdown__item-button\"\n                                [id]=\"optionId(item)\"\n                                [tabindex]=\"optionTabIndex(tabbableOption(item))\"\n                                [apDropdownOption]=\"item.text\"\n                                [apDropdownOptionDisabled]=\"!!(item.disabled || item.isFeatureLocked)\"\n                                [attr.aria-selected]=\"item.selected\"\n                                [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                [apTooltip]=\"item.disabledTooltip\"\n                                (click)=\"onItemToggle(item)\">\n                                <ap-dropdown-item-multiple-one-line\n                                    presentational\n                                    class=\"ap-selection-dropdown__item\"\n                                    [class.ap-selection-dropdown__item--grouped]=\"grouped\"\n                                    [text]=\"item.text\"\n                                    [selected]=\"item.selected\"\n                                    [indeterminate]=\"item.indeterminate ?? false\"\n                                    [htmlId]=\"item.htmlId\"\n                                    [disabled]=\"item.disabled || false\"\n                                    [avatarUrl]=\"item.avatarUrl\"\n                                    [symbolId]=\"item.symbolId\"\n                                    [badgeText]=\"item.badgeText\"\n                                    [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                    [roundedAvatar]=\"!!item.roundedAvatar\"\n                                    [network]=\"item.network\"\n                                    [symbolColor]=\"item.symbolColor\"\n                                    [symbolTooltipText]=\"item.symbolTooltipText\" />\n                            </button>\n                        }\n                    </div>\n                }\n\n                <!-- Unselected zone: items & groups in first-encounter order -->\n                @for (run of displayRuns(); track runKey(run)) {\n                    @if (run.kind === 'items') {\n                        <div\n                            role=\"listbox\"\n                            aria-multiselectable=\"true\"\n                            [attr.aria-label]=\"title() ?? optionsSectionText()\">\n                            @for (item of run.items; track item.htmlId) {\n                                @let grouped = false;\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    class=\"ap-selection-dropdown__item-button\"\n                                    [id]=\"optionId(item)\"\n                                    [tabindex]=\"optionTabIndex(tabbableOption(item))\"\n                                    [apDropdownOption]=\"item.text\"\n                                    [apDropdownOptionDisabled]=\"!!(item.disabled || item.isFeatureLocked)\"\n                                    [attr.aria-selected]=\"item.selected\"\n                                    [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                    [apTooltip]=\"item.disabledTooltip\"\n                                    (click)=\"onItemToggle(item)\">\n                                    <ap-dropdown-item-multiple-one-line\n                                        presentational\n                                        class=\"ap-selection-dropdown__item\"\n                                        [class.ap-selection-dropdown__item--grouped]=\"grouped\"\n                                        [text]=\"item.text\"\n                                        [selected]=\"item.selected\"\n                                        [indeterminate]=\"item.indeterminate ?? false\"\n                                        [htmlId]=\"item.htmlId\"\n                                        [disabled]=\"item.disabled || false\"\n                                        [avatarUrl]=\"item.avatarUrl\"\n                                        [symbolId]=\"item.symbolId\"\n                                        [badgeText]=\"item.badgeText\"\n                                        [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                        [roundedAvatar]=\"!!item.roundedAvatar\"\n                                        [network]=\"item.network\"\n                                        [symbolColor]=\"item.symbolColor\"\n                                        [symbolTooltipText]=\"item.symbolTooltipText\" />\n                                </button>\n                            }\n                        </div>\n                    } @else {\n                        <div class=\"ap-selection-dropdown__group\">\n                            <!-- Group header with checkbox -->\n                            <div class=\"ap-selection-dropdown__group-header\">\n                                <div class=\"ap-selection-dropdown__group-label\">\n                                    <ap-checkbox\n                                        class=\"centered\"\n                                        [name]=\"run.label\"\n                                        [checked]=\"groupSelectionStates()[run.label] === 'selected'\"\n                                        [indeterminate]=\"groupSelectionStates()[run.label] === 'partial'\"\n                                        (change)=\"onGroupToggle(run.label, $event)\">\n                                        {{ run.label }}\n                                    </ap-checkbox>\n                                </div>\n                            </div>\n\n                            <div\n                                role=\"listbox\"\n                                aria-multiselectable=\"true\"\n                                [attr.aria-label]=\"run.label\">\n                                @for (item of run.items; track item.htmlId) {\n                                    @let grouped = true;\n                                    <button\n                                        type=\"button\"\n                                        role=\"option\"\n                                        class=\"ap-selection-dropdown__item-button\"\n                                        [id]=\"optionId(item)\"\n                                        [tabindex]=\"optionTabIndex(tabbableOption(item))\"\n                                        [apDropdownOption]=\"item.text\"\n                                        [apDropdownOptionDisabled]=\"!!(item.disabled || item.isFeatureLocked)\"\n                                        [attr.aria-selected]=\"item.selected\"\n                                        [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                        [apTooltip]=\"item.disabledTooltip\"\n                                        (click)=\"onItemToggle(item)\">\n                                        <ap-dropdown-item-multiple-one-line\n                                            presentational\n                                            class=\"ap-selection-dropdown__item\"\n                                            [class.ap-selection-dropdown__item--grouped]=\"grouped\"\n                                            [text]=\"item.text\"\n                                            [selected]=\"item.selected\"\n                                            [indeterminate]=\"item.indeterminate ?? false\"\n                                            [htmlId]=\"item.htmlId\"\n                                            [disabled]=\"item.disabled || false\"\n                                            [avatarUrl]=\"item.avatarUrl\"\n                                            [symbolId]=\"item.symbolId\"\n                                            [badgeText]=\"item.badgeText\"\n                                            [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                            [roundedAvatar]=\"!!item.roundedAvatar\"\n                                            [network]=\"item.network\"\n                                            [symbolColor]=\"item.symbolColor\"\n                                            [symbolTooltipText]=\"item.symbolTooltipText\" />\n                                    </button>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            }\n        </div>\n\n        <div\n            class=\"ap-selection-dropdown__status\"\n            role=\"status\"\n            aria-atomic=\"true\">\n            {{ resultsAnnouncement() }}\n        </div>\n\n        <!-- Footer -->\n        @if (footerButtonText()) {\n            <div class=\"ap-selection-dropdown__footer\">\n                <button\n                    type=\"button\"\n                    class=\"ap-link standalone\"\n                    [id]=\"footerButtonId()\"\n                    (click)=\"onFooterButtonClick()\">\n                    <ap-symbol [symbolId]=\"footerButtonSymbolId()\" />\n                    {{ footerButtonText() }}\n                </button>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-selection-dropdown__content{border-radius:inherit;overflow:hidden;z-index:1000;width:370px;display:flex;flex-direction:column;max-height:min(400px,var(--ap-floating-available-height, 100vh))}.ap-selection-dropdown__content--single{width:auto;min-width:160px}.ap-selection-dropdown__option{display:block;width:100%;padding:0;border:none;background:none;font:inherit;text-align:inherit}.ap-selection-dropdown__item-button{display:block;width:100%;padding:0;margin:0;border:none;background:transparent;text-align:left;cursor:pointer;outline:none}.ap-selection-dropdown__item-button:hover,.ap-selection-dropdown__item-button.ap-dropdown-option--active{background-color:var(--ref-color-electric-blue-10)}.ap-selection-dropdown__item-button:active{background-color:var(--ref-color-electric-blue-20)}.ap-selection-dropdown__item-button:focus{outline:none}.ap-selection-dropdown__item-button:focus-visible{outline:none}.ap-selection-dropdown__item-button.ap-selection-dropdown__item-button--disabled{pointer-events:none}.ap-selection-dropdown__item{display:flex;align-items:center;width:100%;min-height:40px;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);background:transparent;cursor:pointer;font-family:Averta}.ap-selection-dropdown__group-header{display:flex;align-items:center;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border-top:1px solid var(--ref-color-grey-10);background:var(--ref-color-grey-bg)}.ap-selection-dropdown__group-label{display:flex;align-items:center;flex:1;font-weight:700;color:var(--ref-color-grey-100)}.ap-selection-dropdown__group-label ap-checkbox{--comp-forms-label-font-weight: 700}.ap-selection-dropdown__header{border-bottom:1px solid var(--ref-color-grey-10);flex-shrink:0;display:flex;flex-direction:column}.ap-selection-dropdown__header .ap-selection-dropdown__header-top{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-xs) var(--ref-spacing-sm)}.ap-selection-dropdown__header .ap-selection-dropdown__title{margin:0;font-size:var(--ref-font-size-md);font-weight:var(--ref-font-weight-bold);color:var(--ref-color-grey-100);flex:1}.ap-selection-dropdown__header ap-input-search{width:100%;padding:0 var(--ref-spacing-xxs) var(--ref-spacing-xxs)}.ap-selection-dropdown__items{padding:var(--ref-spacing-xxs) 0;flex:1;overflow-y:auto;min-height:0}.ap-selection-dropdown__no-results{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);color:var(--ref-color-grey-80);font-size:var(--ref-font-size-sm);font-style:italic}.ap-selection-dropdown__footer{height:40px;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);border-top:1px solid var(--ref-color-grey-10);flex-shrink:0;display:flex;align-items:center;justify-content:flex-start}.ap-selection-dropdown__selected-section{margin-bottom:var(--ref-spacing-xxs);border-bottom:1px solid var(--ref-color-grey-10);padding-bottom:var(--ref-spacing-xxs)}.ap-selection-dropdown__selected-section ::ng-deep ap-checkbox{--comp-forms-label-font-weight: 700}.ap-selection-dropdown__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "fullyControlled", "presentational", "required", "name"], outputs: ["change"] }, { kind: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "directive", type: DropdownOptionDirective, selector: "[apDropdownOption]", inputs: ["apDropdownOption", "apDropdownOptionDisabled"] }, { 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: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { 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: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable", "ariaControls", "ariaActiveDescendant"], outputs: ["focus", "blur", "keyup"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectionDropdownComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-selection-dropdown', imports: [
                         CheckboxComponent,
                         DropdownContentDirective,
+                        DropdownOptionDirective,
                         DropdownItemMultipleOneLineComponent,
                         DropdownItemSingleOneLineComponent,
                         DropdownPanelComponent,
@@ -388,8 +532,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         InputSearchComponent,
                         SymbolComponent,
                         TooltipDirective,
-                    ], template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <div\n        *apDropdownContent\n        class=\"ap-selection-dropdown__content\"\n        [class.ap-selection-dropdown__content--single]=\"isSingleSelect()\">\n        <!-- Header -->\n        @if (headerVisible()) {\n            <div class=\"ap-selection-dropdown__header\">\n                @if (headerTopVisible()) {\n                    <div class=\"ap-selection-dropdown__header-top\">\n                        @if (title()) {\n                            <h3 class=\"ap-selection-dropdown__title\">\n                                {{ title() }}\n                            </h3>\n                        }\n                        @if (headerButtonText()) {\n                            <a\n                                class=\"standalone\"\n                                role=\"link\"\n                                tabindex=\"0\"\n                                [id]=\"headerButtonId()\"\n                                (click)=\"onHeaderButtonClick()\"\n                                (keydown)=\"onHeaderButtonKeydown($event)\">\n                                <ap-symbol [symbolId]=\"headerButtonSymbolId()\" />\n                                {{ headerButtonText() }}\n                            </a>\n                        }\n                    </div>\n                }\n                @if (searchVisible()) {\n                    <ap-input-search\n                        #inputSearchElement\n                        [placeholder]=\"searchPlaceholderText()\"\n                        [clearable]=\"true\"\n                        [ngModel]=\"searchTerm()\"\n                        (ngModelChange)=\"onSearchTermChange($event)\" />\n                }\n            </div>\n        }\n\n        <!-- Selection dropdown items -->\n        <div\n            class=\"ap-selection-dropdown__items\"\n            [attr.role]=\"isSingleSelect() ? 'listbox' : null\"\n            [attr.aria-label]=\"isSingleSelect() ? title() : null\">\n            @if (filteredItems().length === 0 && searchTerm()) {\n                <div class=\"ap-selection-dropdown__no-results\">\n                    {{ noSearchResultsText() }}\n                </div>\n            } @else if (isSingleSelect()) {\n                @for (item of filteredItems(); track item.htmlId) {\n                    <button\n                        type=\"button\"\n                        role=\"option\"\n                        class=\"ap-selection-dropdown__option\"\n                        [attr.aria-selected]=\"item.selected\"\n                        [attr.aria-disabled]=\"item.disabled || item.isFeatureLocked\"\n                        [attr.data-track]=\"item.dataTrack\"\n                        [apTooltip]=\"item.disabled ? (item.disabledTooltip ?? null) : null\"\n                        apTooltipPosition=\"right\"\n                        (click)=\"onItemToggle(item)\">\n                        <ap-dropdown-item-single-one-line\n                            [text]=\"item.text\"\n                            [selected]=\"item.selected\"\n                            [disabled]=\"item.disabled || false\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [symbolId]=\"item.symbolId\"\n                            [badgeText]=\"item.badgeText\"\n                            [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                            [roundedAvatar]=\"!!item.roundedAvatar\"\n                            [network]=\"item.network\"\n                            [standaloneModeEnabled]=\"true\" />\n                    </button>\n                }\n            } @else {\n                <!-- Selected items section (at the top) -->\n                @if (selectedItems().length > 0) {\n                    <div class=\"ap-selection-dropdown__selected-section\">\n                        @for (item of selectedItems(); track item.htmlId) {\n                            <div [apTooltip]=\"item.disabledTooltip\">\n                                <button\n                                    type=\"button\"\n                                    tabindex=\"-1\"\n                                    aria-hidden=\"true\"\n                                    class=\"ap-selection-dropdown__item-button\"\n                                    [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                    (click)=\"onItemToggle(item)\">\n                                    <ap-dropdown-item-multiple-one-line\n                                        class=\"ap-selection-dropdown__item\"\n                                        [text]=\"item.text\"\n                                        [selected]=\"item.selected\"\n                                        [indeterminate]=\"item.indeterminate ?? false\"\n                                        [htmlId]=\"item.htmlId\"\n                                        [disabled]=\"item.disabled || false\"\n                                        [avatarUrl]=\"item.avatarUrl\"\n                                        [symbolId]=\"item.symbolId\"\n                                        [badgeText]=\"item.badgeText\"\n                                        [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                        [roundedAvatar]=\"!!item.roundedAvatar\"\n                                        [network]=\"item.network\"\n                                        [symbolColor]=\"item.symbolColor\"\n                                        [symbolTooltipText]=\"item.symbolTooltipText\" />\n                                </button>\n                            </div>\n                        }\n                    </div>\n                }\n\n                <!-- Unselected zone: items & groups in first-encounter order -->\n                @for (entry of displayEntries(); track entryKey(entry)) {\n                    @if (entry.kind === 'item') {\n                        <div [apTooltip]=\"entry.item.disabledTooltip\">\n                            <button\n                                type=\"button\"\n                                tabindex=\"-1\"\n                                aria-hidden=\"true\"\n                                class=\"ap-selection-dropdown__item-button\"\n                                [class.ap-selection-dropdown__item-button--disabled]=\"entry.item.disabled || entry.item.isFeatureLocked\"\n                                (click)=\"onItemToggle(entry.item)\">\n                                <ap-dropdown-item-multiple-one-line\n                                    class=\"ap-selection-dropdown__item\"\n                                    [text]=\"entry.item.text\"\n                                    [selected]=\"entry.item.selected\"\n                                    [indeterminate]=\"entry.item.indeterminate ?? false\"\n                                    [htmlId]=\"entry.item.htmlId\"\n                                    [disabled]=\"entry.item.disabled || false\"\n                                    [avatarUrl]=\"entry.item.avatarUrl\"\n                                    [symbolId]=\"entry.item.symbolId\"\n                                    [badgeText]=\"entry.item.badgeText\"\n                                    [isFeatureLocked]=\"entry.item.isFeatureLocked || false\"\n                                    [roundedAvatar]=\"!!entry.item.roundedAvatar\"\n                                    [network]=\"entry.item.network\"\n                                    [symbolColor]=\"entry.item.symbolColor\"\n                                    [symbolTooltipText]=\"entry.item.symbolTooltipText\" />\n                            </button>\n                        </div>\n                    } @else {\n                        <div class=\"ap-selection-dropdown__group\">\n                            <!-- Group header with checkbox -->\n                            <div class=\"ap-selection-dropdown__group-header\">\n                                <div class=\"ap-selection-dropdown__group-label\">\n                                    <ap-checkbox\n                                        class=\"centered\"\n                                        [name]=\"entry.label\"\n                                        [checked]=\"groupSelectionStates()[entry.label] === 'selected'\"\n                                        [indeterminate]=\"groupSelectionStates()[entry.label] === 'partial'\"\n                                        (change)=\"onGroupToggle(entry.label, $event)\">\n                                        {{ entry.label }}\n                                    </ap-checkbox>\n                                </div>\n                            </div>\n\n                            <!-- Group items -->\n                            @for (item of entry.items; track item.htmlId) {\n                                <div [apTooltip]=\"item.disabledTooltip\">\n                                    <button\n                                        type=\"button\"\n                                        tabindex=\"-1\"\n                                        aria-hidden=\"true\"\n                                        class=\"ap-selection-dropdown__item-button\"\n                                        [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                        (click)=\"onItemToggle(item)\">\n                                        <ap-dropdown-item-multiple-one-line\n                                            class=\"ap-selection-dropdown__item ap-selection-dropdown__item--grouped\"\n                                            [text]=\"item.text\"\n                                            [selected]=\"item.selected\"\n                                            [indeterminate]=\"item.indeterminate ?? false\"\n                                            [htmlId]=\"item.htmlId\"\n                                            [disabled]=\"item.disabled || false\"\n                                            [avatarUrl]=\"item.avatarUrl\"\n                                            [symbolId]=\"item.symbolId\"\n                                            [badgeText]=\"item.badgeText\"\n                                            [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                            [roundedAvatar]=\"!!item.roundedAvatar\"\n                                            [network]=\"item.network\"\n                                            [symbolColor]=\"item.symbolColor\"\n                                            [symbolTooltipText]=\"item.symbolTooltipText\" />\n                                    </button>\n                                </div>\n                            }\n                        </div>\n                    }\n                }\n            }\n        </div>\n\n        <!-- Footer -->\n        @if (footerButtonText()) {\n            <div class=\"ap-selection-dropdown__footer\">\n                <a\n                    class=\"standalone\"\n                    role=\"link\"\n                    tabindex=\"0\"\n                    [id]=\"footerButtonId()\"\n                    (click)=\"onFooterButtonClick()\"\n                    (keydown)=\"onFooterButtonKeydown($event)\">\n                    <ap-symbol [symbolId]=\"footerButtonSymbolId()\" />\n                    {{ footerButtonText() }}\n                </a>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-selection-dropdown__content{border-radius:inherit;overflow:hidden;z-index:1000;width:370px;display:flex;flex-direction:column;max-height:min(400px,var(--ap-floating-available-height, 100vh))}.ap-selection-dropdown__content--single{width:auto;min-width:160px}.ap-selection-dropdown__option{display:block;width:100%;padding:0;border:none;background:none;font:inherit;text-align:inherit}.ap-selection-dropdown__item-button{display:block;width:100%;padding:0;margin:0;border:none;background:transparent;text-align:left;cursor:pointer;outline:none}.ap-selection-dropdown__item-button:hover{background-color:var(--ref-color-electric-blue-10)}.ap-selection-dropdown__item-button:active{background-color:var(--ref-color-electric-blue-20)}.ap-selection-dropdown__item-button:focus{outline:none}.ap-selection-dropdown__item-button:focus-visible{outline:none}.ap-selection-dropdown__item-button.ap-selection-dropdown__item-button--disabled{pointer-events:none}.ap-selection-dropdown__item{display:flex;align-items:center;width:100%;min-height:40px;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);background:transparent;cursor:pointer;font-family:Averta}.ap-selection-dropdown__group-header{display:flex;align-items:center;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border-top:1px solid var(--ref-color-grey-10);background:var(--ref-color-grey-bg)}.ap-selection-dropdown__group-label{display:flex;align-items:center;flex:1;font-weight:700;color:var(--ref-color-grey-100)}.ap-selection-dropdown__group-label ap-checkbox{--comp-forms-label-font-weight: 700}.ap-selection-dropdown__header{border-bottom:1px solid var(--ref-color-grey-10);flex-shrink:0;display:flex;flex-direction:column}.ap-selection-dropdown__header .ap-selection-dropdown__header-top{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-xs) var(--ref-spacing-sm)}.ap-selection-dropdown__header .ap-selection-dropdown__title{margin:0;font-size:var(--ref-font-size-md);font-weight:var(--ref-font-weight-bold);color:var(--ref-color-grey-100);flex:1}.ap-selection-dropdown__header ap-input-search{width:100%;padding:0 var(--ref-spacing-xxs) var(--ref-spacing-xxs)}.ap-selection-dropdown__items{padding:var(--ref-spacing-xxs) 0;flex:1;overflow-y:auto;min-height:0}.ap-selection-dropdown__no-results{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);color:var(--ref-color-grey-80);font-size:var(--ref-font-size-sm);font-style:italic}.ap-selection-dropdown__footer{height:40px;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);border-top:1px solid var(--ref-color-grey-10);flex-shrink:0;display:flex;align-items:center;justify-content:flex-start}.ap-selection-dropdown__selected-section{margin-bottom:var(--ref-spacing-xxs);border-bottom:1px solid var(--ref-color-grey-10);padding-bottom:var(--ref-spacing-xxs)}.ap-selection-dropdown__selected-section ::ng-deep ap-checkbox{--comp-forms-label-font-weight: 700}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], headerButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerButtonId", required: false }] }], footerButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], searchEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], footerButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonText", required: false }] }], footerButtonSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonSymbolId", required: false }] }], headerButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerButtonText", required: false }] }], headerButtonSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerButtonSymbolId", required: false }] }], searchPlaceholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderText", required: false }] }], noSearchResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSearchResultsText", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], footerButtonClick: [{ type: i0.Output, args: ["footerButtonClick"] }], headerButtonClick: [{ type: i0.Output, args: ["headerButtonClick"] }], searchInputChange: [{ type: i0.Output, args: ["searchInputChange"] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }], inputSearchComponent: [{ type: i0.ViewChild, args: ['inputSearchElement', { isSignal: true }] }] } });
+                    ], template: "<ap-dropdown-panel\n    [placement]=\"placement()\"\n    [showBackdrop]=\"showBackdrop()\"\n    (closed)=\"onPanelClosed()\">\n    <!-- `dialog`, not a combobox: a combobox must close when focus leaves it, and this panel holds a\n         search field, a header, a footer and group checkboxes beside its lists \u2014 closing on Tab left\n         every one of them unreachable. -->\n    <div\n        *apDropdownContent\n        class=\"ap-selection-dropdown__content\"\n        role=\"dialog\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"panelLabel()\"\n        (keydown)=\"onOptionsKeyDown($event)\"\n        [class.ap-selection-dropdown__content--single]=\"isSingleSelect()\">\n        <!-- Header -->\n        @if (headerVisible()) {\n            <div class=\"ap-selection-dropdown__header\">\n                @if (headerTopVisible()) {\n                    <div class=\"ap-selection-dropdown__header-top\">\n                        @if (title()) {\n                            <h3 class=\"ap-selection-dropdown__title\">\n                                {{ title() }}\n                            </h3>\n                        }\n                        @if (headerButtonText()) {\n                            <button\n                                type=\"button\"\n                                class=\"ap-link standalone\"\n                                [id]=\"headerButtonId()\"\n                                (click)=\"onHeaderButtonClick()\">\n                                <ap-symbol [symbolId]=\"headerButtonSymbolId()\" />\n                                {{ headerButtonText() }}\n                            </button>\n                        }\n                    </div>\n                }\n                @if (searchVisible()) {\n                    <ap-input-search\n                        #inputSearchElement\n                        [placeholder]=\"searchPlaceholderText()\"\n                        [clearable]=\"true\"\n                        [ariaControls]=\"listboxId\"\n                        [ariaActiveDescendant]=\"activeDescendantId()\"\n                        [ngModel]=\"searchTerm()\"\n                        (blur)=\"onSearchBlur()\"\n                        (ngModelChange)=\"onSearchTermChange($event)\" />\n                }\n            </div>\n        }\n\n        <!-- Selection dropdown items -->\n        <div\n            class=\"ap-selection-dropdown__items\"\n            [id]=\"listboxId\"\n            [attr.role]=\"isSingleSelect() ? 'listbox' : null\"\n            [attr.aria-label]=\"isSingleSelect() ? (title() ?? null) : null\">\n            @if (filteredItems().length === 0 && searchTerm()) {\n                <div class=\"ap-selection-dropdown__no-results\">\n                    {{ noSearchResultsText() }}\n                </div>\n            } @else if (isSingleSelect()) {\n                @for (item of filteredItems(); track item.htmlId) {\n                    <button\n                        type=\"button\"\n                        role=\"option\"\n                        class=\"ap-selection-dropdown__option\"\n                        [id]=\"optionId(item)\"\n                        [apDropdownOption]=\"item.text\"\n                        [apDropdownOptionDisabled]=\"!!(item.disabled || item.isFeatureLocked)\"\n                        [tabindex]=\"optionTabIndex(activeIndex() === $index)\"\n                        [attr.aria-selected]=\"item.selected\"\n                        [attr.aria-disabled]=\"item.disabled || item.isFeatureLocked\"\n                        [attr.data-track]=\"item.dataTrack\"\n                        [apTooltip]=\"item.disabled ? (item.disabledTooltip ?? null) : null\"\n                        apTooltipPosition=\"right\"\n                        (click)=\"onItemToggle(item)\">\n                        <ap-dropdown-item-single-one-line\n                            [text]=\"item.text\"\n                            [selected]=\"item.selected\"\n                            [disabled]=\"item.disabled || false\"\n                            [avatarUrl]=\"item.avatarUrl\"\n                            [symbolId]=\"item.symbolId\"\n                            [badgeText]=\"item.badgeText\"\n                            [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                            [roundedAvatar]=\"!!item.roundedAvatar\"\n                            [network]=\"item.network\"\n                            [standaloneModeEnabled]=\"true\" />\n                    </button>\n                }\n            } @else {\n                <!-- A listbox owns only options, so each section is its own, and a group's checkbox sits beside it. -->\n                @if (selectedItems().length > 0) {\n                    <div\n                        role=\"listbox\"\n                        aria-multiselectable=\"true\"\n                        class=\"ap-selection-dropdown__selected-section\"\n                        [attr.aria-label]=\"selectedSectionText()\">\n                        @for (item of selectedItems(); track item.htmlId) {\n                            @let grouped = false;\n                            <button\n                                type=\"button\"\n                                role=\"option\"\n                                class=\"ap-selection-dropdown__item-button\"\n                                [id]=\"optionId(item)\"\n                                [tabindex]=\"optionTabIndex(tabbableOption(item))\"\n                                [apDropdownOption]=\"item.text\"\n                                [apDropdownOptionDisabled]=\"!!(item.disabled || item.isFeatureLocked)\"\n                                [attr.aria-selected]=\"item.selected\"\n                                [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                [apTooltip]=\"item.disabledTooltip\"\n                                (click)=\"onItemToggle(item)\">\n                                <ap-dropdown-item-multiple-one-line\n                                    presentational\n                                    class=\"ap-selection-dropdown__item\"\n                                    [class.ap-selection-dropdown__item--grouped]=\"grouped\"\n                                    [text]=\"item.text\"\n                                    [selected]=\"item.selected\"\n                                    [indeterminate]=\"item.indeterminate ?? false\"\n                                    [htmlId]=\"item.htmlId\"\n                                    [disabled]=\"item.disabled || false\"\n                                    [avatarUrl]=\"item.avatarUrl\"\n                                    [symbolId]=\"item.symbolId\"\n                                    [badgeText]=\"item.badgeText\"\n                                    [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                    [roundedAvatar]=\"!!item.roundedAvatar\"\n                                    [network]=\"item.network\"\n                                    [symbolColor]=\"item.symbolColor\"\n                                    [symbolTooltipText]=\"item.symbolTooltipText\" />\n                            </button>\n                        }\n                    </div>\n                }\n\n                <!-- Unselected zone: items & groups in first-encounter order -->\n                @for (run of displayRuns(); track runKey(run)) {\n                    @if (run.kind === 'items') {\n                        <div\n                            role=\"listbox\"\n                            aria-multiselectable=\"true\"\n                            [attr.aria-label]=\"title() ?? optionsSectionText()\">\n                            @for (item of run.items; track item.htmlId) {\n                                @let grouped = false;\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    class=\"ap-selection-dropdown__item-button\"\n                                    [id]=\"optionId(item)\"\n                                    [tabindex]=\"optionTabIndex(tabbableOption(item))\"\n                                    [apDropdownOption]=\"item.text\"\n                                    [apDropdownOptionDisabled]=\"!!(item.disabled || item.isFeatureLocked)\"\n                                    [attr.aria-selected]=\"item.selected\"\n                                    [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                    [apTooltip]=\"item.disabledTooltip\"\n                                    (click)=\"onItemToggle(item)\">\n                                    <ap-dropdown-item-multiple-one-line\n                                        presentational\n                                        class=\"ap-selection-dropdown__item\"\n                                        [class.ap-selection-dropdown__item--grouped]=\"grouped\"\n                                        [text]=\"item.text\"\n                                        [selected]=\"item.selected\"\n                                        [indeterminate]=\"item.indeterminate ?? false\"\n                                        [htmlId]=\"item.htmlId\"\n                                        [disabled]=\"item.disabled || false\"\n                                        [avatarUrl]=\"item.avatarUrl\"\n                                        [symbolId]=\"item.symbolId\"\n                                        [badgeText]=\"item.badgeText\"\n                                        [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                        [roundedAvatar]=\"!!item.roundedAvatar\"\n                                        [network]=\"item.network\"\n                                        [symbolColor]=\"item.symbolColor\"\n                                        [symbolTooltipText]=\"item.symbolTooltipText\" />\n                                </button>\n                            }\n                        </div>\n                    } @else {\n                        <div class=\"ap-selection-dropdown__group\">\n                            <!-- Group header with checkbox -->\n                            <div class=\"ap-selection-dropdown__group-header\">\n                                <div class=\"ap-selection-dropdown__group-label\">\n                                    <ap-checkbox\n                                        class=\"centered\"\n                                        [name]=\"run.label\"\n                                        [checked]=\"groupSelectionStates()[run.label] === 'selected'\"\n                                        [indeterminate]=\"groupSelectionStates()[run.label] === 'partial'\"\n                                        (change)=\"onGroupToggle(run.label, $event)\">\n                                        {{ run.label }}\n                                    </ap-checkbox>\n                                </div>\n                            </div>\n\n                            <div\n                                role=\"listbox\"\n                                aria-multiselectable=\"true\"\n                                [attr.aria-label]=\"run.label\">\n                                @for (item of run.items; track item.htmlId) {\n                                    @let grouped = true;\n                                    <button\n                                        type=\"button\"\n                                        role=\"option\"\n                                        class=\"ap-selection-dropdown__item-button\"\n                                        [id]=\"optionId(item)\"\n                                        [tabindex]=\"optionTabIndex(tabbableOption(item))\"\n                                        [apDropdownOption]=\"item.text\"\n                                        [apDropdownOptionDisabled]=\"!!(item.disabled || item.isFeatureLocked)\"\n                                        [attr.aria-selected]=\"item.selected\"\n                                        [class.ap-selection-dropdown__item-button--disabled]=\"item.disabled || item.isFeatureLocked\"\n                                        [apTooltip]=\"item.disabledTooltip\"\n                                        (click)=\"onItemToggle(item)\">\n                                        <ap-dropdown-item-multiple-one-line\n                                            presentational\n                                            class=\"ap-selection-dropdown__item\"\n                                            [class.ap-selection-dropdown__item--grouped]=\"grouped\"\n                                            [text]=\"item.text\"\n                                            [selected]=\"item.selected\"\n                                            [indeterminate]=\"item.indeterminate ?? false\"\n                                            [htmlId]=\"item.htmlId\"\n                                            [disabled]=\"item.disabled || false\"\n                                            [avatarUrl]=\"item.avatarUrl\"\n                                            [symbolId]=\"item.symbolId\"\n                                            [badgeText]=\"item.badgeText\"\n                                            [isFeatureLocked]=\"item.isFeatureLocked || false\"\n                                            [roundedAvatar]=\"!!item.roundedAvatar\"\n                                            [network]=\"item.network\"\n                                            [symbolColor]=\"item.symbolColor\"\n                                            [symbolTooltipText]=\"item.symbolTooltipText\" />\n                                    </button>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            }\n        </div>\n\n        <div\n            class=\"ap-selection-dropdown__status\"\n            role=\"status\"\n            aria-atomic=\"true\">\n            {{ resultsAnnouncement() }}\n        </div>\n\n        <!-- Footer -->\n        @if (footerButtonText()) {\n            <div class=\"ap-selection-dropdown__footer\">\n                <button\n                    type=\"button\"\n                    class=\"ap-link standalone\"\n                    [id]=\"footerButtonId()\"\n                    (click)=\"onFooterButtonClick()\">\n                    <ap-symbol [symbolId]=\"footerButtonSymbolId()\" />\n                    {{ footerButtonText() }}\n                </button>\n            </div>\n        }\n    </div>\n</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-selection-dropdown__content{border-radius:inherit;overflow:hidden;z-index:1000;width:370px;display:flex;flex-direction:column;max-height:min(400px,var(--ap-floating-available-height, 100vh))}.ap-selection-dropdown__content--single{width:auto;min-width:160px}.ap-selection-dropdown__option{display:block;width:100%;padding:0;border:none;background:none;font:inherit;text-align:inherit}.ap-selection-dropdown__item-button{display:block;width:100%;padding:0;margin:0;border:none;background:transparent;text-align:left;cursor:pointer;outline:none}.ap-selection-dropdown__item-button:hover,.ap-selection-dropdown__item-button.ap-dropdown-option--active{background-color:var(--ref-color-electric-blue-10)}.ap-selection-dropdown__item-button:active{background-color:var(--ref-color-electric-blue-20)}.ap-selection-dropdown__item-button:focus{outline:none}.ap-selection-dropdown__item-button:focus-visible{outline:none}.ap-selection-dropdown__item-button.ap-selection-dropdown__item-button--disabled{pointer-events:none}.ap-selection-dropdown__item{display:flex;align-items:center;width:100%;min-height:40px;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);background:transparent;cursor:pointer;font-family:Averta}.ap-selection-dropdown__group-header{display:flex;align-items:center;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border-top:1px solid var(--ref-color-grey-10);background:var(--ref-color-grey-bg)}.ap-selection-dropdown__group-label{display:flex;align-items:center;flex:1;font-weight:700;color:var(--ref-color-grey-100)}.ap-selection-dropdown__group-label ap-checkbox{--comp-forms-label-font-weight: 700}.ap-selection-dropdown__header{border-bottom:1px solid var(--ref-color-grey-10);flex-shrink:0;display:flex;flex-direction:column}.ap-selection-dropdown__header .ap-selection-dropdown__header-top{display:flex;align-items:center;justify-content:space-between;padding:var(--ref-spacing-xs) var(--ref-spacing-sm)}.ap-selection-dropdown__header .ap-selection-dropdown__title{margin:0;font-size:var(--ref-font-size-md);font-weight:var(--ref-font-weight-bold);color:var(--ref-color-grey-100);flex:1}.ap-selection-dropdown__header ap-input-search{width:100%;padding:0 var(--ref-spacing-xxs) var(--ref-spacing-xxs)}.ap-selection-dropdown__items{padding:var(--ref-spacing-xxs) 0;flex:1;overflow-y:auto;min-height:0}.ap-selection-dropdown__no-results{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);color:var(--ref-color-grey-80);font-size:var(--ref-font-size-sm);font-style:italic}.ap-selection-dropdown__footer{height:40px;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);border-top:1px solid var(--ref-color-grey-10);flex-shrink:0;display:flex;align-items:center;justify-content:flex-start}.ap-selection-dropdown__selected-section{margin-bottom:var(--ref-spacing-xxs);border-bottom:1px solid var(--ref-color-grey-10);padding-bottom:var(--ref-spacing-xxs)}.ap-selection-dropdown__selected-section ::ng-deep ap-checkbox{--comp-forms-label-font-weight: 700}.ap-selection-dropdown__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownPanelComponent), { isSignal: true }] }], options: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DropdownOptionDirective), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedSectionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSectionText", required: false }] }], optionsSectionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsSectionText", required: false }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], headerButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerButtonId", required: false }] }], footerButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], searchEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], footerButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonText", required: false }] }], footerButtonSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonSymbolId", required: false }] }], headerButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerButtonText", required: false }] }], headerButtonSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerButtonSymbolId", required: false }] }], searchPlaceholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderText", required: false }] }], noSearchResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSearchResultsText", required: false }] }], searchResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchResultsText", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], footerButtonClick: [{ type: i0.Output, args: ["footerButtonClick"] }], headerButtonClick: [{ type: i0.Output, args: ["headerButtonClick"] }], searchInputChange: [{ type: i0.Output, args: ["searchInputChange"] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }], inputSearchComponent: [{ type: i0.ViewChild, args: ['inputSearchElement', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.