import * as i0 from '@angular/core';
import { inject, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, Input, ElementRef, Renderer2, ViewContainerRef, effect, Directive, HostListener, ViewChild, EventEmitter, Output, signal, computed, viewChild, viewChildren, afterRenderEffect, NgModule } from '@angular/core';
import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
import { SymbolRegistry, apPlus, SymbolComponent, apCheck } from '@agorapulse/ui-symbol';
import { BadgeComponent } from '@agorapulse/ui-components/badge';
import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
import { AvatarComponent } from '@agorapulse/ui-components/avatar';
import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
import { Subscription, BehaviorSubject, filter } from 'rxjs';
import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { LabelComponent } from '@agorapulse/ui-components/labels';
import { TagComponent } from '@agorapulse/ui-components/tag';

class DropdownCreateNewComponent {
    symbolRegistry = inject(SymbolRegistry);
    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
    searchTerm = input(...(ngDevMode ? [undefined, { debugName: "searchTerm" }] : /* istanbul ignore next */ []));
    createNew = output();
    constructor() {
        this.symbolRegistry.registerSymbols([apPlus]);
    }
    onClick() {
        this.createNew.emit(this.searchTerm() ?? '');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownCreateNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownCreateNewComponent, isStandalone: true, selector: "ap-dropdown-create-new", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createNew: "createNew" }, ngImport: i0, template: "<button\n    class=\"create-new\"\n    type=\"button\"\n    (click)=\"onClick()\">\n    <ap-symbol\n        symbolId=\"plus\"\n        size=\"sm\" />\n    <span>\n        {{ text() }}\n        @if (searchTerm()) {\n            {{ '&quot;' + searchTerm() + '&quot;' }}\n        }\n    </span>\n</button>\n", styles: ["ap-dropdown-create-new .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}ap-dropdown-create-new .create-new:hover{color:var(--ref-color-electric-blue-100)}ap-dropdown-create-new .create-new:active{color:var(--ref-color-electric-blue-150)}ap-dropdown-create-new .create-new span{text-align:left}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownCreateNewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-dropdown-create-new', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent], template: "<button\n    class=\"create-new\"\n    type=\"button\"\n    (click)=\"onClick()\">\n    <ap-symbol\n        symbolId=\"plus\"\n        size=\"sm\" />\n    <span>\n        {{ text() }}\n        @if (searchTerm()) {\n            {{ '&quot;' + searchTerm() + '&quot;' }}\n        }\n    </span>\n</button>\n", styles: ["ap-dropdown-create-new .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}ap-dropdown-create-new .create-new:hover{color:var(--ref-color-electric-blue-100)}ap-dropdown-create-new .create-new:active{color:var(--ref-color-electric-blue-150)}ap-dropdown-create-new .create-new span{text-align:left}\n"] }]
        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], createNew: [{ type: i0.Output, args: ["createNew"] }] } });

