@agorapulse/ui-components 16.2.22 → 16.3.0

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

@@ -1,306 +1,377 @@
-import { LoaderComponent } from '@agorapulse/ui-animations';
-import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, signal, TemplateRef, inject, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, NgModule } from '@angular/core';
 import { BadgeComponent } from '@agorapulse/ui-components/badge';
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
-import { InputComponent } from '@agorapulse/ui-components/input';
+import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
+import { NgIf, NgFor, NgSwitch, NgSwitchCase } from '@angular/common';
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { SymbolComponent, SymbolRegistry, apCheck2, apAdd2022 } from '@agorapulse/ui-symbol';
+import { LoaderComponent } from '@agorapulse/ui-animations';
+import { InputDirective } from '@agorapulse/ui-components/input';
+import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { BehaviorSubject, filter } from 'rxjs';
 import { LabelComponent } from '@agorapulse/ui-components/labels';
 import { TagComponent } from '@agorapulse/ui-components/tag';
-import { SymbolRegistry, apCheck2, apAlertCircle, apCheckCircle, apSearchAlternate, apAdd2022, apDeleteNoCircle, SymbolComponent } from '@agorapulse/ui-symbol';
-import { NgIf, NgFor, NgTemplateOutlet, AsyncPipe, SlicePipe } from '@angular/common';
-import * as i0 from '@angular/core';
-import { forwardRef, inject, DestroyRef, ElementRef, signal, EventEmitter, computed, EnvironmentInjector, runInInjectionContext, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, HostBinding, Input, Output } from '@angular/core';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i2 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { debounceTime, skip, tap, switchMap, fromEvent, of } from 'rxjs';
+import { NgSelectComponent } from '@ng-select/ng-select';
 
