@radix-ng/primitives 0.27.0 → 0.29.0

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 (59) hide show
  1. package/collapsible/src/collapsible-content.directive.d.ts +1 -1
  2. package/collapsible/src/collapsible-root.directive.d.ts +11 -11
  3. package/dialog/src/dialog-close.directive.d.ts +1 -1
  4. package/fesm2022/radix-ng-primitives-collapsible.mjs +20 -27
  5. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  6. package/fesm2022/radix-ng-primitives-dialog.mjs +2 -3
  7. package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
  8. package/fesm2022/radix-ng-primitives-presence.mjs +250 -0
  9. package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -0
  10. package/fesm2022/radix-ng-primitives-separator.mjs +1 -1
  11. package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
  12. package/fesm2022/radix-ng-primitives-slider.mjs +101 -72
  13. package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
  14. package/fesm2022/radix-ng-primitives-toggle-group.mjs +137 -280
  15. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
  16. package/fesm2022/radix-ng-primitives-toggle.mjs +15 -2
  17. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
  18. package/fesm2022/radix-ng-primitives-toolbar.mjs +155 -0
  19. package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -0
  20. package/hover-card/src/hover-card-root.directive.d.ts +4 -4
  21. package/package.json +17 -8
  22. package/popover/src/popover-root.directive.d.ts +4 -4
  23. package/presence/index.d.ts +4 -0
  24. package/presence/src/presence.d.ts +42 -0
  25. package/presence/src/transitions/transition.collapse.d.ts +15 -0
  26. package/presence/src/transitions/transition.toast.d.ts +3 -0
  27. package/presence/src/types.d.ts +15 -0
  28. package/presence/src/utils.d.ts +42 -0
  29. package/schematics/collection.json +11 -0
  30. package/schematics/ng-add/index.d.ts +7 -0
  31. package/schematics/ng-add/index.js +31 -0
  32. package/schematics/ng-add/index.js.map +1 -0
  33. package/schematics/ng-add/schema.d.ts +3 -0
  34. package/schematics/ng-add/schema.js +3 -0
  35. package/schematics/ng-add/schema.js.map +1 -0
  36. package/separator/src/separator.directive.d.ts +1 -1
  37. package/slider/src/slider-horizontal.component.d.ts +6 -7
  38. package/slider/src/slider-impl.directive.d.ts +6 -7
  39. package/slider/src/slider-root.component.d.ts +78 -4
  40. package/slider/src/slider-vertical.component.d.ts +6 -7
  41. package/toggle/src/toggle.directive.d.ts +14 -1
  42. package/toggle-group/index.d.ts +1 -1
  43. package/toggle-group/src/toggle-group-item.directive.d.ts +20 -28
  44. package/toggle-group/src/toggle-group-item.token.d.ts +1 -0
  45. package/toggle-group/src/toggle-group-without-focus.directive.d.ts +69 -0
  46. package/toggle-group/src/toggle-group.directive.d.ts +26 -43
  47. package/toggle-group/src/toggle-group.token.d.ts +8 -4
  48. package/toolbar/README.md +3 -0
  49. package/toolbar/index.d.ts +19 -0
  50. package/toolbar/src/toolbar-button.directive.d.ts +11 -0
  51. package/toolbar/src/toolbar-link.directive.d.ts +7 -0
  52. package/toolbar/src/toolbar-root.directive.d.ts +8 -0
  53. package/toolbar/src/toolbar-root.token.d.ts +5 -0
  54. package/toolbar/src/toolbar-separator.directive.d.ts +6 -0
  55. package/toolbar/src/toolbar-toggle-group.directive.d.ts +6 -0
  56. package/toolbar/src/toolbar-toggle-item.directive.d.ts +6 -0
  57. package/tooltip/src/tooltip-root.directive.d.ts +4 -4
  58. package/compodoc/documentation.json +0 -39701
  59. package/toggle-group/src/toggle-group-multiple.directive.d.ts +0 -99