class DropdownGroupItemComponent {
    groupLabel;
    groupTag;
    selectableGroup = false;
    children = [];
    select;
    disabled = false;
    disabledTooltip;
    isGroupIntermediate() {
        const selectedChildren = this.children.filter((child) => child.selected && !child.disabled);
        const selectableChildren = this.children.filter((child) => !child.disabled);
        return selectedChildren.length > 0 && selectedChildren.length < selectableChildren.length;
    }
    isGroupChecked() {
        return this.children.every((child) => child.selected || child.disabled) && !this.isGroupDisabled();
    }
    isGroupDisabled() {
        return this.children.every((child) => child.disabled);
    }
    onGroupClick(event) {
        if (!this.select?.maxSelectedItems()) {
            return; // Let ng-select handle it normally
        }
        event.stopPropagation();
        if (this.isGroupDisabled() || this.disabled) {
            return;
        }
        const selectedChildren = this.children.filter((child) => child.selected);
        if (selectedChildren.length > 0) {
            for (const child of selectedChildren) {
                this.select.unselect(child);
            }
        }
        else {
            const remaining = this.select.maxSelectedItems() - this.select.itemsList.selectedItems.length;
            const selectableChildren = this.children.filter((child) => !child.disabled && !child.selected);
            for (const child of selectableChildren.slice(0, remaining)) {
                this.select.select(child);
            }
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownGroupItemComponent, isStandalone: true, selector: "ap-dropdown-group-item", inputs: { groupLabel: "groupLabel", groupTag: "groupTag", selectableGroup: "selectableGroup", children: "children", select: "select", disabled: "disabled", disabledTooltip: "disabledTooltip" }, ngImport: i0, template: "<div\n    class=\"group\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"\n    (click)=\"onGroupClick($event)\">\n    @if (selectableGroup) {\n        <ap-checkbox\n            [name]=\"'option-group-selection-' + groupLabel\"\n            [disabled]=\"isGroupDisabled() || disabled\"\n            [indeterminate]=\"isGroupIntermediate()\"\n            [checked]=\"isGroupChecked()\">\n            <span class=\"group-label\">\n                {{ groupLabel }}\n            </span>\n            @if (groupTag) {\n                <ap-badge color=\"blue\">\n                    {{ groupTag }}\n                </ap-badge>\n            }\n        </ap-checkbox>\n    } @else {\n        <span\n            class=\"group-label\"\n            [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        @if (groupTag) {\n            <ap-badge color=\"blue\">\n                {{ groupTag }}\n            </ap-badge>\n        }\n    }\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownGroupItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-dropdown-group-item', encapsulation: ViewEncapsulation.None, imports: [BadgeComponent, CheckboxComponent, TooltipDirective], template: "<div\n    class=\"group\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"\n    (click)=\"onGroupClick($event)\">\n    @if (selectableGroup) {\n        <ap-checkbox\n            [name]=\"'option-group-selection-' + groupLabel\"\n            [disabled]=\"isGroupDisabled() || disabled\"\n            [indeterminate]=\"isGroupIntermediate()\"\n            [checked]=\"isGroupChecked()\">\n            <span class=\"group-label\">\n                {{ groupLabel }}\n            </span>\n            @if (groupTag) {\n                <ap-badge color=\"blue\">\n                    {{ groupTag }}\n                </ap-badge>\n            }\n        </ap-checkbox>\n    } @else {\n        <span\n            class=\"group-label\"\n            [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        @if (groupTag) {\n            <ap-badge color=\"blue\">\n                {{ groupTag }}\n            </ap-badge>\n        }\n    }\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"] }]
        }], propDecorators: { groupLabel: [{
                type: Input,
                args: [{ required: true }]
            }], groupTag: [{
                type: Input
            }], selectableGroup: [{
                type: Input
            }], children: [{
                type: Input,
                args: [{ required: true }]
            }], select: [{
                type: Input,
                args: [{
                        required: true,
                    }]
            }], disabled: [{
                type: Input
            }], disabledTooltip: [{
                type: Input
            }] } });

