@agorapulse/ui-components 20.4.32 → 21.0.0

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

@@ -57,10 +57,10 @@ class DropdownGroupItemComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DropdownGroupItemComponent, isStandalone: true, selector: "ap-dropdown-group-item", inputs: { groupLabel: "groupLabel", groupTag: "groupTag", selectableGroup: "selectableGroup", children: "children", select: "select", disabled: "disabled", disabledTooltip: "disabledTooltip" }, ngImport: i0, template: "<div\n    class=\"group\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"\n    (click)=\"onGroupClick($event)\">\n    @if (selectableGroup) {\n        <ap-checkbox\n            [name]=\"'option-group-selection-' + groupLabel\"\n            [disabled]=\"isGroupDisabled() || disabled\"\n            [indeterminate]=\"isGroupIntermediate()\"\n            [checked]=\"isGroupChecked()\">\n            <span class=\"group-label\">\n                {{ groupLabel }}\n            </span>\n            @if (groupTag) {\n                <ap-badge color=\"blue\">\n                    {{ groupTag }}\n                </ap-badge>\n            }\n        </ap-checkbox>\n    } @else {\n        <span\n            class=\"group-label\"\n            [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        @if (groupTag) {\n            <ap-badge color=\"blue\">\n                {{ groupTag }}\n            </ap-badge>\n        }\n    }\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownGroupItemComponent, isStandalone: true, selector: "ap-dropdown-group-item", inputs: { groupLabel: "groupLabel", groupTag: "groupTag", selectableGroup: "selectableGroup", children: "children", select: "select", disabled: "disabled", disabledTooltip: "disabledTooltip" }, ngImport: i0, template: "<div\n    class=\"group\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"\n    (click)=\"onGroupClick($event)\">\n    @if (selectableGroup) {\n        <ap-checkbox\n            [name]=\"'option-group-selection-' + groupLabel\"\n            [disabled]=\"isGroupDisabled() || disabled\"\n            [indeterminate]=\"isGroupIntermediate()\"\n            [checked]=\"isGroupChecked()\">\n            <span class=\"group-label\">\n                {{ groupLabel }}\n            </span>\n            @if (groupTag) {\n                <ap-badge color=\"blue\">\n                    {{ groupTag }}\n                </ap-badge>\n            }\n        </ap-checkbox>\n    } @else {\n        <span\n            class=\"group-label\"\n            [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        @if (groupTag) {\n            <ap-badge color=\"blue\">\n                {{ groupTag }}\n            </ap-badge>\n        }\n    }\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownGroupItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownGroupItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-dropdown-group-item', encapsulation: ViewEncapsulation.None, imports: [BadgeComponent, CheckboxComponent, TooltipDirective], template: "<div\n    class=\"group\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"\n    (click)=\"onGroupClick($event)\">\n    @if (selectableGroup) {\n        <ap-checkbox\n            [name]=\"'option-group-selection-' + groupLabel\"\n            [disabled]=\"isGroupDisabled() || disabled\"\n            [indeterminate]=\"isGroupIntermediate()\"\n            [checked]=\"isGroupChecked()\">\n            <span class=\"group-label\">\n                {{ groupLabel }}\n            </span>\n            @if (groupTag) {\n                <ap-badge color=\"blue\">\n                    {{ groupTag }}\n                </ap-badge>\n            }\n        </ap-checkbox>\n    } @else {\n        <span\n            class=\"group-label\"\n            [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        @if (groupTag) {\n            <ap-badge color=\"blue\">\n                {{ groupTag }}\n            </ap-badge>\n        }\n    }\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"] }]
         }], propDecorators: { groupLabel: [{
@@ -85,8 +85,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 class SelectBaseDirective {
-    inlineLabel = input(...(ngDevMode ? [undefined, { debugName: "inlineLabel" }] : []));
-    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : []));
+    inlineLabel = input(...(ngDevMode ? [undefined, { debugName: "inlineLabel" }] : /* istanbul ignore next */ []));
+    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : /* istanbul ignore next */ []));
     selectComponent = inject(NgSelectComponent);
     el = inject(ElementRef);
     renderer = inject(Renderer2);