@@ -1,68 +1,68 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, inject, ElementRef, booleanAttribute, Directive, Input, EventEmitter, ContentChildren } from '@angular/core';
3
- import { FocusKeyManager } from '@angular/cdk/a11y';
2
+ import { InjectionToken, inject, input, booleanAttribute, computed, effect, Directive, model, output, signal, forwardRef } from '@angular/core';
3
+ import * as i1 from '@radix-ng/primitives/roving-focus';
4
+ import { RdxRovingFocusItemDirective, RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';
5
+ import * as i2 from '@radix-ng/primitives/toggle';
6
+ import { RdxToggleDirective } from '@radix-ng/primitives/toggle';
4
7
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
5
8
 
6
9
  const RdxToggleGroupItemToken = new InjectionToken('RdxToggleGroupItemToken');
10
+ function injectToggleGroupItem() {
11
+ return inject(RdxToggleGroupItemToken);
12
+ }
7
13
 
8
14
  const RdxToggleGroupToken = new InjectionToken('RdxToggleGroupToken');
9
15
  function injectToggleGroup() {
10
16
  return inject(RdxToggleGroupToken);
11
17
  }
12
18
 
19
+ /**
20
+ * @group Components
21
+ */
13
22
  class RdxToggleGroupItemDirective {
14
23
  constructor() {
24
+ this.rdxToggleDirective = inject(RdxToggleDirective);
25
+ this.rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);
15
26
  /**
16
27
  * Access the toggle group.
17
28
  * @ignore
18
29
  */
19
- this.toggleGroup = injectToggleGroup();
20
- this.elementRef = inject(ElementRef);
30
+ this.rootContext = injectToggleGroup();
31
+ /**
32
+ * The value of this toggle button.
33
+ *
34
+ * @group Props
35
+ */
36
+ this.value = input.required();
21
37
  /**
22
38
  * Whether this toggle button is disabled.
23
- * @default false
39
+ * @defaultValue false
40
+ * @group Props
24
41
  */
25
- this.disabled = false;
26
- }
27
- /**
28
- * Whether this toggle button is checked.
29
- */
30
- get checked() {
31
- return this.toggleGroup.isSelected(this.value);
32
- }
33
- /**
34
- * @ignore
35
- */
36
- ngOnChanges(changes) {
37
- if ('disabled' in changes) {
38
- // TODO
39
- }
40
- }
41
- /**
42
- * @ignore
43
- */
44
- focus() {
45
- this.elementRef.nativeElement.focus();
42
+ this.disabled = input(false, { transform: booleanAttribute });
43
+ this.isPressed = computed(() => {
44
+ return this.rootContext.type() === 'single'
45
+ ? this.rootContext.value() === this.value()
46
+ : this.rootContext.value()?.includes(this.value());
47
+ });
48
+ this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled());
49
+ effect(() => {
50
+ this.rdxToggleDirective.pressed.set(!!this.isPressed());
51
+ this.rdxToggleDirective.disabledModel.set(this.isDisabled());
52
+ this.rdxRovingFocusItemDirective.active = !!this.isPressed();
53
+ });
46
54
  }
47
55
  /**
48
56
  * @ignore
49
57
  */
50
58
  toggle() {
51
- if (this.disabled) {
59
+ if (this.disabled()) {
52
60
  return;
53
61
  }
54
- this.toggleGroup.toggle(this.value);
55
- }
56
- /**
57
- * Ensure the disabled state is propagated to the roving focus item.
58
- * @internal
59
- * @ignore
60
- */
61
- updateDisabled() {
62
- // TODO
62
+ this.rootContext.toggle(this.value());
63
63
  }
64
64
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
65
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: RdxToggleGroupItemDirective, isStandalone: true, selector: "[rdxToggleGroupItem]", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "role": "radio" }, listeners: { "click": "toggle()", "focus": "focus()" }, properties: { "attr.aria-checked": "checked", "attr.aria-disabled": "disabled || toggleGroup.disabled", "attr.aria-pressed": "undefined", "attr.data-disabled": "disabled || toggleGroup.disabled", "attr.data-state": "checked ? \"on\" : \"off\"", "attr.data-orientation": "toggleGroup.orientation" } }, providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }], exportAs: ["rdxToggleGroupItem"], usesOnChanges: true, ngImport: i0 }); }
65
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxToggleGroupItemDirective, isStandalone: true, selector: "[rdxToggleGroupItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle()" } }, providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }], exportAs: ["rdxToggleGroupItem"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable", "active", "active", "allowShiftKey", "allowShiftKey"] }, { directive: i2.RdxToggleDirective, inputs: ["pressed", "pressed", "disabled", "disabled"] }], ngImport: i0 }); }
66
66
  }