class SelectBaseDirective {
    inlineLabel = input(...(ngDevMode ? [undefined, { debugName: "inlineLabel" }] : /* istanbul ignore next */ []));
    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : /* istanbul ignore next */ []));
    selectComponent = inject(NgSelectComponent);
    el = inject(ElementRef);
    renderer = inject(Renderer2);
    viewContainerRef = inject(ViewContainerRef);
    symbolRegistry = inject(SymbolRegistry);
    symbolComponentRef;
    labelElement;
    constructor() {
        this.selectComponent.appendTo.set('body');
        this.selectComponent.searchable.set(false);
        this.selectComponent.clearable.set(false);
        this.selectComponent.markFirst.set(false);
        this.selectComponent.selectableGroupAsModel.set(false);
        this.selectComponent.tabIndex.set(0);
        this.symbolRegistry.registerSymbols([apCheck, apPlus]);
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
        // Handle symbolId changes
        effect(() => {
            const symbolId = this.symbolId();
            this.removeInlineSymbol();
            if (symbolId) {
                this.addInlineSymbol(symbolId);
            }
        });
        // Handle inlineLabel changes
        effect(() => {
            const inlineLabel = this.inlineLabel();
            this.removeInlineLabel();
            if (inlineLabel) {
                this.addInlineLabel(inlineLabel);
            }
        });
    }
    ngAfterViewInit() {
        if (!this.selectComponent.optionTemplate()) {
            throw new Error('optionTemplate is required for apSelect');
        }
        if (this.selectComponent.groupBy() && !this.selectComponent.optgroupTemplate()) {
            throw new Error('optgroupTemplate is required for apSelect');
        }
    }
    addInlineSymbol(symbolId) {
        this.symbolComponentRef = this.viewContainerRef.createComponent(SymbolComponent);
        this.symbolComponentRef.setInput('symbolId', symbolId);
        this.symbolComponentRef.location.nativeElement.classList.add('inline-symbol');
        this.renderer.insertBefore(this.el.nativeElement.getElementsByClassName('ng-select-container').item(0), this.symbolComponentRef.location.nativeElement, this.el.nativeElement.getElementsByClassName('ng-value-container').item(0));
    }
    removeInlineSymbol() {
        if (this.symbolComponentRef) {
            this.symbolComponentRef.destroy();
            this.symbolComponentRef = undefined;
        }
    }
    addInlineLabel(label) {
        this.labelElement = this.renderer.createElement('label');
        this.renderer.setProperty(this.labelElement, 'textContent', label);
        this.renderer.addClass(this.labelElement, 'inline-label');
        this.renderer.insertBefore(this.el.nativeElement.getElementsByClassName('ng-select-container').item(0), this.labelElement, this.el.nativeElement.getElementsByClassName('ng-value-container').item(0));
    }
    removeInlineLabel() {
        if (this.labelElement) {
            this.renderer.removeChild(this.el.nativeElement.getElementsByClassName('ng-select-container').item(0), this.labelElement);
            this.labelElement = undefined;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: SelectBaseDirective, isStandalone: true, selector: "ng-select[apSelect]", inputs: { inlineLabel: { classPropertyName: "inlineLabel", publicName: "inlineLabel", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ap-select" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'ng-select[apSelect]',
                    standalone: true,
                    host: {
                        class: 'ap-select',
                    },
                }]
        }], ctorParameters: () => [], propDecorators: { inlineLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineLabel", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }] } });

class SelectMultipleDirective {
    selectComponent = inject(NgSelectComponent);
    elementRef = inject(ElementRef);
    originalDisabledState = new WeakMap();
    maxItemsTooltip = input(...(ngDevMode ? [undefined, { debugName: "maxItemsTooltip" }] : /* istanbul ignore next */ []));
    /** Pins items selected at open time to the top of the dropdown. Ignored when `groupBy` is set. */
    pinnedItemsEnabled = input(false, ...(ngDevMode ? [{ debugName: "pinnedItemsEnabled" }] : /* istanbul ignore next */ []));
    valueContainer = null;
    subs = new Subscription();
    constructor() {
        this.selectComponent.multiple.set(true);
        this.selectComponent.closeOnSelect.set(false);
        this.selectComponent.searchable.set(true); // small hack to not closed the dropdown panel when clear an item in value container
        const updateMaxItemsDisabledState = () => this.updateMaxItemsDisabledState();
        this.subs.add(this.selectComponent.addEvent.subscribe(updateMaxItemsDisabledState));
        this.subs.add(this.selectComponent.removeEvent.subscribe(updateMaxItemsDisabledState));
        this.subs.add(this.selectComponent.clearEvent.subscribe(updateMaxItemsDisabledState));
        this.subs.add(this.selectComponent.openEvent.subscribe(() => {
            this.pinSelectedAtTop();
            this.openAtTop();
        }));
    }
    ngAfterViewInit() {
        if (!this.selectComponent.multiLabelTemplate()) {
            throw new Error('multiLabelTemplate is required for apSelectMultiple');
        }
        // Add click handler to toggle dropdown when clicking on the select container
        this.valueContainer = this.elementRef.nativeElement.querySelector('.ng-select-container');
        if (this.valueContainer) {
            this.valueContainer.addEventListener('mousedown', this.onMousedown, true);
        }
        this.updateMaxItemsDisabledState();
    }
    ngOnDestroy() {
        if (this.valueContainer) {
            this.valueContainer.removeEventListener('mousedown', this.onMousedown);
        }
        this.subs.unsubscribe();
    }
    onMousedown = (event) => {
        const target = event.target;
        const clickedOnChipOrClearButton = target.closest('ap-label, ap-tag, .ng-clear-wrapper');
        if (clickedOnChipOrClearButton) {
            return;
        }
        event.preventDefault();
        event.stopPropagation();
        if (this.selectComponent.isOpen()) {
            this.selectComponent.close();
        }
        else {
            this.selectComponent.open();
        }
    };
    // `.ap-option-pinned` persists for the panel's lifetime — deselecting keeps the option pinned until reopen.
    pinSelectedAtTop() {
        if (!this.pinnedItemsEnabled() || this.selectComponent.groupBy())
            return;
        queueMicrotask(() => {
            const panel = document.getElementById(this.selectComponent.dropdownId);
            const firstUnselected = panel?.querySelector('.ng-option:not(.ng-option-selected)');
            if (!panel || !firstUnselected)
                return;
            for (const selected of Array.from(panel.querySelectorAll('.ng-option-selected'))) {
                selected.classList.add('ap-option-pinned');
                firstUnselected.before(selected);
            }
        });
    }
    // On open, ng-select natively marks the last selected option, which ends up scrolling the panel to it.
    // This method removes the mark so that the panel stays scrolled to the top.
    openAtTop() {
        const { itemsList } = this.selectComponent;
        itemsList.unmarkItem();
    }
    updateMaxItemsDisabledState() {
        const max = this.selectComponent.maxSelectedItems();
        if (!max) {
            return;
        }
        const items = this.selectComponent.itemsList.items;
        for (const item of items) {
            if (item.children || this.originalDisabledState.has(item)) {
                continue;
            }
            this.originalDisabledState.set(item, item.disabled ?? false);
        }
        const maxReached = this.selectComponent.itemsList.selectedItems.length >= max;
        for (const item of items) {
            if (item.children) {
                continue;
            }
            const originallyDisabled = this.originalDisabledState.get(item) ?? false;
            item.disabled = originallyDisabled || (maxReached && !item.selected);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: SelectMultipleDirective, isStandalone: true, selector: "ng-select[apSelectMultiple]", inputs: { maxItemsTooltip: { classPropertyName: "maxItemsTooltip", publicName: "maxItemsTooltip", isSignal: true, isRequired: false, transformFunction: null }, pinnedItemsEnabled: { classPropertyName: "pinnedItemsEnabled", publicName: "pinnedItemsEnabled", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectMultipleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-select[apSelectMultiple]',
                    standalone: true,
                    hostDirectives: [
                        {
                            directive: SelectBaseDirective,
                            inputs: ['inlineLabel', 'symbolId'],
                        },
                    ],
                }]
        }], ctorParameters: () => [], propDecorators: { maxItemsTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItemsTooltip", required: false }] }], pinnedItemsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedItemsEnabled", required: false }] }] } });

