@agorapulse/ui-components 20.4.11 → 20.4.13

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, computed, viewChild, viewChildren, afterRenderEffect, 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], 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 }]
@@ -435,86 +625,54 @@ class SelectLabelMultipleComponent {
     roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
     bindNetwork = input('', ...(ngDevMode ? [{ debugName: "bindNetwork" }] : []));
     removeItem = output();
-    elementRef = inject(ElementRef);
-    injector = inject(EnvironmentInjector);
-    selectedLabels = computed(() => this.selectedItems().map(item => {
-        const label = this.bindLabel() ? item[this.bindLabel()] : item;
-        // Get the uppercase and lowercase characters count
-        const uppercaseCharMatch = label.match(/[A-Z]/g);
-        const uppercaseCharCount = uppercaseCharMatch?.length ?? 0;
-        const lowercaseCharCount = label.length - uppercaseCharCount;
-        // Approximate upper and lower case characters width (14px font size)
-        const approximateUppercaseCharWidth = 14;
-        const approximateLowercaseCharWidth = 8;
-        // Calculate approximate character width
-        const approximateCharWidth = (uppercaseCharCount * approximateUppercaseCharWidth + lowercaseCharCount * approximateLowercaseCharWidth) / label.length;
-        // Maximum character length that can fit in the container (substract icons and padding)
-        const maxCharLength = (this.valueContainerWidth() - 24 - 8 - 20 - 8) / approximateCharWidth;
-        // Last index of the character that can fit in the container
-        const ellipsisLastIndex = Math.min(label.length, maxCharLength);
-        // Substract the ellipsis characters (...) length if the label is truncated
-        const lastIndex = ellipsisLastIndex + 1 < label.length ? ellipsisLastIndex - 2 : ellipsisLastIndex;
-        // Get the truncated label
-        const truncatedLabel = label.slice(0, lastIndex);
-        // Return the label with ellipsis if it's truncated
-        const ellipsisLabel = truncatedLabel.length < label.length ? truncatedLabel + '...' : truncatedLabel;
-        return {
-            label: ellipsisLabel,
-            avatarUrl: this.bindAvatarUrl() ? item[this.bindAvatarUrl()] : '',
-            symbolId: this.bindSymbolId() ? item[this.bindSymbolId()] : null,
-            value: item,
-            network: this.bindNetwork() ? item[this.bindNetwork()] : undefined,
-        };
-    }), ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
-    valueContainerWidth = signal(0, ...(ngDevMode ? [{ debugName: "valueContainerWidth" }] : []));
+    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,
+    })), ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
     hiddenCount = signal(0, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : []));
     trackByItem = (_, item) => (this.bindValue() ? item.value[this.bindValue()] : item.value);
-    ngAfterViewInit() {
-        const parentWidth = this.elementRef.nativeElement.parentElement?.offsetWidth;
-        this.valueContainerWidth.set(parentWidth ?? 0);
-        runInInjectionContext(this.injector, () => {
-            effect(() => {
-                const selectedValues = this.selectedItems();
-                const selectValueContainerWidth = this.valueContainerWidth() - 30;
-                const timeout = setTimeout(() => {
-                    this.calculateResponsiveLabels(selectValueContainerWidth, selectedValues);
-                }, 100);
-                return () => {
-                    clearTimeout(timeout);
-                };
-            });
-        });
-    }
-    calculateResponsiveLabels(containerWidth, selectedValues) {
-        if (containerWidth === 0 || !selectedValues.length) {
+    mainContainer = viewChild.required('mainContainer', { read: ElementRef });
+    itemsElement = viewChildren('itemElement', ...(ngDevMode ? [{ debugName: "itemsElement", read: ElementRef }] : [{ 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;
-        const items = this.elementRef.nativeElement.getElementsByClassName('item');
-        for (let index = 0; index < items.length; index++) {
-            const item = items[index];
-            const itemWidth = item.clientWidth + itemGap;
+        for (const ref of itemRefs) {
+            const el = ref.nativeElement;
+            const itemWidth = el.getBoundingClientRect().width + itemGap;
             if (totalWidth + itemWidth < containerWidth && !hiddenCount) {
                 totalWidth += itemWidth;
-                item.style.visibility = 'visible';
+                el.style.visibility = 'visible';
             }
             else {
-                item.style.visibility = 'hidden';
+                el.style.visibility = 'hidden';
                 hiddenCount++;
             }
         }
-        this.elementRef.nativeElement.getElementsByClassName('multiple-item')[0].style.maxWidth = `${totalWidth}px`;
+        containerEl.style.maxWidth = `${totalWidth}px`;
         this.hiddenCount.set(hiddenCount);
-    }
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 } }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                class=\"item\"\n                color=\"blue\"\n                [removable]=\"!item.value.disabled\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"item text-item\"\n                [clearable]=\"!item.value.disabled\"\n                [color]=\"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}\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 } }, 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\"\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\"\n                [color]=\"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: "20.3.18", 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 class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                class=\"item\"\n                color=\"blue\"\n                [removable]=\"!item.value.disabled\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"item text-item\"\n                [clearable]=\"!item.value.disabled\"\n                [color]=\"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}\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 }] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }] } });
+            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\"\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\"\n                [color]=\"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 }] }], 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" }] : []));
@@ -524,152 +682,13 @@ class SelectLabelSingleComponent {
     showAvatarInitials = input(true, ...(ngDevMode ? [{ debugName: "showAvatarInitials" }] : []));
     roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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        <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"], 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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: "20.3.18", 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        <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"] }]
+            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 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() {