@angular/cdk-experimental 20.0.0-next.6 → 20.0.0-next.8

package/listbox.d-DJqDR_H3.d.ts

@@ -0,0 +1,180 @@
+import * as i0 from '@angular/core';
+import { ListFocusItem, SignalLike, ListFocusInputs, ListFocus, ListSelection, ListNavigation, ListNavigationItem, ListSelectionItem, ListNavigationInputs, ListSelectionInputs, KeyboardEventManager, PointerEventManager } from './list-navigation.d-cy63EByU.js';
+
+/**
+ * Represents an item in a collection, such as a listbox option, than can be navigated to by
+ * typeahead.
+ */
+interface ListTypeaheadItem extends ListFocusItem {
+    /** The text used by the typeahead search. */
+    searchTerm: SignalLike<string>;
+}
+/**
+ * Represents the required inputs for a collection that contains items that can be navigated to by
+ * typeahead.
+ */
+interface ListTypeaheadInputs<T extends ListTypeaheadItem> extends ListFocusInputs<T> {
+    /** The amount of time before the typeahead search is reset. */
+    typeaheadDelay: SignalLike<number>;
+}
+/** Controls typeahead for a list of items. */
+declare class ListTypeahead<T extends ListTypeaheadItem> {
+    readonly inputs: ListTypeaheadInputs<T> & {
+        focusManager: ListFocus<T>;
+    };
+    /** A reference to the timeout for resetting the typeahead search. */
+    timeout?: ReturnType<typeof setTimeout> | undefined;
+    /** The focus controller of the parent list. */
+    focusManager: ListFocus<T>;
+    /** Whether the user is actively typing a typeahead search query. */
+    isTyping: i0.Signal<boolean>;
+    /** Keeps track of the characters that typeahead search is being called with. */
+    private _query;
+    /** The index where that the typeahead search was initiated from. */
+    private _startIndex;
+    constructor(inputs: ListTypeaheadInputs<T> & {
+        focusManager: ListFocus<T>;
+    });
+    /** Performs a typeahead search, appending the given character to the search string. */
+    search(char: string): boolean;
+    /**
+     * Returns the first item whose search term matches the
+     * current query starting from the the current anchor index.
+     */
+    private _getItem;
+}
+
+/**
+ * Represents the properties exposed by a listbox that need to be accessed by an option.
+ * This exists to avoid circular dependency errors between the listbox and option.
+ */
+interface ListboxPattern$1<V> {
+    focusManager: ListFocus<OptionPattern<V>>;
+    selection: ListSelection<OptionPattern<V>, V>;
+    navigation: ListNavigation<OptionPattern<V>>;
+}
+/** Represents the required inputs for an option in a listbox. */
+interface OptionInputs<V> extends ListNavigationItem, ListSelectionItem<V>, ListTypeaheadItem, ListFocusItem {
+    listbox: SignalLike<ListboxPattern$1<V> | undefined>;
+}
+/** Represents an option in a listbox. */
+declare class OptionPattern<V> {
+    /** A unique identifier for the option. */
+    id: SignalLike<string>;
+    /** The value of the option. */
+    value: SignalLike<V>;
+    /** The position of the option in the list. */
+    index: i0.Signal<number>;
+    /** Whether the option is selected. */
+    selected: i0.Signal<boolean | undefined>;
+    /** Whether the option is disabled. */
+    disabled: SignalLike<boolean>;
+    /** The text used by the typeahead search. */
+    searchTerm: SignalLike<string>;
+    /** A reference to the parent listbox. */
+    listbox: SignalLike<ListboxPattern$1<V> | undefined>;
+    /** The tabindex of the option. */
+    tabindex: i0.Signal<0 | -1 | undefined>;
+    /** The html element that should receive focus. */
+    element: SignalLike<HTMLElement>;
+    constructor(args: OptionInputs<V>);
+}
+
+/** The selection operations that the listbox can perform. */
+interface SelectOptions {
+    toggle?: boolean;
+    selectOne?: boolean;
+    selectRange?: boolean;
+    anchor?: boolean;
+}
+/** Represents the required inputs for a listbox. */
+type ListboxInputs<V> = ListNavigationInputs<OptionPattern<V>> & ListSelectionInputs<OptionPattern<V>, V> & ListTypeaheadInputs<OptionPattern<V>> & ListFocusInputs<OptionPattern<V>> & {
+    readonly: SignalLike<boolean>;
+};
+/** Controls the state of a listbox. */
+declare class ListboxPattern<V> {
+    readonly inputs: ListboxInputs<V>;
+    /** Controls navigation for the listbox. */
+    navigation: ListNavigation<OptionPattern<V>>;
+    /** Controls selection for the listbox. */
+    selection: ListSelection<OptionPattern<V>, V>;
+    /** Controls typeahead for the listbox. */
+    typeahead: ListTypeahead<OptionPattern<V>>;
+    /** Controls focus for the listbox. */
+    focusManager: ListFocus<OptionPattern<V>>;
+    /** Whether the list is vertically or horizontally oriented. */
+    orientation: SignalLike<'vertical' | 'horizontal'>;
+    /** Whether the listbox is disabled. */
+    disabled: i0.Signal<boolean>;
+    /** Whether the listbox is readonly. */
+    readonly: SignalLike<boolean>;
+    /** The tabindex of the listbox. */
+    tabindex: i0.Signal<0 | -1>;
+    /** The id of the current active item. */
+    activedescendant: i0.Signal<string | undefined>;
+    /** Whether multiple items in the list can be selected at once. */
+    multi: SignalLike<boolean>;
+    /** The number of items in the listbox. */
+    setsize: i0.Signal<number>;
+    /** Whether the listbox selection follows focus. */
+    followFocus: i0.Signal<boolean>;
+    /** Whether the listbox should wrap. Used to disable wrapping while range selecting. */
+    wrap: i0.WritableSignal<boolean>;
+    /** The key used to navigate to the previous item in the list. */
+    prevKey: i0.Signal<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
+    /** The key used to navigate to the next item in the list. */
+    nextKey: i0.Signal<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
+    /** Represents the space key. Does nothing when the user is actively using typeahead. */
+    dynamicSpaceKey: i0.Signal<"" | " ">;
+    /** The regexp used to decide if a key should trigger typeahead. */
+    typeaheadRegexp: RegExp;
+    /**
+     * The uncommitted index for selecting a range of options.
+     *
+     * NOTE: This is subtly distinct from the "rangeStartIndex" in the ListSelection behavior.
+     * The anchorIndex does not necessarily represent the start of a range, but represents the most
+     * recent index where the user showed intent to begin a range selection. Usually, this is wherever
+     * the user most recently pressed the "Shift" key, but if the user presses shift + space to select
+     * from the anchor, the user is not intending to start a new range from this index.
+     *
+     * In other words, "rangeStartIndex" is only set when a user commits to starting a range selection
+     * while "anchorIndex" is set whenever a user indicates they may be starting a range selection.
+     */
+    anchorIndex: i0.WritableSignal<number>;
+    /** The keydown event manager for the listbox. */
+    keydown: i0.Signal<KeyboardEventManager<KeyboardEvent>>;
+    /** The pointerdown event manager for the listbox. */
+    pointerdown: i0.Signal<PointerEventManager<PointerEvent>>;
+    constructor(inputs: ListboxInputs<V>);
+    /** Handles keydown events for the listbox. */
+    onKeydown(event: KeyboardEvent): void;
+    onPointerdown(event: PointerEvent): void;
+    /** Navigates to the first option in the listbox. */
+    first(opts?: SelectOptions): void;
+    /** Navigates to the last option in the listbox. */
+    last(opts?: SelectOptions): void;
+    /** Navigates to the next option in the listbox. */
+    next(opts?: SelectOptions): void;
+    /** Navigates to the previous option in the listbox. */
+    prev(opts?: SelectOptions): void;
+    /** Navigates to the given item in the listbox. */
+    goto(event: PointerEvent, opts?: SelectOptions): void;
+    /** Handles typeahead search navigation for the listbox. */
+    search(char: string, opts?: SelectOptions): void;
+    /**
+     * Safely performs a navigation operation.
+     *
+     * Handles conditionally disabling wrapping for when a navigation
+     * operation is occurring while the user is selecting a range of options.
+     *
+     * Handles boilerplate calling of focus & selection operations. Also ensures these
+     * additional operations are only called if the navigation operation moved focus to a new option.
+     */
+    private _navigate;
+    /** Handles updating selection for the listbox. */
+    private _updateSelection;
+    private _getItem;
+}
+
+export { ListboxPattern, OptionPattern };
+export type { ListboxInputs, OptionInputs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cdk-experimental",
-  "version": "20.0.0-next.6",
+  "version": "20.0.0-next.8",
   "description": "Experimental components for Angular CDK",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   },
   "homepage": "https://github.com/angular/components#readme",
   "peerDependencies": {
-    "@angular/cdk": "20.0.0-next.6",
+    "@angular/cdk": "20.0.0-next.8",
     "@angular/core": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0"
   },
   "devDependencies": {
@@ -52,6 +52,10 @@
       "types": "./combobox/index.d.ts",
       "default": "./fesm2022/combobox.mjs"
     },