class DropdownItemMultipleOneLineComponent {
    symbolRegistry = inject(SymbolRegistry);
    selectMultiple = inject(SelectMultipleDirective, { optional: true });
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
    }
    text;
    selected;
    indeterminate = false;
    htmlId;
    disabled = false;
    avatarUrl;
    symbolId;
    disabledTooltip;
    badgeText;
    dividerEnabled = false;
    onlyEnabled = false;
    onlyText = 'Only';
    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
    network = input(...(ngDevMode ? [undefined, { debugName: "network" }] : /* istanbul ignore next */ []));
    symbolColor = input(...(ngDevMode ? [undefined, { debugName: "symbolColor" }] : /* istanbul ignore next */ []));
    symbolTooltipText = input(...(ngDevMode ? [undefined, { debugName: "symbolTooltipText" }] : /* istanbul ignore next */ []));
    selectOnly = output();
    selectionChange = output();
    lockedFeatureClicked = output();
    checkbox;
    onClick($event) {
        if (this.isFeatureLocked()) {
            $event.stopPropagation();
            this.lockedFeatureClicked.emit();
        }
    }
    onSelectOnly() {
        this.selectOnly.emit();
        this.checkbox.focus();
    }
    onCheckboxChange(checked) {
        if (typeof checked === 'boolean') {
            this.selectionChange.emit(checked);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", selectionChange: "selectionChange", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div\n    class=\"option multiple\"\n    [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminate\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\"\n        (change)=\"onCheckboxChange($event)\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <span\n            class=\"option-item\"\n            [class.feature-locked-label]=\"isFeatureLocked()\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n    </ap-checkbox>\n\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\" />\n    }\n\n    @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n        <button\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    }\n</div>\n\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;flex-direction:row;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div\n    class=\"option multiple\"\n    [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminate\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\"\n        (change)=\"onCheckboxChange($event)\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <span\n            class=\"option-item\"\n            [class.feature-locked-label]=\"isFeatureLocked()\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n    </ap-checkbox>\n\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\" />\n    }\n\n    @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n        <button\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    }\n</div>\n\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;flex-direction:row;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"] }]
        }], ctorParameters: () => [], propDecorators: { text: [{
                type: Input,
                args: [{ required: true }]
            }], selected: [{
                type: Input,
                args: [{ required: true }]
            }], indeterminate: [{
                type: Input
            }], htmlId: [{
                type: Input,
                args: [{ required: true }]
            }], disabled: [{
                type: Input
            }], avatarUrl: [{
                type: Input
            }], symbolId: [{
                type: Input
            }], disabledTooltip: [{
                type: Input
            }], badgeText: [{
                type: Input
            }], dividerEnabled: [{
                type: Input
            }], onlyEnabled: [{
                type: Input
            }], onlyText: [{
                type: Input
            }], isFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFeatureLocked", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], network: [{ type: i0.Input, args: [{ isSignal: true, alias: "network", required: false }] }], symbolColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolColor", required: false }] }], symbolTooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolTooltipText", required: false }] }], selectOnly: [{ type: i0.Output, args: ["selectOnly"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], checkbox: [{
                type: ViewChild,
                args: [CheckboxComponent]
            }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class DropdownItemMultipleTwoLinesComponent {
    symbolRegistry = inject(SymbolRegistry);
    selectMultiple = inject(SelectMultipleDirective, { optional: true });
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
    }
    text;
    caption;
    selected;
    htmlId;
    disabled = false;
    avatarUrl;
    symbolId;
    disabledTooltip;
    badgeText;
    dividerEnabled = false;
    onlyEnabled = false;
    onlyText = 'Only';
    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
    network = input(...(ngDevMode ? [undefined, { debugName: "network" }] : /* istanbul ignore next */ []));
    symbolColor = input(...(ngDevMode ? [undefined, { debugName: "symbolColor" }] : /* istanbul ignore next */ []));
    symbolTooltipText = input(...(ngDevMode ? [undefined, { debugName: "symbolTooltipText" }] : /* istanbul ignore next */ []));
    selectOnly = new EventEmitter();
    lockedFeatureClicked = output();
    checkbox;
    onClick($event) {
        if (this.isFeatureLocked()) {
            $event.stopPropagation();
            this.lockedFeatureClicked.emit();
        }
    }
    onSelectOnly() {
        this.selectOnly.emit();
        this.checkbox.focus();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-dropdown-item-multiple-two-lines', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
        }], ctorParameters: () => [], propDecorators: { text: [{
                type: Input,
                args: [{ required: true }]
            }], caption: [{
                type: Input,
                args: [{ required: true }]
            }], selected: [{
                type: Input,
                args: [{ required: true }]
            }], htmlId: [{
                type: Input,
                args: [{ required: true }]
            }], disabled: [{
                type: Input
            }], avatarUrl: [{
                type: Input
            }], symbolId: [{
                type: Input
            }], disabledTooltip: [{
                type: Input
            }], badgeText: [{
                type: Input
            }], dividerEnabled: [{
                type: Input
            }], onlyEnabled: [{
                type: Input
            }], onlyText: [{
                type: Input
            }], isFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFeatureLocked", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], network: [{ type: i0.Input, args: [{ isSignal: true, alias: "network", required: false }] }], symbolColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolColor", required: false }] }], symbolTooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolTooltipText", required: false }] }], selectOnly: [{
                type: Output
            }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], checkbox: [{
                type: ViewChild,
                args: [CheckboxComponent]
            }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class DropdownItemSingleOneLineComponent {
    symbolRegistry = inject(SymbolRegistry);
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
    }
    text;
    selected;
    disabled = false;
    avatarUrl;
    showAvatarInitials = true;
    symbolId;
    disabledTooltip;
    badgeText;
    dividerEnabled = false;
    network = undefined;
    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
    lockedFeatureClicked = output();
    onClick($event) {
        if (this.isFeatureLocked()) {
            $event.stopPropagation();
            this.lockedFeatureClicked.emit();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-dropdown-item-single-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"] }]
        }], ctorParameters: () => [], propDecorators: { text: [{
                type: Input,
                args: [{ required: true }]
            }], selected: [{
                type: Input,
                args: [{ required: true }]
            }], disabled: [{
                type: Input
            }], avatarUrl: [{
                type: Input
            }], showAvatarInitials: [{
                type: Input
            }], symbolId: [{
                type: Input
            }], disabledTooltip: [{
                type: Input
            }], badgeText: [{
                type: Input
            }], dividerEnabled: [{
                type: Input
            }], network: [{
                type: Input
            }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], isFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFeatureLocked", required: false }] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class DropdownItemSingleTwoLinesComponent {
    symbolRegistry = inject(SymbolRegistry);
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
    }
    text;
    caption;
    selected;
    disabled = false;
    avatarUrl;
    symbolId;
    disabledTooltip;
    badgeText;
    dividerEnabled = false;
    network = undefined;
    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
    lockedFeatureClicked = output();
    onClick($event) {
        if (this.isFeatureLocked()) {
            $event.stopPropagation();
            this.lockedFeatureClicked.emit();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-dropdown-item-single-two-lines', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
        }], ctorParameters: () => [], propDecorators: { text: [{
                type: Input,
                args: [{ required: true }]
            }], caption: [{
                type: Input,
                args: [{ required: true }]
            }], selected: [{
                type: Input,
                args: [{ required: true }]
            }], disabled: [{
                type: Input
            }], avatarUrl: [{
                type: Input
            }], symbolId: [{
                type: Input
            }], disabledTooltip: [{
                type: Input
            }], badgeText: [{
                type: Input
            }], dividerEnabled: [{
                type: Input
            }], network: [{
                type: Input
            }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], isFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFeatureLocked", required: false }] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

/** Search input for an ng-select dropdown — place inside its `ng-header-tmp`. */
class DropdownSearchFormComponent {
    searchPlaceholder = '';
    createNewEnabled = false;
    createText = 'Create';
    select;
    inputSearch;
    createNew = new EventEmitter();
    searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : /* istanbul ignore next */ []));
    searchTerm$ = new BehaviorSubject('');
    submitSubscription = null;
    constructor() {
        this.searchTerm$
            .pipe(filter(() => !!this.select), takeUntilDestroyed())
            .subscribe(term => {
            this.searchTermSignal.set(term);
            this.select.filter(term);
        });
    }
    ngOnDestroy() {
        this.submitSubscription?.unsubscribe();
    }
    ngAfterViewInit() {
        setTimeout(() => {
            this.inputSearch.focusInput();
            this.registerKeyboardSubmit();
        }, 100);
    }
    /**
     * Register the keyboard submit event allowing to press enter to select the first item found.
     * And escape to close the dropdown. This is useful for keyboard navigation.
     * Use case: search for an item by typing the first characters and press enter to select it.
     * Furthermore: arrow keys currently don't work in the dropdown search form.
     */
    registerKeyboardSubmit() {
        this.submitSubscription?.unsubscribe();
        this.submitSubscription = this.inputSearch.keyup.subscribe(event => {
            if (event.key === 'Enter') {
                this.select.select(this.select.itemsList.filteredItems[0]);
            }
            else if (event.key === 'Escape') {
                this.select.close();
            }
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }], ngImport: i0, template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n@if (createNewEnabled) {\n    <ap-dropdown-create-new\n        [text]=\"createText\"\n        [searchTerm]=\"searchTermSignal()\"\n        (createNew)=\"createNew.emit($event)\" />\n}\n\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "component", type: DropdownCreateNewComponent, selector: "ap-dropdown-create-new", inputs: ["text", "searchTerm"], outputs: ["createNew"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-dropdown-search-form', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, InputSearchComponent, DropdownCreateNewComponent], template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n@if (createNewEnabled) {\n    <ap-dropdown-create-new\n        [text]=\"createText\"\n        [searchTerm]=\"searchTermSignal()\"\n        (createNew)=\"createNew.emit($event)\" />\n}\n\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
        }], ctorParameters: () => [], propDecorators: { searchPlaceholder: [{
                type: Input
            }], createNewEnabled: [{
                type: Input
            }], createText: [{
                type: Input
            }], select: [{
                type: Input,
                args: [{
                        required: true,
                    }]
            }], inputSearch: [{
                type: ViewChild,
                args: [InputSearchComponent]
            }], createNew: [{
                type: Output
            }] } });

