@agorapulse/ui-components 16.0.8 → 16.1.0-beta

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

@@ -0,0 +1,354 @@
+import { LoaderComponent } from '@agorapulse/ui-animations';
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { BadgeComponent } from '@agorapulse/ui-components/badge';
+import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
+import { InputComponent } from '@agorapulse/ui-components/input';
+import { LabelComponent } from '@agorapulse/ui-components/labels';
+import { TagComponent } from '@agorapulse/ui-components/tag';
+import { SymbolRegistry, apCheck2, apSearchAlternate, apAdd2022, apDeleteNoCircle, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NgIf, NgFor, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, inject, DestroyRef, ElementRef, signal, EventEmitter, computed, 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, of } from 'rxjs';
+
+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;
+    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`);
+    }
+    get inlineLabel() {
+        return this._inline;
+    }
+    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';
+    displayType = 'text';
+    optionLabel;
+    optionCaption;
+    optionDivider = 'divider';
+    optionProfileImageUrl = 'profileImageUrl';
+    optionBadgeLabel;
+    optionValue = 'id';
+    optionDisabled = 'disabled';
+    optionGroupLabel = 'group';
+    optionGroupTag;
+    createNew = new EventEmitter();
+    _controlValueAccessorChangeFn;
+    onTouched;
+    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);
+    allSelectedSignal = computed(() => {
+        return this.selectedValuesSignal().length === this.enabledOptions().length;
+    });
+    partialySelectedSignal = computed(() => {
+        return this.selectedValuesSignal().length > 0 && this.selectedValuesSignal().length < this.enabledOptions().length;
+    });
+    constructor() {
+        this.symbolRegistry.registerSymbols([apCheck2, 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() {
+        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);
+        });
+    }
+    ngAfterViewInit() {
+        if (!this.inlineLabelElement) {
+            return;
+        }
+        this.elementRef.nativeElement.style.setProperty('--placeholder-padding-left', `${this.inlineLabelElement.nativeElement.clientWidth}px`);
+    }
+    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.selectedValuesSignal.set([item[this.optionValue]]);
+        }
+    }
+    onSelectOpened() {
+        setTimeout(() => {
+            if (this.onTouched) {
+                this.onTouched();
+            }
+            if (this._controlValueAccessorChangeFn) {
+                this._controlValueAccessorChangeFn(this.selectedValuesSignal());
+            }
+            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.itemHoveredSignal.set(null);
+    }
+    onToggleAll() {
+        if (this.partialySelectedSignal() || this.partialySelectedSignal()) {
+            this.selectedValuesSignal.set([]);
+        }
+        else {
+            this.selectedValuesSignal.set(this.enabledOptions().map((value) => {
+                if (typeof value === 'string') {
+                    return value;
+                }
+                return this.optionValue && value[this.optionValue];
+            }));
+        }
+    }
+    onSelectedValuesChange(selectedValues) {
+        this.selectedValuesSignal.set(selectedValues);
+    }
+    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 : item[this.optionValue];
+        this.selectedValuesSignal.update((selectedValues) => selectedValues.filter((selectedValue) => selectedValue !== selectedItemId));
+    }
+    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" }, outputs: { createNew: "createNew" }, 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    tabIndex=\"0\"\n    *ngIf=\"inlineLabel\"\n    #inlineLabel\n    class=\"inline-label\"\n    (click)=\"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 ? false : true\"\n    [bindValue]=\"optionValue ? optionValue : 'label'\"\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    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\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                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\">\n                    <ap-symbol symbolId=\"search-alternate\" />\n                </ap-input>\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.group }}\n                </span>\n                <ap-badge\n                    *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n                    color=\"blue\">\n                    {{ optionGroupTag[item.group] }}\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.group }}\n                    </span>\n                    <ap-badge\n                        *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n                        color=\"blue\">\n                        {{ optionGroupTag[item.group] }}\n                    </ap-badge>\n                </ap-checkbox>\n                <span\n                    *ngIf=\"!selectableGroup\"\n                    class=\"group-label\">\n                    {{ item.group }}\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 *ngFor=\"let item of items\">\n                    <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n                        <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                            <span class=\"text-item\">\n                                {{ item[optionLabel] }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'label'\">\n                            <ap-label\n                                color=\"blue\"\n                                removable=\"true\"\n                                [content]=\"item[optionLabel]\"\n                                (remove)=\"removeSelectedItem($event, item)\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'tag'\">\n                            <ap-tag\n                                class=\"text-item\"\n                                clearable=\"true\"\n                                (clear)=\"removeSelectedItem($event, item)\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                {{ item[optionLabel] }}\n                            </ap-tag>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                            <div class=\"with-avatar\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                <span class=\"text-item\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n                        <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                            <span class=\"text-item\">\n                                {{ item }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'label'\">\n                            <ap-label\n                                color=\"blue\"\n                                removable=\"true\"\n                                [content]=\"item\"\n                                (remove)=\"removeSelectedItem($event, item)\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'tag'\">\n                            <ap-tag\n                                class=\"text-item\"\n                                clearable=\"true\"\n                                \u2202\n                                (clear)=\"removeSelectedItem($event, item)\">\n                                {{ item }}\n                            </ap-tag>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                            <div class=\"with-avatar\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                <span class=\"text-item\">\n                                    {{ item }}\n                                </span>\n                            </div>\n                        </ng-container>\n                    </ng-container>\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                (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 *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n            <div class=\"option\">{{ item }}</div>\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionLabel && 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=\"!optionLabel\">\n            <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    removable=\"true\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    clearable=\"true\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel\">\n            <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    removable=\"true\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    clearable=\"true\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl]\" />\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                <div class=\"with-avatar\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl]\" />\n                    <span class=\"text-item\">\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        <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=\"!optionLabel\">\n            <span class=\"item\">\n                {{ item }}\n            </span>\n        </ng-container>\n        <ng-container *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\">\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"item[optionProfileImageUrl]\" />\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n            <div class=\"texts\">\n                <div class=\"first-line\">\n                    <span class=\"label\">{{ item[optionLabel] }}</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 class=\"caption\">\n                        {{ item[optionCaption] }}\n                    </span>\n                </ng-container>\n            </div>\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                size=\"micro\" />\n        </ng-container>\n    </div>\n</ng-template>\n", styles: ["@import\"~@ng-select/ng-select/themes/default.theme.css\";ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs)}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)}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)}.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: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}.ng-select.ap-select.ng-select-multiple .ng-value-container{padding-left:12px}.ng-select.ap-select.ng-select-multiple .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 .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-dropdown-panel.ap-select{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{margin-top:var(--ref-spacing-xxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .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{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .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 .option{background-color:var(--ref-color-electric-blue-10);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) .label,.ng-dropdown-panel.ap-select .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{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-marked,.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .label{color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .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%}.ng-dropdown-panel.ap-select .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{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{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{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .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{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{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .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{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label{flex:1}.ng-dropdown-panel.ap-select .option.not-found{padding:11px var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1}.ng-dropdown-panel.ap-select .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts{flex:1;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .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{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{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{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)}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .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{border:none}.ng-dropdown-panel.ap-select .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{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{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{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer{cursor:pointer;padding:0}.ng-dropdown-panel.ap-select .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{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active{color:var(--ref-color-electric-blue-150)}\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", "symbolPosition"] }, { 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-select', standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        NgSelectModule,
+                        InputComponent,
+                        SymbolComponent,
+                        AsyncPipe,
+                        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    tabIndex=\"0\"\n    *ngIf=\"inlineLabel\"\n    #inlineLabel\n    class=\"inline-label\"\n    (click)=\"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 ? false : true\"\n    [bindValue]=\"optionValue ? optionValue : 'label'\"\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    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\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                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\">\n                    <ap-symbol symbolId=\"search-alternate\" />\n                </ap-input>\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.group }}\n                </span>\n                <ap-badge\n                    *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n                    color=\"blue\">\n                    {{ optionGroupTag[item.group] }}\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.group }}\n                    </span>\n                    <ap-badge\n                        *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n                        color=\"blue\">\n                        {{ optionGroupTag[item.group] }}\n                    </ap-badge>\n                </ap-checkbox>\n                <span\n                    *ngIf=\"!selectableGroup\"\n                    class=\"group-label\">\n                    {{ item.group }}\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 *ngFor=\"let item of items\">\n                    <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n                        <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                            <span class=\"text-item\">\n                                {{ item[optionLabel] }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'label'\">\n                            <ap-label\n                                color=\"blue\"\n                                removable=\"true\"\n                                [content]=\"item[optionLabel]\"\n                                (remove)=\"removeSelectedItem($event, item)\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'tag'\">\n                            <ap-tag\n                                class=\"text-item\"\n                                clearable=\"true\"\n                                (clear)=\"removeSelectedItem($event, item)\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                {{ item[optionLabel] }}\n                            </ap-tag>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                            <div class=\"with-avatar\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                <span class=\"text-item\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n                        <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                            <span class=\"text-item\">\n                                {{ item }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'label'\">\n                            <ap-label\n                                color=\"blue\"\n                                removable=\"true\"\n                                [content]=\"item\"\n                                (remove)=\"removeSelectedItem($event, item)\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'tag'\">\n                            <ap-tag\n                                class=\"text-item\"\n                                clearable=\"true\"\n                                \u2202\n                                (clear)=\"removeSelectedItem($event, item)\">\n                                {{ item }}\n                            </ap-tag>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                            <div class=\"with-avatar\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                <span class=\"text-item\">\n                                    {{ item }}\n                                </span>\n                            </div>\n                        </ng-container>\n                    </ng-container>\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                (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 *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n            <div class=\"option\">{{ item }}</div>\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionLabel && 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=\"!optionLabel\">\n            <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    removable=\"true\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    clearable=\"true\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel\">\n            <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    removable=\"true\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    clearable=\"true\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl]\" />\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                <div class=\"with-avatar\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl]\" />\n                    <span class=\"text-item\">\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        <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=\"!optionLabel\">\n            <span class=\"item\">\n                {{ item }}\n            </span>\n        </ng-container>\n        <ng-container *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\">\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"item[optionProfileImageUrl]\" />\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n            <div class=\"texts\">\n                <div class=\"first-line\">\n                    <span class=\"label\">{{ item[optionLabel] }}</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 class=\"caption\">\n                        {{ item[optionCaption] }}\n                    </span>\n                </ng-container>\n            </div>\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                size=\"micro\" />\n        </ng-container>\n    </div>\n</ng-template>\n", styles: ["@import\"~@ng-select/ng-select/themes/default.theme.css\";ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs)}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)}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)}.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: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}.ng-select.ap-select.ng-select-multiple .ng-value-container{padding-left:12px}.ng-select.ap-select.ng-select-multiple .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 .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-dropdown-panel.ap-select{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{margin-top:var(--ref-spacing-xxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .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{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .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 .option{background-color:var(--ref-color-electric-blue-10);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) .label,.ng-dropdown-panel.ap-select .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{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-marked,.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option .label{color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100);font-weight:var(--ref-font-weight-bold)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .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%}.ng-dropdown-panel.ap-select .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{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{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{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .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{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{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .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{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label{flex:1}.ng-dropdown-panel.ap-select .option.not-found{padding:11px var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1}.ng-dropdown-panel.ap-select .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts{flex:1;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .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{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{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{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)}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .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{border:none}.ng-dropdown-panel.ap-select .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{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{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{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer{cursor:pointer;padding:0}.ng-dropdown-panel.ap-select .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{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active{color:var(--ref-color-electric-blue-150)}\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: [{
+                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: [{
+                type: Input
+            }], label: [{
+                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
+            }], createNew: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SELECT_VALUE_ACCESSOR, SelectComponent };
+//# sourceMappingURL=agorapulse-ui-components-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-select.mjs","sources":["../../../libs/ui-components/select/src/select.component.ts","../../../libs/ui-components/select/src/select.component.html","../../../libs/ui-components/select/src/agorapulse-ui-components-select.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { CheckboxComponent } from '@agorapulse/ui-components/checkbox';\nimport { InputComponent } from '@agorapulse/ui-components/input';\nimport { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { TagComponent } from '@agorapulse/ui-components/tag';\nimport { SymbolComponent, SymbolRegistry, apAdd2022, apCheck2, apDeleteNoCircle, apSearchAlternate } from '@agorapulse/ui-symbol';\nimport { AsyncPipe, JsonPipe, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    DestroyRef,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnInit,\n    Output,\n    Provider,\n    Signal,\n    ViewChild,\n    ViewEncapsulation,\n    WritableSignal,\n    computed,\n    forwardRef,\n    inject,\n    signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { NgOption, NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';\nimport { Observable, debounceTime, of, skip, switchMap, tap } from 'rxjs';\n\nexport type DisplayType = 'text' | 'label' | 'tag' | 'withAvatar';\n\nexport const SELECT_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => SelectComponent),\n    multi: true,\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-select',\n    styleUrls: ['./select.component.scss'],\n    standalone: true,\n    imports: [\n        NgIf,\n        NgFor,\n        ReactiveFormsModule,\n        FormsModule,\n        NgSelectModule,\n        InputComponent,\n        SymbolComponent,\n        AsyncPipe,\n        CheckboxComponent,\n        AvatarComponent,\n        NgTemplateOutlet,\n        LabelComponent,\n        TagComponent,\n        BadgeComponent,\n        LoaderComponent,\n    ],\n    providers: [SELECT_VALUE_ACCESSOR],\n    templateUrl: './select.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class SelectComponent<T extends Record<string, unknown> | string> implements OnInit, AfterViewInit, ControlValueAccessor {\n    private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n    private destroyRef: DestroyRef = inject(DestroyRef);\n    private elementRef: ElementRef = inject(ElementRef);\n\n    @ViewChild('searchInput') searchInput!: InputComponent;\n    @ViewChild('inlineLabel') inlineLabelElement!: ElementRef<HTMLDivElement>;\n    @ViewChild('select') select!: NgSelectComponent;\n\n    @HostBinding('class.hovered') hovered: boolean = false;\n\n    optionsSignal = signal<T[]>([]);\n    @Input({ required: true }) set options(options: T[]) {\n        this.optionsSignal.set(options);\n        this.filteredOptionsSignal.set(options);\n    }\n\n    @Input() ariaLabel!: string;\n    @Input() ariaLabelledBy!: string;\n    @Input() ariaDescribedBy!: string;\n    @Input() appendTo: string = 'body';\n    @Input() clearable: boolean = false;\n    @Input() description?: string;\n    @Input() disabled: boolean = false;\n    @Input() selectId?: string;\n\n    private _inline: boolean = false;\n    @HostBinding('class.inline')\n    @Input()\n    set inlineLabel(inlineLabel: boolean) {\n        this._inline = inlineLabel;\n        if (!this.inlineLabelElement) {\n            return;\n        }\n        this.elementRef.nativeElement.style.setProperty(\n            '--placeholder-padding-left',\n            `${this.inlineLabelElement.nativeElement.clientWidth}px`\n        );\n    }\n\n    get inlineLabel(): boolean {\n        return this._inline;\n    }\n\n    @Input() create: boolean = false;\n    @Input() createText: string = 'Create';\n    @Input() group: boolean = false;\n    @Input() selectableGroup: boolean = true;\n    @Input() label: string = '';\n    @Input() multiple: boolean = false;\n    @Input() only: boolean = false;\n    @Input() onlyText: string = 'Only';\n    @Input() placeholder: string = 'Select...';\n    @Input() selectAll: boolean = false;\n    @Input() selectAllText: string = 'Select all';\n    @Input() unselectAllText: string = 'Unselect all';\n    @Input() searchable: boolean = false;\n    @Input() searchPlaceholder: string = 'Search...';\n    @Input() searchFn: (term: string) => Observable<T[]> = this.defaultSearchFn;\n    @Input() notFoundText: string = 'No results found';\n    @Input() loadingText: string = 'Loading items';\n    @Input() displayType: DisplayType = 'text';\n\n    @Input() optionLabel?: string;\n    @Input() optionCaption?: string;\n    @Input() optionDivider?: string = 'divider';\n    @Input() optionProfileImageUrl: string = 'profileImageUrl';\n    @Input() optionBadgeLabel?: string;\n    @Input() optionValue: string = 'id';\n    @Input() optionDisabled: string = 'disabled';\n    @Input() optionGroupLabel: string = 'group';\n    @Input() optionGroupTag?: Record<string, string>;\n\n    @Output() createNew: EventEmitter<string> = new EventEmitter();\n\n    private _controlValueAccessorChangeFn!: (value: unknown[]) => void;\n    onTouched!: () => void;\n\n    enabledOptions = computed<T[]>(() => {\n        return this.optionsSignal().filter((value: T) => {\n            if (typeof value === 'string') {\n                return value;\n            } else {\n                return this.optionDisabled && !value[this.optionDisabled];\n            }\n        });\n    });\n\n    itemHoveredSignal: WritableSignal<string | null> = signal<string | null>(null);\n    filteredOptionsSignal: WritableSignal<T[]> = signal<T[]>([]);\n    loadingSignal: WritableSignal<boolean> = signal<boolean>(false);\n    selectedValuesSignal: WritableSignal<unknown[]> = signal<unknown[]>([]);\n    searchTermSignal: WritableSignal<string> = signal<string>('');\n    searchTerm$ = toObservable(this.searchTermSignal);\n\n    allSelectedSignal = computed<boolean>(() => {\n        return this.selectedValuesSignal().length === this.enabledOptions().length;\n    });\n    partialySelectedSignal: Signal<boolean> = computed<boolean>(() => {\n        return this.selectedValuesSignal().length > 0 && this.selectedValuesSignal().length < this.enabledOptions().length;\n    });\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apCheck2, apSearchAlternate, apAdd2022, apDeleteNoCircle]);\n    }\n\n    writeValue(selectedValues: unknown[] = []): void {\n        this.selectedValuesSignal.set(selectedValues);\n    }\n\n    registerOnChange(fn: (value: unknown[]) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    ngOnInit(): void {\n        this.searchTerm$\n            .pipe(\n                debounceTime(250),\n                skip(1),\n                tap(() => {\n                    this.loadingSignal.set(true);\n                    this.optionsSignal.set([]);\n                }),\n                switchMap((term: string) => this.searchFn(term)),\n                tap(() => {\n                    this.loadingSignal.set(false);\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe((options: T[]) => {\n                this.optionsSignal.set(options);\n            });\n    }\n\n    ngAfterViewInit(): void {\n        if (!this.inlineLabelElement) {\n            return;\n        }\n        this.elementRef.nativeElement.style.setProperty(\n            '--placeholder-padding-left',\n            `${this.inlineLabelElement.nativeElement.clientWidth}px`\n        );\n    }\n\n    onSearchTermChange(searchTerm: string): void {\n        this.searchTermSignal.set(searchTerm);\n    }\n\n    private defaultSearchFn(term: string): Observable<T[]> {\n        return of(\n            this.filteredOptionsSignal().filter((option: T) => {\n                if (typeof option === 'string') {\n                    return option.toLowerCase().includes(term.toLowerCase());\n                }\n                if (this.optionLabel) {\n                    return String(option[this.optionLabel]).toLowerCase().includes(term.toLowerCase());\n                }\n                return option;\n            })\n        );\n    }\n\n    isGroupIndeterminate(children: NgOption[]) {\n        return children.some((child: NgOption) => child.selected) && !this.isGroupChecked(children);\n    }\n\n    isGroupDisabled(children: NgOption[]): boolean {\n        return children.every((child: NgOption) => child.disabled);\n    }\n\n    isGroupChecked(children: NgOption[]): boolean {\n        return children.every((child: NgOption) => child.disabled || child.selected) && !this.isGroupDisabled(children);\n    }\n\n    onSelectOnly(item: T): void {\n        if (typeof item === 'string') {\n            this.selectedValuesSignal.set([item]);\n        } else {\n            this.selectedValuesSignal.set([item[this.optionValue]]);\n        }\n    }\n\n    onSelectOpened(): void {\n        setTimeout(() => {\n            if (this.onTouched) {\n                this.onTouched();\n            }\n            if (this._controlValueAccessorChangeFn) {\n                this._controlValueAccessorChangeFn(this.selectedValuesSignal());\n            }\n            if (this.searchable && !!this.searchFn) {\n                this.searchInput.focusInput();\n            }\n        });\n    }\n\n    onHoverItem(htmlid: string): void {\n        if (!this.multiple || this.disabled) {\n            return;\n        }\n        this.itemHoveredSignal.set(htmlid);\n    }\n\n    onLeaveItem(): void {\n        if (!this.multiple || this.disabled) {\n            return;\n        }\n        this.itemHoveredSignal.set(null);\n    }\n\n    onToggleAll(): void {\n        if (this.partialySelectedSignal() || this.partialySelectedSignal()) {\n            this.selectedValuesSignal.set([]);\n        } else {\n            this.selectedValuesSignal.set(\n                this.enabledOptions().map((value: T) => {\n                    if (typeof value === 'string') {\n                        return value;\n                    }\n                    return this.optionValue && value[this.optionValue];\n                })\n            );\n        }\n    }\n\n    onSelectedValuesChange(selectedValues: unknown[]): void {\n        this.selectedValuesSignal.set(selectedValues);\n    }\n\n    onOpenSelect(): void {\n        this.select.open();\n    }\n\n    onInlineInputEnter(): void {\n        this.hovered = true;\n    }\n\n    onInlineInputLeave(): void {\n        this.hovered = false;\n    }\n\n    onCreateNew(): void {\n        this.createNew.emit(this.searchTermSignal());\n        this.select.close();\n    }\n\n    removeSelectedItem({ $event }: { $event: PointerEvent | MouseEvent }, item: T): void {\n        if ($event) {\n            $event.stopImmediatePropagation();\n        }\n        const selectedItemId = typeof item === 'string' ? item : item[this.optionValue];\n        this.selectedValuesSignal.update((selectedValues: unknown[]) =>\n            selectedValues.filter((selectedValue: unknown) => selectedValue !== selectedItemId)\n        );\n    }\n}\n","<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    tabIndex=\"0\"\n    *ngIf=\"inlineLabel\"\n    #inlineLabel\n    class=\"inline-label\"\n    (click)=\"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 ? false : true\"\n    [bindValue]=\"optionValue ? optionValue : 'label'\"\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    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\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                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\">\n                    <ap-symbol symbolId=\"search-alternate\" />\n                </ap-input>\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.group }}\n                </span>\n                <ap-badge\n                    *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n                    color=\"blue\">\n                    {{ optionGroupTag[item.group] }}\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.group }}\n                    </span>\n                    <ap-badge\n                        *ngIf=\"optionGroupTag && optionGroupTag[item.group]\"\n                        color=\"blue\">\n                        {{ optionGroupTag[item.group] }}\n                    </ap-badge>\n                </ap-checkbox>\n                <span\n                    *ngIf=\"!selectableGroup\"\n                    class=\"group-label\">\n                    {{ item.group }}\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 *ngFor=\"let item of items\">\n                    <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n                        <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                            <span class=\"text-item\">\n                                {{ item[optionLabel] }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'label'\">\n                            <ap-label\n                                color=\"blue\"\n                                removable=\"true\"\n                                [content]=\"item[optionLabel]\"\n                                (remove)=\"removeSelectedItem($event, item)\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'tag'\">\n                            <ap-tag\n                                class=\"text-item\"\n                                clearable=\"true\"\n                                (clear)=\"removeSelectedItem($event, item)\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                {{ item[optionLabel] }}\n                            </ap-tag>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                            <div class=\"with-avatar\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                <span class=\"text-item\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n                        <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                            <span class=\"text-item\">\n                                {{ item }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'label'\">\n                            <ap-label\n                                color=\"blue\"\n                                removable=\"true\"\n                                [content]=\"item\"\n                                (remove)=\"removeSelectedItem($event, item)\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'tag'\">\n                            <ap-tag\n                                class=\"text-item\"\n                                clearable=\"true\"\n                                ∂\n                                (clear)=\"removeSelectedItem($event, item)\">\n                                {{ item }}\n                            </ap-tag>\n                        </ng-container>\n                        <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                            <div class=\"with-avatar\">\n                                <ap-avatar\n                                    *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                                    size=\"24\"\n                                    [profilePicture]=\"item[optionProfileImageUrl]\" />\n                                <span class=\"text-item\">\n                                    {{ item }}\n                                </span>\n                            </div>\n                        </ng-container>\n                    </ng-container>\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                (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 *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n            <div class=\"option\">{{ item }}</div>\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionLabel && 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=\"!optionLabel\">\n            <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    removable=\"true\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    clearable=\"true\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel\">\n            <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'label'\">\n                <ap-label\n                    color=\"blue\"\n                    removable=\"true\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'tag'\">\n                <ap-tag\n                    class=\"text-item\"\n                    clearable=\"true\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl]\" />\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            </ng-container>\n            <ng-container *ngIf=\"displayType === 'withAvatar'\">\n                <div class=\"with-avatar\">\n                    <ap-avatar\n                        *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\"\n                        size=\"24\"\n                        [profilePicture]=\"item[optionProfileImageUrl]\" />\n                    <span class=\"text-item\">\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        <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=\"!optionLabel\">\n            <span class=\"item\">\n                {{ item }}\n            </span>\n        </ng-container>\n        <ng-container *ngIf=\"optionProfileImageUrl && item[optionProfileImageUrl]\">\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"item[optionProfileImageUrl]\" />\n        </ng-container>\n        <ng-container *ngIf=\"optionLabel && item[optionLabel]\">\n            <div class=\"texts\">\n                <div class=\"first-line\">\n                    <span class=\"label\">{{ item[optionLabel] }}</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 class=\"caption\">\n                        {{ item[optionCaption] }}\n                    </span>\n                </ng-container>\n            </div>\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                size=\"micro\" />\n        </ng-container>\n    </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}