-const SELECT_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SelectComponent),
-    multi: true,
-};
-class SelectComponent {
-    symbolRegistry = inject(SymbolRegistry);
-    destroyRef = inject(DestroyRef);
-    elementRef = inject(ElementRef);
-    searchInput;
-    inlineLabelElement;
+class DropdownGroupItemComponent {
+    groupLabel;
+    groupTag;
+    selectableGroup = false;
+    children = [];
     select;
-    hovered = false;
-    optionsSignal = signal([]);
-    set options(options) {
-        this.optionsSignal.set(options);
-        this.filteredOptionsSignal.set(options);
-    }
-    ariaLabel;
-    ariaLabelledBy;
-    ariaDescribedBy;
-    appendTo = 'body';
-    clearable = false;
-    description;
     disabled = false;
-    selectId;
-    _inline = false;
-    set inlineLabel(inlineLabel) {
-        this._inline = inlineLabel;
-        if (!this.inlineLabelElement) {
-            return;
-        }
-        this.elementRef.nativeElement.style.setProperty('--placeholder-padding-left', `${this.inlineLabelElement.nativeElement.clientWidth}px`);
+    disabledTooltip;
+    isGroupIntermediate() {
+        const selectedChildren = this.children.filter((child) => child.selected && !child.disabled);
+        const selectableChildren = this.children.filter((child) => !child.disabled);
+        return selectedChildren.length > 0 && selectedChildren.length < selectableChildren.length;
     }
-    get inlineLabel() {
-        return this._inline;
+    isGroupChecked() {
+        return this.children.every((child) => child.selected || child.disabled);
     }
-    create = false;
-    createText = 'Create';
-    group = false;
-    selectableGroup = true;
-    label = '';
-    multiple = false;
-    only = false;
-    onlyText = 'Only';
-    placeholder = 'Select...';
-    selectAll = false;
-    selectAllText = 'Select all';
-    unselectAllText = 'Unselect all';
-    searchable = false;
-    searchPlaceholder = 'Search...';
-    searchFn = this.defaultSearchFn;
-    notFoundText = 'No results found';
-    loadingText = 'Loading items';
-    set displayType(displayType) {
-        this.displayTypeSignal.set(displayType);
+    isGroupDisabled() {
+        return this.children.every((child) => child.disabled);
     }
-    optionLabel;
-    optionCaption;
-    optionDivider = 'divider';
-    optionProfileImageUrl;
-    optionBadgeLabel;
-    optionValue;
-    optionDisabled = 'disabled';
-    optionGroupLabel = 'group';
-    optionGroupTag;
-    set maximumDisplayOptions(maximumDisplayOptions) {
-        this.maximumDisplayValuesSignal.set(maximumDisplayOptions);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", 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    <ap-checkbox\n        *ngIf=\"selectableGroup; else groupLabelTpl\"\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        <ap-badge\n            *ngIf=\"groupTag\"\n            color=\"blue\">\n            {{ groupTag }}\n        </ap-badge>\n    </ap-checkbox>\n    <ng-template #groupLabelTpl>\n        <span class=\"group-label\" [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        <ap-badge\n            *ngIf=\"groupTag\"\n            color=\"blue\">\n            {{ groupTag }}\n        </ap-badge>\n    </ng-template>\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownGroupItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-group-item', encapsulation: ViewEncapsulation.None, standalone: true, imports: [BadgeComponent, NgIf, CheckboxComponent, TooltipDirective], template: "<div\n    class=\"group\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\">\n    <ap-checkbox\n        *ngIf=\"selectableGroup; else groupLabelTpl\"\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        <ap-badge\n            *ngIf=\"groupTag\"\n            color=\"blue\">\n            {{ groupTag }}\n        </ap-badge>\n    </ap-checkbox>\n    <ng-template #groupLabelTpl>\n        <span class=\"group-label\" [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        <ap-badge\n            *ngIf=\"groupTag\"\n            color=\"blue\">\n            {{ groupTag }}\n        </ap-badge>\n    </ng-template>\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"] }]
+        }], propDecorators: { groupLabel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], groupTag: [{
+                type: Input
+            }], selectableGroup: [{
+                type: Input
+            }], children: [{
+                type: Input,
+                args: [{ required: true }]
+            }], select: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], disabled: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }] } });
+
+class DropdownItemMultipleOneLineComponent {
+    text;
+    selected;
+    htmlId;
+    disabled = false;
+    avatarUrl;
+    disabledTooltip;
+    badgeText;
+    dividerEnabled = false;
+    onlyEnabled = false;
+    onlyText;
+    selectOnly = new EventEmitter();
+    checkbox;
+    onSelectOnly() {
+        this.selectOnly.emit();
+        this.checkbox.focus();
     }
-    customOptionTemplate;
-    customLabelTemplate;
-    customMultiLabelTemplate;
-    errorMessage;
-    successMessage;
-    compareWith;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: "text", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        <ap-avatar\n            *ngIf=\"avatarUrl\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\" />\n        <span\n            class=\"option-item\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        <ap-badge\n            *ngIf=\"badgeText\"\n            color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n\n        <button\n            *ngIf=\"onlyEnabled && !disabled\"\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    </ap-checkbox>\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-item-multiple-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, NgIf, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        <ap-avatar\n            *ngIf=\"avatarUrl\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\" />\n        <span\n            class=\"option-item\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        <ap-badge\n            *ngIf=\"badgeText\"\n            color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n\n        <button\n            *ngIf=\"onlyEnabled && !disabled\"\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    </ap-checkbox>\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input,
+                args: [{ required: true }]
+            }], htmlId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], dividerEnabled: [{
+                type: Input
+            }], onlyEnabled: [{
+                type: Input
+            }], onlyText: [{
+                type: Input
+            }], selectOnly: [{
+                type: Output
+            }], checkbox: [{
+                type: ViewChild,
+                args: [CheckboxComponent]
+            }] } });
+
+class DropdownItemMultipleTwoLinesComponent {
+    text;
+    caption;
+    selected;
+    htmlId;
+    disabled = false;
+    avatarUrl;
+    disabledTooltip;
+    badgeText;
+    dividerEnabled = false;
+    onlyEnabled = false;
+    onlyText;
+    selectOnly = new EventEmitter();
+    checkbox;
+    onSelectOnly() {
+        this.selectOnly.emit();
+        this.checkbox.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        <ap-avatar\n            *ngIf=\"avatarUrl\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\" />\n        <div class=\"texts\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                <ap-badge\n                    *ngIf=\"badgeText\"\n                    color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n        <button\n            *ngIf=\"onlyEnabled && !disabled\"\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    </ap-checkbox>\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\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: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-item-multiple-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, NgIf, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        <ap-avatar\n            *ngIf=\"avatarUrl\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\" />\n        <div class=\"texts\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                <ap-badge\n                    *ngIf=\"badgeText\"\n                    color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n        <button\n            *ngIf=\"onlyEnabled && !disabled\"\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    </ap-checkbox>\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], caption: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input,
+                args: [{ required: true }]
+            }], htmlId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], dividerEnabled: [{
+                type: Input
+            }], onlyEnabled: [{
+                type: Input
+            }], onlyText: [{
+                type: Input
+            }], selectOnly: [{
+                type: Output
+            }], checkbox: [{
+                type: ViewChild,
+                args: [CheckboxComponent]
+            }] } });
+
+class DropdownItemSingleOneLineComponent {
+    text;
+    selected;
+    disabled = false;
+    avatarUrl;
+    disabledTooltip;
+    badgeText;
+    dividerEnabled = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: "text", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled" }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n    <ap-avatar\n        *ngIf=\"avatarUrl\"\n        [size]=\"24\"\n        [profilePicture]=\"avatarUrl\"\n        [username]=\"text\"\n        [showInitials]=\"true\" />\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    <ap-badge\n        *ngIf=\"badgeText\"\n        color=\"blue\">\n        {{ badgeText }}\n    </ap-badge>\n    <ap-symbol\n        *ngIf=\"selected\"\n        class=\"option-selected\"\n        symbolId=\"check-2\"\n        color=\"electric-blue\"\n        size=\"micro\" />\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-item-single-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, NgIf, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n    <ap-avatar\n        *ngIf=\"avatarUrl\"\n        [size]=\"24\"\n        [profilePicture]=\"avatarUrl\"\n        [username]=\"text\"\n        [showInitials]=\"true\" />\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    <ap-badge\n        *ngIf=\"badgeText\"\n        color=\"blue\">\n        {{ badgeText }}\n    </ap-badge>\n    <ap-symbol\n        *ngIf=\"selected\"\n        class=\"option-selected\"\n        symbolId=\"check-2\"\n        color=\"electric-blue\"\n        size=\"micro\" />\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], dividerEnabled: [{
+                type: Input
+            }] } });
+
+class DropdownItemSingleTwoLinesComponent {
+    text;
+    caption;
+    selected;
+    disabled = false;
+    avatarUrl;
+    disabledTooltip;
+    badgeText;
+    dividerEnabled = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled" }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n    <ap-avatar\n        *ngIf=\"avatarUrl\"\n        [size]=\"24\"\n        [profilePicture]=\"avatarUrl\"\n        [username]=\"text\"\n        [showInitials]=\"true\" />\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            <ap-badge\n                *ngIf=\"badgeText\"\n                color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    <ap-symbol\n        *ngIf=\"selected\"\n        class=\"option-selected\"\n        symbolId=\"check-2\"\n        color=\"electric-blue\"\n        size=\"micro\" />\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-item-single-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, NgIf, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n    <ap-avatar\n        *ngIf=\"avatarUrl\"\n        [size]=\"24\"\n        [profilePicture]=\"avatarUrl\"\n        [username]=\"text\"\n        [showInitials]=\"true\" />\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            <ap-badge\n                *ngIf=\"badgeText\"\n                color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    <ap-symbol\n        *ngIf=\"selected\"\n        class=\"option-selected\"\n        symbolId=\"check-2\"\n        color=\"electric-blue\"\n        size=\"micro\" />\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], caption: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], dividerEnabled: [{
+                type: Input
+            }] } });
+
+class DropdownSearchFormComponent {
+    searchPlaceholder = '';
+    createNewEnabled = false;
+    createText = 'Create';
+    select;
+    inputSearch;
+    notFoundTpl;
+    loadingTpl;
+    createNewTpl;
     createNew = new EventEmitter();
-    valueChanges = new EventEmitter();
-    _controlValueAccessorChangeFn;
-    onTouched;
-    displayTypeSignal = signal('text');
-    enabledOptions = computed(() => {
-        return this.optionsSignal().filter((value) => {
-            if (typeof value === 'string') {
-                return value;
-            }
-            else {
-                return this.optionDisabled && !value[this.optionDisabled];
-            }
-        });
-    });
-    itemHoveredSignal = signal(null);
-    filteredOptionsSignal = signal([]);
-    loadingSignal = signal(false);
-    selectedValuesSignal = signal([]);
     searchTermSignal = signal('');
-    searchTerm$ = toObservable(this.searchTermSignal);
-    maximumDisplayValuesSignal = signal(-1);
-    hiddenCountSignal = signal(0);
-    allSelectedSignal = computed(() => {
-        return this.selectedValuesSignal().length === this.enabledOptions().length;
-    });
-    partialySelectedSignal = computed(() => {
-        return this.selectedValuesSignal().length > 0 && this.selectedValuesSignal().length < this.enabledOptions().length;
-    });
-    injector = inject(EnvironmentInjector);
-    selectValueContainer;
-    selectValueContainerWidthSignal = signal(0);
+    searchTerm$ = new BehaviorSubject('');
     constructor() {
-        this.symbolRegistry.registerSymbols([apCheck2, apAlertCircle, apCheckCircle, apSearchAlternate, apAdd2022, apDeleteNoCircle]);
-    }
-    writeValue(selectedValues = []) {
-        this.selectedValuesSignal.set(selectedValues);
-    }
-    registerOnChange(fn) {
-        this._controlValueAccessorChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    ngOnInit() {
-        if (this.multiple && (!this.displayTypeSignal() || this.displayTypeSignal() === 'text')) {
-            console.warn('Display type "text" is not supported for multiple select. Switching to "label".');
-            this.displayTypeSignal.set('label');
-        }
         this.searchTerm$
-            .pipe(debounceTime(250), skip(1), tap(() => {
-            this.loadingSignal.set(true);
-            this.optionsSignal.set([]);
-        }), switchMap((term) => this.searchFn(term)), tap(() => {
-            this.loadingSignal.set(false);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe((options) => {
-            this.optionsSignal.set(options);
+            .pipe(filter(() => !!this.select), takeUntilDestroyed())
+            .subscribe(term => {
+            this.searchTermSignal.set(term);
+            this.select.filter(term);
         });
     }
     ngAfterViewInit() {
-        if (this.inlineLabelElement) {
-            this.elementRef.nativeElement.style.setProperty('--placeholder-padding-left', `${this.inlineLabelElement.nativeElement.clientWidth}px`);
-        }
-        this.selectValueContainer = this.select.element.getElementsByClassName('ng-value-container')[0];
-        if (this.multiple) {
-            fromEvent(window, 'resize')
-                .pipe(debounceTime(200), takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => {
-                this.updateSelectValueContainerWidthSignal();
-            });
-        }
-        this.updateSelectValueContainerWidthSignal();
-        runInInjectionContext(this.injector, () => {
-            effect(() => {
-                if (this.multiple) {
-                    const selectedValues = this.selectedValuesSignal();
-                    const selectValueContainerWidthSignal = this.selectValueContainerWidthSignal();
-                    const timeout = setTimeout(() => {
-                        this.calculateResponsiveLabels(selectValueContainerWidthSignal, selectedValues);
-                    }, 100);
-                    return () => {
-                        clearTimeout(timeout);
-                    };
-                }
-                return;
-            }, {
-                allowSignalWrites: true,
-            });
-        });
-    }
-    onSearchTermChange(searchTerm) {
-        this.searchTermSignal.set(searchTerm);
-    }
-    defaultSearchFn(term) {
-        return of(this.filteredOptionsSignal().filter((option) => {
-            if (typeof option === 'string') {
-                return option.toLowerCase().includes(term.toLowerCase());
-            }
-            if (this.optionLabel) {
-                return String(option[this.optionLabel]).toLowerCase().includes(term.toLowerCase());
-            }
-            return option;
-        }));
-    }
-    isGroupIndeterminate(children) {
-        return children.some((child) => child.selected) && !this.isGroupChecked(children);
-    }
-    isGroupDisabled(children) {
-        return children.every((child) => child.disabled);
-    }
-    isGroupChecked(children) {
-        return children.every((child) => child.disabled || child.selected) && !this.isGroupDisabled(children);
-    }
-    onSelectOnly(item) {
-        if (typeof item === 'string') {
-            this.selectedValuesSignal.set([item]);
-        }
-        else {
-            this.optionValue ? this.selectedValuesSignal.set([item[this.optionValue]]) : this.selectedValuesSignal.set([item]);
-        }
-        this.callControlValueAccessorChangeFn();
-    }
-    onSelectOpened() {
         setTimeout(() => {
-            if (this.onTouched) {
-                this.onTouched();
-            }
-            if (this.searchable && !!this.searchFn) {
-                this.searchInput.focusInput();
-            }
-        });
-    }
-    onHoverItem(htmlid) {
-        if (!this.multiple || this.disabled) {
-            return;
-        }
-        this.itemHoveredSignal.set(htmlid);
-    }
-    onLeaveItem() {
-        if (!this.multiple || this.disabled) {
-            return;
+            this.inputSearch.nativeElement.focus();
+        }, 100);
+        this.select.notFoundTemplate = this.notFoundTpl;
+        this.select.loadingTextTemplate = this.loadingTpl;
+        if (this.createNewEnabled) {
+            this.select.footerTemplate = this.createNewTpl;
         }
-        this.itemHoveredSignal.set(null);
-    }
-    onToggleAll() {
-        if (this.partialySelectedSignal() || this.allSelectedSignal()) {
-            this.selectedValuesSignal.set([]);
-        }
-        else {
-            this.selectedValuesSignal.set(this.enabledOptions().map((value) => {
-                if (typeof value === 'string') {
-                    return value;
-                }
-                return this.optionValue ? value[this.optionValue] : value;
-            }));
-        }
-        this.callControlValueAccessorChangeFn();
-    }
-    onSelectedValuesChange(selectedValues) {
-        this.selectedValuesSignal.set(selectedValues);
-        this.callControlValueAccessorChangeFn();
-    }
-    onOpenSelect() {
-        this.select.open();
-    }
-    onInlineInputEnter() {
-        this.hovered = true;
-    }
-    onInlineInputLeave() {
-        this.hovered = false;
     }
     onCreateNew() {
         this.createNew.emit(this.searchTermSignal());
-        this.select.close();
     }
-    removeSelectedItem({ $event }, item) {
-        if ($event) {
-            $event.stopImmediatePropagation();
-        }
-        const selectedItemId = typeof item === 'string' ? item : this.optionValue ? item[this.optionValue] : item;
-        this.selectedValuesSignal.update((selectedValues) => selectedValues.filter((selectedValue) => selectedValue !== selectedItemId));
-        this.callControlValueAccessorChangeFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", 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: ["inputSearch"], 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-group class=\"dropdown-search-input\">\n    <ap-symbol symbolId=\"search-alternate\" />\n    <input\n        #inputSearch\n        apInput\n        [placeholder]=\"searchPlaceholder\"\n        [ngModel]=\"searchTermSignal()\"\n        (ngModelChange)=\"searchTerm$.next($event)\" />\n</ap-input-group>\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 #createNewTpl let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"add-2022\"\n            size=\"micro\" />\n        <span>\n            {{ createText }}\n        </span>\n        <ng-container *ngIf=\"searchTerm\">\"{{ searchTerm }}\"</ng-container>\n    </button>\n</ng-template>", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-search-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, InputGroupComponent, InputDirective, SymbolComponent, FormsModule, LoaderComponent], template: "<ap-input-group class=\"dropdown-search-input\">\n    <ap-symbol symbolId=\"search-alternate\" />\n    <input\n        #inputSearch\n        apInput\n        [placeholder]=\"searchPlaceholder\"\n        [ngModel]=\"searchTermSignal()\"\n        (ngModelChange)=\"searchTerm$.next($event)\" />\n</ap-input-group>\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 #createNewTpl let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"add-2022\"\n            size=\"micro\" />\n        <span>\n            {{ createText }}\n        </span>\n        <ng-container *ngIf=\"searchTerm\">\"{{ searchTerm }}\"</ng-container>\n    </button>\n</ng-template>", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { searchPlaceholder: [{
+                type: Input
+            }], createNewEnabled: [{
+                type: Input
+            }], createText: [{
+                type: Input
+            }], select: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], inputSearch: [{
+                type: ViewChild,
+                args: ['inputSearch']
+            }], notFoundTpl: [{
+                type: ViewChild,
+                args: ['notFoundTpl', { read: TemplateRef }]
+            }], loadingTpl: [{
+                type: ViewChild,
+                args: ['loadingTpl', { read: TemplateRef }]
+            }], createNewTpl: [{
+                type: ViewChild,
+                args: ['createNewTpl', { read: TemplateRef }]
+            }], createNew: [{
+                type: Output
+            }] } });
+
+class SelectLabelMultipleComponent {
+    set _displayType(displayType) {
+        this.displayTypeSignal.set(displayType);
     }
-    callControlValueAccessorChangeFn() {
-        this.valueChanges.emit(this.selectedValuesSignal());
-        if (this._controlValueAccessorChangeFn) {
-            this._controlValueAccessorChangeFn(this.selectedValuesSignal());
+    set _selectedItems(selectedItems) {
+        if (selectedItems.length !== this.selectedItemsSignal().length ||
+            selectedItems.some(item => this.selectedItemsSignal().indexOf(item) === -1)) {
+            this.selectedItemsSignal.set(selectedItems);
         }
     }
-    updateSelectValueContainerWidthSignal() {
-        if (this.selectValueContainer) {
-            const remainingPlaceHolderWidth = 100;
-            const selectValueContainerWidth = this.selectValueContainer.clientWidth - remainingPlaceHolderWidth;
-            this.selectValueContainerWidthSignal.set(selectValueContainerWidth);
-        }
+    set _bindLabel(bindLabel) {
+        this.bindLabelSignal.set(bindLabel);
+    }
+    set _bindValue(bindValue) {
+        this.bindValueSignal.set(bindValue);
+    }
+    set _bindAvatarUrl(bindAvatarUrl) {
+        this.bindAvatarUrlSignal.set(bindAvatarUrl);
+    }
+    removeItem = new EventEmitter();
+    elementRef = inject(ElementRef);
+    injector = inject(EnvironmentInjector);
+    displayTypeSignal = signal('label');
+    selectedItemsSignal = signal([]);
+    bindLabelSignal = signal('');
+    bindValueSignal = signal('');
+    bindAvatarUrlSignal = signal('');
+    selectedLabels = computed(() => {
+        return this.selectedItemsSignal().map(item => {
+            return {
+                label: this.bindLabelSignal() ? item[this.bindLabelSignal()] : item,
+                avatarUrl: this.bindAvatarUrlSignal() ? item[this.bindAvatarUrlSignal()] : '',
+                value: item,
+            };
+        });
+    });
+    valueContainerWidth = signal(0);
+    hiddenCountSignal = signal(0);
+    trackByItem = (_, item) => (this.bindValueSignal() ? item.value[this.bindValueSignal()] : item.value);
+    ngAfterViewInit() {
+        const parentWidth = this.elementRef.nativeElement.parentElement?.offsetWidth;
+        this.valueContainerWidth.set(parentWidth ?? 0);
+        runInInjectionContext(this.injector, () => {
+            effect(() => {
+                const selectedValues = this.selectedItemsSignal();
+                const selectValueContainerWidthSignal = this.valueContainerWidth() - 30;
+                const timeout = setTimeout(() => {
+                    this.calculateResponsiveLabels(selectValueContainerWidthSignal, selectedValues);
+                }, 100);
+                return () => {
+                    clearTimeout(timeout);
+                };
+            }, {
+                allowSignalWrites: true,
+            });
+        });
     }
     calculateResponsiveLabels(containerWidth, selectedValues) {
-        if (!selectedValues || selectedValues.length === 0) {
-            this.hiddenCountSignal.set(0);
+        if (containerWidth === 0 || !selectedValues.length) {
             return;
         }
-        const itemsContainer = this.selectValueContainer.getElementsByClassName('multiple-item')[0];
-        const items = this.selectValueContainer.getElementsByClassName('item');
         let totalWidth = 0;
         let hiddenCount = 0;
         const itemGap = 4;
+        const items = this.elementRef.nativeElement.getElementsByClassName('item');
         for (let index = 0; index < items.length; index++) {
             const item = items[index];
             const itemWidth = item.clientWidth + itemGap;
@@ -313,145 +384,241 @@ class SelectComponent {
                 hiddenCount++;
             }
         }
-        itemsContainer.style.maxWidth = `${totalWidth}px`;
+        this.elementRef.nativeElement.getElementsByClassName('multiple-item')[0].style.maxWidth = `${totalWidth}px`;
         this.hiddenCountSignal.set(hiddenCount);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: SelectComponent, isStandalone: true, selector: "ap-select", inputs: { options: "options", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", appendTo: "appendTo", clearable: "clearable", description: "description", disabled: "disabled", selectId: "selectId", inlineLabel: "inlineLabel", create: "create", createText: "createText", group: "group", selectableGroup: "selectableGroup", label: "label", multiple: "multiple", only: "only", onlyText: "onlyText", placeholder: "placeholder", selectAll: "selectAll", selectAllText: "selectAllText", unselectAllText: "unselectAllText", searchable: "searchable", searchPlaceholder: "searchPlaceholder", searchFn: "searchFn", notFoundText: "notFoundText", loadingText: "loadingText", displayType: "displayType", optionLabel: "optionLabel", optionCaption: "optionCaption", optionDivider: "optionDivider", optionProfileImageUrl: "optionProfileImageUrl", optionBadgeLabel: "optionBadgeLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupTag: "optionGroupTag", maximumDisplayOptions: "maximumDisplayOptions", customOptionTemplate: "customOptionTemplate", customLabelTemplate: "customLabelTemplate", customMultiLabelTemplate: "customMultiLabelTemplate", errorMessage: "errorMessage", successMessage: "successMessage", compareWith: "compareWith" }, outputs: { createNew: "createNew", valueChanges: "valueChanges" }, host: { properties: { "class.hovered": "this.hovered", "class.inline": "this.inlineLabel" } }, providers: [SELECT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inlineLabelElement", first: true, predicate: ["inlineLabel"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<label\n    *ngIf=\"label && !inlineLabel\"\n    [for]=\"selectId\">\n    <span>\n        {{ label }}\n    </span>\n    <span\n        *ngIf=\"description\"\n        class=\"description\">\n        {{ description }}\n    </span>\n</label>\n\n<div\n    *ngIf=\"inlineLabel\"\n    #inlineLabel\n    tabindex=\"0\"\n    class=\"inline-label\"\n    (click)=\"onOpenSelect()\"\n    (keydown.enter)=\"onOpenSelect()\"\n    (mouseenter)=\"onInlineInputEnter()\"\n    (mouseleave)=\"onInlineInputLeave()\">\n    <label\n        *ngIf=\"label && inlineLabel\"\n        class=\"label\"\n        [for]=\"selectId\">\n        <span>\n            {{ label }}\n        </span>\n    </label>\n    <div class=\"divider\"></div>\n</div>\n\n<ng-select\n    #select\n    class=\"ap-select\"\n    [tabIndex]=\"0\"\n    [clearable]=\"clearable\"\n    [placeholder]=\"placeholder\"\n    [labelForId]=\"selectId\"\n    [searchable]=\"false\"\n    [closeOnSelect]=\"!multiple\"\n    [bindValue]=\"optionValue ? optionValue : ''\"\n    [groupBy]=\"group ? optionGroupLabel : ''\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    [markFirst]=\"false\"\n    [selectableGroup]=\"selectableGroup\"\n    [selectableGroupAsModel]=\"false\"\n    [appendTo]=\"appendTo\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    [items]=\"optionsSignal()\"\n    [compareWith]=\"compareWith\"\n    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    (ngModelChange)=\"onSelectedValuesChange($event)\"\n    (open)=\"onSelectOpened()\">\n    <ng-container *ngIf=\"searchable || selectAll\">\n        <ng-template\n            let-item=\"item\"\n            ng-header-tmp>\n            <ng-container *ngIf=\"searchable\">\n                <ap-input\n                    #searchInput\n                    tabindex=\"0\"\n                    name=\"search-input\"\n                    class=\"full-width\"\n                    symbolId=\"search-alternate\"\n                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\" />\n            </ng-container>\n            <ng-container *ngIf=\"selectAll\">\n                <ap-checkbox\n                    class=\"select-all-checkbox\"\n                    name=\"option-group-select-all\"\n                    [indeterminate]=\"partialySelectedSignal()\"\n                    [checked]=\"allSelectedSignal()\"\n                    (click)=\"onToggleAll()\">\n                    <span>\n                        {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n                    </span>\n                </ap-checkbox>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-optgroup-tmp>\n        <div\n            class=\"group\"\n            [class.with-search]=\"searchable\"\n            [class.with-select-all]=\"selectAll\">\n            <ng-container *ngIf=\"!multiple\">\n                <span class=\"group-label\">\n                    {{ item[optionGroupLabel] }}\n                </span>\n                <ap-badge\n                    *ngIf=\"optionGroupTag && optionGroupTag[item[optionGroupLabel]]\"\n                    color=\"blue\">\n                    {{ optionGroupTag[item[optionGroupLabel]] }}\n                </ap-badge>\n            </ng-container>\n            <ng-container *ngIf=\"multiple\">\n                <ap-checkbox\n                    *ngIf=\"selectableGroup\"\n                    [name]=\"'option-group-selection-' + item['group']\"\n                    [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n                    [checked]=\"isGroupChecked(item$.children)\">\n                    <span class=\"group-label\">\n                        {{ item[optionGroupLabel] }}\n                    </span>\n                    <ap-badge\n                        *ngIf=\"optionGroupTag && optionGroupTag[item[optionGroupLabel]]\"\n                        color=\"blue\">\n                        {{ optionGroupTag[item[optionGroupLabel]] }}\n                    </ap-badge>\n                </ap-checkbox>\n                <span\n                    *ngIf=\"!selectableGroup\"\n                    class=\"group-label\">\n                    {{ item[optionGroupLabel] }}\n                </span>\n            </ng-container>\n        </div>\n    </ng-template>\n    <ng-template\n        let-items=\"items\"\n        let-item$=\"item$\"\n        ng-multi-label-tmp>\n        <ng-container>\n            <div class=\"multiple-item\">\n                <ng-container *ngIf=\"!customMultiLabelTemplate\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n                            <ng-container *ngIf=\"displayTypeSignal() === 'text' || !displayTypeSignal()\">\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item[optionLabel]\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                                <ap-label\n                                    color=\"blue\"\n                                    class=\"item\"\n                                    removable=\"true\"\n                                    [content]=\"item[optionLabel]\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    clearable=\"true\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    <ap-avatar\n                                        *ngIf=\"optionProfileImageUrl\"\n                                        size=\"24\"\n                                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                        [showInitials]=\"true\" />\n                                    {{ item[optionLabel] }}\n                                </ap-tag>\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'withAvatar'\">\n                                <div class=\"item with-avatar\">\n                                    <ap-avatar\n                                        *ngIf=\"optionProfileImageUrl\"\n                                        size=\"24\"\n                                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                        [showInitials]=\"true\" />\n                                    <span\n                                        class=\"text-item\"\n                                        [title]=\"item[optionLabel]\">\n                                        {{ item[optionLabel] }}\n                                    </span>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n                            <ng-container *ngIf=\"displayTypeSignal() === 'text' || !displayTypeSignal()\">\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item\">\n                                    {{ item }}\n                                </span>\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                                <ap-label\n                                    class=\"item\"\n                                    color=\"blue\"\n                                    [removable]=\"multiple\"\n                                    [content]=\"item\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    [clearable]=\"multiple\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    {{ item }}\n                                </ap-tag>\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'withAvatar'\">\n                                <div class=\"item with-avatar\">\n                                    <ap-avatar\n                                        *ngIf=\"optionProfileImageUrl\"\n                                        size=\"24\"\n                                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                        [showInitials]=\"true\" />\n                                    <span class=\"text-item\">\n                                        {{ item }}\n                                    </span>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"customMultiLabelTemplate\">\n                    <ng-container *ngTemplateOutlet=\"customMultiLabelTemplate; context: { options: items }\" />\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"hiddenCountSignal() > 0\"\n                class=\"remaining\">\n                <ng-container *ngIf=\"displayTypeSignal() === 'text' || displayTypeSignal() === 'withAvatar' || !displayTypeSignal()\">\n                    <span class=\"text-item\">+{{ hiddenCountSignal() }}</span>\n                </ng-container>\n                <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                    <ap-tag\n                        class=\"text-item\"\n                        clearable=\"false\">\n                        +{{ hiddenCountSignal() }}\n                    </ap-tag>\n                </ng-container>\n                <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                    <ap-label\n                        color=\"blue\"\n                        [removable]=\"false\"\n                        [content]=\"'+' + hiddenCountSignal()\" />\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n    <ng-template ng-loadingtext-tmp>\n        <div class=\"loading-state\">\n            <ap-loader diameter=\"30\" />\n            <span>\n                {{ loadingText }}\n            </span>\n        </div>\n    </ng-template>\n    <ng-template ng-loadingspinner-tmp></ng-template>\n    <ng-container *ngIf=\"create\">\n        <ng-template ng-footer-tmp>\n            <button\n                class=\"create-new\"\n                type=\"button\"\n                (click)=\"onCreateNew()\">\n                <ap-symbol\n                    symbolId=\"add-2022\"\n                    size=\"micro\" />\n                <span>\n                    {{ createText }}\n                </span>\n                <ng-container *ngIf=\"searchTermSignal()\">\"{{ searchTermSignal() }}\"</ng-container>\n            </button>\n        </ng-template>\n    </ng-container>\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-option-tmp>\n        <ng-container\n            *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider]) && !customOptionTemplate\">\n            <div class=\"option\">\n                <span\n                    class=\"option-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n                <ng-container *ngIf=\"item$.selected && !multiple\">\n                    <ap-symbol\n                        symbolId=\"check-2\"\n                        color=\"electric-blue\"\n                        size=\"micro\" />\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"(optionLabel && item[optionLabel]) || customOptionTemplate\">\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionCaption && item[optionCaption]\"\n                [class.multiple]=\"multiple\"\n                (mouseenter)=\"onHoverItem(item$.htmlId)\"\n                (mouseleave)=\"onLeaveItem()\">\n                <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"optionDivider && item[optionDivider]\">\n            <div class=\"divider\"></div>\n        </ng-container>\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        ng-label-tmp>\n        <ng-container *ngIf=\"customLabelTemplate\">\n            <ng-container *ngTemplateOutlet=\"customLabelTemplate; context: { option: item }\" />\n        </ng-container>\n        <ng-container *ngIf=\"!optionLabel && !customLabelTemplate\">\n            <ng-container *ngIf=\"displayTypeSignal() === 'text' || !displayTypeSignal()\">\n                <span\n                    class=\"text-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'withAvatar'\">\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel && !customLabelTemplate\">\n            <ng-container *ngIf=\"displayTypeSignal() === 'text' || !displayTypeSignal()\">\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    [title]=\"item[optionLabel]\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                        [showInitials]=\"true\" />\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'withAvatar'\">\n                <div class=\"with-avatar\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                        [showInitials]=\"true\" />\n                    <span\n                        class=\"text-item\"\n                        [title]=\"item[optionLabel]\">\n                        {{ item[optionLabel] }}\n                    </span>\n                </div>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n    <ng-template ng-notfound-tmp>\n        <div class=\"option not-found\">\n            {{ notFoundText }}\n        </div>\n    </ng-template>\n</ng-select>\n\n<ng-template\n    #contentItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    <ng-container *ngIf=\"multiple\">\n        <div class=\"disabled-opaque\"></div>\n        <ap-checkbox\n            *ngIf=\"multiple\"\n            [checked]=\"item$.selected\"\n            [disabled]=\"item$.disabled\"\n            [name]=\"'option-selection-' + item$.htmlId\">\n            <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n        </ap-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"!multiple\">\n        <div class=\"disabled-opaque\"></div>\n        <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #textItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    <div class=\"content\">\n        <ng-container *ngIf=\"!customOptionTemplate\">\n            <ng-container *ngIf=\"!optionLabel\">\n                <span class=\"item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"optionProfileImageUrl\">\n                <ap-avatar\n                    size=\"24\"\n                    [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                    [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                    [showInitials]=\"true\" />\n            </ng-container>\n            <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n                <div class=\"texts\">\n                    <div class=\"first-line\">\n                        <span\n                            class=\"label\"\n                            [title]=\"item[optionLabel]\">\n                            {{ item[optionLabel] }}\n                        </span>\n                        <ng-container *ngIf=\"optionBadgeLabel && item[optionBadgeLabel]\">\n                            <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"optionCaption && item[optionCaption]\">\n                        <span\n                            class=\"caption\"\n                            [title]=\"item[optionCaption]\">\n                            {{ item[optionCaption] }}\n                        </span>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"customOptionTemplate\">\n            <ng-container *ngTemplateOutlet=\"customOptionTemplate; context: { option: item }\" />\n        </ng-container>\n        <ng-container *ngIf=\"only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple\">\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"onSelectOnly(item)\">\n                {{ onlyText }}\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"item$.selected && !multiple\">\n            <ap-symbol\n                symbolId=\"check-2\"\n                color=\"electric-blue\"\n                size=\"micro\" />\n        </ng-container>\n    </div>\n</ng-template>\n\n<div\n    *ngIf=\"errorMessage\"\n    class=\"form-message error\">\n    <ap-symbol\n        symbolId=\"alert-circle\"\n        size=\"micro\" />\n    <span>\n        {{ errorMessage }}\n    </span>\n</div>\n\n<div\n    *ngIf=\"successMessage\"\n    class=\"form-message success\">\n    <ap-symbol\n        symbolId=\"check-circle\"\n        size=\"micro\" />\n    <span>\n        {{ successMessage }}\n    </span>\n</div>\n", styles: ["ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight);color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label .label:hover{cursor:pointer}ap-select.inline .inline-label .label span{width:-moz-fit-content;width:fit-content}ap-select.inline .inline-label .divider{height:18px;max-height:18px;width:1px;margin:0 8px;background-color:var(--comp-select-separator-color);border-radius:1px}ap-select.inline .ng-select .ng-value-container{padding-left:calc(var(--placeholder-padding-left))!important}ap-select.hovered .ng-select-container{border-color:var(--ref-color-grey-40)!important}ap-select label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-select label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-select.invalid:not([disabled]):not(.transparent) .ng-select-container,ap-select.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent) .ng-select-container{border-color:var(--comp-input-border-error-color)}ap-select.valid:not([disabled]):not(.transparent) .ng-select-container{border:1px solid var(--comp-input-border-success-color)}.ng-select.ap-select .ng-select-container{border-color:var(--ref-color-grey-20)}.ng-select.ap-select .ng-select-container:hover{box-shadow:none;cursor:pointer;border-color:var(--ref-color-grey-40)!important}.ng-select.ap-select .ng-select-container .ng-value-container{overflow-x:auto;overflow-y:hidden}.ng-select.ap-select .ng-select-container .ng-value-container:hover,.ng-select.ap-select .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value{overflow:visible!important;width:100%;display:flex}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value span.text-item{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value span{display:inline-block}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-tag{width:100%;margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-tag div{overflow:auto}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-label{margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-label .label{overflow:auto}.ng-select.ap-select.ng-select-multiple .ng-select-container .ng-value-container{padding-left:12px;flex-wrap:nowrap;overflow:hidden}.ng-select.ap-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:0!important}.ng-select.ap-select.ng-select-disabled .ng-select-container{background-color:var(--ref-color-grey-20);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-100)}.ng-select.ap-select.ng-select-disabled .ng-select-container:hover{cursor:default!important;background-color:var(--ref-color-grey-20)!important;border-color:var(--ref-color-grey-20)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-placeholder{color:var(--ref-color-grey-60)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-value-container:hover{cursor:default!important}.ng-select.ap-select .ng-value-container{padding-left:12px;height:100%;position:relative;padding-top:0!important}.ng-select.ap-select .ng-value-container .ng-placeholder{position:absolute;padding-left:0!important;color:var(--ref-color-grey-60);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .multiple-item{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .multiple-item .item{visibility:hidden}.ng-select.ap-select .ng-value-container .multiple-item .text-item{color:var(--ref-color-grey-100);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .with-avatar{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .ng-value{margin:0!important}.ng-select.ap-select .ng-value-container .ng-input{position:unset!important;padding:0!important;height:100%!important}.ng-select.ap-select .ng-value-container .ng-input input{height:100%;color:var(--ref-color-grey-100)!important;caret-color:var(--ref-color-grey-100)!important;border-radius:unset}.ng-select.ap-select.with-error .ng-select-container{border-color:var(--comp-input-border-error-color)}.ng-select.ap-select.with-success .ng-select-container{border-color:var(--comp-input-border-success-color)}.ng-dropdown-panel.ap-select,.ap-select .ng-select-container+.ng-dropdown-panel{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select.ng-select-bottom,.ap-select .ng-select-container+.ng-dropdown-panel.ng-select-bottom{margin-top:var(--ref-spacing-xxxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .ng-option:hover:not(.ng-option-disabled) .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option:active:not(.ng-option-disabled) .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option:focus:not(.ng-option-disabled) .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple),.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple){background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .caption,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option .label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected.ng-option-marked,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected.ng-option-marked .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected.ng-option-marked .option span,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked .option span{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option span,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option span{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option .label{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .caption,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option .caption{color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .caption,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option.multiple .caption{color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled .disabled-opaque,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%;z-index:999}.ng-dropdown-panel.ap-select .loading-state,.ap-select .ng-select-container+.ng-dropdown-panel .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select .loading-state span,.ap-select .ng-select-container+.ng-dropdown-panel .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .group,.ap-select .ng-select-container+.ng-dropdown-panel .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select .group ap-checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label,.ap-select .ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .divider,.ap-select .ng-select-container+.ng-dropdown-panel .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select .create-new,.ap-select .ng-select-container+.ng-dropdown-panel .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select .create-new:hover,.ap-select .ng-select-container+.ng-dropdown-panel .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active,.ap-select .ng-select-container+.ng-dropdown-panel .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .option,.ap-select .ng-select-container+.ng-dropdown-panel .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select .option ap-checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label,.ap-select .ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox label{flex:1;overflow:auto}.ng-dropdown-panel.ap-select .option .option-item,.ap-select .ng-select-container+.ng-dropdown-panel .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;flex:1}.ng-dropdown-panel.ap-select .option.not-found,.ap-select .ng-select-container+.ng-dropdown-panel .option.not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content,.ap-select .ng-select-container+.ng-dropdown-panel .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1;width:100%}.ng-dropdown-panel.ap-select .option .content .item,.ap-select .ng-select-container+.ng-dropdown-panel .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts,.ap-select .ng-select-container+.ng-dropdown-panel .option .content .texts{flex:1;overflow:auto;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line,.ap-select .ng-select-container+.ng-dropdown-panel .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content .texts .first-line .label,.ap-select .ng-select-container+.ng-dropdown-panel .option .content .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select .option .content ap-symbol,.ap-select .ng-select-container+.ng-dropdown-panel .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg,.ap-select .ng-select-container+.ng-dropdown-panel .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .label,.ap-select .ng-select-container+.ng-dropdown-panel .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select .option.with-caption,.ap-select .ng-select-container+.ng-dropdown-panel .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select .option.with-caption .label,.ap-select .ng-select-container+.ng-dropdown-panel .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select .option.with-caption .caption,.ap-select .ng-select-container+.ng-dropdown-panel .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items,.ap-select .ng-select-container+.ng-dropdown-panel .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .ng-optgroup,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-select-all,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-search,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select .ng-optgroup .group,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select .ng-optgroup .group .group-label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header,.ap-select .ng-select-container+.ng-dropdown-panel .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header .select-all-checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer,.ap-select .ng-select-container+.ng-dropdown-panel .ng-dropdown-footer{cursor:pointer;padding:0;border-top:1px solid var(--ref-color-grey-10)}.ng-dropdown-panel.ap-select .standalone-link,.ap-select .ng-select-container+.ng-dropdown-panel .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select .standalone-link:hover,.ap-select .ng-select-container+.ng-dropdown-panel .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active,.ap-select .ng-select-container+.ng-dropdown-panel .standalone-link:active{color:var(--ref-color-electric-blue-150)}.form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-select.ng-valid .ng-select-container{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-select.ng-invalid .ng-select-container{border-color:var(--comp-input-border-error-color)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i2.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: InputComponent, selector: "ap-input", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "disabled", "clearable", "inputType", "inputId", "name", "label", "description", "prefix", "suffix", "required", "placeholder", "errorMessage", "successMessage", "symbolId", "symbolPosition"], outputs: ["focus", "blur", "keyup"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color"], outputs: ["clear"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { _displayType: ["displayType", "_displayType"], _selectedItems: ["selectedItems", "_selectedItems"], _bindLabel: ["bindLabel", "_bindLabel"], _bindValue: ["bindValue", "_bindValue"], _bindAvatarUrl: ["bindAvatarUrl", "_bindAvatarUrl"] }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"multiple-item\">\n    <ng-container *ngFor=\"let item of selectedLabels(); trackBy: trackByItem\">\n        <ap-label\n            *ngIf=\"displayTypeSignal() === 'label'\"\n            class=\"item\"\n            color=\"blue\"\n            removable=\"true\"\n            [content]=\"item.label\"\n            (remove)=\"removeItem.emit(item.value)\" />\n        <ap-tag\n            *ngIf=\"displayTypeSignal() === 'tag'\"\n            class=\"item text-item\"\n            clearable=\"true\"\n            color=\"grey\"\n            (clear)=\"removeItem.emit(item.value)\">\n            <ap-avatar\n                *ngIf=\"item.avatarUrl\"\n                [size]=\"16\"\n                [profilePicture]=\"item.avatarUrl\"\n                [username]=\"item.label\"\n                [showInitials]=\"true\" />\n            {{ item.label }}\n        </ap-tag>\n    </ng-container>\n</div>\n<div\n    *ngIf=\"hiddenCountSignal() > 0\"\n    class=\"remaining\">\n    <ap-tag\n        *ngIf=\"displayTypeSignal() === 'tag'\"\n        class=\"text-item\"\n        color=\"grey\"\n        clearable=\"false\">\n        +{{ hiddenCountSignal() }}\n    </ap-tag>\n    <ap-label\n        *ngIf=\"displayTypeSignal() === 'label'\"\n        color=\"blue\"\n        removable=\"false\"\n        [content]=\"'+' + hiddenCountSignal()\" />\n</div>\n", styles: ["ap-select-label-multiple{display:flex}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-select', standalone: true, imports: [
-                        NgIf,
-                        NgFor,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        NgSelectModule,
-                        InputComponent,
-                        SymbolComponent,
-                        AsyncPipe,
-                        SlicePipe,
-                        CheckboxComponent,
-                        AvatarComponent,
-                        NgTemplateOutlet,
-                        LabelComponent,
-                        TagComponent,
-                        BadgeComponent,
-                        LoaderComponent,
-                    ], providers: [SELECT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<label\n    *ngIf=\"label && !inlineLabel\"\n    [for]=\"selectId\">\n    <span>\n        {{ label }}\n    </span>\n    <span\n        *ngIf=\"description\"\n        class=\"description\">\n        {{ description }}\n    </span>\n</label>\n\n<div\n    *ngIf=\"inlineLabel\"\n    #inlineLabel\n    tabindex=\"0\"\n    class=\"inline-label\"\n    (click)=\"onOpenSelect()\"\n    (keydown.enter)=\"onOpenSelect()\"\n    (mouseenter)=\"onInlineInputEnter()\"\n    (mouseleave)=\"onInlineInputLeave()\">\n    <label\n        *ngIf=\"label && inlineLabel\"\n        class=\"label\"\n        [for]=\"selectId\">\n        <span>\n            {{ label }}\n        </span>\n    </label>\n    <div class=\"divider\"></div>\n</div>\n\n<ng-select\n    #select\n    class=\"ap-select\"\n    [tabIndex]=\"0\"\n    [clearable]=\"clearable\"\n    [placeholder]=\"placeholder\"\n    [labelForId]=\"selectId\"\n    [searchable]=\"false\"\n    [closeOnSelect]=\"!multiple\"\n    [bindValue]=\"optionValue ? optionValue : ''\"\n    [groupBy]=\"group ? optionGroupLabel : ''\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    [markFirst]=\"false\"\n    [selectableGroup]=\"selectableGroup\"\n    [selectableGroupAsModel]=\"false\"\n    [appendTo]=\"appendTo\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    [items]=\"optionsSignal()\"\n    [compareWith]=\"compareWith\"\n    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    (ngModelChange)=\"onSelectedValuesChange($event)\"\n    (open)=\"onSelectOpened()\">\n    <ng-container *ngIf=\"searchable || selectAll\">\n        <ng-template\n            let-item=\"item\"\n            ng-header-tmp>\n            <ng-container *ngIf=\"searchable\">\n                <ap-input\n                    #searchInput\n                    tabindex=\"0\"\n                    name=\"search-input\"\n                    class=\"full-width\"\n                    symbolId=\"search-alternate\"\n                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\" />\n            </ng-container>\n            <ng-container *ngIf=\"selectAll\">\n                <ap-checkbox\n                    class=\"select-all-checkbox\"\n                    name=\"option-group-select-all\"\n                    [indeterminate]=\"partialySelectedSignal()\"\n                    [checked]=\"allSelectedSignal()\"\n                    (click)=\"onToggleAll()\">\n                    <span>\n                        {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n                    </span>\n                </ap-checkbox>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-optgroup-tmp>\n        <div\n            class=\"group\"\n            [class.with-search]=\"searchable\"\n            [class.with-select-all]=\"selectAll\">\n            <ng-container *ngIf=\"!multiple\">\n                <span class=\"group-label\">\n                    {{ item[optionGroupLabel] }}\n                </span>\n                <ap-badge\n                    *ngIf=\"optionGroupTag && optionGroupTag[item[optionGroupLabel]]\"\n                    color=\"blue\">\n                    {{ optionGroupTag[item[optionGroupLabel]] }}\n                </ap-badge>\n            </ng-container>\n            <ng-container *ngIf=\"multiple\">\n                <ap-checkbox\n                    *ngIf=\"selectableGroup\"\n                    [name]=\"'option-group-selection-' + item['group']\"\n                    [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n                    [checked]=\"isGroupChecked(item$.children)\">\n                    <span class=\"group-label\">\n                        {{ item[optionGroupLabel] }}\n                    </span>\n                    <ap-badge\n                        *ngIf=\"optionGroupTag && optionGroupTag[item[optionGroupLabel]]\"\n                        color=\"blue\">\n                        {{ optionGroupTag[item[optionGroupLabel]] }}\n                    </ap-badge>\n                </ap-checkbox>\n                <span\n                    *ngIf=\"!selectableGroup\"\n                    class=\"group-label\">\n                    {{ item[optionGroupLabel] }}\n                </span>\n            </ng-container>\n        </div>\n    </ng-template>\n    <ng-template\n        let-items=\"items\"\n        let-item$=\"item$\"\n        ng-multi-label-tmp>\n        <ng-container>\n            <div class=\"multiple-item\">\n                <ng-container *ngIf=\"!customMultiLabelTemplate\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n                            <ng-container *ngIf=\"displayTypeSignal() === 'text' || !displayTypeSignal()\">\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item[optionLabel]\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                                <ap-label\n                                    color=\"blue\"\n                                    class=\"item\"\n                                    removable=\"true\"\n                                    [content]=\"item[optionLabel]\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    clearable=\"true\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    <ap-avatar\n                                        *ngIf=\"optionProfileImageUrl\"\n                                        size=\"24\"\n                                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                        [showInitials]=\"true\" />\n                                    {{ item[optionLabel] }}\n                                </ap-tag>\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'withAvatar'\">\n                                <div class=\"item with-avatar\">\n                                    <ap-avatar\n                                        *ngIf=\"optionProfileImageUrl\"\n                                        size=\"24\"\n                                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                        [showInitials]=\"true\" />\n                                    <span\n                                        class=\"text-item\"\n                                        [title]=\"item[optionLabel]\">\n                                        {{ item[optionLabel] }}\n                                    </span>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n                            <ng-container *ngIf=\"displayTypeSignal() === 'text' || !displayTypeSignal()\">\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item\">\n                                    {{ item }}\n                                </span>\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                                <ap-label\n                                    class=\"item\"\n                                    color=\"blue\"\n                                    [removable]=\"multiple\"\n                                    [content]=\"item\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    [clearable]=\"multiple\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    {{ item }}\n                                </ap-tag>\n                            </ng-container>\n                            <ng-container *ngIf=\"displayTypeSignal() === 'withAvatar'\">\n                                <div class=\"item with-avatar\">\n                                    <ap-avatar\n                                        *ngIf=\"optionProfileImageUrl\"\n                                        size=\"24\"\n                                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                        [showInitials]=\"true\" />\n                                    <span class=\"text-item\">\n                                        {{ item }}\n                                    </span>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"customMultiLabelTemplate\">\n                    <ng-container *ngTemplateOutlet=\"customMultiLabelTemplate; context: { options: items }\" />\n                </ng-container>\n            </div>\n            <div\n                *ngIf=\"hiddenCountSignal() > 0\"\n                class=\"remaining\">\n                <ng-container *ngIf=\"displayTypeSignal() === 'text' || displayTypeSignal() === 'withAvatar' || !displayTypeSignal()\">\n                    <span class=\"text-item\">+{{ hiddenCountSignal() }}</span>\n                </ng-container>\n                <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                    <ap-tag\n                        class=\"text-item\"\n                        clearable=\"false\">\n                        +{{ hiddenCountSignal() }}\n                    </ap-tag>\n                </ng-container>\n                <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                    <ap-label\n                        color=\"blue\"\n                        [removable]=\"false\"\n                        [content]=\"'+' + hiddenCountSignal()\" />\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n    <ng-template ng-loadingtext-tmp>\n        <div class=\"loading-state\">\n            <ap-loader diameter=\"30\" />\n            <span>\n                {{ loadingText }}\n            </span>\n        </div>\n    </ng-template>\n    <ng-template ng-loadingspinner-tmp></ng-template>\n    <ng-container *ngIf=\"create\">\n        <ng-template ng-footer-tmp>\n            <button\n                class=\"create-new\"\n                type=\"button\"\n                (click)=\"onCreateNew()\">\n                <ap-symbol\n                    symbolId=\"add-2022\"\n                    size=\"micro\" />\n                <span>\n                    {{ createText }}\n                </span>\n                <ng-container *ngIf=\"searchTermSignal()\">\"{{ searchTermSignal() }}\"</ng-container>\n            </button>\n        </ng-template>\n    </ng-container>\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-option-tmp>\n        <ng-container\n            *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider]) && !customOptionTemplate\">\n            <div class=\"option\">\n                <span\n                    class=\"option-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n                <ng-container *ngIf=\"item$.selected && !multiple\">\n                    <ap-symbol\n                        symbolId=\"check-2\"\n                        color=\"electric-blue\"\n                        size=\"micro\" />\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"(optionLabel && item[optionLabel]) || customOptionTemplate\">\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionCaption && item[optionCaption]\"\n                [class.multiple]=\"multiple\"\n                (mouseenter)=\"onHoverItem(item$.htmlId)\"\n                (mouseleave)=\"onLeaveItem()\">\n                <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"optionDivider && item[optionDivider]\">\n            <div class=\"divider\"></div>\n        </ng-container>\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        ng-label-tmp>\n        <ng-container *ngIf=\"customLabelTemplate\">\n            <ng-container *ngTemplateOutlet=\"customLabelTemplate; context: { option: item }\" />\n        </ng-container>\n        <ng-container *ngIf=\"!optionLabel && !customLabelTemplate\">\n            <ng-container *ngIf=\"displayTypeSignal() === 'text' || !displayTypeSignal()\">\n                <span\n                    class=\"text-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'withAvatar'\">\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel && !customLabelTemplate\">\n            <ng-container *ngIf=\"displayTypeSignal() === 'text' || !displayTypeSignal()\">\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    [title]=\"item[optionLabel]\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                        [showInitials]=\"true\" />\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayTypeSignal() === 'withAvatar'\">\n                <div class=\"with-avatar\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                        [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                        [showInitials]=\"true\" />\n                    <span\n                        class=\"text-item\"\n                        [title]=\"item[optionLabel]\">\n                        {{ item[optionLabel] }}\n                    </span>\n                </div>\n            </ng-container>\n        </ng-container>\n    </ng-template>\n    <ng-template ng-notfound-tmp>\n        <div class=\"option not-found\">\n            {{ notFoundText }}\n        </div>\n    </ng-template>\n</ng-select>\n\n<ng-template\n    #contentItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    <ng-container *ngIf=\"multiple\">\n        <div class=\"disabled-opaque\"></div>\n        <ap-checkbox\n            *ngIf=\"multiple\"\n            [checked]=\"item$.selected\"\n            [disabled]=\"item$.disabled\"\n            [name]=\"'option-selection-' + item$.htmlId\">\n            <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n        </ap-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"!multiple\">\n        <div class=\"disabled-opaque\"></div>\n        <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n    </ng-container>\n</ng-template>\n\n<ng-template\n    #textItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    <div class=\"content\">\n        <ng-container *ngIf=\"!customOptionTemplate\">\n            <ng-container *ngIf=\"!optionLabel\">\n                <span class=\"item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"optionProfileImageUrl\">\n                <ap-avatar\n                    size=\"24\"\n                    [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                    [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                    [showInitials]=\"true\" />\n            </ng-container>\n            <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n                <div class=\"texts\">\n                    <div class=\"first-line\">\n                        <span\n                            class=\"label\"\n                            [title]=\"item[optionLabel]\">\n                            {{ item[optionLabel] }}\n                        </span>\n                        <ng-container *ngIf=\"optionBadgeLabel && item[optionBadgeLabel]\">\n                            <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"optionCaption && item[optionCaption]\">\n                        <span\n                            class=\"caption\"\n                            [title]=\"item[optionCaption]\">\n                            {{ item[optionCaption] }}\n                        </span>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"customOptionTemplate\">\n            <ng-container *ngTemplateOutlet=\"customOptionTemplate; context: { option: item }\" />\n        </ng-container>\n        <ng-container *ngIf=\"only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple\">\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"onSelectOnly(item)\">\n                {{ onlyText }}\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"item$.selected && !multiple\">\n            <ap-symbol\n                symbolId=\"check-2\"\n                color=\"electric-blue\"\n                size=\"micro\" />\n        </ng-container>\n    </div>\n</ng-template>\n\n<div\n    *ngIf=\"errorMessage\"\n    class=\"form-message error\">\n    <ap-symbol\n        symbolId=\"alert-circle\"\n        size=\"micro\" />\n    <span>\n        {{ errorMessage }}\n    </span>\n</div>\n\n<div\n    *ngIf=\"successMessage\"\n    class=\"form-message success\">\n    <ap-symbol\n        symbolId=\"check-circle\"\n        size=\"micro\" />\n    <span>\n        {{ successMessage }}\n    </span>\n</div>\n", styles: ["ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight);color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label .label:hover{cursor:pointer}ap-select.inline .inline-label .label span{width:-moz-fit-content;width:fit-content}ap-select.inline .inline-label .divider{height:18px;max-height:18px;width:1px;margin:0 8px;background-color:var(--comp-select-separator-color);border-radius:1px}ap-select.inline .ng-select .ng-value-container{padding-left:calc(var(--placeholder-padding-left))!important}ap-select.hovered .ng-select-container{border-color:var(--ref-color-grey-40)!important}ap-select label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-select label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-select.invalid:not([disabled]):not(.transparent) .ng-select-container,ap-select.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent) .ng-select-container{border-color:var(--comp-input-border-error-color)}ap-select.valid:not([disabled]):not(.transparent) .ng-select-container{border:1px solid var(--comp-input-border-success-color)}.ng-select.ap-select .ng-select-container{border-color:var(--ref-color-grey-20)}.ng-select.ap-select .ng-select-container:hover{box-shadow:none;cursor:pointer;border-color:var(--ref-color-grey-40)!important}.ng-select.ap-select .ng-select-container .ng-value-container{overflow-x:auto;overflow-y:hidden}.ng-select.ap-select .ng-select-container .ng-value-container:hover,.ng-select.ap-select .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value{overflow:visible!important;width:100%;display:flex}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value span.text-item{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value span{display:inline-block}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-tag{width:100%;margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-tag div{overflow:auto}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-label{margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-label .label{overflow:auto}.ng-select.ap-select.ng-select-multiple .ng-select-container .ng-value-container{padding-left:12px;flex-wrap:nowrap;overflow:hidden}.ng-select.ap-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:0!important}.ng-select.ap-select.ng-select-disabled .ng-select-container{background-color:var(--ref-color-grey-20);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-100)}.ng-select.ap-select.ng-select-disabled .ng-select-container:hover{cursor:default!important;background-color:var(--ref-color-grey-20)!important;border-color:var(--ref-color-grey-20)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-placeholder{color:var(--ref-color-grey-60)!important}.ng-select.ap-select.ng-select-disabled .ng-select-container .ng-value-container:hover{cursor:default!important}.ng-select.ap-select .ng-value-container{padding-left:12px;height:100%;position:relative;padding-top:0!important}.ng-select.ap-select .ng-value-container .ng-placeholder{position:absolute;padding-left:0!important;color:var(--ref-color-grey-60);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .multiple-item{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .multiple-item .item{visibility:hidden}.ng-select.ap-select .ng-value-container .multiple-item .text-item{color:var(--ref-color-grey-100);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select .ng-value-container .with-avatar{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select .ng-value-container .ng-value{margin:0!important}.ng-select.ap-select .ng-value-container .ng-input{position:unset!important;padding:0!important;height:100%!important}.ng-select.ap-select .ng-value-container .ng-input input{height:100%;color:var(--ref-color-grey-100)!important;caret-color:var(--ref-color-grey-100)!important;border-radius:unset}.ng-select.ap-select.with-error .ng-select-container{border-color:var(--comp-input-border-error-color)}.ng-select.ap-select.with-success .ng-select-container{border-color:var(--comp-input-border-success-color)}.ng-dropdown-panel.ap-select,.ap-select .ng-select-container+.ng-dropdown-panel{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select.ng-select-bottom,.ap-select .ng-select-container+.ng-dropdown-panel.ng-select-bottom{margin-top:var(--ref-spacing-xxxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .ng-option:hover:not(.ng-option-disabled) .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option:active:not(.ng-option-disabled) .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option:focus:not(.ng-option-disabled) .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple),.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple){background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option:not(.multiple) .caption,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option .label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected.ng-option-marked,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected.ng-option-marked .option,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected.ng-option-marked .option span,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked .option span{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option span,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option span{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option .label{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .caption,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option .caption{color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .caption,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option.multiple .caption{color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled .disabled-opaque,.ap-select .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%;z-index:999}.ng-dropdown-panel.ap-select .loading-state,.ap-select .ng-select-container+.ng-dropdown-panel .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select .loading-state span,.ap-select .ng-select-container+.ng-dropdown-panel .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .group,.ap-select .ng-select-container+.ng-dropdown-panel .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select .group ap-checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label,.ap-select .ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .divider,.ap-select .ng-select-container+.ng-dropdown-panel .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select .create-new,.ap-select .ng-select-container+.ng-dropdown-panel .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select .create-new:hover,.ap-select .ng-select-container+.ng-dropdown-panel .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active,.ap-select .ng-select-container+.ng-dropdown-panel .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .option,.ap-select .ng-select-container+.ng-dropdown-panel .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select .option ap-checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label,.ap-select .ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox label{flex:1;overflow:auto}.ng-dropdown-panel.ap-select .option .option-item,.ap-select .ng-select-container+.ng-dropdown-panel .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;flex:1}.ng-dropdown-panel.ap-select .option.not-found,.ap-select .ng-select-container+.ng-dropdown-panel .option.not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content,.ap-select .ng-select-container+.ng-dropdown-panel .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1;width:100%}.ng-dropdown-panel.ap-select .option .content .item,.ap-select .ng-select-container+.ng-dropdown-panel .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts,.ap-select .ng-select-container+.ng-dropdown-panel .option .content .texts{flex:1;overflow:auto;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line,.ap-select .ng-select-container+.ng-dropdown-panel .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content .texts .first-line .label,.ap-select .ng-select-container+.ng-dropdown-panel .option .content .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select .option .content ap-symbol,.ap-select .ng-select-container+.ng-dropdown-panel .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg,.ap-select .ng-select-container+.ng-dropdown-panel .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .label,.ap-select .ng-select-container+.ng-dropdown-panel .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select .option.with-caption,.ap-select .ng-select-container+.ng-dropdown-panel .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select .option.with-caption .label,.ap-select .ng-select-container+.ng-dropdown-panel .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select .option.with-caption .caption,.ap-select .ng-select-container+.ng-dropdown-panel .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items,.ap-select .ng-select-container+.ng-dropdown-panel .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .ng-optgroup,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-select-all,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-search,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select .ng-optgroup .group,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select .ng-optgroup .group .group-label,.ap-select .ng-select-container+.ng-dropdown-panel .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header,.ap-select .ng-select-container+.ng-dropdown-panel .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header .select-all-checkbox,.ap-select .ng-select-container+.ng-dropdown-panel .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer,.ap-select .ng-select-container+.ng-dropdown-panel .ng-dropdown-footer{cursor:pointer;padding:0;border-top:1px solid var(--ref-color-grey-10)}.ng-dropdown-panel.ap-select .standalone-link,.ap-select .ng-select-container+.ng-dropdown-panel .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select .standalone-link:hover,.ap-select .ng-select-container+.ng-dropdown-panel .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active,.ap-select .ng-select-container+.ng-dropdown-panel .standalone-link:active{color:var(--ref-color-electric-blue-150)}.form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-select.ng-valid .ng-select-container{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-select.ng-invalid .ng-select-container{border-color:var(--comp-input-border-error-color)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { searchInput: [{
-                type: ViewChild,
-                args: ['searchInput']
-            }], inlineLabelElement: [{
-                type: ViewChild,
-                args: ['inlineLabel']
-            }], select: [{
-                type: ViewChild,
-                args: ['select']
-            }], hovered: [{
-                type: HostBinding,
-                args: ['class.hovered']
-            }], options: [{
+            args: [{ selector: 'ap-select-label-multiple', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, NgIf, LabelComponent, TagComponent, AvatarComponent], template: "<div class=\"multiple-item\">\n    <ng-container *ngFor=\"let item of selectedLabels(); trackBy: trackByItem\">\n        <ap-label\n            *ngIf=\"displayTypeSignal() === 'label'\"\n            class=\"item\"\n            color=\"blue\"\n            removable=\"true\"\n            [content]=\"item.label\"\n            (remove)=\"removeItem.emit(item.value)\" />\n        <ap-tag\n            *ngIf=\"displayTypeSignal() === 'tag'\"\n            class=\"item text-item\"\n            clearable=\"true\"\n            color=\"grey\"\n            (clear)=\"removeItem.emit(item.value)\">\n            <ap-avatar\n                *ngIf=\"item.avatarUrl\"\n                [size]=\"16\"\n                [profilePicture]=\"item.avatarUrl\"\n                [username]=\"item.label\"\n                [showInitials]=\"true\" />\n            {{ item.label }}\n        </ap-tag>\n    </ng-container>\n</div>\n<div\n    *ngIf=\"hiddenCountSignal() > 0\"\n    class=\"remaining\">\n    <ap-tag\n        *ngIf=\"displayTypeSignal() === 'tag'\"\n        class=\"text-item\"\n        color=\"grey\"\n        clearable=\"false\">\n        +{{ hiddenCountSignal() }}\n    </ap-tag>\n    <ap-label\n        *ngIf=\"displayTypeSignal() === 'label'\"\n        color=\"blue\"\n        removable=\"false\"\n        [content]=\"'+' + hiddenCountSignal()\" />\n</div>\n", styles: ["ap-select-label-multiple{display:flex}\n"] }]
+        }], propDecorators: { _displayType: [{
                 type: Input,
-                args: [{ required: true }]
-            }], ariaLabel: [{
-                type: Input
-            }], ariaLabelledBy: [{
-                type: Input
-            }], ariaDescribedBy: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], clearable: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], selectId: [{
-                type: Input
-            }], inlineLabel: [{
-                type: HostBinding,
-                args: ['class.inline']
-            }, {
-                type: Input
-            }], create: [{
-                type: Input
-            }], createText: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], selectableGroup: [{
+                args: [{ alias: 'displayType' }]
+            }], _selectedItems: [{
+                type: Input,
+                args: [{ required: true, alias: 'selectedItems' }]
+            }], _bindLabel: [{
+                type: Input,
+                args: [{ alias: 'bindLabel' }]
+            }], _bindValue: [{
+                type: Input,
+                args: [{ alias: 'bindValue' }]
+            }], _bindAvatarUrl: [{
+                type: Input,
+                args: [{ alias: 'bindAvatarUrl' }]
+            }], removeItem: [{
+                type: Output
+            }] } });
+
+class SelectLabelSingleComponent {
+    displayType = 'text';
+    label;
+    avatarUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: "displayType", label: "label", avatarUrl: "avatarUrl" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"displayType\">\n    <ng-container *ngSwitchCase=\"'text'\">\n        <span\n            class=\"text-item\"\n            [title]=\"label\">\n            {{ label }}\n        </span>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'label'\">\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label\" />\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'tag'\">\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            <ap-avatar\n                *ngIf=\"avatarUrl\"\n                [size]=\"16\"\n                [username]=\"label\"\n                [showInitials]=\"true\"\n                [profilePicture]=\"avatarUrl\" />\n            {{ label }}\n        </ap-tag>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'withAvatar'\">\n        <ap-avatar\n            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"true\"\n            [profilePicture]=\"avatarUrl\" />\n        <span class=\"text-item\">\n            {{ label }}\n        </span>\n    </ng-container>\n</ng-container>\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-select-label-single', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgSwitch, NgSwitchCase, LabelComponent, TagComponent, AvatarComponent], template: "<ng-container [ngSwitch]=\"displayType\">\n    <ng-container *ngSwitchCase=\"'text'\">\n        <span\n            class=\"text-item\"\n            [title]=\"label\">\n            {{ label }}\n        </span>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'label'\">\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label\" />\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'tag'\">\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            <ap-avatar\n                *ngIf=\"avatarUrl\"\n                [size]=\"16\"\n                [username]=\"label\"\n                [showInitials]=\"true\"\n                [profilePicture]=\"avatarUrl\" />\n            {{ label }}\n        </ap-tag>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'withAvatar'\">\n        <ap-avatar\n            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"true\"\n            [profilePicture]=\"avatarUrl\" />\n        <span class=\"text-item\">\n            {{ label }}\n        </span>\n    </ng-container>\n</ng-container>\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"] }]
+        }], propDecorators: { displayType: [{
                 type: Input
             }], label: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], avatarUrl: [{
                 type: Input
-            }], multiple: [{
-                type: Input
-            }], only: [{
-                type: Input
-            }], onlyText: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], selectAll: [{
-                type: Input
-            }], selectAllText: [{
-                type: Input
-            }], unselectAllText: [{
-                type: Input
-            }], searchable: [{
-                type: Input
-            }], searchPlaceholder: [{
-                type: Input
-            }], searchFn: [{
-                type: Input
-            }], notFoundText: [{
-                type: Input
-            }], loadingText: [{
-                type: Input
-            }], displayType: [{
-                type: Input
-            }], optionLabel: [{
-                type: Input
-            }], optionCaption: [{
-                type: Input
-            }], optionDivider: [{
-                type: Input
-            }], optionProfileImageUrl: [{
-                type: Input
-            }], optionBadgeLabel: [{
-                type: Input
-            }], optionValue: [{
-                type: Input
-            }], optionDisabled: [{
-                type: Input
-            }], optionGroupLabel: [{
-                type: Input
-            }], optionGroupTag: [{
-                type: Input
-            }], maximumDisplayOptions: [{
-                type: Input
-            }], customOptionTemplate: [{
-                type: Input
-            }], customLabelTemplate: [{
-                type: Input
-            }], customMultiLabelTemplate: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], successMessage: [{
-                type: Input
-            }], compareWith: [{
+            }] } });
+
+class SelectBaseDirective {
+    inlineLabel;
+    symbolId;
+    selectComponent = inject(NgSelectComponent);
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    viewContainerRef = inject(ViewContainerRef);
+    symbolRegistry = inject(SymbolRegistry);
+    constructor() {
+        this.selectComponent.appendTo = 'body';
+        this.selectComponent.searchable = false;
+        this.selectComponent.clearable = false;
+        this.selectComponent.markFirst = false;
+        this.selectComponent.selectableGroupAsModel = false;
+        this.selectComponent.tabIndex = 0;
+        this.symbolRegistry.registerSymbols([apCheck2, apAdd2022]);
+    }
+    ngOnInit() {
+        if (this.symbolId) {
+            this.addInlineSymbol(this.symbolId);
+        }
+        if (this.inlineLabel) {
+            this.addInlineLabel(this.inlineLabel);
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.selectComponent.optionTemplate) {
+            throw new Error('optionTemplate is required for apSelect');
+        }
+        if (this.selectComponent.groupBy && !this.selectComponent.optgroupTemplate) {
+            throw new Error('optgroupTemplate is required for apSelect');
+        }
+    }
+    addInlineSymbol(symbolId) {
+        const componentRef = this.viewContainerRef.createComponent(SymbolComponent);
+        componentRef.instance.symbolId = symbolId;
+        componentRef.location.nativeElement.classList.add('inline-symbol');
+        // add class to component
+        this.renderer.insertBefore(this.el.nativeElement.getElementsByClassName('ng-select-container').item(0), componentRef.location.nativeElement, this.el.nativeElement.getElementsByClassName('ng-value-container').item(0));
+    }
+    addInlineLabel(label) {
+        const labelElement = this.renderer.createElement('label');
+        this.renderer.setProperty(labelElement, 'textContent', label);
+        this.renderer.addClass(labelElement, 'inline-label'); // Add appropriate CSS class
+        this.renderer.insertBefore(this.el.nativeElement.getElementsByClassName('ng-select-container').item(0), labelElement, this.el.nativeElement.getElementsByClassName('ng-value-container').item(0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: SelectBaseDirective, isStandalone: true, selector: "ng-select[apSelect]", inputs: { inlineLabel: "inlineLabel", symbolId: "symbolId" }, host: { classAttribute: "ap-select" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-select[apSelect]',
+                    standalone: true,
+                    host: {
+                        class: 'ap-select',
+                    },
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inlineLabel: [{
+                type: Input
+            }], symbolId: [{
                 type: Input
-            }], createNew: [{
-                type: Output
-            }], valueChanges: [{
-                type: Output
             }] } });
 
+class SelectMultipleDirective {
+    selectComponent = inject(NgSelectComponent);
+    constructor() {
+        this.selectComponent.multiple = true;
+        this.selectComponent.closeOnSelect = false;
+    }
+    ngAfterViewInit() {
+        if (!this.selectComponent.multiLabelTemplate) {
+            throw new Error('multiLabelTemplate is required for apSelectMultiple');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: SelectMultipleDirective, isStandalone: true, selector: "ng-select[apSelectMultiple]", hostDirectives: [{ directive: SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectMultipleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-select[apSelectMultiple]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: SelectBaseDirective,
+                            inputs: ['inlineLabel', 'symbolId'],
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class SelectSingleDirective {
+    selectComponent = inject(NgSelectComponent);
+    constructor() {
+        this.selectComponent.multiple = false;
+        this.selectComponent.closeOnSelect = true;
+    }
+    ngAfterViewInit() {
+        if (!this.selectComponent.labelTemplate) {
+            throw new Error('labelTemplate is required for apSelectSingle');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectSingleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", 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: "16.2.10", ngImport: i0, type: SelectSingleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-select[apSelectSingle]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: SelectBaseDirective,
+                            inputs: ['inlineLabel', 'symbolId'],
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ApSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, imports: [SelectMultipleDirective,
+            SelectSingleDirective,
+            DropdownItemSingleOneLineComponent,
+            DropdownItemSingleTwoLinesComponent,
+            DropdownItemMultipleOneLineComponent,
+            DropdownItemMultipleTwoLinesComponent,
+            SelectLabelSingleComponent,
+            SelectLabelMultipleComponent,
+            DropdownSearchFormComponent,
+            DropdownGroupItemComponent], exports: [SelectMultipleDirective,
+            SelectSingleDirective,
+            DropdownItemSingleOneLineComponent,
+            DropdownItemSingleTwoLinesComponent,
+            DropdownItemMultipleOneLineComponent,
+            DropdownItemMultipleTwoLinesComponent,
+            SelectLabelSingleComponent,
+            SelectLabelMultipleComponent,
+            DropdownSearchFormComponent,
+            DropdownGroupItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, imports: [DropdownItemSingleOneLineComponent,
+            DropdownItemSingleTwoLinesComponent,
+            DropdownItemMultipleOneLineComponent,
+            DropdownItemMultipleTwoLinesComponent,
+            SelectLabelSingleComponent,
+            SelectLabelMultipleComponent,
+            DropdownSearchFormComponent,
+            DropdownGroupItemComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SelectMultipleDirective,
+                        SelectSingleDirective,
+                        DropdownItemSingleOneLineComponent,
+                        DropdownItemSingleTwoLinesComponent,
+                        DropdownItemMultipleOneLineComponent,
+                        DropdownItemMultipleTwoLinesComponent,
+                        SelectLabelSingleComponent,
+                        SelectLabelMultipleComponent,
+                        DropdownSearchFormComponent,
+                        DropdownGroupItemComponent,
+                    ],
+                    exports: [
+                        SelectMultipleDirective,
+                        SelectSingleDirective,
+                        DropdownItemSingleOneLineComponent,
+                        DropdownItemSingleTwoLinesComponent,
+                        DropdownItemMultipleOneLineComponent,
+                        DropdownItemMultipleTwoLinesComponent,
+                        SelectLabelSingleComponent,
+                        SelectLabelMultipleComponent,
+                        DropdownSearchFormComponent,
+                        DropdownGroupItemComponent,
+                    ],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SELECT_VALUE_ACCESSOR, SelectComponent };
+export { ApSelectModule, DropdownGroupItemComponent, DropdownItemMultipleOneLineComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent, DropdownSearchFormComponent, SelectBaseDirective, SelectLabelMultipleComponent, SelectLabelSingleComponent, SelectMultipleDirective, SelectSingleDirective };
 //# sourceMappingURL=agorapulse-ui-components-select.mjs.map