class SelectLabelMultipleComponent {
    displayType = input('label', ...(ngDevMode ? [{ debugName: "displayType" }] : /* istanbul ignore next */ []));
    tagColor = input('grey', ...(ngDevMode ? [{ debugName: "tagColor" }] : /* istanbul ignore next */ []));
    selectedItems = input.required(...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
    bindLabel = input('', ...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
    bindValue = input('', ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
    bindAvatarUrl = input('', ...(ngDevMode ? [{ debugName: "bindAvatarUrl" }] : /* istanbul ignore next */ []));
    bindSymbolId = input('', ...(ngDevMode ? [{ debugName: "bindSymbolId" }] : /* istanbul ignore next */ []));
    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
    bindNetwork = input('', ...(ngDevMode ? [{ debugName: "bindNetwork" }] : /* istanbul ignore next */ []));
    bindTagColor = input('', ...(ngDevMode ? [{ debugName: "bindTagColor" }] : /* istanbul ignore next */ []));
    removeItem = output();
    /**
     * Parent ng-select, resolved through the DI chain of the `ng-multi-label-tmp` template.
     * `optional` so the component still works when rendered outside a ng-select.
     */
    ngSelect = inject(NgSelectComponent, { optional: true });
    /** True when the whole select is disabled/readonly — hides every tag/label remove button. */
    selectDisabled = computed(() => this.ngSelect?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "selectDisabled" }] : /* istanbul ignore next */ []));
    selectedLabels = computed(() => this.selectedItems().map(item => ({
        label: this.bindLabel() ? item[this.bindLabel()] : item,
        avatarUrl: this.bindAvatarUrl() ? item[this.bindAvatarUrl()] : '',
        symbolId: this.bindSymbolId() ? item[this.bindSymbolId()] : null,
        value: item,
        network: this.bindNetwork() ? item[this.bindNetwork()] : undefined,
        tagColor: this.bindTagColor() ? item[this.bindTagColor()] : undefined,
    })), ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
    hiddenCount = signal(0, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
    trackByItem = (_, item) => (this.bindValue() ? item.value[this.bindValue()] : item.value);
    mainContainer = viewChild.required('mainContainer', { read: ElementRef });
    itemsElement = viewChildren('itemElement', { ...(ngDevMode ? { debugName: "itemsElement" } : /* istanbul ignore next */ {}), read: ElementRef });
    responsiveLayout = afterRenderEffect(() => {
        const itemRefs = this.itemsElement();
        if (!itemRefs.length) {
            this.hiddenCount.set(0);
            return;
        }
        const containerEl = this.mainContainer().nativeElement;
        const containerWidth = (containerEl.parentElement?.clientWidth ?? 0) - 30;
        if (containerWidth <= 0)
            return;
        // Reset maxWidth so items aren't constrained by a previous pass
        containerEl.style.maxWidth = '';
        let totalWidth = 0;
        let hiddenCount = 0;
        const itemGap = 4;
        for (const ref of itemRefs) {
            const el = ref.nativeElement;
            const itemWidth = el.getBoundingClientRect().width + itemGap;
            if (totalWidth + itemWidth < containerWidth && !hiddenCount) {
                totalWidth += itemWidth;
                el.style.visibility = 'visible';
            }
            else {
                el.style.visibility = 'hidden';
                hiddenCount++;
            }
        }
        containerEl.style.maxWidth = `${totalWidth}px`;
        this.hiddenCount.set(hiddenCount);
    });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, bindNetwork: { classPropertyName: "bindNetwork", publicName: "bindNetwork", isSignal: true, isRequired: false, transformFunction: null }, bindTagColor: { classPropertyName: "bindTagColor", publicName: "bindTagColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "itemsElement", predicate: ["itemElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #mainContainer class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                #itemElement\n                class=\"item\"\n                color=\"blue\"\n                [removable]=\"!item.value.disabled && !selectDisabled()\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                #itemElement\n                class=\"item text-item\"\n                [clearable]=\"!item.value.disabled && !selectDisabled()\"\n                [color]=\"item.tagColor ?? tagColor()\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\"\n                        [network]=\"item.network\"/>\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-select-label-multiple', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent, SymbolComponent], template: "<div #mainContainer class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                #itemElement\n                class=\"item\"\n                color=\"blue\"\n                [removable]=\"!item.value.disabled && !selectDisabled()\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                #itemElement\n                class=\"item text-item\"\n                [clearable]=\"!item.value.disabled && !selectDisabled()\"\n                [color]=\"item.tagColor ?? tagColor()\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\"\n                        [network]=\"item.network\"/>\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex;width:100%}\n"] }]
        }], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], tagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagColor", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindAvatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindAvatarUrl", required: false }] }], bindSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindSymbolId", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], bindNetwork: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindNetwork", required: false }] }], bindTagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindTagColor", required: false }] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }], mainContainer: [{ type: i0.ViewChild, args: ['mainContainer', { ...{ read: ElementRef }, isSignal: true }] }], itemsElement: [{ type: i0.ViewChildren, args: ['itemElement', { ...{ read: ElementRef }, isSignal: true }] }] } });

