@angular/cdk-experimental 20.2.0-next.2 → 20.2.0-rc.0

package/fesm2022/{tabs-hMdwtXv2.mjs → tabs2.mjs}

@@ -1,7 +1,7 @@
 import { computed } from '@angular/core';
-import { K as KeyboardEventManager, P as PointerEventManager, L as ListFocus, a as ListNavigation } from './list-focus-Czul8jzR.mjs';
-import { L as ListSelection } from './list-selection-C41ApAbt.mjs';
-import { E as ExpansionControl, L as ListExpansion } from './expansion-C9iQLHOG.mjs';
+import { ExpansionControl, ListExpansion } from './expansion.mjs';
+import { List } from './list.mjs';
+import { KeyboardEventManager, PointerEventManager } from './list-navigation.mjs';
 
 /** Controls label and description of an element. */
 class LabelControl {
@@ -35,12 +35,16 @@ class TabPattern {
     expansion;
     /** A global unique identifier for the tab. */
     id;
+    /** The index of the tab. */
+    index = computed(() => this.inputs.tablist().inputs.items().indexOf(this));
     /** A local unique identifier for the tab. */
     value;
     /** Whether the tab is disabled. */
     disabled;
     /** The html element that should receive focus. */
     element;
+    /** The text used by the typeahead search. */
+    searchTerm = () => ''; // Unused because tabs do not support typeahead.
     /** Whether this tab has expandable content. */
     expandable = computed(() => this.expansion.expandable());
     /** The unique identifier used by the expansion behavior. */
@@ -48,11 +52,11 @@ class TabPattern {
     /** Whether the tab is expanded. */
     expanded = computed(() => this.expansion.isExpanded());
     /** Whether the tab is active. */
-    active = computed(() => this.inputs.tablist().focusManager.activeItem() === this);
+    active = computed(() => this.inputs.tablist().inputs.activeItem() === this);
     /** Whether the tab is selected. */
-    selected = computed(() => !!this.inputs.tablist().selection.inputs.value().includes(this.value()));
+    selected = computed(() => !!this.inputs.tablist().inputs.value().includes(this.value()));
     /** The tabindex of the tab. */
-    tabindex = computed(() => this.inputs.tablist().focusManager.getItemTabindex(this));
+    tabindex = computed(() => this.inputs.tablist().listBehavior.getItemTabindex(this));
     /** The id of the tabpanel associated with the tab. */
     controls = computed(() => this.inputs.tabpanel()?.id());
     constructor(inputs) {
@@ -99,12 +103,8 @@ class TabPanelPattern {
 /** Controls the state of a tablist. */
 class TabListPattern {
     inputs;
-    /** Controls navigation for the tablist. */
-    navigation;
-    /** Controls selection for the tablist. */
-    selection;
-    /** Controls focus for the tablist. */
-    focusManager;
+    /** The list behavior for the tablist. */
+    listBehavior;
     /** Controls expansion for the tablist. */
     expansionManager;
     /** Whether the tablist is vertically or horizontally oriented. */
@@ -112,9 +112,9 @@ class TabListPattern {
     /** Whether the tablist is disabled. */
     disabled;
     /** The tabindex of the tablist. */
-    tabindex = computed(() => this.focusManager.getListTabindex());
+    tabindex = computed(() => this.listBehavior.tabindex());
     /** The id of the current active tab. */
-    activedescendant = computed(() => this.focusManager.getActiveDescendant());
+    activedescendant = computed(() => this.listBehavior.activedescendant());
     /** Whether selection should follow focus. */
     followFocus = computed(() => this.inputs.selectionMode() === 'follow');
     /** The key used to navigate to the previous tab in the tablist. */
@@ -134,27 +134,25 @@ class TabListPattern {
     /** The keydown event manager for the tablist. */
     keydown = computed(() => {
         return new KeyboardEventManager()
-            .on(this.prevKey, () => this.prev({ select: this.followFocus() }))
-            .on(this.nextKey, () => this.next({ select: this.followFocus() }))
-            .on('Home', () => this.first({ select: this.followFocus() }))
-            .on('End', () => this.last({ select: this.followFocus() }))
-            .on(' ', () => this._select({ select: true }))
-            .on('Enter', () => this._select({ select: true }));
+            .on(this.prevKey, () => this.listBehavior.prev({ select: this.followFocus() }))
+            .on(this.nextKey, () => this.listBehavior.next({ select: this.followFocus() }))
+            .on('Home', () => this.listBehavior.first({ select: this.followFocus() }))
+            .on('End', () => this.listBehavior.last({ select: this.followFocus() }))
+            .on(' ', () => this.listBehavior.select())
+            .on('Enter', () => this.listBehavior.select());
     });
     /** The pointerdown event manager for the tablist. */
     pointerdown = computed(() => {
-        return new PointerEventManager().on(e => this.goto(e, { select: true }));
+        return new PointerEventManager().on(e => this.listBehavior.goto(this._getItem(e), { select: true }));
     });
     constructor(inputs) {
         this.inputs = inputs;
         this.disabled = inputs.disabled;
         this.orientation = inputs.orientation;
-        this.focusManager = new ListFocus(inputs);
-        this.navigation = new ListNavigation({ ...inputs, focusManager: this.focusManager });
-        this.selection = new ListSelection({
+        this.listBehavior = new List({
             ...inputs,
             multi: () => false,
-            focusManager: this.focusManager,
+            typeaheadDelay: () => 0, // Tabs do not support typeahead.
         });
         this.expansionManager = new ListExpansion({
             ...inputs,
@@ -171,20 +169,20 @@ class TabListPattern {
      * This method should be called once the tablist and its tabs are properly initialized.
      */
     setDefaultState() {
-        let firstItemIndex;
-        for (const [index, item] of this.inputs.items().entries()) {
-            if (!this.focusManager.isFocusable(item))
+        let firstItem;
+        for (const item of this.inputs.items()) {
+            if (!this.listBehavior.isFocusable(item))
                 continue;
-            if (firstItemIndex === undefined) {
-                firstItemIndex = index;
+            if (firstItem === undefined) {
+                firstItem = item;
             }
             if (item.selected()) {
-                this.inputs.activeIndex.set(index);
+                this.inputs.activeItem.set(item);
                 return;
             }
         }
-        if (firstItemIndex !== undefined) {
-            this.inputs.activeIndex.set(firstItemIndex);
+        if (firstItem !== undefined) {
+            this.inputs.activeItem.set(firstItem);
         }
     }
     /** Handles keydown events for the tablist. */
@@ -199,41 +197,7 @@ class TabListPattern {
             this.pointerdown().handle(event);
         }
     }
-    /** Navigates to the first option in the tablist. */
-    first(opts) {
-        this.navigation.first();
-        this._select(opts);
-    }
-    /** Navigates to the last option in the tablist. */
-    last(opts) {
-        this.navigation.last();
-        this._select(opts);
-    }
-    /** Navigates to the next option in the tablist. */
-    next(opts) {
-        this.navigation.next();
-        this._select(opts);
-    }
-    /** Navigates to the previous option in the tablist. */
-    prev(opts) {
-        this.navigation.prev();
-        this._select(opts);
-    }
-    /** Navigates to the given item in the tablist. */
-    goto(event, opts) {
-        const item = this._getItem(event);
-        if (item) {
-            this.navigation.goto(item);
-            this._select(opts);
-        }
-    }
-    /** Handles updating selection for the tablist. */
-    _select(opts) {
-        if (opts?.select) {
-            this.selection.selectOne();
-            this.expansionManager.open(this.focusManager.activeItem());
-        }
-    }
+    /** Returns the tab item associated with the given pointer event. */
     _getItem(e) {
         if (!(e.target instanceof HTMLElement)) {
             return;
@@ -243,5 +207,5 @@ class TabListPattern {
     }
 }
 
-export { TabListPattern as T, TabPattern as a, TabPanelPattern as b };
-//# sourceMappingURL=tabs-hMdwtXv2.mjs.map
+export { TabListPattern, TabPanelPattern, TabPattern };
+//# sourceMappingURL=tabs2.mjs.map

package/fesm2022/tabs2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs2.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-c646aa77115d/bin/src/cdk-experimental/ui-patterns/behaviors/label/label.ts","../../../../../darwin_arm64-fastbuild-ST-c646aa77115d/bin/src/cdk-experimental/ui-patterns/tabs/tabs.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\nimport {computed} from '@angular/core';\nimport {SignalLike} from '../signal-like/signal-like';\n\n/** Represents the required inputs for the label control. */\nexport interface LabelControlInputs {\n  /** The default `aria-labelledby` ids. */\n  defaultLabelledBy: SignalLike<string[]>;\n}\n\n/** Represents the optional inputs for the label control. */\nexport interface LabelControlOptionalInputs {\n  /** The `aria-label`. */\n  label?: SignalLike<string | undefined>;\n\n  /** The user-provided `aria-labelledby` ids. */\n  labelledBy?: SignalLike<string[]>;\n}\n\n/** Controls label and description of an element. */\nexport class LabelControl {\n  /** The `aria-label`. */\n  readonly label = computed(() => this.inputs.label?.());\n\n  /** The `aria-labelledby` ids. */\n  readonly labelledBy = computed(() => {\n    const label = this.label();\n    const labelledBy = this.inputs.labelledBy?.();\n    const defaultLabelledBy = this.inputs.defaultLabelledBy();\n\n    if (labelledBy && labelledBy.length > 0) {\n      return labelledBy;\n    }\n\n    // If an aria-label is provided by developers, do not set aria-labelledby with the\n    // defaultLabelledBy value because if both attributes are set, aria-labelledby will be used.\n    if (label) {\n      return [];\n    }\n\n    return defaultLabelledBy;\n  });\n\n  constructor(readonly inputs: LabelControlInputs & LabelControlOptionalInputs) {}\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {computed} from '@angular/core';\nimport {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';\nimport {\n  ExpansionItem,\n  ExpansionControl,\n  ListExpansionInputs,\n  ListExpansion,\n} from '../behaviors/expansion/expansion';\nimport {SignalLike} from '../behaviors/signal-like/signal-like';\nimport {LabelControl, LabelControlOptionalInputs} from '../behaviors/label/label';\nimport {List, ListInputs, ListItem} from '../behaviors/list/list';\n\n/** The required inputs to tabs. */\nexport interface TabInputs\n  extends Omit<ListItem<string>, 'searchTerm' | 'index'>,\n    Omit<ExpansionItem, 'expansionId' | 'expandable'> {\n  /** The parent tablist that controls the tab. */\n  tablist: SignalLike<TabListPattern>;\n\n  /** The remote tabpanel controlled by the tab. */\n  tabpanel: SignalLike<TabPanelPattern | undefined>;\n}\n\n/** A tab in a tablist. */\nexport class TabPattern {\n  /** Controls expansion for this tab. */\n  readonly expansion: ExpansionControl;\n\n  /** A global unique identifier for the tab. */\n  readonly id: SignalLike<string>;\n\n  /** The index of the tab. */\n  readonly index = computed(() => this.inputs.tablist().inputs.items().indexOf(this));\n\n  /** A local unique identifier for the tab. */\n  readonly value: SignalLike<string>;\n\n  /** Whether the tab is disabled. */\n  readonly disabled: SignalLike<boolean>;\n\n  /** The html element that should receive focus. */\n  readonly element: SignalLike<HTMLElement>;\n\n  /** The text used by the typeahead search. */\n  readonly searchTerm = () => ''; // Unused because tabs do not support typeahead.\n\n  /** Whether this tab has expandable content. */\n  readonly expandable = computed(() => this.expansion.expandable());\n\n  /** The unique identifier used by the expansion behavior. */\n  readonly expansionId = computed(() => this.expansion.expansionId());\n\n  /** Whether the tab is expanded. */\n  readonly expanded = computed(() => this.expansion.isExpanded());\n\n  /** Whether the tab is active. */\n  readonly active = computed(() => this.inputs.tablist().inputs.activeItem() === this);\n\n  /** Whether the tab is selected. */\n  readonly selected = computed(() => !!this.inputs.tablist().inputs.value().includes(this.value()));\n\n  /** The tabindex of the tab. */\n  readonly tabindex = computed(() => this.inputs.tablist().listBehavior.getItemTabindex(this));\n\n  /** The id of the tabpanel associated with the tab. */\n  readonly controls = computed(() => this.inputs.tabpanel()?.id());\n\n  constructor(readonly inputs: TabInputs) {\n    this.id = inputs.id;\n    this.value = inputs.value;\n    this.disabled = inputs.disabled;\n    this.element = inputs.element;\n    this.expansion = new ExpansionControl({\n      ...inputs,\n      expansionId: inputs.value,\n      expandable: () => true,\n      expansionManager: inputs.tablist().expansionManager,\n    });\n  }\n}\n\n/** The required inputs for the tabpanel. */\nexport interface TabPanelInputs extends LabelControlOptionalInputs {\n  id: SignalLike<string>;\n  tab: SignalLike<TabPattern | undefined>;\n  value: SignalLike<string>;\n}\n\n/** A tabpanel associated with a tab. */\nexport class TabPanelPattern {\n  /** A global unique identifier for the tabpanel. */\n  readonly id: SignalLike<string>;\n\n  /** A local unique identifier for the tabpanel. */\n  readonly value: SignalLike<string>;\n\n  /** Controls label for this tabpanel. */\n  readonly labelManager: LabelControl;\n\n  /** Whether the tabpanel is hidden. */\n  readonly hidden = computed(() => this.inputs.tab()?.expanded() === false);\n\n  /** The tabindex of this tabpanel. */\n  readonly tabindex = computed(() => (this.hidden() ? -1 : 0));\n\n  /** The aria-labelledby value for this tabpanel. */\n  readonly labelledBy = computed(() =>\n    this.labelManager.labelledBy().length > 0\n      ? this.labelManager.labelledBy().join(' ')\n      : undefined,\n  );\n\n  constructor(readonly inputs: TabPanelInputs) {\n    this.id = inputs.id;\n    this.value = inputs.value;\n    this.labelManager = new LabelControl({\n      ...inputs,\n      defaultLabelledBy: computed(() => (this.inputs.tab() ? [this.inputs.tab()!.id()] : [])),\n    });\n  }\n}\n\n/** The required inputs for the tablist. */\nexport type TabListInputs = Omit<ListInputs<TabPattern, string>, 'multi' | 'typeaheadDelay'> &\n  Omit<ListExpansionInputs, 'multiExpandable' | 'expandedIds' | 'items'>;\n\n/** Controls the state of a tablist. */\nexport class TabListPattern {\n  /** The list behavior for the tablist. */\n  readonly listBehavior: List<TabPattern, string>;\n\n  /** Controls expansion for the tablist. */\n  readonly expansionManager: ListExpansion;\n\n  /** Whether the tablist is vertically or horizontally oriented. */\n  readonly orientation: SignalLike<'vertical' | 'horizontal'>;\n\n  /** Whether the tablist is disabled. */\n  readonly disabled: SignalLike<boolean>;\n\n  /** The tabindex of the tablist. */\n  readonly tabindex = computed(() => this.listBehavior.tabindex());\n\n  /** The id of the current active tab. */\n  readonly activedescendant = computed(() => this.listBehavior.activedescendant());\n\n  /** Whether selection should follow focus. */\n  readonly followFocus = computed(() => this.inputs.selectionMode() === 'follow');\n\n  /** The key used to navigate to the previous tab in the tablist. */\n  readonly prevKey = computed(() => {\n    if (this.inputs.orientation() === 'vertical') {\n      return 'ArrowUp';\n    }\n    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n  });\n\n  /** The key used to navigate to the next item in the list. */\n  readonly nextKey = computed(() => {\n    if (this.inputs.orientation() === 'vertical') {\n      return 'ArrowDown';\n    }\n    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n  });\n\n  /** The keydown event manager for the tablist. */\n  readonly keydown = computed(() => {\n    return new KeyboardEventManager()\n      .on(this.prevKey, () => this.listBehavior.prev({select: this.followFocus()}))\n      .on(this.nextKey, () => this.listBehavior.next({select: this.followFocus()}))\n      .on('Home', () => this.listBehavior.first({select: this.followFocus()}))\n      .on('End', () => this.listBehavior.last({select: this.followFocus()}))\n      .on(' ', () => this.listBehavior.select())\n      .on('Enter', () => this.listBehavior.select());\n  });\n\n  /** The pointerdown event manager for the tablist. */\n  readonly pointerdown = computed(() => {\n    return new PointerEventManager().on(e =>\n      this.listBehavior.goto(this._getItem(e)!, {select: true}),\n    );\n  });\n\n  constructor(readonly inputs: TabListInputs) {\n    this.disabled = inputs.disabled;\n    this.orientation = inputs.orientation;\n\n    this.listBehavior = new List({\n      ...inputs,\n      multi: () => false,\n      typeaheadDelay: () => 0, // Tabs do not support typeahead.\n    });\n\n    this.expansionManager = new ListExpansion({\n      ...inputs,\n      multiExpandable: () => false,\n      expandedIds: this.inputs.value,\n    });\n  }\n\n  /**\n   * Sets the tablist to its default initial state.\n   *\n   * Sets the active index of the tablist to the first focusable selected\n   * tab if one exists. Otherwise, sets focus to the first focusable tab.\n   *\n   * This method should be called once the tablist and its tabs are properly initialized.\n   */\n  setDefaultState() {\n    let firstItem: TabPattern | undefined;\n\n    for (const item of this.inputs.items()) {\n      if (!this.listBehavior.isFocusable(item)) continue;\n\n      if (firstItem === undefined) {\n        firstItem = item;\n      }\n\n      if (item.selected()) {\n        this.inputs.activeItem.set(item);\n        return;\n      }\n    }\n    if (firstItem !== undefined) {\n      this.inputs.activeItem.set(firstItem);\n    }\n  }\n\n  /** Handles keydown events for the tablist. */\n  onKeydown(event: KeyboardEvent) {\n    if (!this.disabled()) {\n      this.keydown().handle(event);\n    }\n  }\n\n  /** The pointerdown event manager for the tablist. */\n  onPointerdown(event: PointerEvent) {\n    if (!this.disabled()) {\n      this.pointerdown().handle(event);\n    }\n  }\n\n  /** Returns the tab item associated with the given pointer event. */\n  private _getItem(e: PointerEvent) {\n    if (!(e.target instanceof HTMLElement)) {\n      return;\n    }\n\n    const element = e.target.closest('[role=\"tab\"]');\n    return this.inputs.items().find(i => i.element() === element);\n  }\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/toolbar.mjs

@@ -0,0 +1,168 @@
+import * as i0 from '@angular/core';
+import { signal, inject, computed, input, booleanAttribute, afterRenderEffect, Directive, ElementRef } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { ToolbarPattern, ToolbarWidgetPattern } from './toolbar2.mjs';
+import './list.mjs';
+import './list-navigation.mjs';
+
+/**
+ * Sort directives by their document order.
+ */
+function sortDirectives(a, b) {
+    return (a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_PRECEDING) > 0
+        ? 1
+        : -1;
+}
+/**
+ * A toolbar widget container.
+ *
+ * Widgets such as radio groups or buttons are nested within a toolbar to allow for a single
+ * place of reference for focus and navigation. The CdkToolbar is meant to be used in conjunction
+ * with CdkToolbarWidget and CdkRadioGroup as follows:
+ *
+ * ```html
+ * <div cdkToolbar>
+ *  <button cdkToolbarWidget>Button</button>
+ *  <div cdkRadioGroup>
+ *    <label cdkRadioButton value="1">Option 1</label>
+ *    <label cdkRadioButton value="2">Option 2</label>
+ *    <label cdkRadioButton value="3">Option 3</label>
+ *  </div>
+ * </div>
+ * ```
+ */
+class CdkToolbar {
+    /** The CdkTabList nested inside of the container. */
+    _cdkWidgets = signal(new Set(), ...(ngDevMode ? [{ debugName: "_cdkWidgets" }] : []));
+    /** A signal wrapper for directionality. */
+    textDirection = inject(Directionality).valueSignal;
+    /** Sorted UIPatterns of the child widgets */
+    items = computed(() => [...this._cdkWidgets()].sort(sortDirectives).map(widget => widget.pattern), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Whether the toolbar is vertically or horizontally oriented. */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /** Whether disabled items in the group should be skipped when navigating. */
+    skipDisabled = input(false, ...(ngDevMode ? [{ debugName: "skipDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Whether the toolbar is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Whether focus should wrap when navigating. */
+    wrap = input(true, ...(ngDevMode ? [{ debugName: "wrap", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** The toolbar UIPattern. */
+    pattern = new ToolbarPattern({
+        ...this,
+        activeItem: signal(undefined),
+        textDirection: this.textDirection,
+        focusMode: signal('roving'),
+    });
+    /** Whether the toolbar has received focus yet. */
+    _hasFocused = signal(false, ...(ngDevMode ? [{ debugName: "_hasFocused" }] : []));
+    onFocus() {
+        this._hasFocused.set(true);
+    }
+    constructor() {
+        afterRenderEffect(() => {
+            if (!this._hasFocused()) {
+                this.pattern.setDefaultState();
+            }
+        });
+        afterRenderEffect(() => {
+            if (typeof ngDevMode === 'undefined' || ngDevMode) {
+                const violations = this.pattern.validate();
+                for (const violation of violations) {
+                    console.error(violation);
+                }
+            }
+        });
+    }
+    register(widget) {
+        const widgets = this._cdkWidgets();
+        if (!widgets.has(widget)) {
+            widgets.add(widget);
+            this._cdkWidgets.set(new Set(widgets));
+        }
+    }
+    unregister(widget) {
+        const widgets = this._cdkWidgets();
+        if (widgets.delete(widget)) {
+            this._cdkWidgets.set(new Set(widgets));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkToolbar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-rc.1", type: CdkToolbar, isStandalone: true, selector: "[cdkToolbar]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, skipDisabled: { classPropertyName: "skipDisabled", publicName: "skipDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, listeners: { "keydown": "pattern.onKeydown($event)", "pointerdown": "pattern.onPointerdown($event)", "focusin": "onFocus()" }, properties: { "attr.tabindex": "pattern.tabindex()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-orientation": "pattern.orientation()", "attr.aria-activedescendant": "pattern.activedescendant()" }, classAttribute: "cdk-toolbar" }, exportAs: ["cdkToolbar"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkToolbar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkToolbar]',
+                    exportAs: 'cdkToolbar',
+                    host: {
+                        'role': 'toolbar',
+                        'class': 'cdk-toolbar',
+                        '[attr.tabindex]': 'pattern.tabindex()',
+                        '[attr.aria-disabled]': 'pattern.disabled()',
+                        '[attr.aria-orientation]': 'pattern.orientation()',
+                        '[attr.aria-activedescendant]': 'pattern.activedescendant()',
+                        '(keydown)': 'pattern.onKeydown($event)',
+                        '(pointerdown)': 'pattern.onPointerdown($event)',
+                        '(focusin)': 'onFocus()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * A widget within a toolbar.
+ *
+ * A widget is anything that is within a toolbar. It should be applied to any native HTML element
+ * that has the purpose of acting as a widget navigatable within a toolbar.
+ */
+class CdkToolbarWidget {
+    /** A reference to the widget element. */
+    _elementRef = inject(ElementRef);
+    /** The parent CdkToolbar. */
+    _cdkToolbar = inject(CdkToolbar);
+    /** A unique identifier for the widget. */
+    _generatedId = inject(_IdGenerator).getId('cdk-toolbar-widget-');
+    /** A unique identifier for the widget. */
+    id = computed(() => this._generatedId, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /** The parent Toolbar UIPattern. */
+    parentToolbar = computed(() => this._cdkToolbar.pattern, ...(ngDevMode ? [{ debugName: "parentToolbar" }] : []));
+    /** A reference to the widget element to be focused on navigation. */
+    element = computed(() => this._elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "element" }] : []));
+    /** Whether the widget is disabled. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    hardDisabled = computed(() => this.pattern.disabled() && this._cdkToolbar.skipDisabled(), ...(ngDevMode ? [{ debugName: "hardDisabled" }] : []));
+    pattern = new ToolbarWidgetPattern({
+        ...this,
+        id: this.id,
+        element: this.element,
+        disabled: computed(() => this._cdkToolbar.disabled() || this.disabled()),
+        parentToolbar: this.parentToolbar,
+    });
+    ngOnInit() {
+        this._cdkToolbar.register(this);
+    }
+    ngOnDestroy() {
+        this._cdkToolbar.unregister(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkToolbarWidget, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-rc.1", type: CdkToolbarWidget, isStandalone: true, selector: "[cdkToolbarWidget]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, properties: { "class.cdk-active": "pattern.active()", "attr.tabindex": "pattern.tabindex()", "attr.inert": "hardDisabled() ? true : null", "attr.disabled": "hardDisabled() ? true : null", "attr.aria-disabled": "pattern.disabled()", "id": "pattern.id()" }, classAttribute: "cdk-toolbar-widget" }, exportAs: ["cdkToolbarWidget"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkToolbarWidget, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cdkToolbarWidget]',
+                    exportAs: 'cdkToolbarWidget',
+                    host: {
+                        'role': 'button',
+                        'class': 'cdk-toolbar-widget',
+                        '[class.cdk-active]': 'pattern.active()',
+                        '[attr.tabindex]': 'pattern.tabindex()',
+                        '[attr.inert]': 'hardDisabled() ? true : null',
+                        '[attr.disabled]': 'hardDisabled() ? true : null',
+                        '[attr.aria-disabled]': 'pattern.disabled()',
+                        '[id]': 'pattern.id()',
+                    },
+                }]
+        }] });
+
+export { CdkToolbar, CdkToolbarWidget };
+//# sourceMappingURL=toolbar.mjs.map

package/fesm2022/toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-c646aa77115d/bin/src/cdk-experimental/toolbar/toolbar.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n  afterRenderEffect,\n  Directive,\n  ElementRef,\n  inject,\n  computed,\n  input,\n  booleanAttribute,\n  signal,\n  Signal,\n  OnInit,\n  OnDestroy,\n} from '@angular/core';\nimport {ToolbarPattern, RadioButtonPattern, ToolbarWidgetPattern} from '../ui-patterns';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {_IdGenerator} from '@angular/cdk/a11y';\n\n/** Interface for a radio button that can be used with a toolbar. Based on radio-button in ui-patterns */\ninterface CdkRadioButtonInterface<V> {\n  /** The HTML element associated with the radio button. */\n  element: Signal<HTMLElement>;\n  /** Whether the radio button is disabled. */\n  disabled: Signal<boolean>;\n\n  pattern: RadioButtonPattern<V>;\n}\n\ninterface HasElement {\n  element: Signal<HTMLElement>;\n}\n\n/**\n * Sort directives by their document order.\n */\nfunction sortDirectives(a: HasElement, b: HasElement) {\n  return (a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_PRECEDING) > 0\n    ? 1\n    : -1;\n}\n\n/**\n * A toolbar widget container.\n *\n * Widgets such as radio groups or buttons are nested within a toolbar to allow for a single\n * place of reference for focus and navigation. The CdkToolbar is meant to be used in conjunction\n * with CdkToolbarWidget and CdkRadioGroup as follows:\n *\n * ```html\n * <div cdkToolbar>\n *  <button cdkToolbarWidget>Button</button>\n *  <div cdkRadioGroup>\n *    <label cdkRadioButton value=\"1\">Option 1</label>\n *    <label cdkRadioButton value=\"2\">Option 2</label>\n *    <label cdkRadioButton value=\"3\">Option 3</label>\n *  </div>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[cdkToolbar]',\n  exportAs: 'cdkToolbar',\n  host: {\n    'role': 'toolbar',\n    'class': 'cdk-toolbar',\n    '[attr.tabindex]': 'pattern.tabindex()',\n    '[attr.aria-disabled]': 'pattern.disabled()',\n    '[attr.aria-orientation]': 'pattern.orientation()',\n    '[attr.aria-activedescendant]': 'pattern.activedescendant()',\n    '(keydown)': 'pattern.onKeydown($event)',\n    '(pointerdown)': 'pattern.onPointerdown($event)',\n    '(focusin)': 'onFocus()',\n  },\n})\nexport class CdkToolbar<V> {\n  /** The CdkTabList nested inside of the container. */\n  private readonly _cdkWidgets = signal(new Set<CdkRadioButtonInterface<V> | CdkToolbarWidget>());\n\n  /** A signal wrapper for directionality. */\n  textDirection = inject(Directionality).valueSignal;\n\n  /** Sorted UIPatterns of the child widgets */\n  items = computed(() =>\n    [...this._cdkWidgets()].sort(sortDirectives).map(widget => widget.pattern),\n  );\n\n  /** Whether the toolbar is vertically or horizontally oriented. */\n  orientation = input<'vertical' | 'horizontal'>('horizontal');\n\n  /** Whether disabled items in the group should be skipped when navigating. */\n  skipDisabled = input(false, {transform: booleanAttribute});\n\n  /** Whether the toolbar is disabled. */\n  disabled = input(false, {transform: booleanAttribute});\n\n  /** Whether focus should wrap when navigating. */\n  readonly wrap = input(true, {transform: booleanAttribute});\n\n  /** The toolbar UIPattern. */\n  pattern: ToolbarPattern<V> = new ToolbarPattern<V>({\n    ...this,\n    activeItem: signal(undefined),\n    textDirection: this.textDirection,\n    focusMode: signal('roving'),\n  });\n\n  /** Whether the toolbar has received focus yet. */\n  private _hasFocused = signal(false);\n\n  onFocus() {\n    this._hasFocused.set(true);\n  }\n\n  constructor() {\n    afterRenderEffect(() => {\n      if (!this._hasFocused()) {\n        this.pattern.setDefaultState();\n      }\n    });\n\n    afterRenderEffect(() => {\n      if (typeof ngDevMode === 'undefined' || ngDevMode) {\n        const violations = this.pattern.validate();\n        for (const violation of violations) {\n          console.error(violation);\n        }\n      }\n    });\n  }\n\n  register(widget: CdkRadioButtonInterface<V> | CdkToolbarWidget) {\n    const widgets = this._cdkWidgets();\n    if (!widgets.has(widget)) {\n      widgets.add(widget);\n      this._cdkWidgets.set(new Set(widgets));\n    }\n  }\n\n  unregister(widget: CdkRadioButtonInterface<V> | CdkToolbarWidget) {\n    const widgets = this._cdkWidgets();\n    if (widgets.delete(widget)) {\n      this._cdkWidgets.set(new Set(widgets));\n    }\n  }\n}\n\n/**\n * A widget within a toolbar.\n *\n * A widget is anything that is within a toolbar. It should be applied to any native HTML element\n * that has the purpose of acting as a widget navigatable within a toolbar.\n */\n@Directive({\n  selector: '[cdkToolbarWidget]',\n  exportAs: 'cdkToolbarWidget',\n  host: {\n    'role': 'button',\n    'class': 'cdk-toolbar-widget',\n    '[class.cdk-active]': 'pattern.active()',\n    '[attr.tabindex]': 'pattern.tabindex()',\n    '[attr.inert]': 'hardDisabled() ? true : null',\n    '[attr.disabled]': 'hardDisabled() ? true : null',\n    '[attr.aria-disabled]': 'pattern.disabled()',\n    '[id]': 'pattern.id()',\n  },\n})\nexport class CdkToolbarWidget implements OnInit, OnDestroy {\n  /** A reference to the widget element. */\n  private readonly _elementRef = inject(ElementRef);\n\n  /** The parent CdkToolbar. */\n  private readonly _cdkToolbar = inject(CdkToolbar);\n\n  /** A unique identifier for the widget. */\n  private readonly _generatedId = inject(_IdGenerator).getId('cdk-toolbar-widget-');\n\n  /** A unique identifier for the widget. */\n  protected id = computed(() => this._generatedId);\n\n  /** The parent Toolbar UIPattern. */\n  protected parentToolbar = computed(() => this._cdkToolbar.pattern);\n\n  /** A reference to the widget element to be focused on navigation. */\n  element = computed(() => this._elementRef.nativeElement);\n\n  /** Whether the widget is disabled. */\n  disabled = input(false, {transform: booleanAttribute});\n\n  readonly hardDisabled = computed(\n    () => this.pattern.disabled() && this._cdkToolbar.skipDisabled(),\n  );\n\n  pattern = new ToolbarWidgetPattern({\n    ...this,\n    id: this.id,\n    element: this.element,\n    disabled: computed(() => this._cdkToolbar.disabled() || this.disabled()),\n    parentToolbar: this.parentToolbar,\n  });\n\n  ngOnInit() {\n    this._cdkToolbar.register(this);\n  }\n\n  ngOnDestroy() {\n    this._cdkToolbar.unregister(this);\n  }\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/toolbar2.mjs

@@ -0,0 +1,224 @@
+import { computed, signal } from '@angular/core';
+import { List } from './list.mjs';
+import { PointerEventManager, KeyboardEventManager } from './list-navigation.mjs';
+
+/** Represents a radio button within a radio group. */
+class RadioButtonPattern {
+    inputs;
+    /** A unique identifier for the radio button. */
+    id;
+    /** The value associated with the radio button. */
+    value;
+    /** The position of the radio button within the group. */
+    index = computed(() => this.group()?.listBehavior.inputs.items().indexOf(this) ?? -1);
+    /** Whether the radio button is currently the active one (focused). */
+    active = computed(() => this.group()?.listBehavior.inputs.activeItem() === this);
+    /** Whether the radio button is selected. */
+    selected = computed(() => !!this.group()?.listBehavior.inputs.value().includes(this.value()));
+    /** Whether the radio button is disabled. */
+    disabled;
+    /** A reference to the parent radio group. */
+    group;
+    /** The tabindex of the radio button. */
+    tabindex = computed(() => this.group()?.listBehavior.getItemTabindex(this));
+    /** The HTML element associated with the radio button. */
+    element;
+    /** The search term for typeahead. */
+    searchTerm = () => ''; // Radio groups do not support typeahead.
+    constructor(inputs) {
+        this.inputs = inputs;
+        this.id = inputs.id;
+        this.value = inputs.value;
+        this.group = inputs.group;
+        this.element = inputs.element;
+        this.disabled = inputs.disabled;
+    }
+}
+
+/** Controls the state of a toolbar. */
+class ToolbarPattern {
+    inputs;
+    /** The list behavior for the toolbar. */
+    listBehavior;
+    /** Whether the tablist is vertically or horizontally oriented. */
+    orientation;
+    /** Whether the toolbar is disabled. */
+    disabled = computed(() => this.listBehavior.disabled());
+    /** The tabindex of the toolbar (if using activedescendant). */
+    tabindex = computed(() => this.listBehavior.tabindex());
+    /** The id of the current active widget (if using activedescendant). */
+    activedescendant = computed(() => this.listBehavior.activedescendant());
+    /** The key used to navigate to the previous widget. */
+    prevKey = computed(() => {
+        if (this.inputs.orientation() === 'vertical') {
+            return 'ArrowUp';
+        }
+        return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    });
+    /** The key used to navigate to the next widget. */
+    nextKey = computed(() => {
+        if (this.inputs.orientation() === 'vertical') {
+            return 'ArrowDown';
+        }
+        return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    });
+    /** The alternate key used to navigate to the previous widget */
+    altPrevKey = computed(() => {
+        if (this.inputs.orientation() === 'vertical') {
+            return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+        }
+        return 'ArrowUp';
+    });
+    /** The alternate key used to navigate to the next widget. */
+    altNextKey = computed(() => {
+        if (this.inputs.orientation() === 'vertical') {
+            return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+        }
+        return 'ArrowDown';
+    });
+    /** The keydown event manager for the toolbar. */
+    keydown = computed(() => {
+        const manager = new KeyboardEventManager();
+        const activeItem = this.inputs.activeItem();
+        const isRadioButton = activeItem instanceof RadioButtonPattern;
+        if (isRadioButton) {
+            manager
+                .on(' ', () => this.selectRadioButton())
+                .on('Enter', () => this.selectRadioButton())
+                .on(this.altNextKey, () => activeItem?.group()?.listBehavior.next())
+                .on(this.altPrevKey, () => activeItem?.group()?.listBehavior.prev());
+        }
+        else {
+            manager.on(this.altNextKey, () => this.listBehavior.next());
+            manager.on(this.altPrevKey, () => this.listBehavior.prev());
+        }
+        return manager
+            .on(this.prevKey, () => this.listBehavior.prev())
+            .on(this.nextKey, () => this.listBehavior.next())
+            .on('Home', () => this.listBehavior.first())
+            .on('End', () => this.listBehavior.last());
+    });
+    selectRadioButton() {
+        const activeItem = this.inputs.activeItem();
+        // activeItem must be a radio button
+        const group = activeItem.group();
+        if (group && !group.readonly() && !group.disabled()) {
+            group.listBehavior.selectOne();
+        }
+    }
+    /** The pointerdown event manager for the toolbar. */
+    pointerdown = computed(() => new PointerEventManager().on(e => this.goto(e)));
+    /** Navigates to the widget associated with the given pointer event. */
+    goto(event) {
+        const item = this._getItem(event);
+        if (!item)
+            return;
+        if (item instanceof RadioButtonPattern) {
+            const group = item.group();
+            if (group && !group.disabled()) {
+                group.listBehavior.goto(item, { selectOne: !group.readonly() });
+            }
+        }
+        else {
+            this.listBehavior.goto(item);
+        }
+    }
+    /** Handles keydown events for the toolbar. */
+    onKeydown(event) {
+        if (!this.disabled()) {
+            this.keydown().handle(event);
+        }
+    }
+    /** Handles pointerdown events for the toolbar. */
+    onPointerdown(event) {
+        if (!this.disabled()) {
+            this.pointerdown().handle(event);
+        }
+    }
+    /** Finds the Toolbar Widget associated with a pointer event target. */
+    _getItem(e) {
+        if (!(e.target instanceof HTMLElement)) {
+            return undefined;
+        }
+        // Assumes the target or its ancestor has role="radio" or role="button"
+        const element = e.target.closest('[role="button"], [role="radio"]');
+        return this.inputs.items().find(i => i.element() === element);
+    }
+    constructor(inputs) {
+        this.inputs = inputs;
+        this.orientation = inputs.orientation;
+        this.listBehavior = new List({
+            ...inputs,
+            multi: () => false,
+            selectionMode: () => 'explicit',
+            value: signal([]),
+            typeaheadDelay: () => 0, // Toolbar widgets do not support typeahead.
+        });
+    }
+    /**
+     * Sets the toolbar to its default initial state.
+     *
+     * Sets the active index to the selected widget if one exists and is focusable.
+     * Otherwise, sets the active index to the first focusable widget.
+     */
+    setDefaultState() {
+        let firstItem = null;
+        for (const item of this.inputs.items()) {
+            if (this.listBehavior.isFocusable(item)) {
+                if (!firstItem) {
+                    firstItem = item;
+                }
+                if (item instanceof RadioButtonPattern && item.selected()) {
+                    this.inputs.activeItem.set(item);
+                    return;
+                }
+            }
+        }
+        if (firstItem) {
+            this.inputs.activeItem.set(firstItem);
+        }
+    }
+    /** Validates the state of the toolbar and returns a list of accessibility violations. */
+    validate() {
+        const violations = [];
+        if (this.inputs.skipDisabled()) {
+            for (const item of this.inputs.items()) {
+                if (item instanceof RadioButtonPattern && item.selected() && item.disabled()) {
+                    violations.push("Accessibility Violation: A selected radio button inside the toolbar is disabled while 'skipDisabled' is true, making the selection unreachable via keyboard.");
+                }
+            }
+        }
+        return violations;
+    }
+}
+class ToolbarWidgetPattern {
+    inputs;
+    /** A unique identifier for the widget. */
+    id;
+    /** The html element that should receive focus. */
+    element;
+    /** Whether the widget is disabled. */
+    disabled;
+    /** A reference to the parent toolbar. */
+    parentToolbar;
+    /** The tabindex of the widgdet. */
+    tabindex = computed(() => this.inputs.parentToolbar().listBehavior.getItemTabindex(this));
+    /** The text used by the typeahead search. */
+    searchTerm = () => ''; // Unused because toolbar does not support typeahead.
+    /** The value associated with the widget. */
+    value = () => ''; // Unused because toolbar does not support selection.
+    /** The position of the widget within the toolbar. */
+    index = computed(() => this.parentToolbar()?.inputs.items().indexOf(this) ?? -1);
+    /** Whether the widget is currently the active one (focused). */
+    active = computed(() => this.parentToolbar()?.inputs.activeItem() === this);
+    constructor(inputs) {
+        this.inputs = inputs;
+        this.id = inputs.id;
+        this.element = inputs.element;
+        this.disabled = inputs.disabled;
+        this.parentToolbar = inputs.parentToolbar;
+    }
+}
+
+export { RadioButtonPattern, ToolbarPattern, ToolbarWidgetPattern };
+//# sourceMappingURL=toolbar2.mjs.map