import * as i0 from '@angular/core';
import { inject, ElementRef, input, HostListener, Directive, viewChild, contentChild, output, model, 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 * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';

/**
 * Directive that turns any element into a trigger for a SelectionDropdown component.
 * Handles click and keyboard interactions to open/close the dropdown.
 */
class SelectionDropdownTriggerDirective {
    elementRef = inject((ElementRef));
    /** Reference to the SelectionDropdown component that this trigger controls */
    apSelectionDropdownTrigger = input.required(...(ngDevMode ? [{ debugName: "apSelectionDropdownTrigger" }] : []));
    /** Prevents the trigger from opening/toggling the dropdown when true */
    apSelectionDropdownTriggerDisable = input(false, ...(ngDevMode ? [{ debugName: "apSelectionDropdownTriggerDisable" }] : []));
    /** Handles click events to toggle the dropdown */
    onClick(event) {
        if (this.apSelectionDropdownTriggerDisable())
            return;
        event.preventDefault();
        event.stopPropagation();
        this.apSelectionDropdownTrigger().toggle(this.elementRef.nativeElement);
    }
    /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */
    onKeyDown(event) {
        const dropdown = this.apSelectionDropdownTrigger();
        switch (event.key) {
            case 'Enter':
            case ' ':
            case 'ArrowDown':
                if (this.apSelectionDropdownTriggerDisable())
                    return;
                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 });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: SelectionDropdownTriggerDirective, isStandalone: true, selector: "[apSelectionDropdownTrigger]", inputs: { apSelectionDropdownTrigger: { classPropertyName: "apSelectionDropdownTrigger", publicName: "apSelectionDropdownTrigger", isSignal: true, isRequired: true, transformFunction: null }, apSelectionDropdownTriggerDisable: { classPropertyName: "apSelectionDropdownTriggerDisable", publicName: "apSelectionDropdownTriggerDisable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionDropdownTriggerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[apSelectionDropdownTrigger]',
                }]
        }], propDecorators: { apSelectionDropdownTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "apSelectionDropdownTrigger", required: true }] }], apSelectionDropdownTriggerDisable: [{ type: i0.Input, args: [{ isSignal: true, alias: "apSelectionDropdownTriggerDisable", required: false }] }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }], onKeyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

/**
 * A dropdown component that displays a list of selectable items with checkboxes,
 * badges, tooltips, and keyboard navigation.
 */
