@agorapulse/ui-components 20.4.10 → 20.4.12

package/fesm2022/agorapulse-ui-components-select.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, inject, input, output, HostListener, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, signal, TemplateRef, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import { Input, ViewEncapsulation, Component, input, inject, ElementRef, Renderer2, ViewContainerRef, effect, Directive, output, HostListener, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, signal, TemplateRef, EnvironmentInjector, computed, runInInjectionContext, NgModule } from '@angular/core';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 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 { SymbolRegistry, SymbolComponent, apCheck, apPlus } from '@agorapulse/ui-symbol';
+import { SymbolRegistry, apCheck, apPlus, SymbolComponent } from '@agorapulse/ui-symbol';
 import { LoaderComponent } from '@agorapulse/ui-animations';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -35,12 +35,34 @@ class DropdownGroupItemComponent {
     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: "20.3.18", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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    @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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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: "20.3.18", 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    @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"] }]
+            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 }]
@@ -62,8 +84,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
+class SelectBaseDirective {
+    inlineLabel = input(...(ngDevMode ? [undefined, { debugName: "inlineLabel" }] : []));
+    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : []));
+    selectComponent = inject(NgSelectComponent);
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    viewContainerRef = inject(ViewContainerRef);
+    symbolRegistry = inject(SymbolRegistry);
+    symbolComponentRef;
+    labelElement;
+    constructor() {
+        this.selectComponent.appendTo = 'body';
+        this.selectComponent.searchable = false;
+        this.selectComponent.clearable = false;
+        this.selectComponent.markFirst = false;
+        this.selectComponent.selectableGroupAsModel = false;
+        this.selectComponent.tabIndex = 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: "20.3.18", ngImport: i0, type: SelectBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", 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: "20.3.18", 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" }] : []));
+    valueContainer = null;
+    constructor() {
+        this.selectComponent.multiple = true;
+        this.selectComponent.closeOnSelect = false;
+        this.selectComponent.searchable = true; // small hack to not closed the dropdown panel when clear an item in value container
+        this.selectComponent.addEvent.subscribe(() => this.updateMaxItemsDisabledState());
+        this.selectComponent.removeEvent.subscribe(() => this.updateMaxItemsDisabledState());
+        this.selectComponent.clearEvent.subscribe(() => this.updateMaxItemsDisabledState());
+    }
+    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);
+        }
+    }
+    onMousedown = (event) => {
+        // Only toggle if clicking on the container itself, not on the items inside
+        const target = event.target;
+        if (!target.closest('ap-select-label-multiple') && !target.closest('.ng-clear-wrapper')) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.selectComponent.isOpen) {
+                this.selectComponent.close();
+            }
+            else {
+                this.selectComponent.open();
+            }
+        }
+    };
+    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: "20.3.18", ngImport: i0, type: SelectMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: SelectMultipleDirective, isStandalone: true, selector: "ng-select[apSelectMultiple]", inputs: { maxItemsTooltip: { classPropertyName: "maxItemsTooltip", publicName: "maxItemsTooltip", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectMultipleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    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 }] }] } });
+
 class DropdownItemMultipleOneLineComponent {
     symbolRegistry = inject(SymbolRegistry);
+    selectMultiple = inject(SelectMultipleDirective, { optional: true });
     constructor() {
         this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
     }
@@ -103,11 +292,11 @@ class DropdownItemMultipleOneLineComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, 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\"\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        [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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, 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        [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: "20.3.18", 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, SymbolComponent, SymbolComponent], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\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        [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"] }]
+            args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective, SymbolComponent, SymbolComponent], 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        [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 }]
@@ -143,6 +332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 class DropdownItemMultipleTwoLinesComponent {
     symbolRegistry = inject(SymbolRegistry);
+    selectMultiple = inject(SelectMultipleDirective, { optional: true });
     constructor() {
         this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
     }
@@ -177,11 +367,11 @@ class DropdownItemMultipleTwoLinesComponent {
         this.checkbox.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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\"\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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: "20.3.18", 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\"\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"] }]
+            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 }]
@@ -531,145 +721,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             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        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [username]=\"label()\"\n            [showInitials]=\"showAvatarInitials()\"\n            [profilePicture]=\"avatarUrl()\"\n            [network]=\"network()\" />\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 SelectBaseDirective {
-    inlineLabel = input(...(ngDevMode ? [undefined, { debugName: "inlineLabel" }] : []));
-    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : []));
-    selectComponent = inject(NgSelectComponent);
-    el = inject(ElementRef);
-    renderer = inject(Renderer2);
-    viewContainerRef = inject(ViewContainerRef);
-    symbolRegistry = inject(SymbolRegistry);
-    symbolComponentRef;
-    labelElement;
-    constructor() {
-        this.selectComponent.appendTo = 'body';
-        this.selectComponent.searchable = false;
-        this.selectComponent.clearable = false;
-        this.selectComponent.markFirst = false;
-        this.selectComponent.selectableGroupAsModel = false;
-        this.selectComponent.tabIndex = 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: "20.3.18", ngImport: i0, type: SelectBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", 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: "20.3.18", 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);
-    valueContainer = null;
-    constructor() {
-        this.selectComponent.multiple = true;
-        this.selectComponent.closeOnSelect = false;
-        this.selectComponent.searchable = true; // small hack to not closed the dropdown panel when clear an item in value container
-    }
-    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);
-        }
-    }
-    ngOnDestroy() {
-        if (this.valueContainer) {
-            this.valueContainer.removeEventListener('mousedown', this.onMousedown);
-        }
-    }
-    onMousedown = (event) => {
-        // Only toggle if clicking on the container itself, not on the items inside
-        const target = event.target;
-        if (!target.closest('ap-select-label-multiple') && !target.closest('.ng-clear-wrapper')) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.selectComponent.isOpen) {
-                this.selectComponent.close();
-            }
-            else {
-                this.selectComponent.open();
-            }
-        }
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: SelectMultipleDirective, isStandalone: true, selector: "ng-select[apSelectMultiple]", hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectMultipleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'ng-select[apSelectMultiple]',
-                    standalone: true,
-                    hostDirectives: [
-                        {
-                            directive: SelectBaseDirective,
-                            inputs: ['inlineLabel', 'symbolId'],
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [] });
-
 class SelectSingleDirective {
     selectComponent = inject(NgSelectComponent);
     constructor() {