Class Select

adev/shared-docs/components/select/select.component.ts:36–102

  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule],
})
export class Select implements FormValueControl<string | null> {
  readonly value = model<string | null>(null);

  readonly id = input.required<string>({alias: 'selectId'});
  readonly name = input.required<string>();
  readonly options = input.required<SelectOption[]>();

  readonly listbox = viewChild(Listbox);
  readonly combobox = viewChild(Combobox);

  readonly searchString = signal('');

  readonly popupExpanded = signal(false);
  readonly filteredOptions = computed(() => {
    const search = this.searchString().toLowerCase();
    if (!search) {
      return this.options();
    }
    return this.options().filter((option) => option.label.toLowerCase().includes(search));
  });

  readonly displayValue = computed(() => {
    const currentValue = this.value();
    if (currentValue === null) {
      return '';
    }
    const option = this.options().find((opt) => opt.value === currentValue);
    return option ? option.label : '';
  });

  readonly selectedValues = signal<SelectOptionValue[]>([]);

  constructor() {
    afterRenderEffect(() => {
      this.listbox()?.scrollActiveItemIntoView();
    });
  }

  onCommit() {
    const values = this.selectedValues();
    if (values.length) {
      this.value.set(values[0]);
      this.popupExpanded.set(false);
    }
  }

  /** Dismisses the dialog overlay on Escape key. */
  onSearchEscape(event: Event) {
    this.popupExpanded.set(false);
    this.combobox()?.element.focus();
  }

  /** Handles keydown events on the clear button. */
  onKeydown(event: KeyboardEvent): void {
    if (event.key === 'Enter') {
      this.clear();
      this.popupExpanded.set(false);
      event.stopPropagation();