@agorapulse/ui-components 20.4.5 → 20.4.6

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

@@ -1,16 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, HostListener, Directive, ViewContainerRef, viewChild, contentChild, output, effect, untracked, linkedSignal, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, input, HostListener, Directive, viewChild, contentChild, output, effect, untracked, linkedSignal, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
+import { createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
 import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { DropdownItemMultipleOneLineComponent } from '@agorapulse/ui-components/select';
 import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
 import { SymbolRegistry, SymbolComponent } from '@agorapulse/ui-symbol';
-import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { Subject, debounceTime, distinctUntilChanged, takeUntil, take } from 'rxjs';
+import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
 
 /**
  * Directive that turns any element into a trigger for a SelectionDropdown component.
@@ -24,26 +23,22 @@ class SelectionDropdownTriggerDirective {
     onClick(event) {
         event.preventDefault();
         event.stopPropagation();
-        const selectionDropdown = this.apSelectionDropdownTrigger();
-        if (selectionDropdown) {
-            selectionDropdown.toggle(this.elementRef.nativeElement);
-        }
+        this.apSelectionDropdownTrigger().toggle(this.elementRef.nativeElement);
     }
     /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */
     onKeyDown(event) {
-        const selectionDropdown = this.apSelectionDropdownTrigger();
-        if (selectionDropdown) {
-            switch (event.key) {
-                case 'Enter':
-                case 'ArrowDown':
-                    event.preventDefault();
-                    selectionDropdown.open(this.elementRef.nativeElement);
-                    break;
-                case 'Escape':
-                    event.preventDefault();
-                    selectionDropdown.close();
-                    break;
-            }
+        const dropdown = this.apSelectionDropdownTrigger();
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                event.preventDefault();
+                dropdown.open(this.elementRef.nativeElement);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                dropdown.close();
+                break;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionDropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -67,11 +62,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * badges, tooltips, and keyboard navigation.
  */
 class SelectionDropdownComponent {
-    elementRef = inject(ElementRef);
-    overlay = inject(Overlay);
-    positionBuilder = inject(OverlayPositionBuilder);
     symbolRegistry = inject(SymbolRegistry);
-    viewContainerRef = inject(ViewContainerRef);
+    overlay = createDropdownOverlay();
     selectionDropdownTemplate = viewChild('selectionDropdownTemplate', ...(ngDevMode ? [{ debugName: "selectionDropdownTemplate" }] : []));
     trigger = contentChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     /** ID for the header button */
@@ -80,12 +72,6 @@ class SelectionDropdownComponent {
     footerButtonId = input(...(ngDevMode ? [undefined, { debugName: "footerButtonId" }] : []));
     /** Array of items to display in the dropdown menu */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    /** Whether the dropdown is disabled and cannot be opened */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /** Whether to show a backdrop that closes the dropdown when clicked */
-    showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
-    /** Default position for the dropdown relative to the trigger element */
-    defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
     /** Title to display in the header */
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
     /** Text for the footer button */
@@ -100,23 +86,28 @@ class SelectionDropdownComponent {
     searchPlaceholderText = input('Search', ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : []));
     /** Text to display when no search results are found */
     noSearchResultsText = input('No results found', ...(ngDevMode ? [{ debugName: "noSearchResultsText" }] : []));
-    /** Emits when a dropdown item selection changes */
-    selectionChange = output();
+    /** Whether to show a backdrop that closes the dropdown when clicked */
+    showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
+    /** Whether the dropdown is disabled and cannot be opened */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Default position for the dropdown relative to the trigger element */
+    defaultPosition = input('right', ...(ngDevMode ? [{ debugName: "defaultPosition" }] : []));
     /** Emits when the dropdown menu is opened */
     opened = output();
     /** Emits when the dropdown menu is closed */
     closed = output();
+    /** Emits when a dropdown item selection changes */
+    selectionChange = output();
     /** Emits when the footer button is clicked */
     footerButtonClick = output();
     /** Emits when the header button is clicked */
     headerButtonClick = output();
     /** Emits when the search input is changed */
     searchInputChange = output();
-    overlayRef = null;
-    portal = null;
     destroy$ = new Subject();
     searchTermSubject = new Subject();
     inputSearchComponent = viewChild('inputSearchElement', ...(ngDevMode ? [{ debugName: "inputSearchComponent" }] : []));
+    isOpen = this.overlay.isOpen;
     focusInput = effect(() => {
         const inputSearch = this.inputSearchComponent();
         untracked(() => {
@@ -126,7 +117,6 @@ class SelectionDropdownComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "focusInput" }] : []));
     internalItems = linkedSignal(() => this.items(), ...(ngDevMode ? [{ debugName: "internalItems" }] : []));
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     searchTerm = '';
     filteredItems = signal([], ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
     initiallySelectedItems = signal([], ...(ngDevMode ? [{ debugName: "initiallySelectedItems" }] : []));
@@ -195,50 +185,27 @@ class SelectionDropdownComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    /** Opens the dropdown menu at the specified trigger element or component's element */
+    /** Opens the dropdown menu at the specified trigger element */
     open(triggerElement) {
-        const selectionDropdownTemplate = this.selectionDropdownTemplate();
-        if (this.disabled() || this.isOpen() || !selectionDropdownTemplate) {
+        const template = this.selectionDropdownTemplate();
+        if (this.disabled() || this.isOpen() || !template)
             return;
-        }
+        this.overlay.open(template, triggerElement, {
+            showBackdrop: this.showBackdrop(),
+            defaultPosition: this.defaultPosition(),
+            onClose: () => this.close(),
+        });
         // Capture initially selected items as a static snapshot
         const selectedItems = this.internalItems().filter(item => item.selected);
         this.initiallySelectedItems.set(selectedItems);
-        const target = triggerElement || this.elementRef.nativeElement;
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-        }
-        const positionStrategy = this.createPositionStrategy(target);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            hasBackdrop: this.showBackdrop(),
-            backdropClass: '',
-            panelClass: '',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-        });
-        this.portal = new TemplatePortal(selectionDropdownTemplate, this.viewContainerRef);
-        this.overlayRef.attach(this.portal);
-        this.isOpen.set(true);
         this.opened.emit();
-        this.overlayRef
-            .backdropClick()
-            .pipe(take(1))
-            .subscribe(() => {
-            this.close();
-        });
     }
     /** Closes the dropdown menu and cleans up overlay resources */
     close() {
-        if (!this.isOpen()) {
+        if (!this.isOpen())
             return;
-        }
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-        this.portal = null;
-        this.isOpen.set(false);
-        this.initiallySelectedItems.set([]); // Clear the snapshot
+        this.initiallySelectedItems.set([]);
+        this.overlay.close();
         this.closed.emit();
     }
     /** Toggles the dropdown menu open or closed state */
@@ -311,97 +278,8 @@ class SelectionDropdownComponent {
         const filtered = items.filter(item => item.text.toLowerCase().includes(searchTerm));
         this.filteredItems.set(filtered);
     }
-    /** Creates positioning strategy for the overlay based on trigger element and default position */
-    createPositionStrategy(target) {
-        const defaultPosition = this.defaultPosition();
-        const gap = 4;
-        const positions = defaultPosition === 'right'
-            ? [
-                // Bottom-right (default) - left border aligns with left side of trigger
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetX: 0,
-                    offsetY: gap,
-                },
-                // Bottom-left (if not enough space on right) - right border aligns with right side of trigger
-                {
-                    originX: 'end',
-                    originY: 'bottom',
-                    overlayX: 'end',
-                    overlayY: 'top',
-                    offsetX: 0,
-                    offsetY: gap,
-                },
-                // Top-right (if not enough space below) - left border aligns with left side of trigger
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                    offsetX: 0,
-                    offsetY: -gap,
-                },
-                // Top-left (if not enough space below and on right) - right border aligns with right side of trigger
-                {
-                    originX: 'end',
-                    originY: 'top',
-                    overlayX: 'end',
-                    overlayY: 'bottom',
-                    offsetX: 0,
-                    offsetY: -gap,
-                },
-            ]
-            : [
-                // Bottom-left (default) - right border aligns with right side of trigger
-                {
-                    originX: 'end',
-                    originY: 'bottom',
-                    overlayX: 'end',
-                    overlayY: 'top',
-                    offsetX: 0,
-                    offsetY: gap,
-                },
-                // Bottom-right (if not enough space on left) - left border aligns with left side of trigger
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetX: 0,
-                    offsetY: gap,
-                },
-                // Top-left (if not enough space below) - right border aligns with right side of trigger
-                {
-                    originX: 'end',
-                    originY: 'top',
-                    overlayX: 'end',
-                    overlayY: 'bottom',
-                    offsetX: 0,
-                    offsetY: -gap,
-                },
-                // Top-right (if not enough space below and on left) - left border aligns with left side of trigger
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                    offsetX: 0,
-                    offsetY: -gap,
-                },
-            ];
-        return this.positionBuilder
-            .flexibleConnectedTo(target)
-            .withPositions(positions)
-            .withFlexibleDimensions(true)
-            .withPush(true)
-            .withGrowAfterOpen(true)
-            .withViewportMargin(8);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", 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 } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed", footerButtonClick: "footerButtonClick", headerButtonClick: "headerButtonClick", searchInputChange: "searchInputChange" }, queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "selectionDropdownTemplate", first: true, predicate: ["selectionDropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "inputSearchComponent", first: true, predicate: ["inputSearchElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #selectionDropdownTemplate>\n    <div class=\"ap-selection-dropdown__content\">\n        <!-- Header -->\n        <div class=\"ap-selection-dropdown__header\">\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            <ap-input-search\n                #inputSearchElement\n                [placeholder]=\"searchPlaceholderText()\"\n                [clearable]=\"true\"\n                [(ngModel)]=\"searchTerm\"\n                (ngModelChange)=\"onSearchTermChange()\" />\n        </div>\n\n        <!-- Selection dropdown items -->\n        <div class=\"ap-selection-dropdown__items\">\n            @if (filteredItems().length === 0 && searchTerm) {\n                <div class=\"ap-selection-dropdown__no-results\">\n                    {{ noSearchResultsText() }}\n                </div>\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, !item.selected)\">\n                                    <ap-dropdown-item-multiple-one-line\n                                        class=\"ap-selection-dropdown__item\"\n                                        [text]=\"item.text\"\n                                        [selected]=\"item.selected\"\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                <!-- Ungrouped unselected items -->\n                @for (item of ungroupedItems(); 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, !item.selected)\">\n                            <ap-dropdown-item-multiple-one-line\n                                class=\"ap-selection-dropdown__item\"\n                                [text]=\"item.text\"\n                                [selected]=\"item.selected\"\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\n                <!-- Groups -->\n                @for (groupLabel of groupLabels(); track groupLabel) {\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                                    [name]=\"groupLabel\"\n                                    [checked]=\"groupSelectionStates()[groupLabel] === 'selected'\"\n                                    [indeterminate]=\"groupSelectionStates()[groupLabel] === 'partial'\"\n                                    (change)=\"onGroupToggle(groupLabel, $event)\">\n                                    {{ groupLabel }}\n                                </ap-checkbox>\n                            </div>\n                        </div>\n\n                        <!-- Group items -->\n                        @for (item of groupItemsMap()[groupLabel]; 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, !item.selected)\">\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                                        [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        </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</ng-template>\n", styles: [":host{display:none}.ap-selection-dropdown__content{background-color:var(--ref-color-white);border-radius:var(--sys-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326;overflow:hidden;z-index:1000;width:370px;display:flex;flex-direction:column;max-height:400px}.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", "required", "name"], outputs: ["change"] }, { kind: "component", type: DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "selectionChange", "lockedFeatureClicked"] }, { 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: "20.3.18", 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 }, 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 }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", selectionChange: "selectionChange", footerButtonClick: "footerButtonClick", headerButtonClick: "headerButtonClick", searchInputChange: "searchInputChange" }, queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "selectionDropdownTemplate", first: true, predicate: ["selectionDropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "inputSearchComponent", first: true, predicate: ["inputSearchElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #selectionDropdownTemplate>\n    <div class=\"ap-selection-dropdown__content\">\n        <!-- Header -->\n        <div class=\"ap-selection-dropdown__header\">\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            <ap-input-search\n                #inputSearchElement\n                [placeholder]=\"searchPlaceholderText()\"\n                [clearable]=\"true\"\n                [(ngModel)]=\"searchTerm\"\n                (ngModelChange)=\"onSearchTermChange()\" />\n        </div>\n\n        <!-- Selection dropdown items -->\n        <div class=\"ap-selection-dropdown__items\">\n            @if (filteredItems().length === 0 && searchTerm) {\n                <div class=\"ap-selection-dropdown__no-results\">\n                    {{ noSearchResultsText() }}\n                </div>\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, !item.selected)\">\n                                    <ap-dropdown-item-multiple-one-line\n                                        class=\"ap-selection-dropdown__item\"\n                                        [text]=\"item.text\"\n                                        [selected]=\"item.selected\"\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                <!-- Ungrouped unselected items -->\n                @for (item of ungroupedItems(); 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, !item.selected)\">\n                            <ap-dropdown-item-multiple-one-line\n                                class=\"ap-selection-dropdown__item\"\n                                [text]=\"item.text\"\n                                [selected]=\"item.selected\"\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\n                <!-- Groups -->\n                @for (groupLabel of groupLabels(); track groupLabel) {\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                                    [name]=\"groupLabel\"\n                                    [checked]=\"groupSelectionStates()[groupLabel] === 'selected'\"\n                                    [indeterminate]=\"groupSelectionStates()[groupLabel] === 'partial'\"\n                                    (change)=\"onGroupToggle(groupLabel, $event)\">\n                                    {{ groupLabel }}\n                                </ap-checkbox>\n                            </div>\n                        </div>\n\n                        <!-- Group items -->\n                        @for (item of groupItemsMap()[groupLabel]; 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, !item.selected)\">\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                                        [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        </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</ng-template>\n", styles: [":host{display:none}.ap-selection-dropdown__content{background-color:var(--ref-color-white);border-radius:var(--sys-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326;overflow:hidden;z-index:1000;width:370px;display:flex;flex-direction:column;max-height:400px}.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", "required", "name"], outputs: ["change"] }, { kind: "component", type: DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "selectionChange", "lockedFeatureClicked"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionDropdownComponent, decorators: [{
             type: Component,
@@ -413,7 +291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         SymbolComponent,
                         TooltipDirective,
                     ], template: "<ng-template #selectionDropdownTemplate>\n    <div class=\"ap-selection-dropdown__content\">\n        <!-- Header -->\n        <div class=\"ap-selection-dropdown__header\">\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            <ap-input-search\n                #inputSearchElement\n                [placeholder]=\"searchPlaceholderText()\"\n                [clearable]=\"true\"\n                [(ngModel)]=\"searchTerm\"\n                (ngModelChange)=\"onSearchTermChange()\" />\n        </div>\n\n        <!-- Selection dropdown items -->\n        <div class=\"ap-selection-dropdown__items\">\n            @if (filteredItems().length === 0 && searchTerm) {\n                <div class=\"ap-selection-dropdown__no-results\">\n                    {{ noSearchResultsText() }}\n                </div>\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, !item.selected)\">\n                                    <ap-dropdown-item-multiple-one-line\n                                        class=\"ap-selection-dropdown__item\"\n                                        [text]=\"item.text\"\n                                        [selected]=\"item.selected\"\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                <!-- Ungrouped unselected items -->\n                @for (item of ungroupedItems(); 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, !item.selected)\">\n                            <ap-dropdown-item-multiple-one-line\n                                class=\"ap-selection-dropdown__item\"\n                                [text]=\"item.text\"\n                                [selected]=\"item.selected\"\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\n                <!-- Groups -->\n                @for (groupLabel of groupLabels(); track groupLabel) {\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                                    [name]=\"groupLabel\"\n                                    [checked]=\"groupSelectionStates()[groupLabel] === 'selected'\"\n                                    [indeterminate]=\"groupSelectionStates()[groupLabel] === 'partial'\"\n                                    (change)=\"onGroupToggle(groupLabel, $event)\">\n                                    {{ groupLabel }}\n                                </ap-checkbox>\n                            </div>\n                        </div>\n\n                        <!-- Group items -->\n                        @for (item of groupItemsMap()[groupLabel]; 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, !item.selected)\">\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                                        [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        </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</ng-template>\n", styles: [":host{display:none}.ap-selection-dropdown__content{background-color:var(--ref-color-white);border-radius:var(--sys-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326;overflow:hidden;z-index:1000;width:370px;display:flex;flex-direction:column;max-height:400px}.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: { selectionDropdownTemplate: [{ type: i0.ViewChild, args: ['selectionDropdownTemplate', { 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", 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 }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], footerButtonClick: [{ type: i0.Output, args: ["footerButtonClick"] }], headerButtonClick: [{ type: i0.Output, args: ["headerButtonClick"] }], searchInputChange: [{ type: i0.Output, args: ["searchInputChange"] }], inputSearchComponent: [{ type: i0.ViewChild, args: ['inputSearchElement', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { selectionDropdownTemplate: [{ type: i0.ViewChild, args: ['selectionDropdownTemplate', { 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 }] }], 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 }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", 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"] }], inputSearchComponent: [{ type: i0.ViewChild, args: ['inputSearchElement', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.