refactor(cdk-experimental/ui-patterns): loosen the API to accept different types of signals (angular#30597)

* Introduces the SignalLike and WritableSignalLike types to avoid direct uses of Signal and WritableSignal

Author: wagnermaciel

src/cdk-experimental/ui-patterns/behaviors/event-manager/BUILD.bazel

@@ -8,5 +8,7 @@ ts_library(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    deps = ["@npm//@angular/core"],
+    deps = [
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+    ],
 )

src/cdk-experimental/ui-patterns/behaviors/event-manager/keyboard-event-manager.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Signal} from '@angular/core';
+import {SignalLike} from '../signal-like/signal-like';
 import {
   EventHandler,
   EventHandlerOptions,
@@ -20,9 +20,9 @@ import {
  * Used to represent a keycode.
  *
  * This is used to match whether an events keycode should be handled. The ability to match using a
- * string, Signal, or Regexp gives us more flexibility when authoring event handlers.
+ * string, SignalLike, or Regexp gives us more flexibility when authoring event handlers.
  */
-type KeyCode = string | Signal<string> | RegExp;
+type KeyCode = string | SignalLike<string> | RegExp;
 
 /**
  * An event manager that is specialized for handling keyboard events. By default this manager stops

src/cdk-experimental/ui-patterns/behaviors/list-focus/BUILD.bazel

@@ -10,7 +10,7 @@ ts_library(
     ),
     deps = [
         "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
-        "@npm//@angular/core",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
     ],
 )
 
@@ -20,6 +20,7 @@ ng_test_library(
     deps = [
         ":list-focus",
         "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
     ],
 )
 

src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.spec.ts

@@ -6,16 +6,17 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {computed, Signal, signal} from '@angular/core';
+import {computed, signal} from '@angular/core';
+import {SignalLike} from '../signal-like/signal-like';
 import {ListNavigation, ListNavigationInputs} from '../list-navigation/list-navigation';
 import {ListFocus, ListFocusInputs, ListFocusItem} from './list-focus';
 
 describe('List Focus', () => {
   interface TestItem extends ListFocusItem {
-    tabindex: Signal<-1 | 0>;
+    tabindex: SignalLike<-1 | 0>;
   }
 
-  function getItems(length: number): Signal<TestItem[]> {
+  function getItems(length: number): SignalLike<TestItem[]> {
     return signal(
       Array.from({length}).map((_, i) => ({
         index: signal(i),
@@ -28,7 +29,7 @@ describe('List Focus', () => {
   }
 
   function getNavigation<T extends TestItem>(
-    items: Signal<T[]>,
+    items: SignalLike<T[]>,
     args: Partial<ListNavigationInputs<T>> = {},
   ): ListNavigation<T> {
     return new ListNavigation({

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

@@ -6,22 +6,22 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Signal} from '@angular/core';
+import {SignalLike} from '../signal-like/signal-like';
 import {ListNavigation, ListNavigationItem} from '../list-navigation/list-navigation';
 
 /** Represents an item in a collection, such as a listbox option, than may receive focus. */
 export interface ListFocusItem extends ListNavigationItem {
   /** A unique identifier for the item. */
-  id: Signal<string>;
+  id: SignalLike<string>;
 
   /** The html element that should receive focus. */
-  element: Signal<HTMLElement>;
+  element: SignalLike<HTMLElement>;
 }
 
 /** Represents the required inputs for a collection that contains focusable items. */
 export interface ListFocusInputs<T extends ListFocusItem> {
   /** The focus strategy used by the list. */
-  focusMode: Signal<'roving' | 'activedescendant'>;
+  focusMode: SignalLike<'roving' | 'activedescendant'>;
 }
 
 /** Controls focus for a list of items. */

src/cdk-experimental/ui-patterns/behaviors/list-navigation/BUILD.bazel

@@ -8,13 +8,19 @@ ts_library(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    deps = ["@npm//@angular/core"],
+    deps = [
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+        "@npm//@angular/core",
+    ],
 )
 
 ng_test_library(
     name = "unit_test_sources",
     srcs = glob(["**/*.spec.ts"]),
-    deps = [":list-navigation"],
+    deps = [
+        ":list-navigation",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+    ],
 )
 
 ng_web_test_suite(

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

@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Signal, signal, WritableSignal} from '@angular/core';
+import {signal} from '@angular/core';
+import {SignalLike, WritableSignalLike} from '../signal-like/signal-like';
 import {ListNavigationItem, ListNavigation, ListNavigationInputs} from './list-navigation';
 
 describe('List Navigation', () => {
   interface TestItem extends ListNavigationItem {
-    disabled: WritableSignal<boolean>;
+    disabled: WritableSignalLike<boolean>;
   }
 
-  function getItems(length: number): Signal<TestItem[]> {
+  function getItems(length: number): SignalLike<TestItem[]> {
     return signal(
       Array.from({length}).map((_, i) => ({
         index: signal(i),
@@ -24,7 +25,7 @@ describe('List Navigation', () => {
   }
 
   function getNavigation<T extends TestItem>(
-    items: Signal<T[]>,
+    items: SignalLike<T[]>,
     args: Partial<ListNavigationInputs<T>> = {},
   ): ListNavigation<T> {
     return new ListNavigation({

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

@@ -6,33 +6,34 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {signal, Signal, WritableSignal} from '@angular/core';
+import {signal} from '@angular/core';
+import {SignalLike, WritableSignalLike} from '../signal-like/signal-like';
 
 /** Represents an item in a collection, such as a listbox option, than can be navigated to. */
 export interface ListNavigationItem {
   /** Whether an item is disabled. */
-  disabled: Signal<boolean>;
+  disabled: SignalLike<boolean>;
 }
 
 /** Represents the required inputs for a collection that has navigable items. */
 export interface ListNavigationInputs<T extends ListNavigationItem> {
   /** Whether focus should wrap when navigating. */
-  wrap: Signal<boolean>;
+  wrap: SignalLike<boolean>;
 
   /** The items in the list. */
-  items: Signal<T[]>;
+  items: SignalLike<T[]>;
 
   /** Whether disabled items in the list should be skipped when navigating. */
-  skipDisabled: Signal<boolean>;
+  skipDisabled: SignalLike<boolean>;
 
   /** The current index that has been navigated to. */
-  activeIndex: WritableSignal<number>;
+  activeIndex: WritableSignalLike<number>;
 
   /** Whether the list is vertically or horizontally oriented. */
-  orientation: Signal<'vertical' | 'horizontal'>;
+  orientation: SignalLike<'vertical' | 'horizontal'>;
 
   /** The direction that text is read based on the users locale. */
-  textDirection: Signal<'rtl' | 'ltr'>;
+  textDirection: SignalLike<'rtl' | 'ltr'>;
 }
 
 /** Controls navigation for a list of items. */

src/cdk-experimental/ui-patterns/behaviors/list-selection/BUILD.bazel

@@ -10,6 +10,7 @@ ts_library(
     ),
     deps = [
         "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
         "@npm//@angular/core",
     ],
 )
@@ -20,6 +21,7 @@ ng_test_library(
     deps = [
         ":list-selection",
         "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
     ],
 )
 

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

@@ -6,16 +6,17 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Signal, signal, WritableSignal} from '@angular/core';
+import {signal} from '@angular/core';
+import {SignalLike, WritableSignalLike} from '../signal-like/signal-like';
 import {ListSelectionItem, ListSelection, ListSelectionInputs} from './list-selection';
 import {ListNavigation, ListNavigationInputs} from '../list-navigation/list-navigation';
 
 describe('List Selection', () => {
   interface TestItem extends ListSelectionItem {
-    disabled: WritableSignal<boolean>;
+    disabled: WritableSignalLike<boolean>;
   }
 
-  function getItems(length: number): Signal<TestItem[]> {
+  function getItems(length: number): SignalLike<TestItem[]> {
     return signal(
       Array.from({length}).map((_, i) => ({
         index: signal(i),
@@ -27,7 +28,7 @@ describe('List Selection', () => {
   }
 
   function getNavigation<T extends TestItem>(
-    items: Signal<T[]>,
+    items: SignalLike<T[]>,
     args: Partial<ListNavigationInputs<T>> = {},
   ): ListNavigation<T> {
     return new ListNavigation({
@@ -42,7 +43,7 @@ describe('List Selection', () => {
   }
 
   function getSelection<T extends TestItem>(
-    items: Signal<T[]>,
+    items: SignalLike<T[]>,
     navigation: ListNavigation<T>,
     args: Partial<ListSelectionInputs<T>> = {},
   ): ListSelection<T> {