67
67
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupItemDirective, decorators: [{
68
68
  type: Directive,
@@ -71,117 +71,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
71
71
  exportAs: 'rdxToggleGroupItem',
72
72
  standalone: true,
73
73
  providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }],
74
+ hostDirectives: [
75
+ {
76
+ directive: RdxRovingFocusItemDirective,
77
+ inputs: ['focusable', 'active', 'allowShiftKey']
78
+ },
79
+ {
80
+ directive: RdxToggleDirective,
81
+ inputs: ['pressed', 'disabled']
82
+ }
83
+ ],
74
84
  host: {
75
- role: 'radio',
76
- '[attr.aria-checked]': 'checked',
77
- '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',
78
- '[attr.aria-pressed]': 'undefined',
79
- '[attr.data-disabled]': 'disabled || toggleGroup.disabled',
80
- '[attr.data-state]': 'checked ? "on" : "off"',
81
- '[attr.data-orientation]': 'toggleGroup.orientation',
82
- '(click)': 'toggle()',
83
- '(focus)': 'focus()'
85
+ '(click)': 'toggle()'
84
86
  }
85
87
  }]
86
- }], propDecorators: { value: [{
87
- type: Input,
88
- args: [{ required: true }]
89
- }], disabled: [{
90
- type: Input,
91
- args: [{ transform: booleanAttribute }]
92
- }] } });
88
+ }], ctorParameters: () => [] });
93
89
 
