feat(cdk-experimental/ui-patterns): add popup behavior

src/cdk-experimental/ui-patterns/behaviors/popup/BUILD.bazel

@@ -0,0 +1,30 @@
+load("//tools:defaults.bzl", "ng_web_test_suite", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_project(
+    name = "popup",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//:node_modules/@angular/core",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+    ],
+)
+
+ts_project(
+    name = "unit_test_sources",
+    testonly = True,
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":popup",
+        "//:node_modules/@angular/core",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)

src/cdk-experimental/ui-patterns/behaviors/popup/popup.spec.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {signal} from '@angular/core';
+import {ComboboxPopupTypes, PopupControl, PopupControlInputs} from './popup';
+
+type TestInputs = Partial<Pick<PopupControlInputs, 'popup' | 'expanded'>>;
+
+function getPopupControl(inputs: TestInputs = {}): PopupControl {
+  const expanded = inputs.expanded || signal(false);
+  const popup = signal({inert: signal(!expanded())});
+  const controls = signal('popup-element-id');
+  const hasPopup = signal(ComboboxPopupTypes.LISTBOX);
+
+  return new PopupControl({
+    popup,
+    controls,
+    expanded,
+    hasPopup,
+  });
+}
+
+describe('Popup Control', () => {
+  describe('#open', () => {
+    it('should set expanded to true and popup inert to false', () => {
+      const control = getPopupControl();
+
+      expect(control.inputs.expanded()).toBeFalse();
+      expect(control.inputs.popup().inert()).toBeTrue();
+
+      control.open();
+
+      expect(control.inputs.expanded()).toBeTrue();
+      expect(control.inputs.popup().inert()).toBeFalse();
+    });
+  });
+
+  describe('#close', () => {
+    it('should set expanded to false and popup inert to true', () => {
+      const expanded = signal(true);
+      const control = getPopupControl({expanded});
+
+      expect(control.inputs.expanded()).toBeTrue();
+      expect(control.inputs.popup().inert()).toBeFalse();
+
+      control.close();
+
+      expect(control.inputs.expanded()).toBeFalse();
+      expect(control.inputs.popup().inert()).toBeTrue();
+    });
+  });
+
+  describe('#toggle', () => {
+    it('should toggle expanded and popup inert states', () => {
+      const control = getPopupControl();
+
+      expect(control.inputs.expanded()).toBeFalse();
+      expect(control.inputs.popup().inert()).toBeTrue();
+
+      control.toggle();
+
+      expect(control.inputs.expanded()).toBeTrue();
+      expect(control.inputs.popup().inert()).toBeFalse();
+
+      control.toggle();
+
+      expect(control.inputs.expanded()).toBeFalse();
+      expect(control.inputs.popup().inert()).toBeTrue();
+    });
+  });
+});

src/cdk-experimental/ui-patterns/behaviors/popup/popup.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {SignalLike, WritableSignalLike} from '../signal-like/signal-like';
+
+/**
+ * Represents the inputs required for a popup behavior.
+ * It includes a signal for the expanded state and a reference to the popup element.
+ */
+export enum ComboboxPopupTypes {
+  TREE = 'tree',
+  GRID = 'grid',
+  DIALOG = 'dialog',
+  LISTBOX = 'listbox',
+}
+
+/** The element that serves as the popup. */
+export interface Popup {
+  /** Whether the popup is interactive or not. */
+  inert: WritableSignalLike<boolean>;
+}
+
+/** Represents the inputs for the PopupControl behavior. */
+export interface PopupControlInputs {
+  /** The element that serves as the popup. */
+  popup: SignalLike<Popup>;
+
+  /* Refers to the element that serves as the popup. */
+  controls: SignalLike<string>;
+
+  /* Whether the popup is open or closed. */
+  expanded: WritableSignalLike<boolean>;
+
+  /* Corresponds to the popup type. */
+  hasPopup: SignalLike<ComboboxPopupTypes>;
+}
+
+/**
+ * A behavior that manages the open/close state of a component.
+ * It provides methods to open, close, and toggle the state,
+ * which is controlled via a writable signal.
+ */
+export class PopupControl {
+  /** The inputs for the popup behavior, containing the `expanded` state signal. */
+  constructor(readonly inputs: PopupControlInputs) {}
+
+  /** Opens the popup by setting the expanded state to true. */
+  open(): void {
+    this.inputs.expanded.set(true);
+    this.inputs.popup().inert.set(false);
+  }
+
+  /** Closes the popup by setting the expanded state to false. */
+  close(): void {
+    this.inputs.expanded.set(false);
+    this.inputs.popup().inert.set(true);
+  }
+
+  /** Toggles the popup's expanded state. */
+  toggle(): void {
+    const expanded = !this.inputs.expanded();
+    this.inputs.expanded.set(expanded);
+    this.inputs.popup().inert.set(!expanded);
+  }
+}