@agorapulse/ui-components 16.2.1 → 16.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/agorapulse-ui-components-16.2.3.tgz +0 -0
  2. package/esm2022/input/input.component.mjs +1 -1
  3. package/esm2022/select/select.component.mjs +6 -6
  4. package/fesm2022/agorapulse-ui-components-input.mjs.map +1 -1
  5. package/fesm2022/agorapulse-ui-components-select.mjs +5 -5
  6. package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
  7. package/package.json +7 -7
  8. package/select/select.component.d.ts +10 -10
  9. package/snackbars-thread/component/snackbars-thread.component.d.ts +1 -1
  10. package/agorapulse-ui-components-16.2.1.tgz +0 -0
package/fesm2022/agorapulse-ui-components-input.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"agorapulse-ui-components-input.mjs","sources":["../../../libs/ui-components/input/src/input.component.ts","../../../libs/ui-components/input/src/input.component.html","../../../libs/ui-components/input/src/agorapulse-ui-components-input.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apAlertCircle, apCheckCircle } from '@agorapulse/ui-symbol';\nimport { NgIf } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n Input,\n OnInit,\n QueryList,\n Signal,\n ViewChild,\n ViewEncapsulation,\n WritableSignal,\n booleanAttribute,\n forwardRef,\n inject,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\ntype InputType =\n | 'button'\n | 'checkbox'\n | 'color'\n | 'datetime'\n | 'datetime-local'\n | 'email'\n | 'file'\n | 'hidden'\n | 'image'\n | 'month'\n | 'number'\n | 'password'\n | 'radio'\n | 'range'\n | 'reset'\n | 'search'\n | 'submit'\n | 'text'\n | 'tel'\n | 'time'\n | 'url'\n | 'week';\n\nexport const AP_INPUT_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => InputComponent),\n multi: true,\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-input',\n styleUrls: ['./input.component.scss'],\n standalone: true,\n imports: [NgIf, FormsModule, SymbolComponent],\n providers: [\n AP_INPUT_CONTROL_VALUE_ACCESSOR,\n\n {\n provide: NG_VALIDATORS,\n\n useExisting: InputComponent,\n\n multi: true,\n },\n ],\n templateUrl: './input.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class InputComponent implements OnInit, AfterViewInit, AfterContentInit, ControlValueAccessor {\n readonly elementRef: ElementRef = inject(ElementRef);\n readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n @ContentChildren(SymbolComponent) symbols!: QueryList<SymbolComponent>;\n @ViewChild('symbol') symbolWrapper!: ElementRef;\n @ViewChild('input') inputElement!: ElementRef;\n\n @Input() ariaLabel!: string;\n\n @Input() ariaLabelledBy!: string;\n\n @Input() ariaDescribedBy!: string;\n\n @Input() disabled: boolean = false;\n\n @Input() clearable: boolean = false;\n\n @Input() inputType: InputType = 'text';\n\n @Input() inputId?: string;\n\n @Input({\n required: true,\n })\n name!: string;\n\n @Input() label?: string;\n\n @Input() description?: string;\n\n @Input() prefix?: string;\n\n @Input() suffix?: string;\n\n @Input({ transform: booleanAttribute }) required: boolean = false;\n\n @Input() placeholder?: string;\n\n @Input() errorMessage?: string;\n\n @Input() successMessage?: string;\n\n @Input() symbolPosition: 'left' | 'right' = 'right';\n\n private _controlValueAccessorChangeFn!: (value: string | null) => void;\n\n iconExists: WritableSignal<boolean> = signal<boolean>(false);\n\n hostDataTest: WritableSignal<string | undefined> = signal<string | undefined>(undefined);\n\n value!: string | null;\n\n onTouched!: () => void;\n\n ngOnInit(): void {\n if (this.label && !this.inputId) {\n throw Error('You have to provide an input id if you want to use a label.');\n }\n this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));\n this.elementRef.nativeElement.removeAttribute('data-test');\n this.symbolRegistry.registerSymbols([apAlertCircle, apCheckCircle]);\n }\n\n // Sometimes attributes like the id, or the data-test are dynamic and can change between the constructor and the initialization.\n // In order to have the last attributes value we check if it changes, and if it does, we run a mark for check to update the view.\n ngAfterViewInit(): void {\n const hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n\n if (hostDataTest && this.hostDataTest() !== hostDataTest) {\n this.hostDataTest.set(hostDataTest);\n this.elementRef.nativeElement.removeAttribute('data-test');\n }\n }\n\n ngAfterContentInit(): void {\n this.iconExists.set(!!this.symbols.length);\n }\n\n validate({ value }: FormControl) {\n const isNotValid = !this.value && this.required;\n return (\n isNotValid && {\n invalid: true,\n }\n );\n }\n\n onValueChange() {\n if (this.onTouched) {\n this.onTouched();\n }\n\n if (!this.disabled) {\n if (this._controlValueAccessorChangeFn) {\n this._controlValueAccessorChangeFn(this.value);\n }\n }\n }\n\n writeValue(value: string | null): void {\n this.value = value;\n }\n\n registerOnChange(fn: (value: string | null) => 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 focusInput(): void {\n this.inputElement.nativeElement.focus();\n }\n\n onClear(): void {\n this.writeValue(null);\n }\n}\n","<label\n *ngIf=\"label\"\n [for]=\"inputId\">\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 class=\"input-wrapper\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [class.with-icon]=\"iconExists()\"\n [class.with-prefix]=\"prefix\"\n [class.with-suffix]=\"suffix\"\n [class.with-error]=\"errorMessage\"\n [class.with-success]=\"successMessage\"\n [class.disabled]=\"disabled\"\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 (click)=\"focusInput()\">\n <div\n *ngIf=\"prefix\"\n class=\"prefix\">\n <span>\n {{ prefix }}\n </span>\n <span class=\"divider\"></span>\n </div>\n <div class=\"content\">\n <input\n #input\n [type]=\"inputType\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [id]=\"inputId\"\n [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onValueChange()\" />\n <ng-container *ngIf=\"clearable\">\n <button\n type=\"button\"\n class=\"clear-button\"\n (click)=\"onClear()\">\n <ap-symbol symbolId=\"close\" />\n </button>\n </ng-container>\n </div>\n <div\n *ngIf=\"suffix\"\n class=\"suffix\">\n <span class=\"divider\"></span>\n <span>\n {{ suffix }}\n </span>\n </div>\n <ng-content\n #symbol\n select=\"ap-symbol\"></ng-content>\n</div>\n\n<div\n *ngIf=\"errorMessage\"\n class=\"form-message error\">\n <ap-symbol\n symbolId=\"alert-circle\"\n size=\"micro\" />\n <span>\n {{ errorMessage }}\n </span>\n</div>\n\n<div\n *ngIf=\"successMessage\"\n class=\"form-message success\">\n <ap-symbol\n symbolId=\"check-circle\"\n size=\"micro\" />\n <span>\n {{ successMessage }}\n </span>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"agorapulse-ui-components-input.mjs","sources":["../../../libs/ui-components/input/src/input.component.ts","../../../libs/ui-components/input/src/input.component.html","../../../libs/ui-components/input/src/agorapulse-ui-components-input.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apAlertCircle, apCheckCircle } from '@agorapulse/ui-symbol';\nimport { NgIf } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n Input,\n OnInit,\n QueryList,\n ViewChild,\n ViewEncapsulation,\n WritableSignal,\n booleanAttribute,\n forwardRef,\n inject,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\ntype InputType =\n | 'button'\n | 'checkbox'\n | 'color'\n | 'datetime'\n | 'datetime-local'\n | 'email'\n | 'file'\n | 'hidden'\n | 'image'\n | 'month'\n | 'number'\n | 'password'\n | 'radio'\n | 'range'\n | 'reset'\n | 'search'\n | 'submit'\n | 'text'\n | 'tel'\n | 'time'\n | 'url'\n | 'week';\n\nexport const AP_INPUT_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => InputComponent),\n multi: true,\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-input',\n styleUrls: ['./input.component.scss'],\n standalone: true,\n imports: [NgIf, FormsModule, SymbolComponent],\n providers: [\n AP_INPUT_CONTROL_VALUE_ACCESSOR,\n\n {\n provide: NG_VALIDATORS,\n\n useExisting: InputComponent,\n\n multi: true,\n },\n ],\n templateUrl: './input.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class InputComponent implements OnInit, AfterViewInit, AfterContentInit, ControlValueAccessor {\n readonly elementRef: ElementRef = inject(ElementRef);\n readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n @ContentChildren(SymbolComponent) symbols!: QueryList<SymbolComponent>;\n @ViewChild('symbol') symbolWrapper!: ElementRef;\n @ViewChild('input') inputElement!: ElementRef;\n\n @Input() ariaLabel!: string;\n\n @Input() ariaLabelledBy!: string;\n\n @Input() ariaDescribedBy!: string;\n\n @Input() disabled: boolean = false;\n\n @Input() clearable: boolean = false;\n\n @Input() inputType: InputType = 'text';\n\n @Input() inputId?: string;\n\n @Input({\n required: true,\n })\n name!: string;\n\n @Input() label?: string;\n\n @Input() description?: string;\n\n @Input() prefix?: string;\n\n @Input() suffix?: string;\n\n @Input({ transform: booleanAttribute }) required: boolean = false;\n\n @Input() placeholder?: string;\n\n @Input() errorMessage?: string;\n\n @Input() successMessage?: string;\n\n @Input() symbolPosition: 'left' | 'right' = 'right';\n\n private _controlValueAccessorChangeFn!: (value: string | null) => void;\n\n iconExists: WritableSignal<boolean> = signal<boolean>(false);\n\n hostDataTest: WritableSignal<string | undefined> = signal<string | undefined>(undefined);\n\n value!: string | null;\n\n onTouched!: () => void;\n\n ngOnInit(): void {\n if (this.label && !this.inputId) {\n throw Error('You have to provide an input id if you want to use a label.');\n }\n this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));\n this.elementRef.nativeElement.removeAttribute('data-test');\n this.symbolRegistry.registerSymbols([apAlertCircle, apCheckCircle]);\n }\n\n // Sometimes attributes like the id, or the data-test are dynamic and can change between the constructor and the initialization.\n // In order to have the last attributes value we check if it changes, and if it does, we run a mark for check to update the view.\n ngAfterViewInit(): void {\n const hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n\n if (hostDataTest && this.hostDataTest() !== hostDataTest) {\n this.hostDataTest.set(hostDataTest);\n this.elementRef.nativeElement.removeAttribute('data-test');\n }\n }\n\n ngAfterContentInit(): void {\n this.iconExists.set(!!this.symbols.length);\n }\n\n validate({ value }: FormControl) {\n const isNotValid = !this.value && this.required;\n return (\n isNotValid && {\n invalid: true,\n }\n );\n }\n\n onValueChange() {\n if (this.onTouched) {\n this.onTouched();\n }\n\n if (!this.disabled) {\n if (this._controlValueAccessorChangeFn) {\n this._controlValueAccessorChangeFn(this.value);\n }\n }\n }\n\n writeValue(value: string | null): void {\n this.value = value;\n }\n\n registerOnChange(fn: (value: string | null) => 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 focusInput(): void {\n this.inputElement.nativeElement.focus();\n }\n\n onClear(): void {\n this.writeValue(null);\n }\n}\n","<label\n *ngIf=\"label\"\n [for]=\"inputId\">\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 class=\"input-wrapper\"\n [class.inverse]=\"symbolPosition === 'left'\"\n [class.with-icon]=\"iconExists()\"\n [class.with-prefix]=\"prefix\"\n [class.with-suffix]=\"suffix\"\n [class.with-error]=\"errorMessage\"\n [class.with-success]=\"successMessage\"\n [class.disabled]=\"disabled\"\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 (click)=\"focusInput()\">\n <div\n *ngIf=\"prefix\"\n class=\"prefix\">\n <span>\n {{ prefix }}\n </span>\n <span class=\"divider\"></span>\n </div>\n <div class=\"content\">\n <input\n #input\n [type]=\"inputType\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [id]=\"inputId\"\n [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onValueChange()\" />\n <ng-container *ngIf=\"clearable\">\n <button\n type=\"button\"\n class=\"clear-button\"\n (click)=\"onClear()\">\n <ap-symbol symbolId=\"close\" />\n </button>\n </ng-container>\n </div>\n <div\n *ngIf=\"suffix\"\n class=\"suffix\">\n <span class=\"divider\"></span>\n <span>\n {{ suffix }}\n </span>\n </div>\n <ng-content\n #symbol\n select=\"ap-symbol\"></ng-content>\n</div>\n\n<div\n *ngIf=\"errorMessage\"\n class=\"form-message error\">\n <ap-symbol\n symbolId=\"alert-circle\"\n size=\"micro\" />\n <span>\n {{ errorMessage }}\n </span>\n</div>\n\n<div\n *ngIf=\"successMessage\"\n class=\"form-message success\">\n <ap-symbol\n symbolId=\"check-circle\"\n size=\"micro\" />\n <span>\n {{ successMessage }}\n </span>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
package/fesm2022/agorapulse-ui-components-select.mjs CHANGED
@@ -174,9 +174,6 @@ class SelectComponent {
174
174
  if (this.onTouched) {
175
175
  this.onTouched();
176
176
  }
177
- if (this._controlValueAccessorChangeFn) {
178
- this._controlValueAccessorChangeFn(this.selectedValuesSignal());
179
- }
180
177
  if (this.searchable && !!this.searchFn) {
181
178
  this.searchInput.focusInput();
182
179
  }
@@ -209,6 +206,9 @@ class SelectComponent {
209
206
  }
210
207
  onSelectedValuesChange(selectedValues) {
211
208
  this.selectedValuesSignal.set(selectedValues);
209
+ if (this._controlValueAccessorChangeFn) {
210
+ this._controlValueAccessorChangeFn(selectedValues);
211
+ }
212
212
  }
213
213
  onOpenSelect() {
214
214
  this.select.open();
@@ -231,7 +231,7 @@ class SelectComponent {
231
231
  this.selectedValuesSignal.update((selectedValues) => selectedValues.filter((selectedValue) => selectedValue !== selectedItemId));
232
232
  }
233
233
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
234
- 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 <div class=\"disabled-opaque\"></div>\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ng-container>\n</ng-template>\n\n<ng-template\n #textItem\n let-item=\"item\"\n let-item$=\"item$\">\n <div class=\"content\">\n <ng-container *ngIf=\"!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{overflow-x:auto}.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%;z-index:999}.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:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) 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 });
234
+ 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 *ngIf=\"inlineLabel\"\n #inlineLabel\n tabindex=\"0\"\n class=\"inline-label\"\n (click)=\"onOpenSelect()\"\n (keydown.enter)=\"onOpenSelect()\"\n (mouseenter)=\"onInlineInputEnter()\"\n (mouseleave)=\"onInlineInputLeave()\">\n <label\n *ngIf=\"label && inlineLabel\"\n class=\"label\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n </label>\n <div class=\"divider\"></div>\n</div>\n\n<ng-select\n #select\n class=\"ap-select\"\n [tabIndex]=\"0\"\n [clearable]=\"clearable\"\n [placeholder]=\"placeholder\"\n [labelForId]=\"selectId\"\n [searchable]=\"false\"\n [closeOnSelect]=\"multiple ? 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\n class=\"text-item\"\n [title]=\"item[optionLabel]\">\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\n class=\"text-item\"\n [title]=\"item[optionLabel]\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span\n class=\"text-item\"\n [title]=\"item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n [removable]=\"multiple\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n [clearable]=\"multiple\"\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"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 type=\"button\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"add-2022\"\n size=\"micro\" />\n <span>\n {{ createText }}\n </span>\n <ng-container *ngIf=\"searchTermSignal()\">\"{{ searchTermSignal() }}\"</ng-container>\n </button>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ng-container *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"item\">\n {{ item }}\n </span>\n </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\n class=\"text-item\"\n [title]=\"item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n [removable]=\"multiple\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n [clearable]=\"multiple\"\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"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]=\"multiple\"\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]=\"multiple\"\n [title]=\"item[optionLabel]\"\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\" [title]=\"item[optionLabel]\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n {{ notFoundText }}\n </div>\n </ng-template>\n</ng-select>\n\n<ng-template\n #contentItem\n let-item=\"item\"\n let-item$=\"item$\">\n <ng-container *ngIf=\"multiple\">\n <div class=\"disabled-opaque\"></div>\n <ap-checkbox\n *ngIf=\"multiple\"\n [checked]=\"item$.selected\"\n [disabled]=\"item$.disabled\"\n [name]=\"'option-selection-' + item$.htmlId\">\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ap-checkbox>\n </ng-container>\n <ng-container *ngIf=\"!multiple\">\n <div class=\"disabled-opaque\"></div>\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ng-container>\n</ng-template>\n\n<ng-template\n #textItem\n let-item=\"item\"\n let-item$=\"item$\">\n <div class=\"content\">\n <ng-container *ngIf=\"!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\n class=\"label\"\n [title]=\"item[optionLabel]\">\n {{ item[optionLabel] }}\n </span>\n <ng-container *ngIf=\"optionBadgeLabel && item[optionBadgeLabel]\">\n <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n </ng-container>\n </div>\n <ng-container *ngIf=\"optionCaption && item[optionCaption]\">\n <span\n class=\"caption\"\n [title]=\"item[optionCaption]\">\n {{ item[optionCaption] }}\n </span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *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);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight)}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{overflow-x:auto}.ng-select.ap-select .ng-select-container .ng-value-container:hover,.ng-select.ap-select .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value{overflow:visible!important;width:100%;display:flex}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value span.text-item{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value span{display:inline-block}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-tag{width:100%;margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-tag div{overflow:auto}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-label{margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-label .label{overflow:auto}.ng-select.ap-select.ng-select-multiple .ng-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,.ng-select-container+.ng-dropdown-panel{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select.ng-select-bottom,.ng-select-container+.ng-dropdown-panel.ng-select-bottom{margin-top:var(--ref-spacing-xxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option,.ng-select-container+.ng-dropdown-panel .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label,.ng-select-container+.ng-dropdown-panel .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .ng-option:hover:not(.ng-option-disabled) .option,.ng-select-container+.ng-dropdown-panel .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option:active:not(.ng-option-disabled) .option,.ng-select-container+.ng-dropdown-panel .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option:focus:not(.ng-option-disabled) .option,.ng-select-container+.ng-dropdown-panel .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option,.ng-select-container+.ng-dropdown-panel .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,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option .label,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option,.ng-select-container+.ng-dropdown-panel .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,.ng-select-container+.ng-dropdown-panel .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,.ng-select-container+.ng-dropdown-panel .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,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled .disabled-opaque,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%;z-index:999}.ng-dropdown-panel.ap-select .loading-state,.ng-select-container+.ng-dropdown-panel .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select .loading-state span,.ng-select-container+.ng-dropdown-panel .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .group,.ng-select-container+.ng-dropdown-panel .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select .group ap-checkbox,.ng-select-container+.ng-dropdown-panel .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox,.ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label,.ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .divider,.ng-select-container+.ng-dropdown-panel .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select .create-new,.ng-select-container+.ng-dropdown-panel .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select .create-new:hover,.ng-select-container+.ng-dropdown-panel .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active,.ng-select-container+.ng-dropdown-panel .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .option,.ng-select-container+.ng-dropdown-panel .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select .option ap-checkbox,.ng-select-container+.ng-dropdown-panel .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox,.ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label,.ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox label{flex:1;overflow:auto}.ng-dropdown-panel.ap-select .option .option-item,.ng-select-container+.ng-dropdown-panel .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}.ng-dropdown-panel.ap-select .option.not-found,.ng-select-container+.ng-dropdown-panel .option.not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content,.ng-select-container+.ng-dropdown-panel .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1;width:100%}.ng-dropdown-panel.ap-select .option .content .item,.ng-select-container+.ng-dropdown-panel .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts,.ng-select-container+.ng-dropdown-panel .option .content .texts{flex:1;overflow:auto;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line,.ng-select-container+.ng-dropdown-panel .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content .texts .first-line .label,.ng-select-container+.ng-dropdown-panel .option .content .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select .option .content ap-symbol,.ng-select-container+.ng-dropdown-panel .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg,.ng-select-container+.ng-dropdown-panel .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .label,.ng-select-container+.ng-dropdown-panel .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select .option.with-caption,.ng-select-container+.ng-dropdown-panel .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select .option.with-caption .label,.ng-select-container+.ng-dropdown-panel .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select .option.with-caption .caption,.ng-select-container+.ng-dropdown-panel .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items,.ng-select-container+.ng-dropdown-panel .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .ng-optgroup,.ng-select-container+.ng-dropdown-panel .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-select-all,.ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-search,.ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select .ng-optgroup .group,.ng-select-container+.ng-dropdown-panel .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select .ng-optgroup .group .group-label,.ng-select-container+.ng-dropdown-panel .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header,.ng-select-container+.ng-dropdown-panel .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header .select-all-checkbox,.ng-select-container+.ng-dropdown-panel .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer,.ng-select-container+.ng-dropdown-panel .ng-dropdown-footer{cursor:pointer;padding:0}.ng-dropdown-panel.ap-select .standalone-link,.ng-select-container+.ng-dropdown-panel .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select .standalone-link:hover,.ng-select-container+.ng-dropdown-panel .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active,.ng-select-container+.ng-dropdown-panel .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 });
235
235
  }