94
- class RdxToggleGroupMultipleDirective {
90
+ let nextId$1 = 0;
91
+ class RdxToggleGroupWithoutFocusDirective {
95
92
  constructor() {
96
93
  /**
97
- * The selected toggle button.
94
+ * @ignore
98
95
  */
99
- this.value = [];
96
+ this.id = `rdx-toggle-group-${nextId$1++}`;
100
97
  /**
101
- * The orientation of the toggle group.
102
- * @default 'horizontal'
98
+ * @group Props
103
99
  */
104
- this.orientation = 'horizontal';
100
+ this.value = model(undefined);
105
101
  /**
106
- * Whether the toggle group is disabled.
107
- * @default false
102
+ * @group Props
108
103
  */
109
- this.disabled = false;
104
+ this.type = input('single');
110
105
  /**
111
- * Whether the toggle group roving focus should wrap.
112
- * @default true
106
+ * Whether the toggle group is disabled.
107
+ * @defaultValue false
108
+ * @group Props
113
109
  */
114
- this.wrap = true;
110
+ this.disabled = input(false, { transform: booleanAttribute });
115
111
  /**
116
112
  * Event emitted when the selected toggle button changes.
113
+ * @group Emits
117
114
  */
118
- this.valueChange = new EventEmitter();
119
- }
120
- /**
121
- * @ignore
122
- */
123
- ngOnChanges(changes) {
124
- if ('disabled' in changes) {
125
- this.buttons?.forEach((button) => button.updateDisabled());
126
- }
127
- }
128
- /**
129
- * @ignore
130
- */
131
- ngAfterContentInit() {
132
- if (this.disabled) {
133
- this.buttons?.forEach((button) => button.updateDisabled());
134
- }
135
- if (this.buttons) {
136
- this.keyManager = new FocusKeyManager(this.buttons).withWrap();
137
- }
138
- }
139
- onFocusIn() {
140
- if (!this.keyManager.activeItem) {
141
- this.keyManager.setFirstItemActive();
142
- }
143
- }
144
- handleKeydown(event) {
145
- switch (event.key) {
146
- case 'ArrowRight':
147
- case 'ArrowDown':
148
- this.keyManager.setNextItemActive();
149
- event.preventDefault();
150
- break;
151
- case 'ArrowLeft':
152
- case 'ArrowUp':
153
- this.keyManager.setPreviousItemActive();
154
- event.preventDefault();
155
- break;
156
- case 'Home':
157
- this.keyManager.setFirstItemActive();
158
- event.preventDefault();
159
- break;
160
- case 'End':
161
- this.keyManager.setLastItemActive();
162
- event.preventDefault();
163
- break;
164
- case 'Enter':
165
- case ' ':
166
- // eslint-disable-next-line no-case-declarations
167
- const activeItem = this.keyManager.activeItem;
168
- if (activeItem) {
169
- activeItem.toggle();
170
- }
171
- event.preventDefault();
172
- break;
173
- default:
174
- break;
175
- }
176
- }
177
- /**
178
- * Determine if a value is selected.
179
- * @param value The value to check.
180
- * @returns Whether the value is selected.
181
- * @ignore
182
- */
183
- isSelected(value) {
184
- return this.value.includes(value);
115
+ this.onValueChange = output();
116
+ this.accessorDisabled = signal(false);
185
117
  }
186
118
  /**
187
119
  * Toggle a value.
@@ -189,12 +121,21 @@ class RdxToggleGroupMultipleDirective {
189
121
  * @ignore
190
122
  */
191
123
  toggle(value) {
192
- if (this.disabled) {
124
+ if (this.disabled()) {
193
125
  return;
194
126
  }
195
- this.value = this.value.includes(value) ? this.value.filter((v) => v !== value) : [...this.value, value];
196
- this.valueChange.emit(this.value);
197
- this.onChange?.(this.value);
127
+ if (this.type() === 'single') {
128
+ this.value.set(value);
129
+ }
130
+ else {
131
+ this.value.set(((currentValue) => currentValue && Array.isArray(currentValue)
132
+ ? currentValue.includes(value)
133
+ ? currentValue.filter((v) => v !== value) // delete
134
+ : [...currentValue, value] // update
135
+ : [value])(this.value()));
136
+ }
137
+ this.onValueChange.emit(this.value());
138
+ this.onChange?.(this.value());
198
139
  }
199
140
  /**
200
141
  * Select a value from Angular forms.
@@ -202,7 +143,7 @@ class RdxToggleGroupMultipleDirective {
202
143
  * @ignore
203
144
  */
204
145
  writeValue(value) {
205
- this.value = value;
146
+ this.value.set(value);
206
147
  }
207
148
  /**
208
149
  * Register a callback to be called when the value changes.
@@ -226,161 +167,96 @@ class RdxToggleGroupMultipleDirective {
226
167
  * @ignore
227
168
  */
228
169
  setDisabledState(isDisabled) {
229
- this.disabled = isDisabled;
230
- this.buttons?.forEach((button) => button.updateDisabled());
170
+ this.accessorDisabled.set(isDisabled);
231
171
  }
232
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
233
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: RdxToggleGroupMultipleDirective, isStandalone: true, selector: "[rdxToggleGroupMultiple]", inputs: { value: "value", orientation: "orientation", disabled: ["disabled", "disabled", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], valueChange: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "keydown": "handleKeydown($event)", "focusin": "onFocusIn()", "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
234
- { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective },
235
- { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }
236
- ], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupItemToken }], exportAs: ["rdxToggleGroupMultiple"], usesOnChanges: true, ngImport: i0 }); }
172
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupWithoutFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
173
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxToggleGroupWithoutFocusDirective, isStandalone: true, selector: "[rdxToggleGroupWithoutFocus]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" } }, providers: [
174
+ { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupWithoutFocusDirective },
175
+ { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupWithoutFocusDirective, multi: true }
176
+ ], exportAs: ["rdxToggleGroupWithoutFocus"], ngImport: i0 }); }
237
177
  }
238
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupMultipleDirective, decorators: [{
178
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupWithoutFocusDirective, decorators: [{
239
179
  type: Directive,
240
180
  args: [{
241
- selector: '[rdxToggleGroupMultiple]',
242
- exportAs: 'rdxToggleGroupMultiple',
181
+ selector: '[rdxToggleGroupWithoutFocus]',
182
+ exportAs: 'rdxToggleGroupWithoutFocus',
243
183
  standalone: true,
244
184
  providers: [
245
- { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective },
246
- { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }
185
+ { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupWithoutFocusDirective },
186
+ { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupWithoutFocusDirective, multi: true }
247
187
  ],
248
188
  host: {
249
189
  role: 'group',
250
- '[attr.data-orientation]': 'orientation',
251
- '(keydown)': 'handleKeydown($event)',
252
- '(focusin)': 'onFocusIn()',
253
190
  '(focusout)': 'onTouched?.()'
254
191
  }
255
192
  }]
256
- }], propDecorators: { value: [{
257
- type: Input
258
- }], orientation: [{
259
- type: Input
260
- }], disabled: [{
261
- type: Input,
262
- args: [{ transform: booleanAttribute }]
263
- }], wrap: [{
264
- type: Input,
265
- args: [{ transform: booleanAttribute }]
266
- }], valueChange: [{
267
- type: Input
268
- }], buttons: [{
269
- type: ContentChildren,
270
- args: [RdxToggleGroupItemToken]
271
- }] } });
193
+ }] });
272
194
 