@@ -152,10 +152,10 @@ class SelectBaseDirective {
             this.labelElement = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: SelectBaseDirective, isStandalone: true, selector: "ng-select[apSelect]", inputs: { inlineLabel: { classPropertyName: "inlineLabel", publicName: "inlineLabel", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ap-select" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: SelectBaseDirective, isStandalone: true, selector: "ng-select[apSelect]", inputs: { inlineLabel: { classPropertyName: "inlineLabel", publicName: "inlineLabel", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ap-select" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -171,9 +171,9 @@ class SelectMultipleDirective {
     selectComponent = inject(NgSelectComponent);
     elementRef = inject(ElementRef);
     originalDisabledState = new WeakMap();
-    maxItemsTooltip = input(...(ngDevMode ? [undefined, { debugName: "maxItemsTooltip" }] : []));
+    maxItemsTooltip = input(...(ngDevMode ? [undefined, { debugName: "maxItemsTooltip" }] : /* istanbul ignore next */ []));
     /** Pins items selected at open time to the top of the dropdown. Ignored when `groupBy` is set. */
-    pinnedItemsEnabled = input(false, ...(ngDevMode ? [{ debugName: "pinnedItemsEnabled" }] : []));
+    pinnedItemsEnabled = input(false, ...(ngDevMode ? [{ debugName: "pinnedItemsEnabled" }] : /* istanbul ignore next */ []));
     valueContainer = null;
     subs = new Subscription();
     constructor() {
@@ -251,10 +251,10 @@ class SelectMultipleDirective {
             item.disabled = originallyDisabled || (maxReached && !item.selected);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: SelectMultipleDirective, isStandalone: true, selector: "ng-select[apSelectMultiple]", inputs: { maxItemsTooltip: { classPropertyName: "maxItemsTooltip", publicName: "maxItemsTooltip", isSignal: true, isRequired: false, transformFunction: null }, pinnedItemsEnabled: { classPropertyName: "pinnedItemsEnabled", publicName: "pinnedItemsEnabled", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: SelectMultipleDirective, isStandalone: true, selector: "ng-select[apSelectMultiple]", inputs: { maxItemsTooltip: { classPropertyName: "maxItemsTooltip", publicName: "maxItemsTooltip", isSignal: true, isRequired: false, transformFunction: null }, pinnedItemsEnabled: { classPropertyName: "pinnedItemsEnabled", publicName: "pinnedItemsEnabled", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectMultipleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectMultipleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-select[apSelectMultiple]',
@@ -286,11 +286,11 @@ class DropdownItemMultipleOneLineComponent {
     dividerEnabled = false;
     onlyEnabled = false;
     onlyText = 'Only';
-    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : []));
-    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
-    network = input(...(ngDevMode ? [undefined, { debugName: "network" }] : []));
-    symbolColor = input(...(ngDevMode ? [undefined, { debugName: "symbolColor" }] : []));
-    symbolTooltipText = input(...(ngDevMode ? [undefined, { debugName: "symbolTooltipText" }] : []));
+    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
+    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
+    network = input(...(ngDevMode ? [undefined, { debugName: "network" }] : /* istanbul ignore next */ []));
+    symbolColor = input(...(ngDevMode ? [undefined, { debugName: "symbolColor" }] : /* istanbul ignore next */ []));
+    symbolTooltipText = input(...(ngDevMode ? [undefined, { debugName: "symbolTooltipText" }] : /* istanbul ignore next */ []));
     selectOnly = output();
     selectionChange = output();
     lockedFeatureClicked = output();
@@ -310,10 +310,10 @@ class DropdownItemMultipleOneLineComponent {
             this.selectionChange.emit(checked);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", selectionChange: "selectionChange", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div\n    class=\"option multiple\"\n    [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminate\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\"\n        (change)=\"onCheckboxChange($event)\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <span\n            class=\"option-item\"\n            [class.feature-locked-label]=\"isFeatureLocked()\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n    </ap-checkbox>\n\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\" />\n    }\n\n    @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n        <button\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    }\n</div>\n\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;flex-direction:row;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", selectionChange: "selectionChange", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div\n    class=\"option multiple\"\n    [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminate\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\"\n        (change)=\"onCheckboxChange($event)\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <span\n            class=\"option-item\"\n            [class.feature-locked-label]=\"isFeatureLocked()\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n    </ap-checkbox>\n\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\" />\n    }\n\n    @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n        <button\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    }\n</div>\n\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;flex-direction:row;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div\n    class=\"option multiple\"\n    [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminate\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\"\n        (change)=\"onCheckboxChange($event)\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <span\n            class=\"option-item\"\n            [class.feature-locked-label]=\"isFeatureLocked()\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n    </ap-checkbox>\n\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\" />\n    }\n\n    @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n        <button\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    }\n</div>\n\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;flex-direction:row;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{
@@ -369,11 +369,11 @@ class DropdownItemMultipleTwoLinesComponent {
     dividerEnabled = false;
     onlyEnabled = false;
     onlyText = 'Only';
-    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : []));
-    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
-    network = input(...(ngDevMode ? [undefined, { debugName: "network" }] : []));
-    symbolColor = input(...(ngDevMode ? [undefined, { debugName: "symbolColor" }] : []));
-    symbolTooltipText = input(...(ngDevMode ? [undefined, { debugName: "symbolTooltipText" }] : []));
+    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
+    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
+    network = input(...(ngDevMode ? [undefined, { debugName: "network" }] : /* istanbul ignore next */ []));
+    symbolColor = input(...(ngDevMode ? [undefined, { debugName: "symbolColor" }] : /* istanbul ignore next */ []));
+    symbolTooltipText = input(...(ngDevMode ? [undefined, { debugName: "symbolTooltipText" }] : /* istanbul ignore next */ []));
     selectOnly = new EventEmitter();
     lockedFeatureClicked = output();
     checkbox;
@@ -387,10 +387,10 @@ class DropdownItemMultipleTwoLinesComponent {
         this.selectOnly.emit();
         this.checkbox.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-dropdown-item-multiple-two-lines', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\"\n                [network]=\"network()\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\"\n                [color]=\"symbolColor() ?? ''\"\n                [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n        }\n        <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{
@@ -446,8 +446,8 @@ class DropdownItemSingleOneLineComponent {
     badgeText;
     dividerEnabled = false;
     network = undefined;
-    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
-    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : []));
+    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
+    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
     lockedFeatureClicked = output();
     onClick($event) {
         if (this.isFeatureLocked()) {
@@ -455,10 +455,10 @@ class DropdownItemSingleOneLineComponent {
             this.lockedFeatureClicked.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-dropdown-item-single-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{
@@ -503,8 +503,8 @@ class DropdownItemSingleTwoLinesComponent {
     badgeText;
     dividerEnabled = false;
     network = undefined;
-    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
-    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : []));
+    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
+    isFeatureLocked = input(false, ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
     lockedFeatureClicked = output();
     onClick($event) {
         if (this.isFeatureLocked()) {
@@ -512,10 +512,10 @@ class DropdownItemSingleTwoLinesComponent {
             this.lockedFeatureClicked.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-dropdown-item-single-two-lines', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{
@@ -556,7 +556,7 @@ class DropdownSearchFormComponent {
     loadingTpl;
     createNewTpl;
     createNew = new EventEmitter();
-    searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : []));
+    searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : /* istanbul ignore next */ []));
     searchTerm$ = new BehaviorSubject('');
     submitSubscription = null;
     constructor() {
@@ -602,10 +602,10 @@ class DropdownSearchFormComponent {
     onCreateNew() {
         this.createNew.emit(this.searchTermSignal());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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            @if (searchTerm) {\n                {{ '&quot;' + searchTerm + '&quot;' }}\n            }\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: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }, { 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            @if (searchTerm) {\n                {{ '&quot;' + searchTerm + '&quot;' }}\n            }\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: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-dropdown-search-form', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [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            @if (searchTerm) {\n                {{ '&quot;' + searchTerm + '&quot;' }}\n            }\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: [{
@@ -636,15 +636,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 class SelectLabelMultipleComponent {
-    displayType = input('label', ...(ngDevMode ? [{ debugName: "displayType" }] : []));
-    tagColor = input('grey', ...(ngDevMode ? [{ debugName: "tagColor" }] : []));
-    selectedItems = input.required(...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-    bindLabel = input('', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
-    bindValue = input('', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
-    bindAvatarUrl = input('', ...(ngDevMode ? [{ debugName: "bindAvatarUrl" }] : []));
-    bindSymbolId = input('', ...(ngDevMode ? [{ debugName: "bindSymbolId" }] : []));
-    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
-    bindNetwork = input('', ...(ngDevMode ? [{ debugName: "bindNetwork" }] : []));
+    displayType = input('label', ...(ngDevMode ? [{ debugName: "displayType" }] : /* istanbul ignore next */ []));
+    tagColor = input('grey', ...(ngDevMode ? [{ debugName: "tagColor" }] : /* istanbul ignore next */ []));
+    selectedItems = input.required(...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    bindLabel = input('', ...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
+    bindValue = input('', ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
+    bindAvatarUrl = input('', ...(ngDevMode ? [{ debugName: "bindAvatarUrl" }] : /* istanbul ignore next */ []));
+    bindSymbolId = input('', ...(ngDevMode ? [{ debugName: "bindSymbolId" }] : /* istanbul ignore next */ []));
+    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
+    bindNetwork = input('', ...(ngDevMode ? [{ debugName: "bindNetwork" }] : /* istanbul ignore next */ []));
     removeItem = output();
     selectedLabels = computed(() => this.selectedItems().map(item => ({
         label: this.bindLabel() ? item[this.bindLabel()] : item,
@@ -652,11 +652,11 @@ class SelectLabelMultipleComponent {
         symbolId: this.bindSymbolId() ? item[this.bindSymbolId()] : null,
         value: item,
         network: this.bindNetwork() ? item[this.bindNetwork()] : undefined,
-    })), ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
-    hiddenCount = signal(0, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : []));
+    })), ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
+    hiddenCount = signal(0, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
     trackByItem = (_, item) => (this.bindValue() ? item.value[this.bindValue()] : item.value);
     mainContainer = viewChild.required('mainContainer', { read: ElementRef });
-    itemsElement = viewChildren('itemElement', ...(ngDevMode ? [{ debugName: "itemsElement", read: ElementRef }] : [{ read: ElementRef }]));
+    itemsElement = viewChildren('itemElement', { ...(ngDevMode ? { debugName: "itemsElement" } : /* istanbul ignore next */ {}), read: ElementRef });
     responsiveLayout = afterRenderEffect(() => {
         const itemRefs = this.itemsElement();
         if (!itemRefs.length) {
@@ -687,25 +687,25 @@ class SelectLabelMultipleComponent {
         containerEl.style.maxWidth = `${totalWidth}px`;
         this.hiddenCount.set(hiddenCount);
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, bindNetwork: { classPropertyName: "bindNetwork", publicName: "bindNetwork", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "itemsElement", predicate: ["itemElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #mainContainer class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                #itemElement\n                class=\"item\"\n                color=\"blue\"\n                [removable]=\"!item.value.disabled\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                #itemElement\n                class=\"item text-item\"\n                [clearable]=\"!item.value.disabled\"\n                [color]=\"tagColor()\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\"\n                        [network]=\"item.network\"/>\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, bindNetwork: { classPropertyName: "bindNetwork", publicName: "bindNetwork", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "itemsElement", predicate: ["itemElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #mainContainer class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                #itemElement\n                class=\"item\"\n                color=\"blue\"\n                [removable]=\"!item.value.disabled\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                #itemElement\n                class=\"item text-item\"\n                [clearable]=\"!item.value.disabled\"\n                [color]=\"tagColor()\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\"\n                        [network]=\"item.network\"/>\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-select-label-multiple', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent, SymbolComponent], template: "<div #mainContainer class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                #itemElement\n                class=\"item\"\n                color=\"blue\"\n                [removable]=\"!item.value.disabled\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                #itemElement\n                class=\"item text-item\"\n                [clearable]=\"!item.value.disabled\"\n                [color]=\"tagColor()\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\"\n                        [network]=\"item.network\"/>\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                clearable=\"false\"\n                [color]=\"tagColor()\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex;width:100%}\n"] }]
         }], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], tagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagColor", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindAvatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindAvatarUrl", required: false }] }], bindSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindSymbolId", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], bindNetwork: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindNetwork", required: false }] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }], mainContainer: [{ type: i0.ViewChild, args: ['mainContainer', { ...{ read: ElementRef }, isSignal: true }] }], itemsElement: [{ type: i0.ViewChildren, args: ['itemElement', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 class SelectLabelSingleComponent {
-    displayType = input('text', ...(ngDevMode ? [{ debugName: "displayType" }] : []));
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
-    avatarUrl = input(...(ngDevMode ? [undefined, { debugName: "avatarUrl" }] : []));
-    network = input(undefined, ...(ngDevMode ? [{ debugName: "network" }] : []));
-    showAvatarInitials = input(true, ...(ngDevMode ? [{ debugName: "showAvatarInitials" }] : []));
-    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (displayType()) {\n    @case ('text') {\n        <span\n            class=\"text-item\"\n            [title]=\"label()\">\n            {{ label() }}\n        </span>\n    }\n    @case ('label') {\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label()\" />\n    }\n    @case ('tag') {\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            @if (avatarUrl !== undefined) {\n                <ap-avatar\n                    [rounded]=\"roundedAvatar()\"\n                    [size]=\"16\"\n                    [username]=\"label()\"\n                    [showInitials]=\"true\"\n                    [profilePicture]=\"avatarUrl()\" />\n            }\n            {{ label() }}\n        </ap-tag>\n    }\n    @case ('withAvatar') {\n        @if (avatarUrl()) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [username]=\"label()\"\n                [showInitials]=\"showAvatarInitials()\"\n                [profilePicture]=\"avatarUrl()\"\n                [network]=\"network()\" />\n        }\n        <span class=\"text-item\">\n            {{ label() }}\n        </span>\n    }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    displayType = input('text', ...(ngDevMode ? [{ debugName: "displayType" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    avatarUrl = input(...(ngDevMode ? [undefined, { debugName: "avatarUrl" }] : /* istanbul ignore next */ []));
+    network = input(undefined, ...(ngDevMode ? [{ debugName: "network" }] : /* istanbul ignore next */ []));
+    showAvatarInitials = input(true, ...(ngDevMode ? [{ debugName: "showAvatarInitials" }] : /* istanbul ignore next */ []));
+    roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (displayType()) {\n    @case ('text') {\n        <span\n            class=\"text-item\"\n            [title]=\"label()\">\n            {{ label() }}\n        </span>\n    }\n    @case ('label') {\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label()\" />\n    }\n    @case ('tag') {\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            @if (avatarUrl !== undefined) {\n                <ap-avatar\n                    [rounded]=\"roundedAvatar()\"\n                    [size]=\"16\"\n                    [username]=\"label()\"\n                    [showInitials]=\"true\"\n                    [profilePicture]=\"avatarUrl()\" />\n            }\n            {{ label() }}\n        </ap-tag>\n    }\n    @case ('withAvatar') {\n        @if (avatarUrl()) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [username]=\"label()\"\n                [showInitials]=\"showAvatarInitials()\"\n                [profilePicture]=\"avatarUrl()\"\n                [network]=\"network()\" />\n        }\n        <span class=\"text-item\">\n            {{ label() }}\n        </span>\n    }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-select-label-single', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent], template: "@switch (displayType()) {\n    @case ('text') {\n        <span\n            class=\"text-item\"\n            [title]=\"label()\">\n            {{ label() }}\n        </span>\n    }\n    @case ('label') {\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label()\" />\n    }\n    @case ('tag') {\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            @if (avatarUrl !== undefined) {\n                <ap-avatar\n                    [rounded]=\"roundedAvatar()\"\n                    [size]=\"16\"\n                    [username]=\"label()\"\n                    [showInitials]=\"true\"\n                    [profilePicture]=\"avatarUrl()\" />\n            }\n            {{ label() }}\n        </ap-tag>\n    }\n    @case ('withAvatar') {\n        @if (avatarUrl()) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [username]=\"label()\"\n                [showInitials]=\"showAvatarInitials()\"\n                [profilePicture]=\"avatarUrl()\"\n                [network]=\"network()\" />\n        }\n        <span class=\"text-item\">\n            {{ label() }}\n        </span>\n    }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"] }]
         }], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], network: [{ type: i0.Input, args: [{ isSignal: true, alias: "network", required: false }] }], showAvatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatarInitials", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }] } });
@@ -721,10 +721,10 @@ class SelectSingleDirective {
             throw new Error('labelTemplate is required for apSelectSingle');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectSingleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: SelectSingleDirective, isStandalone: true, selector: "ng-select[apSelectSingle]", hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectSingleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: SelectSingleDirective, isStandalone: true, selector: "ng-select[apSelectSingle]", hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectSingleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectSingleDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -740,8 +740,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }], ctorParameters: () => [] });
 
 class ApSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ApSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ApSelectModule, imports: [SelectMultipleDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, imports: [SelectMultipleDirective,
             SelectSingleDirective,
             DropdownItemSingleOneLineComponent,
             DropdownItemSingleTwoLinesComponent,
@@ -762,7 +762,7 @@ class ApSelectModule {
             DropdownSearchFormComponent,
             DropdownGroupItemComponent,
             NgSelectModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ApSelectModule, imports: [DropdownItemSingleOneLineComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, imports: [DropdownItemSingleOneLineComponent,
             DropdownItemSingleTwoLinesComponent,
             DropdownItemMultipleOneLineComponent,
             DropdownItemMultipleTwoLinesComponent,
@@ -772,7 +772,7 @@ class ApSelectModule {
             DropdownGroupItemComponent,
             NgSelectModule, NgSelectModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ApSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [