From 0befa7daee56945c9f3d1cff503bb9468f48d56a Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 16 Apr 2025 05:45:34 -0600 Subject: [PATCH] fix(cdk-experimental/ui-patterns): fix lint and build config --- src/cdk-experimental/config.bzl | 2 + .../deferred-content/deferred-content.ts | 1 - src/cdk-experimental/tabs/tabs.ts | 12 +-- .../ui-patterns/public-api.ts | 4 +- .../ui-patterns/tabs/BUILD.bazel | 4 +- src/cdk-experimental/ui-patterns/tabs/tab.ts | 60 ------------ .../ui-patterns/tabs/tabpanel.ts | 39 -------- .../ui-patterns/tabs/{tablist.ts => tabs.ts} | 91 ++++++++++++++++++- .../tabs/cdk-tabs/cdk-tabs-example.css | 2 +- 9 files changed, 96 insertions(+), 119 deletions(-) delete mode 100644 src/cdk-experimental/ui-patterns/tabs/tab.ts delete mode 100644 src/cdk-experimental/ui-patterns/tabs/tabpanel.ts rename src/cdk-experimental/ui-patterns/tabs/{tablist.ts => tabs.ts} (69%) diff --git a/src/cdk-experimental/config.bzl b/src/cdk-experimental/config.bzl index 17509954fef2..89dd51af4665 100644 --- a/src/cdk-experimental/config.bzl +++ b/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", ] diff --git a/src/cdk-experimental/deferred-content/deferred-content.ts b/src/cdk-experimental/deferred-content/deferred-content.ts index d6782ee453d9..3261e84145eb 100644 --- a/src/cdk-experimental/deferred-content/deferred-content.ts +++ b/src/cdk-experimental/deferred-content/deferred-content.ts @@ -7,7 +7,6 @@ */ import { - computed, Directive, effect, inject, diff --git a/src/cdk-experimental/tabs/tabs.ts b/src/cdk-experimental/tabs/tabs.ts index 4d9a5be1ef32..f33f7e4fc156 100644 --- a/src/cdk-experimental/tabs/tabs.ts +++ b/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. diff --git a/src/cdk-experimental/ui-patterns/public-api.ts b/src/cdk-experimental/ui-patterns/public-api.ts index 3313e1dceb41..9b11949ed77c 100644 --- a/src/cdk-experimental/ui-patterns/public-api.ts +++ b/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'; diff --git a/src/cdk-experimental/ui-patterns/tabs/BUILD.bazel b/src/cdk-experimental/ui-patterns/tabs/BUILD.bazel index 06140478465c..c20038751c5c 100644 --- a/src/cdk-experimental/ui-patterns/tabs/BUILD.bazel +++ b/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", diff --git a/src/cdk-experimental/ui-patterns/tabs/tab.ts b/src/cdk-experimental/ui-patterns/tabs/tab.ts deleted file mode 100644 index bf0306ec3f65..000000000000 --- a/src/cdk-experimental/ui-patterns/tabs/tab.ts +++ /dev/null @@ -1,60 +0,0 @@ -/** - * @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 {computed} from '@angular/core'; -import {SignalLike} from '../behaviors/signal-like/signal-like'; -import {ListSelectionItem} from '../behaviors/list-selection/list-selection'; -import {ListNavigationItem} from '../behaviors/list-navigation/list-navigation'; -import {ListFocusItem} from '../behaviors/list-focus/list-focus'; -import {TabPanelPattern} from './tabpanel'; -import {TabListPattern} from './tablist'; - -/** The required inputs to tabs. */ -export interface TabInputs extends ListNavigationItem, ListSelectionItem, ListFocusItem { - tablist: SignalLike; - tabpanel: SignalLike; -} - -/** A tab in a tablist. */ -export class TabPattern { - /** A global unique identifier for the tab. */ - id: SignalLike; - - /** A local unique identifier for the tab. */ - value: SignalLike; - - /** 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; - - /** A reference to the parent tablist. */ - tablist: SignalLike; - - /** A reference to the corresponding tabpanel. */ - tabpanel: SignalLike; - - /** The tabindex of the tab. */ - tabindex = computed(() => this.tablist().focusManager.getItemTabindex(this)); - - /** The html element that should receive focus. */ - element: SignalLike; - - 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; - } -} diff --git a/src/cdk-experimental/ui-patterns/tabs/tabpanel.ts b/src/cdk-experimental/ui-patterns/tabs/tabpanel.ts deleted file mode 100644 index 5c56e41a7251..000000000000 --- a/src/cdk-experimental/ui-patterns/tabs/tabpanel.ts +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @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 {computed} from '@angular/core'; -import {SignalLike} from '../behaviors/signal-like/signal-like'; -import {TabPattern} from './tab'; - -/** The required inputs for the tabpanel. */ -export interface TabPanelInputs { - id: SignalLike; - tab: SignalLike; - value: SignalLike; -} - -/** A tabpanel associated with a tab. */ -export class TabPanelPattern { - /** A global unique identifier for the tabpanel. */ - id: SignalLike; - - /** A local unique identifier for the tabpanel. */ - value: SignalLike; - - /** A reference to the corresponding tab. */ - tab: SignalLike; - - /** 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; - } -} diff --git a/src/cdk-experimental/ui-patterns/tabs/tablist.ts b/src/cdk-experimental/ui-patterns/tabs/tabs.ts similarity index 69% rename from src/cdk-experimental/ui-patterns/tabs/tablist.ts rename to src/cdk-experimental/ui-patterns/tabs/tabs.ts index 50d7b436b386..ebeed3850c43 100644 --- a/src/cdk-experimental/ui-patterns/tabs/tablist.ts +++ b/src/cdk-experimental/ui-patterns/tabs/tabs.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, ListFocusItem { + tablist: SignalLike; + tabpanel: SignalLike; +} + +/** A tab in a tablist. */ +export class TabPattern { + /** A global unique identifier for the tab. */ + id: SignalLike; + + /** A local unique identifier for the tab. */ + value: SignalLike; + + /** 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; + + /** A reference to the parent tablist. */ + tablist: SignalLike; + + /** A reference to the corresponding tabpanel. */ + tabpanel: SignalLike; + + /** The tabindex of the tab. */ + tabindex = computed(() => this.tablist().focusManager.getItemTabindex(this)); + + /** The html element that should receive focus. */ + element: SignalLike; + + 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; @@ -30,6 +83,34 @@ export type TabListInputs = ListNavigationInputs & disabled: SignalLike; }; +/** The required inputs for the tabpanel. */ +export interface TabPanelInputs { + id: SignalLike; + tab: SignalLike; + value: SignalLike; +} + +/** A tabpanel associated with a tab. */ +export class TabPanelPattern { + /** A global unique identifier for the tabpanel. */ + id: SignalLike; + + /** A local unique identifier for the tabpanel. */ + value: SignalLike; + + /** A reference to the corresponding tab. */ + tab: SignalLike; + + /** 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 { /** Controls navigation for the tablist. */ diff --git a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css b/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css index 7e37be2750fe..a715cf0a1a66 100644 --- a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css +++ b/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css @@ -73,4 +73,4 @@ .example-tabpanel[inert] { display: none; -} \ No newline at end of file +}