195
+ let nextId = 0;
196
+ /**
197
+ * @group Components
198
+ */
273
199
  class RdxToggleGroupDirective {
274
200
  constructor() {
275
201
  /**
276
- * The selected toggle button.
202
+ * @ignore
277
203
  */
278
- this.value = null;
204
+ this.id = `rdx-toggle-group-${nextId++}`;
279
205
  /**
280
- * The orientation of the toggle group.
281
- * @default 'horizontal'
206
+ * @group Props
282
207
  */
283
- this.orientation = 'horizontal';
208
+ this.value = model(undefined);
284
209
  /**
285
- * Whether the toggle group is disabled.
286
- * @default false
210
+ * @group Props
287
211
  */
288
- this.disabled = false;
212
+ this.type = input('single');
289
213
  /**
290
- * Whether the toggle group roving focus should wrap.
291
- * @default true
214
+ * Whether the toggle group is disabled.
215
+ * @defaultValue false
216
+ * @group Props
292
217
  */
293
- this.wrap = true;
218
+ this.disabled = input(false, { transform: booleanAttribute });
294
219
  /**
295
220
  * Event emitted when the selected toggle button changes.
221
+ * @group Emits
296
222
  */
297
- this.valueChange = new EventEmitter();
298
- }
299
- ngOnChanges(changes) {
300
- if ('disabled' in changes) {
301
- this.buttons?.forEach((button) => button.updateDisabled());
302
- }
303
- }
304
- ngAfterContentInit() {
305
- if (this.disabled) {
306
- this.buttons?.forEach((button) => button.updateDisabled());
307
- }
308
- if (this.buttons) {
309
- this.keyManager = new FocusKeyManager(this.buttons).withWrap();
310
- }
311
- }
312
- onFocusIn() {
313
- if (!this.keyManager.activeItem) {
314
- this.keyManager.setFirstItemActive();
315
- }
316
- }
317
- handleKeydown(event) {
318
- switch (event.key) {
319
- case 'ArrowRight':
320
- case 'ArrowDown':
321
- this.keyManager.setNextItemActive();
322
- event.preventDefault();
323
- break;
324
- case 'ArrowLeft':
325
- case 'ArrowUp':
326
- this.keyManager.setPreviousItemActive();
327
- event.preventDefault();
328
- break;
329
- case 'Home':
330
- this.keyManager.setFirstItemActive();
331
- event.preventDefault();
332
- break;
333
- case 'End':
334
- this.keyManager.setLastItemActive();
335
- event.preventDefault();
336
- break;
337
- case 'Enter':
338
- case ' ':
339
- // eslint-disable-next-line no-case-declarations
340
- const activeItem = this.keyManager.activeItem;
341
- if (activeItem) {
342
- activeItem.toggle();
343
- }
344
- event.preventDefault();
345
- break;
346
- default:
347
- break;
348
- }
349
- }
350
- /**
351
- * Determine if a value is selected.
352
- * @param value The value to check.
353
- * @returns Whether the value is selected.
354
- * @internal
355
- */
356
- isSelected(value) {
357
- return this.value === value;
223
+ this.onValueChange = output();
224
+ this.accessorDisabled = signal(false);
358
225
  }
359
226
  /**
360
227
  * Toggle a value.
361
228
  * @param value The value to toggle.
362
- * @internal
229
+ * @ignore
363
230
  */
364
231
  toggle(value) {
365
- if (this.disabled) {
232
+ if (this.disabled()) {
366
233
  return;
367
234
  }
368
- this.value = this.value === value ? null : value;
369
- this.valueChange.emit(this.value);
370
- this.onChange?.(this.value);
235
+ if (this.type() === 'single') {
236
+ this.value.set(value);
237
+ }
238
+ else {
239
+ this.value.set(((currentValue) => currentValue && Array.isArray(currentValue)
240
+ ? currentValue.includes(value)
241
+ ? currentValue.filter((v) => v !== value) // delete
242
+ : [...currentValue, value] // update
243
+ : [value])(this.value()));
244
+ }
245
+ this.onValueChange.emit(this.value());
246
+ this.onChange?.(this.value());
371
247
  }
372
248
  /**
373
249
  * Select a value from Angular forms.
374
250
  * @param value The value to select.
375
- * @internal
251
+ * @ignore
376
252
  */
377
253
  writeValue(value) {
378
- this.value = value;
254
+ this.value.set(value);
379
255
  }
380
256
  /**
381
257
  * Register a callback to be called when the value changes.
382
258
  * @param fn The callback to register.
383
- * @internal
259
+ * @ignore
384
260
  */
385
261
  registerOnChange(fn) {
386
262
  this.onChange = fn;
@@ -388,7 +264,7 @@ class RdxToggleGroupDirective {
388
264
  /**
389
265
  * Register a callback to be called when the toggle group is touched.
390
266
  * @param fn The callback to register.
391
- * @internal
267
+ * @ignore
392
268
  */
393
269
  registerOnTouched(fn) {
394
270
  this.onTouched = fn;
@@ -396,56 +272,37 @@ class RdxToggleGroupDirective {
396
272
  /**
397
273
  * Set the disabled state of the toggle group.
398
274
  * @param isDisabled Whether the toggle group is disabled.
399
- * @internal
275
+ * @ignore
400
276
  */
401
277
  setDisabledState(isDisabled) {
402
- this.disabled = isDisabled;
403
- this.buttons?.forEach((button) => button.updateDisabled());
278
+ this.accessorDisabled.set(isDisabled);
404
279
  }
405
280
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
406
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: RdxToggleGroupDirective, isStandalone: true, selector: "[rdxToggleGroup]", inputs: { value: "value", orientation: "orientation", disabled: ["disabled", "disabled", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], valueChange: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()", "focusin": "onFocusIn()", "keydown": "handleKeydown($event)" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
407
- { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
408
- { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
409
- ], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupItemToken }], exportAs: ["rdxToggleGroup"], usesOnChanges: true, ngImport: i0 }); }
281
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxToggleGroupDirective, isStandalone: true, selector: "[rdxToggleGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" } }, providers: [
282
+ { provide: RdxToggleGroupToken, useExisting: forwardRef(() => RdxToggleGroupDirective) },
283
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RdxToggleGroupDirective), multi: true }
284
+ ], exportAs: ["rdxToggleGroup"], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["dir", "dir", "orientation", "orientation", "loop", "loop"] }], ngImport: i0 }); }
410
285
  }
