fix(cdk-experimental/ui-patterns): fix lint and build config

Author: andrewseguin

src/cdk-experimental/config.bzl

@@ -2,10 +2,12 @@
 CDK_EXPERIMENTAL_ENTRYPOINTS = [
     "column-resize",
     "combobox",
+    "deferred-content",
     "listbox",
     "popover-edit",
     "scrolling",
     "selection",
+    "tabs",
     "table-scroll-container",
     "ui-patterns",
 ]

src/cdk-experimental/deferred-content/deferred-content.ts

@@ -7,7 +7,6 @@
  */
 
 import {
-  computed,
   Directive,
   effect,
   inject,

src/cdk-experimental/tabs/tabs.ts

@@ -6,6 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/deferred-content';
+import {_IdGenerator} from '@angular/cdk/a11y';
+import {Directionality} from '@angular/cdk/bidi';
 import {
   booleanAttribute,
   computed,
@@ -16,16 +19,11 @@ import {
   ElementRef,
   inject,
   input,
-  signal,
   model,
+  signal,
 } from '@angular/core';
-import {Directionality} from '@angular/cdk/bidi';
-import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/deferred-content';
-import {TabPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tab';
-import {TabListPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tablist';
-import {TabPanelPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tabpanel';
 import {toSignal} from '@angular/core/rxjs-interop';
-import {_IdGenerator} from '@angular/cdk/a11y';
+import {TabListPattern, TabPanelPattern, TabPattern} from '../ui-patterns';
 
 /**
  * A Tabs container.

src/cdk-experimental/ui-patterns/public-api.ts

@@ -9,6 +9,4 @@
 export * from './listbox/listbox';
 export * from './listbox/option';
 export * from './behaviors/signal-like/signal-like';
-export * from './tabs/tab';
-export * from './tabs/tablist';
-export * from './tabs/tabpanel';
+export * from './tabs/tabs';

src/cdk-experimental/ui-patterns/tabs/BUILD.bazel

@@ -5,9 +5,7 @@ package(default_visibility = ["//visibility:public"])
 ts_project(
     name = "tabs",
     srcs = [
-        "tab.ts",
-        "tablist.ts",
-        "tabpanel.ts",
+        "tabs.ts",
     ],
     deps = [
         "//:node_modules/@angular/core",

src/cdk-experimental/ui-patterns/tabs/tab.ts

@@ -6,15 +6,68 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {computed, signal} from '@angular/core';
+
 import {KeyboardEventManager} from '../behaviors/event-manager/keyboard-event-manager';
 import {PointerEventManager} from '../behaviors/event-manager/pointer-event-manager';
-import {TabPattern} from './tab';
-import {ListSelection, ListSelectionInputs} from '../behaviors/list-selection/list-selection';
-import {ListNavigation, ListNavigationInputs} from '../behaviors/list-navigation/list-navigation';
-import {ListFocus, ListFocusInputs} from '../behaviors/list-focus/list-focus';
-import {computed, signal} from '@angular/core';
+import {ListFocus, ListFocusInputs, ListFocusItem} from '../behaviors/list-focus/list-focus';
+import {
+  ListNavigation,
+  ListNavigationInputs,
+  ListNavigationItem,
+} from '../behaviors/list-navigation/list-navigation';
+import {
+  ListSelection,
+  ListSelectionInputs,
+  ListSelectionItem,
+} from '../behaviors/list-selection/list-selection';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 
+/** The required inputs to tabs. */
+export interface TabInputs extends ListNavigationItem, ListSelectionItem<string>, ListFocusItem {
+  tablist: SignalLike<TabListPattern>;
+  tabpanel: SignalLike<TabPanelPattern | undefined>;
+}
+
+/** A tab in a tablist. */
+export class TabPattern {
+  /** A global unique identifier for the tab. */
+  id: SignalLike<string>;
+
+  /** A local unique identifier for the tab. */
+  value: SignalLike<string>;
+
+  /** Whether the tab is selected. */
+  selected = computed(() => this.tablist().selection.inputs.value().includes(this.value()));
+
+  /** A Tabpanel Id controlled by the tab. */
+  controls = computed(() => this.tabpanel()?.id());
+
+  /** Whether the tab is disabled. */
+  disabled: SignalLike<boolean>;
+
+  /** A reference to the parent tablist. */
+  tablist: SignalLike<TabListPattern>;
+
+  /** A reference to the corresponding tabpanel. */
+  tabpanel: SignalLike<TabPanelPattern | undefined>;
+
+  /** The tabindex of the tab. */
+  tabindex = computed(() => this.tablist().focusManager.getItemTabindex(this));
+
+  /** The html element that should receive focus. */
+  element: SignalLike<HTMLElement>;
+
+  constructor(inputs: TabInputs) {
+    this.id = inputs.id;
+    this.value = inputs.value;
+    this.tablist = inputs.tablist;
+    this.tabpanel = inputs.tabpanel;
+    this.element = inputs.element;
+    this.disabled = inputs.disabled;
+  }
+}
+
 /** The selection operations that the tablist can perform. */
 interface SelectOptions {
   select?: boolean;
@@ -25,10 +78,38 @@ interface SelectOptions {
 
 /** The required inputs for the tablist. */
 export type TabListInputs = ListNavigationInputs<TabPattern> &
-  Omit<ListSelectionInputs<TabPattern, string>, 'multi'> &
-  ListFocusInputs<TabPattern> & {
-    disabled: SignalLike<boolean>;
-  };
+    Omit<ListSelectionInputs<TabPattern, string>, 'multi'> &
+    ListFocusInputs<TabPattern> & {
+  disabled: SignalLike<boolean>;
+};
+
+/** The required inputs for the tabpanel. */
+export interface TabPanelInputs {
+  id: SignalLike<string>;
+  tab: SignalLike<TabPattern | undefined>;
+  value: SignalLike<string>;
+}
+
+/** A tabpanel associated with a tab. */
+export class TabPanelPattern {
+  /** A global unique identifier for the tabpanel. */
+  id: SignalLike<string>;
+
+  /** A local unique identifier for the tabpanel. */
+  value: SignalLike<string>;
+
+  /** A reference to the corresponding tab. */
+  tab: SignalLike<TabPattern | undefined>;
+
+  /** Whether the tabpanel is hidden. */
+  hidden = computed(() => !this.tab()?.selected());
+
+  constructor(inputs: TabPanelInputs) {
+    this.id = inputs.id;
+    this.value = inputs.value;
+    this.tab = inputs.tab;
+  }
+}
 
 /** Controls the state of a tablist. */
 export class TabListPattern {
@@ -77,18 +158,18 @@ export class TabListPattern {
 
     if (this.followFocus()) {
       manager
-        .on(this.prevKey, () => this.prev({selectOne: true}))
-        .on(this.nextKey, () => this.next({selectOne: true}))
-        .on('Home', () => this.first({selectOne: true}))
-        .on('End', () => this.last({selectOne: true}));
+          .on(this.prevKey, () => this.prev({selectOne: true}))
+          .on(this.nextKey, () => this.next({selectOne: true}))
+          .on('Home', () => this.first({selectOne: true}))
+          .on('End', () => this.last({selectOne: true}));
     } else {
       manager
-        .on(this.prevKey, () => this.prev())
-        .on(this.nextKey, () => this.next())
-        .on('Home', () => this.first())
-        .on('End', () => this.last())
-        .on(' ', () => this._updateSelection({selectOne: true}))
-        .on('Enter', () => this._updateSelection({selectOne: true}));
+          .on(this.prevKey, () => this.prev())
+          .on(this.nextKey, () => this.next())
+          .on('Home', () => this.first())
+          .on('End', () => this.last())
+          .on(' ', () => this._updateSelection({selectOne: true}))
+          .on('Enter', () => this._updateSelection({selectOne: true}));
     }
 
     return manager;

src/cdk-experimental/ui-patterns/tabs/tabpanel.ts

@@ -73,4 +73,4 @@
 
 .example-tabpanel[inert] {
   display: none;
-}
+}