Class CdkListbox

src/cdk/listbox/listbox.ts:263–1055

  ],
})
export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, ControlValueAccessor {
  private _cleanupWindowBlur: (() => void) | undefined;

  /** The id of the option's host element. */
  @Input()
  get id() {
    return this._id || this._generatedId;
  }
  set id(value) {
    this._id = value;
  }
  private _id: string | undefined;
  private _generatedId = inject(_IdGenerator).getId('cdk-listbox-');

  /** The tabindex to use when the listbox is enabled. */
  @Input('tabindex')
  get enabledTabIndex() {
    return this._enabledTabIndex() === undefined ? 0 : this._enabledTabIndex();
  }
  set enabledTabIndex(value) {
    this._enabledTabIndex.set(value);
  }
  private _enabledTabIndex = signal<number | null | undefined>(undefined);

  /** The value selected in the listbox, represented as an array of option values. */
  @Input('cdkListboxValue')
  get value(): readonly T[] {
    return this._invalid ? [] : this.selectionModel.selected;
  }
  set value(value: readonly T[]) {
    this._setSelection(value);
  }

  /**
   * Whether the listbox allows multiple options to be selected. If the value switches from `true`
   * to `false`, and more than one option is selected, all options are deselected.
   */
  @Input({alias: 'cdkListboxMultiple', transform: booleanAttribute})
  get multiple(): boolean {
    return this.selectionModel.multiple;
  }
  set multiple(value: boolean) {
    this.selectionModel.multiple = value;

    if (this.options) {
      this._updateInternalValue();
    }
  }

  /** Whether the listbox is disabled. */
  @Input({alias: 'cdkListboxDisabled', transform: booleanAttribute})
  get disabled() {
    return this._disabled();
  }
  set disabled(value: boolean) {
    this._disabled.set(value);
  }
  private _disabled = signal(false);