class SelectionDropdownComponent {
    symbolRegistry = inject(SymbolRegistry);
    overlay = createDropdownOverlay();
    selectionDropdownTemplate = viewChild('selectionDropdownTemplate', ...(ngDevMode ? [{ debugName: "selectionDropdownTemplate" }] : []));
    trigger = contentChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
    /** ID for the header button */
    headerButtonId = input(...(ngDevMode ? [undefined, { debugName: "headerButtonId" }] : []));
    /** ID for the footer button */
    footerButtonId = input(...(ngDevMode ? [undefined, { debugName: "footerButtonId" }] : []));
    /** Array of items to display in the dropdown menu */
    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
    /** Title to display in the header */
    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
    /** Text for the footer button */
    footerButtonText = input(...(ngDevMode ? [undefined, { debugName: "footerButtonText" }] : []));
    /** Symbol ID for the footer button */
    footerButtonSymbolId = input(...(ngDevMode ? [undefined, { debugName: "footerButtonSymbolId" }] : []));
    /** Text for the header button */
    headerButtonText = input(...(ngDevMode ? [undefined, { debugName: "headerButtonText" }] : []));
    /** Symbol ID for the header button */
    headerButtonSymbolId = input(...(ngDevMode ? [undefined, { debugName: "headerButtonSymbolId" }] : []));
    /** Placeholder text for the search input */
    searchPlaceholderText = input('Search', ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : []));
    /** Text to display when no search results are found */
    noSearchResultsText = input('No results found', ...(ngDevMode ? [{ debugName: "noSearchResultsText" }] : []));
    /** 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();
    /**
     * Two-way bindable, clearable search term. Consumers can read it and reset it (set to '')
     * to clear the search and restore the full item list — letting them drive the search
     * declaratively instead of reaching into the rendered `ap-input-search`.
     */
    searchTerm = model('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
    destroy$ = new Subject();
    searchTermSubject = new Subject();
    inputSearchComponent = viewChild('inputSearchElement', ...(ngDevMode ? [{ debugName: "inputSearchComponent" }] : []));
    isOpen = this.overlay.isOpen;
    focusInput = effect(() => {
        const inputSearch = this.inputSearchComponent();
        untracked(() => {
            if (this.isOpen() && inputSearch) {
                inputSearch.focusInput();
            }
        });
    }, ...(ngDevMode ? [{ debugName: "focusInput" }] : []));
    internalItems = linkedSignal(() => this.items(), ...(ngDevMode ? [{ debugName: "internalItems" }] : []));
    filteredItems = signal([], ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
    initiallySelectedItems = signal([], ...(ngDevMode ? [{ debugName: "initiallySelectedItems" }] : []));
    // Computed properties for template usage
    selectedItems = computed(() => {
        const initiallySelectedIds = this.initiallySelectedItems().map(item => item.htmlId);
        return this.filteredItems().filter(item => initiallySelectedIds.includes(item.htmlId));
    }, ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
    unselectedItems = computed(() => {
        const initiallySelectedIds = this.initiallySelectedItems().map(item => item.htmlId);
        return this.filteredItems().filter(item => !initiallySelectedIds.includes(item.htmlId));
    }, ...(ngDevMode ? [{ debugName: "unselectedItems" }] : []));
    /**
     * Unselected items rebuilt into a single ordered list: standalone items and
     * groups appear in the order their first item is encountered; later items of
     * an already-seen group join that existing group entry.
     */
    displayEntries = computed(() => {
        const entries = [];
        const groupsByLabel = new Map();
        for (const item of this.unselectedItems()) {
            const label = item.groupLabel;
            if (!label) {
                entries.push({ kind: 'item', item });
                continue;
            }
            const existing = groupsByLabel.get(label);
            if (existing) {
                // `existing` is the same object reference already pushed into `entries`,
                // so mutating its items array updates the rendered group in place.
                existing.items.push(item);
            }
            else {
                const group = { kind: 'group', label, items: [item] };
                groupsByLabel.set(label, group);
                entries.push(group);
            }
        }
        return entries;
    }, ...(ngDevMode ? [{ debugName: "displayEntries" }] : []));
    // Computed maps for template usage
    groupSelectionStates = computed(() => {
        const states = {};
        for (const entry of this.displayEntries()) {
            if (entry.kind !== 'group') {
                continue;
            }
            const groupLabel = entry.label;
            const groupItems = this.filteredItems().filter(item => item.groupLabel === groupLabel);
            // Selection is counted across all members: a disabled item can still be selected, and
            // excluding it would wrongly drop the group to "unselected" despite a live selection.
            const hasSelection = groupItems.some(item => item.selected);
            const hasIndeterminate = groupItems.some(item => item.indeterminate);
            // "Fully selected" ignores members that cannot be toggled on (a disabled, unselected
            // item), so a group whose every selectable member is selected still reads as selected.
            const hasPendingSelectable = groupItems.some(item => !item.selected && !item.disabled && !item.isFeatureLocked);
            if (!hasSelection && !hasIndeterminate) {
                states[groupLabel] = 'unselected';
            }
            else if (!hasPendingSelectable && !hasIndeterminate) {
                states[groupLabel] = 'selected';
            }
            else {
                states[groupLabel] = 'partial';
            }
        }
        return states;
    }, ...(ngDevMode ? [{ debugName: "groupSelectionStates" }] : []));
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
        // Set up debounced search
        this.searchTermSubject.pipe(debounceTime(100), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(term => {
            const items = this.internalItems();
            this.updateFilteredItems(term?.toLowerCase() ?? '', items);
        });
        // 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 '').
        effect(() => this.searchTermSubject.next(this.searchTerm() ?? ''));
        // Initialize filtered items when items change
        effect(() => {
            const items = this.internalItems();
            if (!this.searchTerm()) {
                this.filteredItems.set(items);
            }
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    /** Opens the dropdown menu at the specified trigger element */
    open(triggerElement) {
        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);
        this.opened.emit();
    }
    /** Closes the dropdown menu and cleans up overlay resources */
    close() {
        if (!this.isOpen())
            return;
        this.initiallySelectedItems.set([]);
        this.overlay.close();
        this.closed.emit();
    }
    /** Toggles the dropdown menu open or closed state */
    toggle(triggerElement) {
        if (this.isOpen()) {
            this.close();
        }
        else {
            this.open(triggerElement);
        }
    }
    /** Handles item toggle events, updating selection and emitting changes.
     *  An indeterminate item resolves to selected; a definite item flips. Toggling always
     *  clears the indeterminate flag, so the item becomes a definite selected/unselected. */
    onItemToggle(item) {
        if (item.disabled || item.isFeatureLocked) {
            return;
        }
        const nextSelected = item.indeterminate ? true : !item.selected;
        const resolve = (i) => i.htmlId === item.htmlId ? { ...i, selected: nextSelected, indeterminate: false } : i;
        const updatedItems = this.internalItems().map(resolve);
        this.internalItems.set(updatedItems);
        this.selectionChange.emit(updatedItems);
        // Keep the filtered view in sync with the toggled item.
        this.filteredItems.update(items => items.map(resolve));
    }
    /** Handles footer button clicks */
    onFooterButtonClick() {
        this.footerButtonClick.emit();
    }
    /** Handles footer button keyboard events */
    onFooterButtonKeydown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            this.footerButtonClick.emit();
        }
    }
    /** 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) {
        this.searchTerm.set(term ?? '');
        this.searchInputChange.emit(term ?? '');
    }
    /** Handles group toggle events, selecting/deselecting all items within the group */
    onGroupToggle(groupLabel, checked) {
        if (typeof checked !== 'boolean') {
            return;
        }
        const updatedItems = this.internalItems().map(item => {
            if (item.groupLabel === groupLabel && !item.disabled && !item.isFeatureLocked) {
                return { ...item, selected: checked, indeterminate: false };
            }
            return item;
        });
        this.internalItems.set(updatedItems);
        this.selectionChange.emit(updatedItems);
    }
    /** Stable track key for a render entry (item or group). */
    entryKey(entry) {
        return entry.kind === 'item' ? `item:${entry.item.htmlId}` : `group:${entry.label}`;
    }
    /** Updates the filtered items based on search term */
    updateFilteredItems(searchTerm, items) {
        if (!searchTerm) {
            this.filteredItems.set(items);
            return;
        }
        const filtered = items.filter(item => item.text.toLowerCase().includes(searchTerm));
        this.filteredItems.set(filtered);
    }
    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 }, 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 }, 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: "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($event)\" />\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)\">\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                                        [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</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", "indeterminate", "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,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-selection-dropdown', imports: [
                        CheckboxComponent,
                        DropdownItemMultipleOneLineComponent,
                        FormsModule,
                        InputSearchComponent,
                        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($event)\" />\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)\">\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                                        [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</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 }] }], 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"] }], 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.
 */

export { SelectionDropdownComponent, SelectionDropdownTriggerDirective };
//# sourceMappingURL=agorapulse-ui-components-selection-dropdown.mjs.map