411
286
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupDirective, decorators: [{
412
287
  type: Directive,
413
288
  args: [{
414
289
  selector: '[rdxToggleGroup]',
415
290
  exportAs: 'rdxToggleGroup',
416
- standalone: true,
417
291
  providers: [
418
- { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
419
- { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
292
+ { provide: RdxToggleGroupToken, useExisting: forwardRef(() => RdxToggleGroupDirective) },
293
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RdxToggleGroupDirective), multi: true }
420
294
  ],
295
+ hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],
421
296
  host: {
422
297
  role: 'group',
423
- '[attr.data-orientation]': 'orientation',
424
- '(focusout)': 'onTouched?.()',
425
- '(focusin)': 'onFocusIn()',
426
- '(keydown)': 'handleKeydown($event)'
298
+ '(focusout)': 'onTouched?.()'
427
299
  }
428
300
  }]
429
- }], propDecorators: { value: [{
430
- type: Input
431
- }], orientation: [{
432
- type: Input
433
- }], disabled: [{
434
- type: Input,
435
- args: [{ transform: booleanAttribute }]
436
- }], wrap: [{
437
- type: Input,
438
- args: [{ transform: booleanAttribute }]
439
- }], valueChange: [{
440
- type: Input
441
- }], buttons: [{
442
- type: ContentChildren,
443
- args: [RdxToggleGroupItemToken]
444
- }] } });
301
+ }] });
445
302
 
446
303
  /**
447
304
  * Generated bundle index. Do not edit.
448
305
  */
449
306
 
450
- export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken, RdxToggleGroupMultipleDirective, RdxToggleGroupToken, injectToggleGroup };
307
+ export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken, RdxToggleGroupToken, RdxToggleGroupWithoutFocusDirective, injectToggleGroup, injectToggleGroupItem };
451
308
  //# sourceMappingURL=radix-ng-primitives-toggle-group.mjs.map