class SelectLabelSingleComponent {
    displayType = input('text', ...(ngDevMode ? [{ debugName: "displayType" }] : /* istanbul ignore next */ []));
    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
    avatarUrl = input(...(ngDevMode ? [undefined, { debugName: "avatarUrl" }] : /* istanbul ignore next */ []));
    network = input(undefined, ...(ngDevMode ? [{ debugName: "network" }] : /* istanbul ignore next */ []));
    showAvatarInitials = input(true, ...(ngDevMode ? [{ debugName: "showAvatarInitials" }] : /* istanbul ignore next */ []));
    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (displayType()) {\n    @case ('text') {\n        <span\n            class=\"text-item\"\n            [title]=\"label()\">\n            {{ label() }}\n        </span>\n    }\n    @case ('label') {\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label()\" />\n    }\n    @case ('tag') {\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            @if (avatarUrl !== undefined) {\n                <ap-avatar\n                    [rounded]=\"roundedAvatar()\"\n                    [size]=\"16\"\n                    [username]=\"label()\"\n                    [showInitials]=\"true\"\n                    [profilePicture]=\"avatarUrl()\" />\n            }\n            {{ label() }}\n        </ap-tag>\n    }\n    @case ('withAvatar') {\n        @if (avatarUrl()) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [username]=\"label()\"\n                [showInitials]=\"showAvatarInitials()\"\n                [profilePicture]=\"avatarUrl()\"\n                [network]=\"network()\" />\n        }\n        <span class=\"text-item\">\n            {{ label() }}\n        </span>\n    }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-select-label-single', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent], template: "@switch (displayType()) {\n    @case ('text') {\n        <span\n            class=\"text-item\"\n            [title]=\"label()\">\n            {{ label() }}\n        </span>\n    }\n    @case ('label') {\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label()\" />\n    }\n    @case ('tag') {\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            @if (avatarUrl !== undefined) {\n                <ap-avatar\n                    [rounded]=\"roundedAvatar()\"\n                    [size]=\"16\"\n                    [username]=\"label()\"\n                    [showInitials]=\"true\"\n                    [profilePicture]=\"avatarUrl()\" />\n            }\n            {{ label() }}\n        </ap-tag>\n    }\n    @case ('withAvatar') {\n        @if (avatarUrl()) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [username]=\"label()\"\n                [showInitials]=\"showAvatarInitials()\"\n                [profilePicture]=\"avatarUrl()\"\n                [network]=\"network()\" />\n        }\n        <span class=\"text-item\">\n            {{ label() }}\n        </span>\n    }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"] }]
        }], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], network: [{ type: i0.Input, args: [{ isSignal: true, alias: "network", required: false }] }], showAvatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatarInitials", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }] } });