236
236
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectComponent, decorators: [{
237
237
  type: Component,
@@ -251,7 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
251
251
  TagComponent,
252
252
  BadgeComponent,
253
253
  LoaderComponent,
254
- ], 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 <div class=\"disabled-opaque\"></div>\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ng-container>\n</ng-template>\n\n<ng-template\n #textItem\n let-item=\"item\"\n let-item$=\"item$\">\n <div class=\"content\">\n <ng-container *ngIf=\"!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{overflow-x:auto}.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%;z-index:999}.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:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) 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"] }]
254
+ ], providers: [SELECT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<label\n *ngIf=\"label && !inlineLabel\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n <span\n *ngIf=\"description\"\n class=\"description\">\n {{ description }}\n </span>\n</label>\n\n<div\n *ngIf=\"inlineLabel\"\n #inlineLabel\n tabindex=\"0\"\n class=\"inline-label\"\n (click)=\"onOpenSelect()\"\n (keydown.enter)=\"onOpenSelect()\"\n (mouseenter)=\"onInlineInputEnter()\"\n (mouseleave)=\"onInlineInputLeave()\">\n <label\n *ngIf=\"label && inlineLabel\"\n class=\"label\"\n [for]=\"selectId\">\n <span>\n {{ label }}\n </span>\n </label>\n <div class=\"divider\"></div>\n</div>\n\n<ng-select\n #select\n class=\"ap-select\"\n [tabIndex]=\"0\"\n [clearable]=\"clearable\"\n [placeholder]=\"placeholder\"\n [labelForId]=\"selectId\"\n [searchable]=\"false\"\n [closeOnSelect]=\"multiple ? 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\n class=\"text-item\"\n [title]=\"item[optionLabel]\">\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\n class=\"text-item\"\n [title]=\"item[optionLabel]\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!optionLabel || !item[optionLabel]\">\n <ng-container *ngIf=\"displayType === 'text' || !displayType\">\n <span\n class=\"text-item\"\n [title]=\"item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n [removable]=\"multiple\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n [clearable]=\"multiple\"\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"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 type=\"button\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"add-2022\"\n size=\"micro\" />\n <span>\n {{ createText }}\n </span>\n <ng-container *ngIf=\"searchTermSignal()\">\"{{ searchTermSignal() }}\"</ng-container>\n </button>\n </ng-template>\n </ng-container>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ng-container *ngIf=\"(!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider])\">\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"item\">\n {{ item }}\n </span>\n </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\n class=\"text-item\"\n [title]=\"item\">\n {{ item }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"displayType === 'label'\">\n <ap-label\n color=\"blue\"\n [removable]=\"multiple\"\n [content]=\"item\"\n (remove)=\"removeSelectedItem($event, item)\" />\n </ng-container>\n <ng-container *ngIf=\"displayType === 'tag'\">\n <ap-tag\n class=\"text-item\"\n [clearable]=\"multiple\"\n (clear)=\"removeSelectedItem($event, item)\">\n {{ item }}\n </ap-tag>\n </ng-container>\n <ng-container *ngIf=\"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]=\"multiple\"\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]=\"multiple\"\n [title]=\"item[optionLabel]\"\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\" [title]=\"item[optionLabel]\">\n {{ item[optionLabel] }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n {{ notFoundText }}\n </div>\n </ng-template>\n</ng-select>\n\n<ng-template\n #contentItem\n let-item=\"item\"\n let-item$=\"item$\">\n <ng-container *ngIf=\"multiple\">\n <div class=\"disabled-opaque\"></div>\n <ap-checkbox\n *ngIf=\"multiple\"\n [checked]=\"item$.selected\"\n [disabled]=\"item$.disabled\"\n [name]=\"'option-selection-' + item$.htmlId\">\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ap-checkbox>\n </ng-container>\n <ng-container *ngIf=\"!multiple\">\n <div class=\"disabled-opaque\"></div>\n <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n </ng-container>\n</ng-template>\n\n<ng-template\n #textItem\n let-item=\"item\"\n let-item$=\"item$\">\n <div class=\"content\">\n <ng-container *ngIf=\"!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\n class=\"label\"\n [title]=\"item[optionLabel]\">\n {{ item[optionLabel] }}\n </span>\n <ng-container *ngIf=\"optionBadgeLabel && item[optionBadgeLabel]\">\n <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n </ng-container>\n </div>\n <ng-container *ngIf=\"optionCaption && item[optionCaption]\">\n <span\n class=\"caption\"\n [title]=\"item[optionCaption]\">\n {{ item[optionCaption] }}\n </span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *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);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight)}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{overflow-x:auto}.ng-select.ap-select .ng-select-container .ng-value-container:hover,.ng-select.ap-select .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value{overflow:visible!important;width:100%;display:flex}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value span.text-item{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value span{display:inline-block}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-tag{width:100%;margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-tag div{overflow:auto}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-label{margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select.ng-select-single .ng-value-container .ng-value ap-label .label{overflow:auto}.ng-select.ap-select.ng-select-multiple .ng-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,.ng-select-container+.ng-dropdown-panel{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select.ng-select-bottom,.ng-select-container+.ng-dropdown-panel.ng-select-bottom{margin-top:var(--ref-spacing-xxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select .ng-option,.ng-select-container+.ng-dropdown-panel .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select .ng-option .ng-option-label,.ng-select-container+.ng-dropdown-panel .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select .ng-option.ng-option-child,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select .ng-option:hover:not(.ng-option-disabled) .option,.ng-select-container+.ng-dropdown-panel .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select .ng-option:active:not(.ng-option-disabled) .option,.ng-select-container+.ng-dropdown-panel .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option:focus:not(.ng-option-disabled) .option,.ng-select-container+.ng-dropdown-panel .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option,.ng-select-container+.ng-dropdown-panel .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,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .ng-option.ng-option-selected .option .label,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked:hover,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select .ng-option.ng-option-marked .option,.ng-select-container+.ng-dropdown-panel .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,.ng-select-container+.ng-dropdown-panel .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,.ng-select-container+.ng-dropdown-panel .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,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select .ng-option.ng-option-disabled .disabled-opaque,.ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%;z-index:999}.ng-dropdown-panel.ap-select .loading-state,.ng-select-container+.ng-dropdown-panel .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select .loading-state span,.ng-select-container+.ng-dropdown-panel .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select .group,.ng-select-container+.ng-dropdown-panel .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select .group ap-checkbox,.ng-select-container+.ng-dropdown-panel .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox,.ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .group ap-checkbox .checkbox label,.ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select .divider,.ng-select-container+.ng-dropdown-panel .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select .create-new,.ng-select-container+.ng-dropdown-panel .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select .create-new:hover,.ng-select-container+.ng-dropdown-panel .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .create-new:active,.ng-select-container+.ng-dropdown-panel .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select .option,.ng-select-container+.ng-dropdown-panel .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select .option ap-checkbox,.ng-select-container+.ng-dropdown-panel .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox,.ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select .option ap-checkbox .checkbox label,.ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox label{flex:1;overflow:auto}.ng-dropdown-panel.ap-select .option .option-item,.ng-select-container+.ng-dropdown-panel .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}.ng-dropdown-panel.ap-select .option.not-found,.ng-select-container+.ng-dropdown-panel .option.not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select .option .content,.ng-select-container+.ng-dropdown-panel .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1;width:100%}.ng-dropdown-panel.ap-select .option .content .item,.ng-select-container+.ng-dropdown-panel .option .content .item{flex:1}.ng-dropdown-panel.ap-select .option .content .texts,.ng-select-container+.ng-dropdown-panel .option .content .texts{flex:1;overflow:auto;display:flex;flex-direction:column}.ng-dropdown-panel.ap-select .option .content .texts .first-line,.ng-select-container+.ng-dropdown-panel .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select .option .content .texts .first-line .label,.ng-select-container+.ng-dropdown-panel .option .content .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select .option .content ap-symbol,.ng-select-container+.ng-dropdown-panel .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .content ap-symbol div.svg,.ng-select-container+.ng-dropdown-panel .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .option .label,.ng-select-container+.ng-dropdown-panel .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select .option.with-caption,.ng-select-container+.ng-dropdown-panel .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select .option.with-caption .label,.ng-select-container+.ng-dropdown-panel .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select .option.with-caption .caption,.ng-select-container+.ng-dropdown-panel .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select .ng-dropdown-panel-items,.ng-select-container+.ng-dropdown-panel .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select .ng-optgroup,.ng-select-container+.ng-dropdown-panel .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select .ng-optgroup:first-child .with-select-all,.ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-search,.ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select .ng-optgroup .group,.ng-select-container+.ng-dropdown-panel .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select .ng-optgroup .group .group-label,.ng-select-container+.ng-dropdown-panel .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header,.ng-select-container+.ng-dropdown-panel .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select .ng-dropdown-header .select-all-checkbox,.ng-select-container+.ng-dropdown-panel .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select .ng-dropdown-footer,.ng-select-container+.ng-dropdown-panel .ng-dropdown-footer{cursor:pointer;padding:0}.ng-dropdown-panel.ap-select .standalone-link,.ng-select-container+.ng-dropdown-panel .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select .standalone-link:hover,.ng-select-container+.ng-dropdown-panel .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select .standalone-link:active,.ng-select-container+.ng-dropdown-panel .standalone-link:active{color:var(--ref-color-electric-blue-150)}\n"] }]
255
255
  }], ctorParameters: function () { return []; }, propDecorators: { searchInput: [{
256
256
  type: ViewChild,
257
257
  args: ['searchInput']