@agorapulse/ui-components 17.2.0 → 17.2.1-beta.1

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

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, signal, TemplateRef, input, output, inject, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, Input, input, EventEmitter, output, ChangeDetectionStrategy, Output, ViewChild, HostListener, signal, TemplateRef, inject, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, 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 { SymbolComponent, SymbolRegistry, apCheck, apPlus } from '@agorapulse/ui-symbol';
-import { LoaderComponent } from '@agorapulse/ui-animations';
 import { InputDirective } from '@agorapulse/ui-components/input';
 import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
@@ -37,7 +36,7 @@ class DropdownGroupItemComponent {
         return this.children.every((child) => child.disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", 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: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", 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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownGroupItemComponent, decorators: [{
             type: Component,
@@ -75,18 +74,27 @@ class DropdownItemMultipleOneLineComponent {
     dividerEnabled = false;
     onlyEnabled = false;
     onlyText;
+    isFeatureLocked = input(false);
+    roundedAvatar = input(true);
     selectOnly = new EventEmitter();
+    lockedFeatureClicked = output();
     checkbox;
+    onClick($event) {
+        if (this.isFeatureLocked()) {
+            $event.stopPropagation();
+            this.lockedFeatureClicked.emit();
+        }
+    }
     onSelectOnly() {
         this.selectOnly.emit();
         this.checkbox.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: "text", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, 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\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\n        }\n        <span\n            class=\"option-item\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n\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-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { 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: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", 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 } }, 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #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        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\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\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\n    </ap-checkbox>\n</div>\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)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { 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: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-dropdown-item-multiple-one-line', standalone: true, 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\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\n        }\n        <span\n            class=\"option-item\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n\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-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}\n"] }]
+            args: [{ selector: 'ap-dropdown-item-multiple-one-line', standalone: true, 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 class=\"option multiple\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #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        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\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\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\n    </ap-checkbox>\n</div>\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)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"] }]
         }], propDecorators: { text: [{
                 type: Input,
                 args: [{ required: true }]
@@ -117,6 +125,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             }], checkbox: [{
                 type: ViewChild,
                 args: [CheckboxComponent]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
 class DropdownItemMultipleTwoLinesComponent {
@@ -132,18 +143,27 @@ class DropdownItemMultipleTwoLinesComponent {
     dividerEnabled = false;
     onlyEnabled = false;
     onlyText;
+    isFeatureLocked = input(false);
+    roundedAvatar = input(true);
     selectOnly = new EventEmitter();
+    lockedFeatureClicked = output();
     checkbox;
+    onClick($event) {
+        if (this.isFeatureLocked()) {
+            $event.stopPropagation();
+            this.lockedFeatureClicked.emit();
+        }
+    }
     onSelectOnly() {
         this.selectOnly.emit();
         this.checkbox.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, 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\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\n        }\n        <div class=\"texts\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n        @if (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: ["color", "symbolId", "size"] }, { 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: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", 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 } }, 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        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\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: ["color", "symbolId", "size"] }, { 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: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-dropdown-item-multiple-two-lines', standalone: true, 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\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\n        }\n        <div class=\"texts\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n        @if (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', standalone: true, 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        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\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"] }]
         }], propDecorators: { text: [{
                 type: Input,
                 args: [{ required: true }]
@@ -177,6 +197,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             }], checkbox: [{
                 type: ViewChild,
                 args: [CheckboxComponent]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
 class DropdownItemSingleOneLineComponent {
@@ -184,17 +207,27 @@ class DropdownItemSingleOneLineComponent {
     selected;
     disabled = false;
     avatarUrl;
+    showAvatarInitials = true;
     symbolId;
     disabledTooltip;
     badgeText;
     dividerEnabled = false;
     network = undefined;
+    roundedAvatar = input(true);
+    isFeatureLocked = input(false);
+    lockedFeatureClicked = output();
+    onClick($event) {
+        if (this.isFeatureLocked()) {
+            $event.stopPropagation();
+            this.lockedFeatureClicked.emit();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: "text", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", network: "network" }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-dropdown-item-single-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}\n"] }]
+            args: [{ selector: 'ap-dropdown-item-single-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"] }]
         }], propDecorators: { text: [{
                 type: Input,
                 args: [{ required: true }]
@@ -205,6 +238,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 type: Input
             }], avatarUrl: [{
                 type: Input
+            }], showAvatarInitials: [{
+                type: Input
             }], symbolId: [{
                 type: Input
             }], disabledTooltip: [{
@@ -215,6 +250,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 type: Input
             }], network: [{
                 type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
 class DropdownItemSingleTwoLinesComponent {
@@ -228,12 +266,21 @@ class DropdownItemSingleTwoLinesComponent {
     badgeText;
     dividerEnabled = false;
     network = undefined;
+    roundedAvatar = input(true);
+    isFeatureLocked = input(false);
+    lockedFeatureClicked = output();
+    onClick($event) {
+        if (this.isFeatureLocked()) {
+            $event.stopPropagation();
+            this.lockedFeatureClicked.emit();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", network: "network" }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-dropdown-item-single-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'ap-dropdown-item-single-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { text: [{
                 type: Input,
                 args: [{ required: true }]
@@ -257,8 +304,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 type: Input
             }], network: [{
                 type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 
+// import { LoaderComponent } from '@agorapulse/ui-animations';
 class DropdownSearchFormComponent {
     searchPlaceholder = '';
     createNewEnabled = false;
@@ -271,6 +322,7 @@ class DropdownSearchFormComponent {
     createNew = new EventEmitter();
     searchTermSignal = signal('');
     searchTerm$ = new BehaviorSubject('');
+    submitSubscription = null;
     constructor() {
         this.searchTerm$
             .pipe(filter(() => !!this.select), takeUntilDestroyed())
@@ -279,25 +331,51 @@ class DropdownSearchFormComponent {
             this.select.filter(term);
         });
     }
+    ngOnDestroy() {
+        this.submitSubscription?.unsubscribe();
+    }
     ngAfterViewInit() {
         setTimeout(() => {
             this.inputSearch.focusInput();
+            this.registerKeyboardSubmit();
         }, 100);
         this.select.notFoundTemplate = this.notFoundTpl;
         this.select.loadingTextTemplate = this.loadingTpl;
+        // validate the current row on keypress
         if (this.createNewEnabled) {
             this.select.footerTemplate = this.createNewTpl;
         }
     }
+    /**
+     * Register the keyboard submit event allowing to press enter to select the first item found.
+     * And escape to close the dropdown. This is useful for keyboard navigation.
+     * Use case: search for an item by typing the first characters and press enter to select it.
+     * Furthermore: arrow keys currently don't work in the dropdown search form.
+     */
+    registerKeyboardSubmit() {
+        this.submitSubscription?.unsubscribe();
+        this.submitSubscription = this.inputSearch.keyup.subscribe(event => {
+            if (event.key === 'Enter') {
+                this.select.select(this.select.itemsList.filteredItems[0]);
+            }
+            else if (event.key === 'Escape') {
+                this.select.close();
+            }
+        });
+    }
     onCreateNew() {
         this.createNew.emit(this.searchTermSignal());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }, { propertyName: "notFoundTpl", first: true, predicate: ["notFoundTpl"], descendants: true, read: TemplateRef }, { propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true, read: TemplateRef }, { propertyName: "createNewTpl", first: true, predicate: ["createNewTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n    <div class=\"option not-found\">\n        <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n    </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n    <div class=\"loading-state\">\n        <ap-loader diameter=\"30\" />\n        <span>\n            {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #createNewTpl\n    let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"plus\"\n            size=\"sm\" />\n        <span>\n            {{ createText }}\n            {{ searchTerm ? searchTerm : '' }}\n        </span>\n    </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }, { propertyName: "notFoundTpl", first: true, predicate: ["notFoundTpl"], descendants: true, read: TemplateRef }, { propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true, read: TemplateRef }, { propertyName: "createNewTpl", first: true, predicate: ["createNewTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n    <div class=\"option not-found\">\n        <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n    </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n    <div class=\"loading-state\">\n        <!-- <ap-loader diameter=\"30\" /> -->\n        <span>\n            {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #createNewTpl\n    let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"plus\"\n            size=\"sm\" />\n        <span>\n            {{ createText }}\n            {{ searchTerm ? searchTerm : '' }}\n        </span>\n    </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 
+                // LoaderComponent, 
+                InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-dropdown-search-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [InputGroupComponent, InputDirective, SymbolComponent, FormsModule, LoaderComponent, InputSearchComponent], template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n    <div class=\"option not-found\">\n        <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n    </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n    <div class=\"loading-state\">\n        <ap-loader diameter=\"30\" />\n        <span>\n            {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #createNewTpl\n    let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"plus\"\n            size=\"sm\" />\n        <span>\n            {{ createText }}\n            {{ searchTerm ? searchTerm : '' }}\n        </span>\n    </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'ap-dropdown-search-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [InputGroupComponent, InputDirective, SymbolComponent, FormsModule,
+                        // LoaderComponent, 
+                        InputSearchComponent], template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n    <div class=\"option not-found\">\n        <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n    </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n    <div class=\"loading-state\">\n        <!-- <ap-loader diameter=\"30\" /> -->\n        <span>\n            {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #createNewTpl\n    let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"plus\"\n            size=\"sm\" />\n        <span>\n            {{ createText }}\n            {{ searchTerm ? searchTerm : '' }}\n        </span>\n    </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchPlaceholder: [{
                 type: Input
             }], createNewEnabled: [{
@@ -332,12 +410,33 @@ class SelectLabelMultipleComponent {
     bindValue = input('');
     bindAvatarUrl = input('');
     bindSymbolId = input('');
+    roundedAvatar = input(true);
     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: this.bindLabel() ? item[this.bindLabel()] : item,
+            label: ellipsisLabel,
             avatarUrl: this.bindAvatarUrl() ? item[this.bindAvatarUrl()] : '',
             symbolId: this.bindSymbolId() ? item[this.bindSymbolId()] : null,
             value: item,
@@ -386,11 +485,11 @@ class SelectLabelMultipleComponent {
         this.hiddenCount.set(hiddenCount);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", 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 } }, 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=\"true\"\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=\"true\"\n                color=\"grey\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\" />\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                color=\"grey\"\n                clearable=\"false\">\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", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", 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 } }, 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=\"true\"\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=\"true\"\n                color=\"grey\"\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                } @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                color=\"grey\"\n                clearable=\"false\">\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", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-select-label-multiple', standalone: true, 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=\"true\"\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=\"true\"\n                color=\"grey\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\" />\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                color=\"grey\"\n                clearable=\"false\">\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"] }]
+            args: [{ selector: 'ap-select-label-multiple', standalone: true, 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=\"true\"\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=\"true\"\n                color=\"grey\"\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                } @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                color=\"grey\"\n                clearable=\"false\">\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"] }]
         }] });
 
 class SelectLabelSingleComponent {
@@ -398,12 +497,14 @@ class SelectLabelSingleComponent {
     label;
     avatarUrl;
     network = undefined;
+    showAvatarInitials = true;
+    roundedAvatar = input(true);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: "displayType", label: "label", avatarUrl: "avatarUrl", network: "network" }, 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                    [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            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"true\"\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", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, 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", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-select-label-single', standalone: true, 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                    [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            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"true\"\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', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent], template: "@switch (displayType) {\n    @case ('text') {\n        <span\n            class=\"text-item\"\n            [title]=\"label\">\n            {{ label }}\n        </span>\n    }\n    @case ('label') {\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label\" />\n    }\n    @case ('tag') {\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            @if (avatarUrl !== undefined) {\n                <ap-avatar\n                    [rounded]=\"roundedAvatar()\"\n                    [size]=\"16\"\n                    [username]=\"label\"\n                    [showInitials]=\"true\"\n                    [profilePicture]=\"avatarUrl\" />\n            }\n            {{ label }}\n        </ap-tag>\n    }\n    @case ('withAvatar') {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"showAvatarInitials\"\n            [profilePicture]=\"avatarUrl\"\n            [network]=\"network\" />\n        <span class=\"text-item\">\n            {{ label }}\n        </span>\n    }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"] }]
         }], propDecorators: { displayType: [{
                 type: Input
             }], label: [{
@@ -415,6 +516,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 type: Input
             }], network: [{
                 type: Input
+            }], showAvatarInitials: [{
+                type: Input
             }] } });
 
 class SelectBaseDirective {