\n \n `,\n styleUrls: ['./Select.scss'],\n host: {\n class: 'novo-select',\n role: 'combobox',\n 'aria-autocomplete': 'none',\n 'aria-haspopup': 'true',\n '[attr.id]': 'id',\n '[attr.aria-controls]': 'panelOpen ? id + \"-panel\" : null',\n '[attr.aria-expanded]': 'panelOpen',\n '[attr.aria-required]': 'required.toString()',\n '[attr.aria-disabled]': 'disabled.toString()',\n '[attr.aria-invalid]': 'errorState',\n '[attr.aria-labelledby]': '_ariaLabelledBy || null',\n '[attr.aria-describedby]': '_ariaDescribedby || null',\n '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',\n '[class.novo-select-disabled]': 'disabled',\n '[class.novo-select-invalid]': 'errorState',\n '[class.novo-select-required]': 'required',\n '[class.novo-select-empty]': 'empty',\n '[class.novo-select-multiple]': 'multiple',\n '[tabindex]': 'disabled ? -1 : 0',\n },\n standalone: false,\n})\nexport class NovoSelectElement\n extends NovoSelectMixins\n implements OnInit, AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor, NovoFieldControl\n{\n private _uniqueId: string = `novo-select-${++nextId}`;\n private _stateChanges = Subscription.EMPTY;\n private _activeOptionChanges = Subscription.EMPTY;\n private _selectedOptionChanges = Subscription.EMPTY;\n protected readonly _destroy = new Subject();\n\n readonly controlType: string = 'select';\n\n /** @docs-private Implemented as part of NovoFieldControl. */\n lastKeyValue: string = null;\n /** @docs-private Implemented as part of NovoFieldControl.*/\n lastCaretPosition: number | null;\n\n _selectionModel: SelectionModel;\n\n /** The aria-labelledby attribute */\n _ariaLabelledBy: string;\n /** The aria-describedby attribute on the chip list for improved a11y. */\n _ariaDescribedby: string;\n /** User defined tab index. */\n _userTabIndex: number | null = null;\n /** The FocusKeyManager which handles focus. */\n _keyManager: ActiveDescendantKeyManager;\n /**\n * The display string for the current value, kept from when the associated has stopped rendering\n * due to filtration\n */\n private _lingeringDisplayValue: string = null;\n private _legacyOption: any;\n\n @Input()\n id: string = this._uniqueId;\n @Input()\n name: string = this._uniqueId;\n @Input()\n placeholder: string = 'Select...';\n @Input({ transform: booleanAttribute })\n readonly: boolean;\n @Input()\n headerConfig: any;\n @Input()\n position: string = 'above-below';\n @Input()\n overlayWidth: number;\n @Input()\n overlayHeight: number;\n @Input()\n displayIcon: string = null;\n @Output()\n onSelect: EventEmitter = new EventEmitter();\n /** Event emitted when the selected value has been changed by the user. */\n @Output() readonly selectionChange: EventEmitter = new EventEmitter();\n /** Event that emits whenever the raw value of the select changes.*/\n @Output() readonly valueChange: EventEmitter = new EventEmitter();\n\n /** Event emitted when the select panel has been toggled. */\n @Output() readonly openedChange: EventEmitter = new EventEmitter();\n /** Event emitted when the select has been opened. */\n @Output('opened') readonly _openedStream: Observable = this.openedChange.pipe(\n filter((o) => o),\n map(() => {}),\n );\n /** Event emitted when the select has been closed. */\n @Output('closed') readonly _closedStream: Observable = this.openedChange.pipe(\n filter((o) => !o),\n map(() => {}),\n );\n\n /** Function that maps an option's control value to its display value in the trigger. */\n @Input() displayWith: ((value: any) => string) | null = null;\n /** * Function to compare the option values with the selected values. */\n @Input() compareWith: (o1: any, o2: any) => boolean = (o1: any, o2: any) =>\n o1 === o2 || o1 === o2.id || (!Helpers.isEmpty(o1.id) && !Helpers.isEmpty(o2.id) && o1.id === o2.id);\n\n header: any = {\n open: false,\n valid: true,\n value: '',\n };\n createdItem: any;\n model: any;\n onModelChange: Function = () => {};\n onModelTouched: Function = () => {};\n filterTerm: string = '';\n filterTermTimeout;\n filteredOptions: any = [];\n disabled: boolean = false;\n\n /** Element for the panel containing the autocomplete options. */\n @ViewChild(NovoOverlayTemplateComponent, { static: true })\n overlay: NovoOverlayTemplateComponent;\n\n @ContentChildren(NovoOptgroup, { descendants: true })\n optionGroups: QueryList;\n @ContentChildren(NovoOption, { descendants: true })\n contentOptions: QueryList;\n @ViewChildren(NovoOption)\n viewOptions: QueryList;\n\n viewOptionsSignal = signal(null);\n contentOptionsSignal = signal(null);\n\n // This signal may be set programmatically by a SelectSearchComponent.\n hideLegacyOptionsForSearch = signal(false);\n\n hideLegacyOptions = input(false, { transform: booleanAttribute });\n\n private displayLegacyOptions = computed(() => {\n return !(this.hideLegacyOptionsForSearch() || this.hideLegacyOptions());\n })\n\n @ViewChild('panel')\n panel: ElementRef;\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n @Input()\n get value(): any {\n return this._value;\n }\n set value(newValue: any) {\n // Always re-assign an array, because it might have been mutated.\n if (newValue !== this._value || (this._multiple && Array.isArray(newValue))) {\n if (this.options) {\n this._setSelectionByValue(newValue);\n }\n this._value = newValue;\n this._lingeringDisplayValue = null;\n }\n }\n private _value: any = null;\n\n /** Whether the user should be allowed to select multiple options. */\n @Input()\n get multiple(): boolean {\n return this._multiple;\n }\n set multiple(value: boolean) {\n this._multiple = coerceBooleanProperty(value);\n this.position = 'above-below';\n }\n private _multiple: boolean = false;\n\n /** Array of options to display in the select dropdown */\n @Input()\n set options(options: Array) {\n this._options = options;\n this._initLegacyOptions();\n }\n get options(): Array {\n return this._options;\n }\n private _options: Array;\n\n /** Whether the select is focused. */\n get focused(): boolean {\n return this._focused || this.panelOpen;\n }\n private _focused = false;\n\n /** Implemented as part of NovoFieldControl. */\n get empty(): boolean {\n return Helpers.isEmpty(this._value);\n }\n\n /** The currently selected option. */\n get selected(): NovoOption | NovoOption[] {\n return this.multiple ? this._selectionModel.selected : this._selectionModel.selected[0];\n }\n\n /** The value displayed in the trigger. */\n get displayValue(): string {\n if (this.empty) {\n return '';\n }\n if (this._multiple) {\n const selectedOptions = this._selectionModel.selected.map((option) => this._getDisplayValue(option));\n return selectedOptions.join(', ');\n }\n return this._getDisplayValue(this._selectionModel.selected[0]);\n }\n\n constructor(\n public elementRef: ElementRef,\n public labels: NovoLabelService,\n public ref: ChangeDetectorRef,\n private focusMonitor: FocusMonitor,\n private ngZone: NgZone,\n private injector: Injector,\n defaultErrorStateMatcher: ErrorStateMatcher,\n @Optional() @Self() ngControl: NgControl,\n @Optional() _parentForm: NgForm,\n @Optional() _parentFormGroup: FormGroupDirective,\n @Optional() @Inject(NOVO_FORM_FIELD) private _fieldElement: NovoFieldElement,\n ) {\n super(defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);\n if (ngControl) {\n ngControl.valueAccessor = this;\n }\n this._selectionModel = new SelectionModel(this.multiple);\n // Initialize KeyManager to manage keyboard events\n this._initKeyManager();\n }\n\n ngOnInit() {\n this.stateChanges.next();\n this._initLegacyOptions();\n this.focusMonitor.monitor(this.elementRef.nativeElement).subscribe((origin) =>\n this.ngZone.run(() => {\n this._focused = !!origin;\n this.stateChanges.next();\n }),\n );\n }\n\n ngOnChanges(changes: SimpleChanges) {\n // Updating the disabled state is handled by `mixinDisabled`, but we need to additionally let\n // the parent form field know to run change detection when the disabled state changes.\n if (changes?.disabled) {\n this.stateChanges.next();\n }\n if (changes?.multiple) {\n // TODO: copy selection over??\n this._selectionModel = new SelectionModel(this.multiple);\n }\n this._initLegacyOptions();\n }\n\n ngAfterViewInit() {\n // Subscribe to NovoOption selections\n this._watchSelectionEvents();\n // Set initial value\n this._initializeSelection();\n // Listen to selection changes to select and deselect options\n this._selectionModel.changed.pipe(takeUntil(this._destroy)).subscribe((event) => {\n event.added.forEach((option) => {\n if (option.select) {\n option.select();\n }\n });\n event.removed.forEach((option) => {\n if (option.deselect) {\n option.deselect();\n }\n });\n });\n // Listen to QueryList changes\n merge(this.contentOptions.changes, this.viewOptions.changes)\n .pipe(takeUntil(this._destroy))\n .subscribe(() => {\n this._watchSelectionEvents();\n this._initializeSelection();\n });\n\n this.contentOptions.changes.pipe(takeUntil(this._destroy), startWith(this.contentOptions))\n .subscribe(contentOptions => {\n this.contentOptionsSignal.set(contentOptions.toArray());\n });\n\n this.viewOptions.changes.pipe(takeUntil(this._destroy), startWith(this.viewOptions))\n .subscribe(viewOptions => {\n this.viewOptionsSignal.set(viewOptions.toArray());\n });\n\n merge(this.overlay.opening, this.overlay.closing)\n .pipe(takeUntil(this._destroy))\n .subscribe(() => {\n this.openedChange.emit(this.panelOpen);\n });\n setTimeout(() => {\n if (this._fieldElement?._labelElement) {\n this._ariaLabelledBy = this._fieldElement._labelElement.id;\n }\n });\n }\n\n ngOnDestroy() {\n this._destroy.next();\n this._destroy.complete();\n this._stateChanges.unsubscribe();\n this._activeOptionChanges.unsubscribe();\n this._selectedOptionChanges.unsubscribe();\n this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);\n }\n\n @HostListener('click')\n onClick() {\n this.togglePanel();\n return false;\n }\n\n openPanel() {\n super.openPanel();\n this._highlightCorrectOption();\n }\n\n private _initializeSelection(): void {\n // Defer setting the value in order to avoid the \"Expression\n // has changed after it was checked\" errors from Angular.\n Promise.resolve().then(() => {\n this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value);\n this.stateChanges.next();\n });\n }\n\n /**\n * Sets the selected option based on a value. If no option can be\n * found with the designated value, the select trigger is cleared.\n */\n private _setSelectionByValue(value: any | any[]): void {\n this._selectionModel.selected.forEach((option) => {\n if (option.setInactiveStyles) {\n option.setInactiveStyles();\n }\n });\n this._selectionModel.clear();\n if (this.multiple && value) {\n value.forEach((currentValue: any) => this._selectValue(currentValue));\n this._sortValues();\n } else if (this._keyManager) {\n const correspondingOption = this._selectValue(value);\n // Shift focus to the active item. Note that we shouldn't do this in multiple\n // mode, because we don't know what option the user interacted with last.\n if (correspondingOption) {\n this._keyManager.updateActiveItem(correspondingOption);\n } else if (!this.panelOpen) {\n // Otherwise reset the highlighted option. Note that we only want to do this while\n // closed, because doing it while open can shift the user's focus unnecessarily.\n this._keyManager.updateActiveItem(-1);\n }\n }\n this.ref.markForCheck();\n }\n\n /**\n * Finds and selects and option based on its value.\n * @returns Option that has the corresponding value.\n */\n private _selectValue(value: any): NovoOption | undefined {\n const allOptions = this._getOptions();\n const correspondingOption = allOptions.find((option: NovoOption) => {\n // Skip options that are already in the model. This allows us to handle cases\n // where the same primitive value is selected multiple times.\n if (this._selectionModel.isSelected(option)) {\n return false;\n }\n return !Helpers.isEmpty(value) && !Helpers.isEmpty(option.value) && this.compareWith(option.value, value);\n });\n if (correspondingOption) {\n this._selectionModel.select(correspondingOption);\n } else if (value && !correspondingOption && this.displayLegacyOptions()) {\n // If searchComponent is present, we are using a text input filter; so if there is an\n // option not in the list, it is just filtered out\n // Double Check option not already added.\n const legacyOption = this.filteredOptions.find((it) => it.value === value);\n if (!legacyOption) {\n // Add a disabled option to the list and select it\n this._legacyOption = {\n disabled: true,\n tooltip: 'Value is not provided in list of valid options.',\n label: value?.label || value,\n value,\n }\n this.filteredOptions.push(this._legacyOption);\n this.ref.detectChanges();\n }\n }\n\n return correspondingOption;\n }\n\n public select(option, i, fireEvents: boolean = true) {\n console.warn('select() method is deprecated');\n }\n public clear() {\n console.warn('clear() method is deprecated');\n }\n\n /**\n * If the item is not disabled, this method closes the panel, and if a value is specified,\n * also sets the associated control to that value. It will also mark the control as dirty\n * if this interaction stemmed from the user.\n */\n handleSelection(option: NovoOption, isUserInput: boolean = false): void {\n const wasSelected = this._selectionModel.isSelected(option);\n if (option.value == null && !this._multiple) {\n option.deselect();\n this._selectionModel.clear();\n if (this.value != null) {\n this._propagateChanges(option.value);\n }\n } else {\n if (wasSelected !== option.selected) {\n option.selected ? this._selectionModel.select(option) : this._selectionModel.deselect(option);\n }\n if (isUserInput) {\n this._keyManager.setActiveItem(option);\n }\n if (this.multiple) {\n this._sortValues();\n if (isUserInput) {\n this.focus();\n }\n }\n }\n const legacyOptionIndex = this.filteredOptions.lastIndexOf(this._legacyOption);\n if (legacyOptionIndex !== -1) {\n this.filteredOptions.splice(legacyOptionIndex, 1);\n }\n\n if (wasSelected !== this._selectionModel.isSelected(option)) {\n this._propagateChanges();\n }\n this.stateChanges.next();\n this._watchSelectionEvents();\n }\n\n private _getDisplayValue(option: NovoOption & { value?: any; label?: string }): string {\n if (!option) {\n return this._lingeringDisplayValue ?? '';\n }\n let toDisplay = option.viewValue;\n if (this.displayWith) {\n toDisplay = this.displayWith(option.value);\n }\n // Simply falling back to an empty string if the display value is falsy does not work properly.\n // The display value can also be the number zero and shouldn't fall back to an empty string.\n let displayValue = toDisplay != null ? toDisplay : '';\n // tslint:disable-next-line:triple-equals\n if (displayValue != '') { // eslint-disable-line\n this._lingeringDisplayValue = displayValue;\n } else if (this._lingeringDisplayValue) {\n displayValue = this._lingeringDisplayValue;\n }\n return displayValue;\n }\n\n /**\n * Clear any previous selected option and emit a selection change event for this option\n */\n private _clearPreviousSelectedOption(skip: NovoOption) {\n this._getOptions().forEach((option) => {\n if (option !== skip && option.selected) {\n option.deselect();\n }\n });\n }\n\n private _watchSelectionEvents() {\n const options = this._getOptions();\n const selectionEvents = options ? merge(...options.map((option) => option.onSelectionChange)) : of();\n this._selectedOptionChanges.unsubscribe();\n this._selectedOptionChanges = selectionEvents.pipe(take(1)).subscribe((event: NovoOptionSelectionChange) => {\n this.onModelTouched();\n this.handleSelection(event.source, event.isUserInput);\n if (event.isUserInput && !this.multiple && this.panelOpen) {\n this.closePanel();\n this.focus();\n }\n });\n }\n\n /** Handles all keydown events on the select. */\n @HostListener('keydown', ['$event'])\n _handleKeydown(event: KeyboardEvent): void {\n if (!this.disabled) {\n this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);\n }\n }\n\n /** Handles keyboard events while the select is closed. */\n private _handleClosedKeydown(event: KeyboardEvent): void {\n const key = event.key;\n const isArrowKey = key === Key.ArrowDown || key === Key.ArrowUp || key === Key.ArrowLeft || key === Key.ArrowRight;\n const isOpenKey = key === Key.Enter || key === Key.Space;\n const manager = this._keyManager;\n // Open the select on ALT + arrow key to match the native