refactor(cdk/listbox): switch to input transforms

Switches inputs in cdk/listbox to use transforms instead of getters/setters.

Author: crisbeto

src/cdk/listbox/listbox.ts

@@ -8,6 +8,7 @@
 
 import {
   AfterContentInit,
+  booleanAttribute,
   ChangeDetectorRef,
   ContentChildren,
   Directive,
@@ -33,7 +34,7 @@ import {
   SPACE,
   UP_ARROW,
 } from '@angular/cdk/keycodes';
-import {BooleanInput, coerceArray, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {coerceArray} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
 import {defer, fromEvent, merge, Observable, Subject} from 'rxjs';
 import {filter, map, startWith, switchMap, takeUntil} from 'rxjs/operators';
@@ -115,12 +116,12 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
   @Input('cdkOptionTypeaheadLabel') typeaheadLabel: string;
 
   /** Whether this option is disabled. */
-  @Input('cdkOptionDisabled')
+  @Input({alias: 'cdkOptionDisabled', transform: booleanAttribute})
   get disabled(): boolean {
     return this.listbox.disabled || this._disabled;
   }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+  set disabled(value: boolean) {
+    this._disabled = value;
   }
   private _disabled: boolean = false;
 
@@ -281,37 +282,25 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
    * 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('cdkListboxMultiple')
+  @Input({alias: 'cdkListboxMultiple', transform: booleanAttribute})
   get multiple(): boolean {
     return this.selectionModel.multiple;
   }
-  set multiple(value: BooleanInput) {
-    this.selectionModel.multiple = coerceBooleanProperty(value);
+  set multiple(value: boolean) {
+    this.selectionModel.multiple = value;
 
     if (this.options) {
       this._updateInternalValue();
     }
   }
 
   /** Whether the listbox is disabled. */
-  @Input('cdkListboxDisabled')
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
-  }
-  private _disabled: boolean = false;
+  @Input({alias: 'cdkListboxDisabled', transform: booleanAttribute})
+  disabled: boolean = false;
 
   /** Whether the listbox will use active descendant or will move focus onto the options. */
-  @Input('cdkListboxUseActiveDescendant')
-  get useActiveDescendant(): boolean {
-    return this._useActiveDescendant;
-  }
-  set useActiveDescendant(shouldUseActiveDescendant: BooleanInput) {
-    this._useActiveDescendant = coerceBooleanProperty(shouldUseActiveDescendant);
-  }
-  private _useActiveDescendant: boolean = false;
+  @Input({alias: 'cdkListboxUseActiveDescendant', transform: booleanAttribute})
+  useActiveDescendant: boolean = false;
 
   /** The orientation of the listbox. Only affects keyboard interaction, not visual layout. */
   @Input('cdkListboxOrientation')
@@ -341,23 +330,23 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
    * Whether the keyboard navigation should wrap when the user presses arrow down on the last item
    * or arrow up on the first item.
    */
-  @Input('cdkListboxNavigationWrapDisabled')
+  @Input({alias: 'cdkListboxNavigationWrapDisabled', transform: booleanAttribute})
   get navigationWrapDisabled() {
     return this._navigationWrapDisabled;
   }
-  set navigationWrapDisabled(wrap: BooleanInput) {
-    this._navigationWrapDisabled = coerceBooleanProperty(wrap);
+  set navigationWrapDisabled(wrap: boolean) {
+    this._navigationWrapDisabled = wrap;
     this.listKeyManager?.withWrap(!this._navigationWrapDisabled);
   }
   private _navigationWrapDisabled = false;
 
   /** Whether keyboard navigation should skip over disabled items. */
-  @Input('cdkListboxNavigatesDisabledOptions')
+  @Input({alias: 'cdkListboxNavigatesDisabledOptions', transform: booleanAttribute})
   get navigateDisabledOptions() {
     return this._navigateDisabledOptions;
   }
-  set navigateDisabledOptions(skip: BooleanInput) {
-    this._navigateDisabledOptions = coerceBooleanProperty(skip);
+  set navigateDisabledOptions(skip: boolean) {
+    this._navigateDisabledOptions = skip;
     this.listKeyManager?.skipPredicate(
       this._navigateDisabledOptions ? this._skipNonePredicate : this._skipDisabledPredicate,
     );
@@ -683,7 +672,7 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
 
   /** Called when the user presses keydown on the listbox. */
   protected _handleKeydown(event: KeyboardEvent) {
-    if (this._disabled) {
+    if (this.disabled) {
       return;
     }
 
@@ -809,7 +798,7 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
 
   /** Get the id of the active option if active descendant is being used. */
   protected _getAriaActiveDescendant(): string | null | undefined {
-    return this._useActiveDescendant ? this.listKeyManager?.activeItem?.id : null;
+    return this.useActiveDescendant ? this.listKeyManager?.activeItem?.id : null;
   }
 
   /** Get the tabindex for the listbox. */

tools/public_api_guard/cdk/listbox.md

@@ -6,7 +6,6 @@
 
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { AfterContentInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Highlightable } from '@angular/cdk/a11y';
@@ -27,8 +26,7 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
     deselect(option: CdkOption<T>): void;
     deselectValue(value: T): void;
     protected readonly destroyed: Subject<void>;
-    get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    disabled: boolean;
     protected readonly element: HTMLElement;
     get enabledTabIndex(): number | null;
     set enabledTabIndex(value: number | null);
@@ -46,11 +44,21 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
     isValueSelected(value: T): boolean;
     protected listKeyManager: ActiveDescendantKeyManager<CdkOption<T>>;
     get multiple(): boolean;
-    set multiple(value: BooleanInput);
-    get navigateDisabledOptions(): BooleanInput;
-    set navigateDisabledOptions(skip: BooleanInput);
-    get navigationWrapDisabled(): BooleanInput;
-    set navigationWrapDisabled(wrap: BooleanInput);
+    set multiple(value: boolean);
+    get navigateDisabledOptions(): boolean;
+    set navigateDisabledOptions(skip: boolean);
+    get navigationWrapDisabled(): boolean;
+    set navigationWrapDisabled(wrap: boolean);
+    // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
+    static ngAcceptInputType_multiple: unknown;
+    // (undocumented)
+    static ngAcceptInputType_navigateDisabledOptions: unknown;
+    // (undocumented)
+    static ngAcceptInputType_navigationWrapDisabled: unknown;
+    // (undocumented)
+    static ngAcceptInputType_useActiveDescendant: unknown;
     // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
@@ -71,8 +79,7 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
     toggleValue(value: T): void;
     protected triggerOption(option: CdkOption<T> | null): void;
     protected triggerRange(trigger: CdkOption<T> | null, from: number, to: number, on: boolean): void;
-    get useActiveDescendant(): boolean;
-    set useActiveDescendant(shouldUseActiveDescendant: BooleanInput);
+    useActiveDescendant: boolean;
     get value(): readonly T[];
     set value(value: readonly T[]);
     readonly valueChange: Subject<ListboxValueChangeEvent<T>>;
@@ -99,7 +106,7 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
     deselect(): void;
     protected destroyed: Subject<void>;
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     readonly element: HTMLElement;
     get enabledTabIndex(): number | null;
     set enabledTabIndex(value: number | null);
@@ -113,6 +120,8 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
     isSelected(): boolean;
     protected readonly listbox: CdkListbox<T>;
     // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
     ngOnDestroy(): void;
     select(): void;
     setActiveStyles(): void;