@radix-ng/primitives 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/composite/README.md +1 -1
  2. package/fesm2022/radix-ng-primitives-accordion.mjs +18 -36
  3. package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
  4. package/fesm2022/radix-ng-primitives-checkbox.mjs +134 -58
  5. package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
  6. package/fesm2022/radix-ng-primitives-collapsible.mjs +113 -64
  7. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  8. package/fesm2022/radix-ng-primitives-composite.mjs +127 -43
  9. package/fesm2022/radix-ng-primitives-composite.mjs.map +1 -1
  10. package/fesm2022/radix-ng-primitives-menu.mjs +288 -63
  11. package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
  12. package/fesm2022/radix-ng-primitives-menubar.mjs +24 -1
  13. package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
  14. package/fesm2022/radix-ng-primitives-select.mjs +56 -29
  15. package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
  16. package/fesm2022/radix-ng-primitives-slider.mjs +57 -13
  17. package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
  18. package/fesm2022/radix-ng-primitives-tabs.mjs +292 -59
  19. package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
  20. package/fesm2022/radix-ng-primitives-toolbar.mjs +19 -13
  21. package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
  22. package/package.json +2 -10
  23. package/types/radix-ng-primitives-accordion.d.ts +7 -15
  24. package/types/radix-ng-primitives-checkbox.d.ts +98 -70
  25. package/types/radix-ng-primitives-collapsible.d.ts +44 -24
  26. package/types/radix-ng-primitives-composite.d.ts +58 -15
  27. package/types/radix-ng-primitives-menu.d.ts +44 -16
  28. package/types/radix-ng-primitives-menubar.d.ts +2 -0
  29. package/types/radix-ng-primitives-select.d.ts +46 -32
  30. package/types/radix-ng-primitives-slider.d.ts +19 -4
  31. package/types/radix-ng-primitives-tabs.d.ts +63 -11
  32. package/types/radix-ng-primitives-toolbar.d.ts +80 -73
  33. package/collection/README.md +0 -1
  34. package/fesm2022/radix-ng-primitives-collection.mjs +0 -72
  35. package/fesm2022/radix-ng-primitives-collection.mjs.map +0 -1
  36. package/fesm2022/radix-ng-primitives-roving-focus.mjs +0 -420
  37. package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +0 -1
  38. package/roving-focus/README.md +0 -3
  39. package/types/radix-ng-primitives-collection.d.ts +0 -44
  40. package/types/radix-ng-primitives-roving-focus.d.ts +0 -201
@@ -1,10 +1,11 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { Signal } from '@angular/core';
3
3
  import * as i1 from '@radix-ng/primitives/presence';
4
+ import * as i1$1 from '@radix-ng/primitives/composite';
5
+ import { RdxCompositeMetadata } from '@radix-ng/primitives/composite';
4
6
  import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
5
7
  import { DataOrientation, RdxCancelableChangeEventDetails, BooleanInput } from '@radix-ng/primitives/core';
6
8
  import * as _radix_ng_primitives_tabs from '@radix-ng/primitives/tabs';
7
- import * as i1$1 from '@radix-ng/primitives/composite';
8
9
 
9
10
  /**
10
11
  * Structural directive that mounts the tab panel contents only while the panel is active,
@@ -27,9 +28,18 @@ declare class RdxTabsPanelPresence {
27
28
  type RdxTabsActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
28
29
  /** A value that identifies a tab / panel pair. */
29
30
  type RdxTabsValue = string | number | null;
31
+ /** Metadata registered for each tab in the composite list. */
32
+ interface RdxTabsTabMetadata {
33
+ [key: string]: unknown;
34
+ disabled: boolean;
35
+ id: string;
36
+ value: RdxTabsValue;
37
+ }
30
38
 