class SelectSingleDirective {
    selectComponent = inject(NgSelectComponent);
    constructor() {
        this.selectComponent.multiple.set(false);
        this.selectComponent.closeOnSelect.set(true);
    }
    ngAfterViewInit() {
        if (!this.selectComponent.labelTemplate()) {
            throw new Error('labelTemplate is required for apSelectSingle');
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectSingleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: SelectSingleDirective, isStandalone: true, selector: "ng-select[apSelectSingle]", hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectSingleDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: 'ng-select[apSelectSingle]',
                    standalone: true,
                    hostDirectives: [
                        {
                            directive: SelectBaseDirective,
                            inputs: ['inlineLabel', 'symbolId'],
                        },
                    ],
                }]
        }], ctorParameters: () => [] });

class ApSelectModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, imports: [SelectMultipleDirective,
            SelectSingleDirective,
            DropdownItemSingleOneLineComponent,
            DropdownItemSingleTwoLinesComponent,
            DropdownItemMultipleOneLineComponent,
            DropdownItemMultipleTwoLinesComponent,
            SelectLabelSingleComponent,
            SelectLabelMultipleComponent,
            DropdownSearchFormComponent,
            DropdownCreateNewComponent,
            DropdownGroupItemComponent,
            NgSelectModule], exports: [SelectMultipleDirective,
            SelectSingleDirective,
            DropdownItemSingleOneLineComponent,
            DropdownItemSingleTwoLinesComponent,
            DropdownItemMultipleOneLineComponent,
            DropdownItemMultipleTwoLinesComponent,
            SelectLabelSingleComponent,
            SelectLabelMultipleComponent,
            DropdownSearchFormComponent,
            DropdownCreateNewComponent,
            DropdownGroupItemComponent,
            NgSelectModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, imports: [DropdownItemSingleOneLineComponent,
            DropdownItemSingleTwoLinesComponent,
            DropdownItemMultipleOneLineComponent,
            DropdownItemMultipleTwoLinesComponent,
            SelectLabelSingleComponent,
            SelectLabelMultipleComponent,
            DropdownSearchFormComponent,
            DropdownCreateNewComponent,
            DropdownGroupItemComponent,
            NgSelectModule, NgSelectModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        SelectMultipleDirective,
                        SelectSingleDirective,
                        DropdownItemSingleOneLineComponent,
                        DropdownItemSingleTwoLinesComponent,
                        DropdownItemMultipleOneLineComponent,
                        DropdownItemMultipleTwoLinesComponent,
                        SelectLabelSingleComponent,
                        SelectLabelMultipleComponent,
                        DropdownSearchFormComponent,
                        DropdownCreateNewComponent,
                        DropdownGroupItemComponent,
                        NgSelectModule,
                    ],
                    exports: [
                        SelectMultipleDirective,
                        SelectSingleDirective,
                        DropdownItemSingleOneLineComponent,
                        DropdownItemSingleTwoLinesComponent,
                        DropdownItemMultipleOneLineComponent,
                        DropdownItemMultipleTwoLinesComponent,
                        SelectLabelSingleComponent,
                        SelectLabelMultipleComponent,
                        DropdownSearchFormComponent,
                        DropdownCreateNewComponent,
                        DropdownGroupItemComponent,
                        NgSelectModule,
                    ],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ApSelectModule, DropdownCreateNewComponent, DropdownGroupItemComponent, DropdownItemMultipleOneLineComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent, DropdownSearchFormComponent, SelectBaseDirective, SelectLabelMultipleComponent, SelectLabelSingleComponent, SelectMultipleDirective, SelectSingleDirective };
//# sourceMappingURL=agorapulse-ui-components-select.mjs.map
