refactor(cdk-experimental/ui-patterns): remove uses of signal

Author: wagnermaciel

src/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {signal, Signal, WritableSignal} from '@angular/core';
+import {Signal, WritableSignal} from '@angular/core';
 
 /** Represents an item in a collection, such as a listbox option, than can be navigated to. */
 export interface ListNavigationItem {
@@ -38,16 +38,16 @@ export interface ListNavigationInputs<T extends ListNavigationItem> {
 /** Controls navigation for a list of items. */
 export class ListNavigation<T extends ListNavigationItem> {
   /** The last index that was active. */
-  prevActiveIndex = signal(0);
+  prevActiveIndex = 0;
 
   constructor(readonly inputs: ListNavigationInputs<T>) {
-    this.prevActiveIndex.set(inputs.activeIndex());
+    this.prevActiveIndex = inputs.activeIndex();
   }
 
   /** Navigates to the given item. */
   goto(item: T) {
     if (this.isFocusable(item)) {
-      this.prevActiveIndex.set(this.inputs.activeIndex());
+      this.prevActiveIndex = this.inputs.activeIndex();
       const index = this.inputs.items().indexOf(item);
       this.inputs.activeIndex.set(index);
     }

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {signal, Signal, WritableSignal} from '@angular/core';
+import {Signal, WritableSignal} from '@angular/core';
 import {ListNavigation, ListNavigationItem} from '../list-navigation/list-navigation';
 
 /** Represents an item in a collection, such as a listbox option, than can be selected. */
@@ -36,7 +36,7 @@ export interface ListSelectionInputs<T extends ListSelectionItem> {
 /** Controls selection for a list of items. */
 export class ListSelection<T extends ListSelectionItem> {
   /** The id of the most recently selected item. */
-  previousSelectedId = signal<string | undefined>(undefined);
+  previousSelectedId?: string;
 
   /** The navigation controller of the parent list. */
   navigation: ListNavigation<T>;
@@ -105,13 +105,13 @@ export class ListSelection<T extends ListSelectionItem> {
 
   /** Selects the items in the list starting at the last selected item. */
   selectFromPrevSelectedItem() {
-    const prevSelectedId = this.inputs.items().findIndex(i => this.previousSelectedId() === i.id());
+    const prevSelectedId = this.inputs.items().findIndex(i => this.previousSelectedId === i.id());
     this._selectFromIndex(prevSelectedId);
   }
 
   /** Selects the items in the list starting at the last active item. */
   selectFromActive() {
-    this._selectFromIndex(this.inputs.navigation.prevActiveIndex());
+    this._selectFromIndex(this.inputs.navigation.prevActiveIndex);
   }
 
   /** Selects the items in the list starting at the given index. */
@@ -137,6 +137,6 @@ export class ListSelection<T extends ListSelectionItem> {
   /** Sets the anchor to the current active index. */
   private _anchor() {
     const item = this.inputs.items()[this.inputs.navigation.inputs.activeIndex()];
-    this.previousSelectedId.set(item.id());
+    this.previousSelectedId = item.id();
   }
 }

src/cdk-experimental/ui-patterns/behaviors/list-typeahead/list-typeahead.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {signal, Signal} from '@angular/core';
+import {Signal} from '@angular/core';
 import {ListNavigationItem, ListNavigation} from '../list-navigation/list-navigation';
 
 /**
@@ -36,10 +36,10 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
   navigation: ListNavigation<T>;
 
   /** Keeps track of the characters that typeahead search is being called with. */
-  private _query = signal('');
+  private _query = '';
 
   /** The index where that the typeahead search was initiated from. */
-  private _startIndex = signal<number | undefined>(undefined);
+  private _startIndex?: number;
 
   constructor(readonly inputs: ListTypeaheadInputs & {navigation: ListNavigation<T>}) {
     this.navigation = inputs.navigation;
@@ -51,21 +51,21 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
       return;
     }
 
-    if (this._startIndex() === undefined) {
-      this._startIndex.set(this.navigation.inputs.activeIndex());
+    if (this._startIndex === undefined) {
+      this._startIndex = this.navigation.inputs.activeIndex();
     }
 
     clearTimeout(this.timeout);
-    this._query.update(q => q + char.toLowerCase());
+    this._query = this._query + char.toLowerCase();
     const item = this._getItem();
 
     if (item) {
       this.navigation.goto(item);
     }
 
     this.timeout = setTimeout(() => {
-      this._query.set('');
-      this._startIndex.set(undefined);
+      this._query = '';
+      this._startIndex = undefined;
     }, this.inputs.typeaheadDelay() * 1000);
   }
 
@@ -74,11 +74,12 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
    * current query starting from the the current anchor index.
    */
   private _getItem() {
+    // TODO(wagnermaciel): Reuse the logic in list-navigation to do this.
     let items = this.navigation.inputs.items();
-    const after = items.slice(this._startIndex()! + 1);
-    const before = items.slice(0, this._startIndex()!);
+    const after = items.slice(this._startIndex! + 1);
+    const before = items.slice(0, this._startIndex!);
     items = this.navigation.inputs.wrap() ? after.concat(before) : after; // TODO: Always wrap?
-    items.push(this.navigation.inputs.items()[this._startIndex()!]);
+    items.push(this.navigation.inputs.items()[this._startIndex!]);
 
     const focusableItems = [];
     for (const item of items) {
@@ -87,6 +88,6 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
       }
     }
 
-    return focusableItems.find(i => i.searchTerm().toLowerCase().startsWith(this._query()));
+    return focusableItems.find(i => i.searchTerm().toLowerCase().startsWith(this._query));
   }
 }