31
- type RdxTabsValueChangeReason = 'trigger-press' | 'keyboard' | 'focus' | 'none';
32
- type RdxTabsValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxTabsValueChangeReason>;
39
+ type RdxTabsValueChangeReason = 'none' | 'disabled' | 'missing' | 'initial';
40
+ type RdxTabsValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxTabsValueChangeReason> & {
41
+ activationDirection: RdxTabsActivationDirection;
42
+ };
33
43
  interface RdxTabsValueChangeEvent {
34
44
  value: RdxTabsValue;
35
45
  eventDetails: RdxTabsValueChangeEventDetails;
@@ -48,6 +58,9 @@ declare class RdxTabsRoot {
48
58
  readonly value: _angular_core.ModelSignal<RdxTabsValue | undefined>;
49
59
  /**
50
60
  * The value of the tab that should be initially selected when uncontrolled.
61
+ * When omitted, Base UI parity uses `0` as the implicit default and falls back to the first enabled tab.
62
+ *
63
+ * @default 0
51
64
  */
52
65
  readonly defaultValue: _angular_core.InputSignal<RdxTabsValue | undefined>;
53
66
  /**
@@ -59,20 +72,38 @@ declare class RdxTabsRoot {
59
72
  readonly orientation: _angular_core.InputSignal<DataOrientation>;
60
73
  /**
61
74
  * Event emitted when the selected tab changes.
75
+ *
76
+ * `eventDetails.reason` is `'none'` for user-initiated changes, `'initial'` for the first automatic
77
+ * uncontrolled selection, `'disabled'` when an uncontrolled selection falls back from a disabled tab,
78
+ * and `'missing'` when it falls back from a removed tab. Automatic changes are not cancelable.
62
79
  */
63
80
  readonly onValueChange: _angular_core.OutputEmitterRef<RdxTabsValueChangeEvent>;
64
81
  /** @ignore Set by `[rdxTabsList]`. */
65
82
  readonly activateOnFocus: _angular_core.WritableSignal<boolean>;
66
83
  /** @ignore Set by `[rdxTabsList]`. */
67
84
  readonly tabListElement: _angular_core.WritableSignal<HTMLElement | null>;
85
+ /** @ignore Set by `[rdxTabsList]`. */
86
+ readonly tabMap: _angular_core.WritableSignal<Map<HTMLElement, RdxCompositeMetadata<RdxTabsTabMetadata>>>;
68
87
  /** @ignore */
69
88
  readonly activationDirection: _angular_core.WritableSignal<RdxTabsActivationDirection>;
89
+ private readonly externallyControlled;
90
+ private hasObservedValue;
91
+ private previousObservedValue;
92
+ private internalValueCommit;
93
+ private hasAppliedDefaultValue;
94
+ private initialDefaultValue;
95
+ private shouldNotifyInitialValueChange;
96
+ private shouldHonorDisabledDefaultValue;
97
+ private didRegisterTabs;
98
+ private lastKnownTabElement;
70
99
  constructor();
71
100
  /** @ignore */
72
101
  setValue(value: RdxTabsValue, event?: Event, reason?: RdxTabsValueChangeReason): void;
73
- private computeDirection;
102
+ private commitValue;
103
+ private commitAutomaticValueChange;
104
+ private notifyAutomaticValueChange;
74
105
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsRoot, never>;
75
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsRoot, "[rdxTabsRoot]", ["rdxTabsRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
106
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsRoot, "[rdxTabsRoot]", ["rdxTabsRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, [{ directive: typeof i1$1.RdxCompositeList; inputs: {}; outputs: {}; }]>;
76
107
  }
77
108
 
78
109
  /**
@@ -97,6 +128,7 @@ declare class RdxTabsList {
97
128
  * @default true
98
129
  */
99
130
  readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
131
+ private readonly tabMap;
100
132
  private readonly tabMetadata;
101
133
  private readonly disabledIndices;
102
134
  private readonly activeIndex;
@@ -119,23 +151,38 @@ declare class RdxTabsTab {
119
151
  readonly value: _angular_core.InputSignal<RdxTabsValue>;
120
152
  /**
121
153
  * When `true`, prevents the user from interacting with the tab.
154
+ * Disabled tabs remain focusable during composite keyboard navigation, matching Base UI.
122
155
  */
123
156
  readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
157
+ /**
158
+ * Whether the host element is a native button. When `true`, `type="button"` is applied.
159
+ *
160
+ * @default true
161
+ */
162
+ readonly nativeButton: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
163
+ /**
164
+ * Optional id for the tab element. When omitted, an id is derived from the root id and tab value.
165
+ */
166
+ readonly id: _angular_core.InputSignal<string | undefined>;
124
167
  /** @ignore */
125
168
  protected readonly tabId: _angular_core.Signal<string>;
126
169
  /** @ignore */
127
170
  protected readonly panelId: _angular_core.Signal<string>;
128
171
  /** @ignore */
129
172
  protected readonly active: _angular_core.Signal<boolean>;
173
+ private isPressing;
174
+ private isMainButton;
130
175
  constructor();
131
176
  /** @ignore */
132
- protected onMouseDown(event: MouseEvent): void;
177
+ protected onClick(event: MouseEvent): void;
133
178
  /** @ignore */
134
179
  protected onKeyDown(event: KeyboardEvent): void;
135
180
  /** @ignore */
181
+ protected onPointerDown(event: PointerEvent): void;
182
+ /** @ignore */
136
183
  protected onFocus(event: FocusEvent): void;
137
184
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsTab, never>;
138
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsTab, "[rdxTabsTab]", ["rdxTabsTab"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
185
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsTab, "[rdxTabsTab]", ["rdxTabsTab"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
139
186
  }
140
187
 
141
188
  /**
@@ -149,6 +196,7 @@ declare class RdxTabsTab {
149
196
  */
150
197
  declare class RdxTabsPanel {
151
198
  private readonly elementRef;
199
+ private readonly listItem;
152
200
  protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
153
201
  /**
154
202
  * A unique value that associates the panel with a tab.
@@ -184,15 +232,15 @@ declare class RdxTabsPanel {
184
232
  * element renders nothing), unless `keepMounted` keeps the inactive contents around.
185
233
  */
186
234
  protected readonly hidden: _angular_core.Signal<boolean>;
187
- /** @ignore Index of the panel, derived from the order of its associated tab. */
188
- protected readonly index: _angular_core.Signal<number | null>;
235
+ /** @ignore Index of the panel in DOM order. */
236
+ protected readonly index: _angular_core.Signal<number>;
189
237
  private previousActive;
190
238
  private isFirstRun;
191
239
  constructor();
192
240
  /** @ignore Called by `RdxTabsPanelPresence` so the panel stops forcing `hidden`. */
193
241
  markHasPresence(): void;
194
242
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsPanel, never>;
195
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsPanel, "[rdxTabsPanel]", ["rdxTabsPanel"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
243
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsPanel, "[rdxTabsPanel]", ["rdxTabsPanel"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeListItem; inputs: {}; outputs: {}; }]>;
196
244
  }
197
245
 
198
246
  interface TabGeometry {
@@ -235,12 +283,16 @@ interface RdxTabsRootContext {
235
283
  readonly activateOnFocus: Signal<boolean>;
236
284
  /** The `[rdxTabsList]` host element, used to resolve tab order and indicator geometry. */
237
285
  readonly tabListElement: Signal<HTMLElement | null>;
286
+ /** Registered tabs in DOM order. */
287
+ readonly tabMap: Signal<Map<HTMLElement, RdxCompositeMetadata<RdxTabsTabMetadata>>>;
238
288
  /** Select a tab by value. No-op when the value is unchanged. */
239
- setValue(value: RdxTabsValue, event?: Event, reason?: string): void;
289
+ setValue(value: RdxTabsValue, event?: Event, reason?: RdxTabsValueChangeReason): void;
240
290
  /** Mirror the list's `activateOnFocus` input onto the root context. */
241
291
  setActivateOnFocus(value: boolean): void;
242
292
  /** Register the list host element. */
243
293
  setTabListElement(element: HTMLElement | null): void;
294
+ /** Register the tab composite map. */
295
+ setTabMap(map: Map<HTMLElement, RdxCompositeMetadata<RdxTabsTabMetadata>>): void;
244
296
  }
245
297
  declare const injectTabsRootContext: _radix_ng_primitives_core.InjectContext<RdxTabsRootContext>;
246
298
  declare const provideTabsRootContext: (useFactory: () => RdxTabsRootContext) => _angular_core.Provider;
@@ -1,61 +1,11 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { Signal } from '@angular/core';
3
- import * as i1 from '@radix-ng/primitives/separator';
4
- import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
5
- import { DataOrientation, Direction, BooleanInput } from '@radix-ng/primitives/core';
6
- import * as i1$1 from '@radix-ng/primitives/composite';
7
3
  import * as _radix_ng_primitives_toolbar from '@radix-ng/primitives/toolbar';
8
-
9
- /**
10
- * A separator between toolbar items or groups.
11
- *
12
- * @see https://base-ui.com/react/components/toolbar
13
- */
14
- declare class RdxToolbarSeparator {
15
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarSeparator, never>;
16
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarSeparator, "[rdxToolbarSeparator]", ["rdxToolbarSeparator"], {}, {}, never, never, true, [{ directive: typeof i1.RdxSeparatorRootDirective; inputs: { "orientation": "orientation"; }; outputs: {}; }]>;
17
- }
18
-
19
- /**
20
- * A container for grouping a set of controls, such as buttons, toggle groups or menus.
21
- * Owns composite keyboard focus over its items.
22
- *
23
- * @see https://base-ui.com/react/components/toolbar
24
- */
25
- declare class RdxToolbarRoot {
26
- /**
27
- * The orientation of the toolbar.
28
- *
29
- * @default 'horizontal'
30
- */
31
- readonly orientation: _angular_core.InputSignal<DataOrientation>;
32
- /** Text direction for arrow-key navigation. */
33
- readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
34
- readonly dir: _angular_core.Signal<Direction>;
35
- /**
36
- * Whether keyboard navigation should loop from the last item back to the first.
37
- *
38
- * @default true
39
- */
40
- readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
41
- /**
42
- * Whether the whole toolbar is disabled.
43
- *
44
- * @default false
45
- */
46
- readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
47
- private readonly compositeRoot;
48
- private readonly itemMetadata;
49
- private readonly disabledIndices;
50
- constructor();
51
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarRoot, never>;
52
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarRoot, "[rdxToolbarRoot]", ["rdxToolbarRoot"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeRoot; inputs: {}; outputs: {}; }]>;
53
- }
54
- interface RdxToolbarItemMetadata {
55
- [key: string]: unknown;
56
- disabled: boolean;
57
- focusableWhenDisabled: boolean;
58
- }
4
+ import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
5
+ import { BooleanInput, DataOrientation, Direction } from '@radix-ng/primitives/core';
6
+ import * as i1 from '@radix-ng/primitives/composite';
7
+ import * as i1$1 from '@radix-ng/primitives/separator';
8
+ import { Orientation } from '@radix-ng/primitives/separator';
59
9
 
60
10
  /**
61
11
  * A button within a toolbar.
@@ -91,22 +41,26 @@ declare class RdxToolbarButton {
91
41
  /** @ignore */
92
42
  protected onClick(event: Event): void;
93
43
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarButton, never>;
94
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarButton, "[rdxToolbarButton]", ["rdxToolbarButton"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
44
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarButton, "[rdxToolbarButton]", ["rdxToolbarButton"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
95
45
  }
96
46
 
97
47
  /**
98
- * A link within a toolbar.
48
+ * Groups several toolbar items together. Disabling the group disables all of its items.
99
49
  *
100
50
  * @see https://base-ui.com/react/components/toolbar
101
51
  */
102
- declare class RdxToolbarLink {
52
+ declare class RdxToolbarGroup {
103
53
  protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
104
- private readonly compositeItem;
105
- constructor();
106
- /** @ignore Space activates a link, matching native button behavior in a toolbar. */
107
- protected onKeyDown(event: KeyboardEvent): void;
108
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarLink, never>;
109
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarLink, "[rdxToolbarLink]", ["rdxToolbarLink"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
54
+ /**
55
+ * Whether the group is disabled.
56
+ *
57
+ * @default false
58
+ */
59
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
60
+ /** @ignore Effective disabled state, combining the group and the toolbar. */
61
+ readonly isDisabled: _angular_core.Signal<boolean>;
62
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarGroup, never>;
63
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarGroup, "[rdxToolbarGroup]", ["rdxToolbarGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
110
64
  }
111
65
 
112
66
  /**
@@ -142,26 +96,79 @@ declare class RdxToolbarInput {
142
96
  constructor();
143
97
  private handleCaretKeydown;
144
98
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarInput, never>;
145
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarInput, "input[rdxToolbarInput]", ["rdxToolbarInput"], { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
99
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarInput, "input[rdxToolbarInput]", ["rdxToolbarInput"], { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
146
100
  }
147
101
 
148
102
  /**
149
- * Groups several toolbar items together. Disabling the group disables all of its items.
103
+ * A link within a toolbar.
150
104
  *
151
105
  * @see https://base-ui.com/react/components/toolbar
152
106
  */
153
- declare class RdxToolbarGroup {
107
+ declare class RdxToolbarLink {
154
108
  protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
109
+ private readonly compositeItem;
110
+ constructor();
111
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarLink, never>;
112
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarLink, "[rdxToolbarLink]", ["rdxToolbarLink"], {}, {}, never, never, true, [{ directive: typeof i1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
113
+ }
114
+
115
+ /**
116
+ * A container for grouping a set of controls, such as buttons, toggle groups or menus.
117
+ * Owns composite keyboard focus over its items.
118
+ *
119
+ * @see https://base-ui.com/react/components/toolbar
120
+ */
121
+ declare class RdxToolbarRoot {
155
122
  /**
156
- * Whether the group is disabled.
123
+ * The orientation of the toolbar.
124
+ *
125
+ * @default 'horizontal'
126
+ */
127
+ readonly orientation: _angular_core.InputSignal<DataOrientation>;
128
+ /** Text direction for arrow-key navigation. */
129
+ readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
130
+ readonly dir: _angular_core.Signal<Direction>;
131
+ /**
132
+ * Whether keyboard navigation should loop from the last item back to the first.
133
+ *
134
+ * @default true
135
+ */
136
+ readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
137
+ /**
138
+ * Whether the whole toolbar is disabled.
157
139
  *
158
140
  * @default false
159
141
  */
160
142
  readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
161
- /** @ignore Effective disabled state, combining the group and the toolbar. */
162
- readonly isDisabled: _angular_core.Signal<boolean>;
163
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarGroup, never>;
164
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarGroup, "[rdxToolbarGroup]", ["rdxToolbarGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
143
+ private readonly compositeRoot;
144
+ private readonly itemMetadata;
145
+ private readonly disabledIndices;
146
+ constructor();
147
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarRoot, never>;
148
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarRoot, "[rdxToolbarRoot]", ["rdxToolbarRoot"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxCompositeRoot; inputs: {}; outputs: {}; }]>;
149
+ }
150
+ interface RdxToolbarItemMetadata {
151
+ [key: string]: unknown;
152
+ disabled: boolean;
153
+ focusableWhenDisabled: boolean;
154
+ }
155
+
156
+ /**
157
+ * A separator between toolbar items or groups.
158
+ *
159
+ * @see https://base-ui.com/react/components/toolbar
160
+ */
161
+ declare class RdxToolbarSeparator {
162
+ protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
163
+ private readonly separator;
164
+ /**
165
+ * The separator orientation. Defaults to the opposite of the toolbar orientation.
166
+ */
167
+ readonly orientation: _angular_core.InputSignal<Orientation | undefined>;
168
+ constructor();
169
+ private defaultOrientation;
170
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarSeparator, never>;
171
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarSeparator, "[rdxToolbarSeparator]", ["rdxToolbarSeparator"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxSeparatorRootDirective; inputs: {}; outputs: {}; }]>;
165
172
  }
166
173
 
167
174
  interface RdxToolbarRootContext {
@@ -179,7 +186,7 @@ interface RdxToolbarGroupContext {
179
186
  declare const injectToolbarGroupContext: _radix_ng_primitives_core.InjectContext<RdxToolbarGroupContext>;
180
187
  declare const provideToolbarGroupContext: (useFactory: () => RdxToolbarGroupContext) => _angular_core.Provider;
181
188
 
182
- declare const toolbarImports: (typeof RdxToolbarSeparator)[];
189
+ declare const toolbarImports: (typeof RdxToolbarButton | typeof RdxToolbarGroup | typeof RdxToolbarInput | typeof RdxToolbarLink | typeof RdxToolbarRoot | typeof RdxToolbarSeparator)[];
183
190
  declare class RdxToolbarModule {
184
191
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarModule, never>;
185
192
  static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxToolbarModule, never, [typeof RdxToolbarRoot, typeof RdxToolbarButton, typeof RdxToolbarLink, typeof RdxToolbarInput, typeof RdxToolbarGroup, typeof RdxToolbarSeparator], [typeof RdxToolbarRoot, typeof RdxToolbarButton, typeof RdxToolbarLink, typeof RdxToolbarInput, typeof RdxToolbarGroup, typeof RdxToolbarSeparator]>;
@@ -1 +0,0 @@
1
- # @radix-ng/primitives/collection
@@ -1,72 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, ElementRef, input, booleanAttribute, Directive, contentChildren, computed } from '@angular/core';
3
-
4
- /**
5
- * Marks an element as a member of a collection. Items are discovered by the
6
- * {@link RdxCollectionProvider} via `contentChildren`, so registration is automatic — no manual
7
- * book-keeping or marker attributes are needed.
8
- *
9
- * @group Components
10
- */
11
- class RdxCollectionItem {
12
- constructor() {
13
- /** The host element of the item, read straight off the instance. */
14
- this.element = inject((ElementRef)).nativeElement;
15
- /** Arbitrary data associated with the item. */
16
- this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
17
- /** Whether the item is disabled. Disabled items are excluded from {@link RdxCollectionProvider.enabledItems}. */
18
- this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
19
- }
20
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCollectionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
21
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxCollectionItem, isStandalone: true, selector: "[rdxCollectionItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["rdxCollectionItem"], ngImport: i0 }); }
22
- }
23
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCollectionItem, decorators: [{
24
- type: Directive,
25
- args: [{
26
- selector: '[rdxCollectionItem]',
27
- exportAs: 'rdxCollectionItem'
28
- }]
29
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
30
-
31
- /**
32
- * Collects {@link RdxCollectionItem} descendants in DOM order, reactively, using Angular's
33
- * `contentChildren`. Matches host directives too, so items composed via `hostDirectives` are found.
34
- *
35
- * @group Components
36
- */
37
- class RdxCollectionProvider {
38
- constructor() {
39
- /** All items, in DOM order. */
40
- this.items = contentChildren(RdxCollectionItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
41
- /** Items that are not disabled. Recomputes when an item's `disabled` flag changes. */
42
- this.enabledItems = computed(() => this.items().filter((item) => !item.disabled()), ...(ngDevMode ? [{ debugName: "enabledItems" }] : /* istanbul ignore next */ []));
43
- }
44
- /** Returns the collection items, excluding disabled ones unless `includeDisabled` is `true`. */
45
- getItems(includeDisabled = false) {
46
- return includeDisabled ? this.items() : this.enabledItems();
47
- }
48
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCollectionProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
49
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxCollectionProvider, isStandalone: true, selector: "[rdxCollectionProvider]", queries: [{ propertyName: "items", predicate: RdxCollectionItem, descendants: true, isSignal: true }], exportAs: ["rdxCollectionProvider"], ngImport: i0 }); }
50
- }
51
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCollectionProvider, decorators: [{
52
- type: Directive,
53
- args: [{
54
- selector: '[rdxCollectionProvider]',
55
- exportAs: 'rdxCollectionProvider'
56
- }]
57
- }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RdxCollectionItem), { ...{ descendants: true }, isSignal: true }] }] } });
58
-
59
- /**
60
- * Convenience accessor for the nearest {@link RdxCollectionProvider}. Equivalent to
61
- * `inject(RdxCollectionProvider)`; returns the provider with its reactive `items`/`enabledItems`.
62
- */
63
- function useCollection() {
64
- return inject(RdxCollectionProvider);
65
- }
66
-
67
- /**
68
- * Generated bundle index. Do not edit.
69
- */
70
-
71
- export { RdxCollectionItem, RdxCollectionProvider, useCollection };
72
- //# sourceMappingURL=radix-ng-primitives-collection.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"radix-ng-primitives-collection.mjs","sources":["../../../packages/primitives/collection/src/collection-item.ts","../../../packages/primitives/collection/src/collection-provider.ts","../../../packages/primitives/collection/src/use-collection.ts","../../../packages/primitives/collection/radix-ng-primitives-collection.ts"],"sourcesContent":["import { booleanAttribute, Directive, ElementRef, inject, input } from '@angular/core';\n\n/**\n * Marks an element as a member of a collection. Items are discovered by the\n * {@link RdxCollectionProvider} via `contentChildren`, so registration is automatic — no manual\n * book-keeping or marker attributes are needed.\n *\n * @group Components\n */\n@Directive({\n selector: '[rdxCollectionItem]',\n exportAs: 'rdxCollectionItem'\n})\nexport class RdxCollectionItem<T = unknown> {\n /** The host element of the item, read straight off the instance. */\n readonly element = inject(ElementRef<HTMLElement>).nativeElement as HTMLElement;\n\n /** Arbitrary data associated with the item. */\n readonly value = input<T>();\n\n /** Whether the item is disabled. Disabled items are excluded from {@link RdxCollectionProvider.enabledItems}. */\n readonly disabled = input(false, { transform: booleanAttribute });\n}\n","import { computed, contentChildren, Directive } from '@angular/core';\nimport { RdxCollectionItem } from './collection-item';\n\n/**\n * Collects {@link RdxCollectionItem} descendants in DOM order, reactively, using Angular's\n * `contentChildren`. Matches host directives too, so items composed via `hostDirectives` are found.\n *\n * @group Components\n */\n@Directive({\n selector: '[rdxCollectionProvider]',\n exportAs: 'rdxCollectionProvider'\n})\nexport class RdxCollectionProvider {\n /** All items, in DOM order. */\n readonly items = contentChildren(RdxCollectionItem, { descendants: true });\n\n /** Items that are not disabled. Recomputes when an item's `disabled` flag changes. */\n readonly enabledItems = computed(() => this.items().filter((item) => !item.disabled()));\n\n /** Returns the collection items, excluding disabled ones unless `includeDisabled` is `true`. */\n getItems(includeDisabled = false): readonly RdxCollectionItem[] {\n return includeDisabled ? this.items() : this.enabledItems();\n }\n}\n","import { inject } from '@angular/core';\nimport { RdxCollectionProvider } from './collection-provider';\n\n/**\n * Convenience accessor for the nearest {@link RdxCollectionProvider}. Equivalent to\n * `inject(RdxCollectionProvider)`; returns the provider with its reactive `items`/`enabledItems`.\n */\nexport function useCollection(): RdxCollectionProvider {\n return inject(RdxCollectionProvider);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}