+    "./deferred-content": {
+      "types": "./deferred-content/index.d.ts",
+      "default": "./fesm2022/deferred-content.mjs"
+    },
     "./listbox": {
       "types": "./listbox/index.d.ts",
       "default": "./fesm2022/listbox.mjs"
@@ -72,6 +76,10 @@
       "types": "./table-scroll-container/index.d.ts",
       "default": "./fesm2022/table-scroll-container.mjs"
     },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "default": "./fesm2022/tabs.mjs"
+    },
     "./ui-patterns": {
       "types": "./ui-patterns/index.d.ts",
       "default": "./fesm2022/ui-patterns.mjs"

package/tabs/index.d.ts

@@ -0,0 +1,128 @@
+import * as _angular_cdk_bidi from '@angular/cdk/bidi';
+import * as i0 from '@angular/core';
+import { TabPattern, TabPanelPattern, TabListPattern } from '../tabs.d-CWu2orP4.js';
+import * as i1 from '@angular/cdk-experimental/deferred-content';
+import '../list-navigation.d-cy63EByU.js';
+
+/**
+ * A Tabs container.
+ *
+ * Represents a set of layered sections of content. The CdkTabs is a container meant to be used with
+ * CdkTabList, CdkTab, and CdkTabPanel as follows:
+ *
+ * ```html
+ * <div cdkTabs>
+ *   <ul cdkTabList>
+ *     <li cdkTab>Tab 1</li>
+ *     <li cdkTab>Tab 2</li>
+ *     <li cdkTab>Tab 3</li>
+ *   </ul>
+ *
+ *   <div cdkTabPanel>Tab content 1</div>
+ *   <div cdkTabPanel>Tab content 2</div>
+ *   <div cdkTabPanel>Tab content 3</div>
+ * </div>
+ * ```
+ */
+declare class CdkTabs {
+    /** The CdkTabList nested inside of the container. */
+    private readonly _cdkTabList;
+    /** The CdkTabPanels nested inside of the container. */
+    private readonly _cdkTabPanels;
+    /** The Tab UIPattern of the child Tabs. */
+    tabs: i0.Signal<TabPattern[] | undefined>;
+    /** The TabPanel UIPattern of the child TabPanels. */
+    tabpanels: i0.Signal<TabPanelPattern[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTabs, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTabs, "[cdkTabs]", ["cdkTabs"], {}, {}, ["_cdkTabList", "_cdkTabPanels"], never, true, never>;
+}
+/**
+ * A TabList container.
+ *
+ * Controls a list of CdkTab(s).
+ */
+declare class CdkTabList {
+    /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
+    private readonly _directionality;
+    /** The CdkTabs nested inside of the CdkTabList. */
+    private readonly _cdkTabs;
+    /** A signal wrapper for directionality. */
+    protected textDirection: i0.Signal<_angular_cdk_bidi.Direction>;
+    /** The Tab UIPatterns of the child Tabs. */
+    tabs: i0.Signal<TabPattern[]>;
+    /** Whether the tablist is vertically or horizontally oriented. */
+    orientation: i0.InputSignal<"vertical" | "horizontal">;
+    /** Whether focus should wrap when navigating. */
+    wrap: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Whether disabled items in the list should be skipped when navigating. */
+    skipDisabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /** The focus strategy used by the tablist. */
+    focusMode: i0.InputSignal<"roving" | "activedescendant">;
+    /** The selection strategy used by the tablist. */
+    selectionMode: i0.InputSignal<"follow" | "explicit">;
+    /** Whether the tablist is disabled. */
+    disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /** The current index that has been navigated to. */
+    activeIndex: i0.ModelSignal<number>;
+    /** The TabList UIPattern. */
+    pattern: TabListPattern;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTabList, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTabList, "[cdkTabList]", ["cdkTabList"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "skipDisabled": { "alias": "skipDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; }, ["_cdkTabs"], never, true, never>;
+}
+/** A selectable tab in a TabList. */
+declare class CdkTab {
+    /** A reference to the tab element. */
+    private readonly _elementRef;
+    /** The parent CdkTabs. */
+    private readonly _cdkTabs;
+    /** The parent CdkTabList. */
+    private readonly _cdkTabList;
+    /** A global unique identifier for the tab. */
+    private readonly _id;
+    /** The parent TabList UIPattern. */
+    protected tablist: i0.Signal<TabListPattern>;
+    /** The TabPanel UIPattern associated with the tab */
+    protected tabpanel: i0.Signal<TabPanelPattern | undefined>;
+    /** Whether a tab is disabled. */
+    disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /** A local unique identifier for the tab. */
+    value: i0.InputSignal<string>;
+    /** The Tab UIPattern. */
+    pattern: TabPattern;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTab, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTab, "[cdkTab]", ["cdkTab"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * A TabPanel container for the resources of layered content associated with a tab.
+ *
+ * If a tabpanel is hidden due to its corresponding tab is not activated, the `inert` attribute
+ * will be applied to the tabpanel element to remove it from the accessibility tree and stop
+ * all the keyboard and pointer interactions. Note that this does not visually hide the tabpenl
+ * and a proper styling is required.
+ */
+declare class CdkTabPanel {
+    /** The DeferredContentAware host directive. */
+    private readonly _deferredContentAware;
+    /** The parent CdkTabs. */
+    private readonly _cdkTabs;
+    /** A global unique identifier for the tab. */
+    private readonly _id;
+    /** The Tab UIPattern associated with the tabpanel */
+    protected tab: i0.Signal<TabPattern | undefined>;
+    /** A local unique identifier for the tabpanel. */
+    value: i0.InputSignal<string>;
+    /** The TabPanel UIPattern. */
+    pattern: TabPanelPattern;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTabPanel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTabPanel, "[cdkTabPanel]", ["cdkTabPanel"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
+}
+/**
+ * A TabContent container for the lazy-loaded content.
+ */
+declare class CdkTabContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTabContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTabContent, "ng-template[cdkTabContent]", ["cdTabContent"], {}, {}, never, never, true, [{ directive: typeof i1.DeferredContent; inputs: {}; outputs: {}; }]>;
+}
+
+export { CdkTab, CdkTabContent, CdkTabList, CdkTabPanel, CdkTabs };

package/tabs.d-CWu2orP4.d.ts

@@ -0,0 +1,107 @@
+import * as i0 from '@angular/core';
+import { SignalLike, ListNavigationInputs, ListSelectionInputs, ListFocusInputs, ListNavigation, ListSelection, ListFocus, KeyboardEventManager, PointerEventManager, ListNavigationItem, ListSelectionItem, ListFocusItem } from './list-navigation.d-cy63EByU.js';
+
+/** The required inputs to tabs. */
+interface TabInputs extends ListNavigationItem, ListSelectionItem<string>, ListFocusItem {
+    tablist: SignalLike<TabListPattern>;
+    tabpanel: SignalLike<TabPanelPattern | undefined>;
+}
+/** A tab in a tablist. */
+declare 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: i0.Signal<boolean>;
+    /** A Tabpanel Id controlled by the tab. */
+    controls: i0.Signal<string | undefined>;
+    /** 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: i0.Signal<0 | -1>;
+    /** The html element that should receive focus. */
+    element: SignalLike<HTMLElement>;
+    constructor(inputs: TabInputs);
+}
+/** The selection operations that the tablist can perform. */
+interface SelectOptions {
+    select?: boolean;
+    toggle?: boolean;
+    toggleOne?: boolean;
+    selectOne?: boolean;
+}
+/** The required inputs for the tablist. */
+type TabListInputs = ListNavigationInputs<TabPattern> & Omit<ListSelectionInputs<TabPattern, string>, 'multi'> & ListFocusInputs<TabPattern> & {
+    disabled: SignalLike<boolean>;
+};
+/** The required inputs for the tabpanel. */
+interface TabPanelInputs {
+    id: SignalLike<string>;
+    tab: SignalLike<TabPattern | undefined>;
+    value: SignalLike<string>;
+}
+/** A tabpanel associated with a tab. */
+declare 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: i0.Signal<boolean>;
+    constructor(inputs: TabPanelInputs);
+}
+/** Controls the state of a tablist. */
+declare class TabListPattern {
+    readonly inputs: TabListInputs;
+    /** Controls navigation for the tablist. */
+    navigation: ListNavigation<TabPattern>;
+    /** Controls selection for the tablist. */
+    selection: ListSelection<TabPattern, string>;
+    /** Controls focus for the tablist. */
+    focusManager: ListFocus<TabPattern>;
+    /** Whether the tablist is vertically or horizontally oriented. */
+    orientation: SignalLike<'vertical' | 'horizontal'>;
+    /** Whether the tablist is disabled. */
+    disabled: SignalLike<boolean>;
+    /** The tabindex of the tablist. */
+    tabindex: i0.Signal<0 | -1>;
+    /** The id of the current active tab. */
+    activedescendant: i0.Signal<string | undefined>;
+    followFocus: i0.Signal<boolean>;
+    /** The key used to navigate to the previous tab in the tablist. */
+    prevKey: i0.Signal<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
+    /** The key used to navigate to the next item in the list. */
+    nextKey: i0.Signal<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
+    /** The keydown event manager for the tablist. */
+    keydown: i0.Signal<KeyboardEventManager<KeyboardEvent>>;
+    /** The pointerdown event manager for the tablist. */
+    pointerdown: i0.Signal<PointerEventManager<PointerEvent>>;
+    constructor(inputs: TabListInputs);
+    /** Handles keydown events for the tablist. */
+    onKeydown(event: KeyboardEvent): void;
+    /** The pointerdown event manager for the tablist. */
+    onPointerdown(event: PointerEvent): void;
+    /** Navigates to the first option in the tablist. */
+    first(opts?: SelectOptions): void;
+    /** Navigates to the last option in the tablist. */
+    last(opts?: SelectOptions): void;
+    /** Navigates to the next option in the tablist. */
+    next(opts?: SelectOptions): void;
+    /** Navigates to the previous option in the tablist. */
+    prev(opts?: SelectOptions): void;
+    /** Navigates to the given item in the tablist. */
+    goto(event: PointerEvent, opts?: SelectOptions): void;
+    /** Handles updating selection for the tablist. */
+    private _updateSelection;
+    private _getItem;
+}
+
+export { TabListPattern, TabPanelPattern, TabPattern };
+export type { TabInputs, TabListInputs, TabPanelInputs };

package/ui-patterns/index.d.ts

@@ -1,2 +1,4 @@
-export { a as ListboxInputs, L as ListboxPattern, b as OptionInputs, O as OptionPattern, S as SignalLike, W as WritableSignalLike, c as convertGetterSetterToWritableSignalLike } from '../listbox.d-7a7652e3.js';
+export { ListboxInputs, ListboxPattern, OptionInputs, OptionPattern } from '../listbox.d-DJqDR_H3.js';
+export { SignalLike, WritableSignalLike, convertGetterSetterToWritableSignalLike } from '../list-navigation.d-cy63EByU.js';
+export { TabInputs, TabListInputs, TabListPattern, TabPanelInputs, TabPanelPattern, TabPattern } from '../tabs.d-CWu2orP4.js';
 import '@angular/core';