@radix-ng/primitives 0.26.0 → 0.28.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.
- package/collapsible/src/collapsible-content.directive.d.ts +1 -1
- package/collapsible/src/collapsible-root.directive.d.ts +11 -11
- package/compodoc/documentation.json +13169 -6206
- package/dialog/src/dialog-close.directive.d.ts +1 -1
- package/fesm2022/radix-ng-primitives-collapsible.mjs +20 -27
- package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +2 -3
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-hover-card.mjs +1213 -0
- package/fesm2022/radix-ng-primitives-hover-card.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-popover.mjs +1 -3
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs +250 -0
- package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +72 -336
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle.mjs +15 -2
- package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tooltip.mjs +23 -5
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/hover-card/README.md +3 -0
- package/hover-card/index.d.ts +20 -0
- package/hover-card/src/hover-card-anchor.directive.d.ts +28 -0
- package/hover-card/src/hover-card-anchor.token.d.ts +3 -0
- package/hover-card/src/hover-card-arrow.directive.d.ts +40 -0
- package/hover-card/src/hover-card-arrow.token.d.ts +3 -0
- package/hover-card/src/hover-card-close.directive.d.ts +18 -0
- package/hover-card/src/hover-card-close.token.d.ts +3 -0
- package/hover-card/src/hover-card-content-attributes.component.d.ts +25 -0
- package/hover-card/src/hover-card-content-attributes.token.d.ts +3 -0
- package/hover-card/src/hover-card-content.directive.d.ts +104 -0
- package/hover-card/src/hover-card-root.directive.d.ts +168 -0
- package/hover-card/src/hover-card-root.inject.d.ts +3 -0
- package/hover-card/src/hover-card-trigger.directive.d.ts +26 -0
- package/hover-card/src/hover-card.types.d.ts +18 -0
- package/hover-card/src/utils/cdk-event.service.d.ts +30 -0
- package/hover-card/src/utils/constants.d.ts +1 -0
- package/hover-card/src/utils/types.d.ts +7 -0
- package/package.json +9 -1
- package/popover/src/popover-root.directive.d.ts +4 -4
- package/popover/src/popover-trigger.directive.d.ts +1 -1
- package/presence/index.d.ts +4 -0
- package/presence/src/presence.d.ts +42 -0
- package/presence/src/transitions/transition.collapse.d.ts +15 -0
- package/presence/src/transitions/transition.toast.d.ts +3 -0
- package/presence/src/types.d.ts +15 -0
- package/presence/src/utils.d.ts +42 -0
- package/toggle/src/toggle.directive.d.ts +14 -1
- package/toggle-group/index.d.ts +0 -1
- package/toggle-group/src/toggle-group-item.directive.d.ts +13 -27
- package/toggle-group/src/toggle-group-item.token.d.ts +1 -0
- package/toggle-group/src/toggle-group.directive.d.ts +17 -45
- package/toggle-group/src/toggle-group.token.d.ts +2 -3
- package/tooltip/src/tooltip-content-attributes.component.d.ts +8 -0
- package/tooltip/src/tooltip-root.directive.d.ts +4 -4
- package/toggle-group/src/toggle-group-multiple.directive.d.ts +0 -99
@@ -1,9 +1,15 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import { InjectionToken, inject,
|
3
|
-
import
|
2
|
+
import { InjectionToken, inject, input, booleanAttribute, computed, effect, Directive, model, output, signal } 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() {
|
@@ -12,57 +18,45 @@ function injectToggleGroup() {
|
|
12
18
|
|
13
19
|
class RdxToggleGroupItemDirective {
|
14
20
|
constructor() {
|
21
|
+
this.rdxToggleDirective = inject(RdxToggleDirective);
|
22
|
+
this.rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);
|
15
23
|
/**
|
16
24
|
* Access the toggle group.
|
17
25
|
* @ignore
|
18
26
|
*/
|
19
|
-
this.
|
20
|
-
|
27
|
+
this.rootContext = injectToggleGroup();
|
28
|
+
/**
|
29
|
+
* The value of this toggle button.
|
30
|
+
*/
|
31
|
+
this.value = input.required();
|
21
32
|
/**
|
22
33
|
* Whether this toggle button is disabled.
|
23
34
|
* @default false
|
24
35
|
*/
|
25
|
-
this.disabled = false;
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
if ('disabled' in changes) {
|
38
|
-
// TODO
|
39
|
-
}
|
40
|
-
}
|
41
|
-
/**
|
42
|
-
* @ignore
|
43
|
-
*/
|
44
|
-
focus() {
|
45
|
-
this.elementRef.nativeElement.focus();
|
36
|
+
this.disabled = input(false, { transform: booleanAttribute });
|
37
|
+
this.isPressed = computed(() => {
|
38
|
+
return this.rootContext.type() === 'single'
|
39
|
+
? this.rootContext.value() === this.value()
|
40
|
+
: this.rootContext.value()?.includes(this.value());
|
41
|
+
});
|
42
|
+
this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled());
|
43
|
+
effect(() => {
|
44
|
+
this.rdxToggleDirective.pressed.set(!!this.isPressed());
|
45
|
+
this.rdxToggleDirective.disabledModel.set(this.isDisabled());
|
46
|
+
this.rdxRovingFocusItemDirective.active = !!this.isPressed();
|
47
|
+
});
|
46
48
|
}
|
47
49
|
/**
|
48
50
|
* @ignore
|
49
51
|
*/
|
50
52
|
toggle() {
|
51
|
-
if (this.disabled) {
|
53
|
+
if (this.disabled()) {
|
52
54
|
return;
|
53
55
|
}
|
54
|
-
this.
|
55
|
-
}
|
56
|
-
/**
|
57
|
-
* Ensure the disabled state is propagated to the roving focus item.
|
58
|
-
* @internal
|
59
|
-
* @ignore
|
60
|
-
*/
|
61
|
-
updateDisabled() {
|
62
|
-
// TODO
|
56
|
+
this.rootContext.toggle(this.value());
|
63
57
|
}
|
64
58
|
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: "
|
59
|
+
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
60
|
}
|
67
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupItemDirective, decorators: [{
|
68
62
|
type: Directive,
|
@@ -71,117 +65,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
71
65
|
exportAs: 'rdxToggleGroupItem',
|
72
66
|
standalone: true,
|
73
67
|
providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }],
|
68
|
+
hostDirectives: [
|
69
|
+
{
|
70
|
+
directive: RdxRovingFocusItemDirective,
|
71
|
+
inputs: ['focusable', 'active', 'allowShiftKey']
|
72
|
+
},
|
73
|
+
{
|
74
|
+
directive: RdxToggleDirective,
|
75
|
+
inputs: ['pressed', 'disabled']
|
76
|
+
}
|
77
|
+
],
|
74
78
|
host: {
|
75
|
-
|
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()'
|
79
|
+
'(click)': 'toggle()'
|
84
80
|
}
|
85
81
|
}]
|
86
|
-
}],
|
87
|
-
type: Input,
|
88
|
-
args: [{ required: true }]
|
89
|
-
}], disabled: [{
|
90
|
-
type: Input,
|
91
|
-
args: [{ transform: booleanAttribute }]
|
92
|
-
}] } });
|
82
|
+
}], ctorParameters: () => [] });
|
93
83
|
|
94
|
-
|
84
|
+
let nextId = 0;
|
85
|
+
class RdxToggleGroupDirective {
|
95
86
|
constructor() {
|
96
87
|
/**
|
97
|
-
*
|
98
|
-
*/
|
99
|
-
this.value = [];
|
100
|
-
/**
|
101
|
-
* The orientation of the toggle group.
|
102
|
-
* @default 'horizontal'
|
88
|
+
* @ignore
|
103
89
|
*/
|
104
|
-
this.
|
90
|
+
this.id = `rdx-toggle-group-${nextId++}`;
|
91
|
+
this.value = model(undefined);
|
92
|
+
this.type = input('single');
|
105
93
|
/**
|
106
94
|
* Whether the toggle group is disabled.
|
107
95
|
* @default false
|
108
96
|
*/
|
109
|
-
this.disabled = false;
|
110
|
-
/**
|
111
|
-
* Whether the toggle group roving focus should wrap.
|
112
|
-
* @default true
|
113
|
-
*/
|
114
|
-
this.wrap = true;
|
97
|
+
this.disabled = input(false, { transform: booleanAttribute });
|
115
98
|
/**
|
116
99
|
* Event emitted when the selected toggle button changes.
|
117
100
|
*/
|
118
|
-
this.
|
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);
|
101
|
+
this.onValueChange = output();
|
102
|
+
this.accessorDisabled = signal(false);
|
185
103
|
}
|
186
104
|
/**
|
187
105
|
* Toggle a value.
|
@@ -189,12 +107,21 @@ class RdxToggleGroupMultipleDirective {
|
|
189
107
|
* @ignore
|
190
108
|
*/
|
191
109
|
toggle(value) {
|
192
|
-
if (this.disabled) {
|
110
|
+
if (this.disabled()) {
|
193
111
|
return;
|
194
112
|
}
|
195
|
-
|
196
|
-
|
197
|
-
|
113
|
+
if (this.type() === 'single') {
|
114
|
+
this.value.set(value);
|
115
|
+
}
|
116
|
+
else {
|
117
|
+
this.value.set(((currentValue) => currentValue && Array.isArray(currentValue)
|
118
|
+
? currentValue.includes(value)
|
119
|
+
? currentValue.filter((v) => v !== value) // delete
|
120
|
+
: [...currentValue, value] // update
|
121
|
+
: [value])(this.value()));
|
122
|
+
}
|
123
|
+
this.onValueChange.emit(this.value());
|
124
|
+
this.onChange?.(this.value());
|
198
125
|
}
|
199
126
|
/**
|
200
127
|
* Select a value from Angular forms.
|
@@ -202,7 +129,7 @@ class RdxToggleGroupMultipleDirective {
|
|
202
129
|
* @ignore
|
203
130
|
*/
|
204
131
|
writeValue(value) {
|
205
|
-
this.value
|
132
|
+
this.value.set(value);
|
206
133
|
}
|
207
134
|
/**
|
208
135
|
* Register a callback to be called when the value changes.
|
@@ -226,187 +153,13 @@ class RdxToggleGroupMultipleDirective {
|
|
226
153
|
* @ignore
|
227
154
|
*/
|
228
155
|
setDisabledState(isDisabled) {
|
229
|
-
this.
|
230
|
-
this.buttons?.forEach((button) => button.updateDisabled());
|
231
|
-
}
|
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 }); }
|
237
|
-
}
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupMultipleDirective, decorators: [{
|
239
|
-
type: Directive,
|
240
|
-
args: [{
|
241
|
-
selector: '[rdxToggleGroupMultiple]',
|
242
|
-
exportAs: 'rdxToggleGroupMultiple',
|
243
|
-
standalone: true,
|
244
|
-
providers: [
|
245
|
-
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective },
|
246
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }
|
247
|
-
],
|
248
|
-
host: {
|
249
|
-
role: 'group',
|
250
|
-
'[attr.data-orientation]': 'orientation',
|
251
|
-
'(keydown)': 'handleKeydown($event)',
|
252
|
-
'(focusin)': 'onFocusIn()',
|
253
|
-
'(focusout)': 'onTouched?.()'
|
254
|
-
}
|
255
|
-
}]
|
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
|
-
}] } });
|
272
|
-
|
273
|
-
class RdxToggleGroupDirective {
|
274
|
-
constructor() {
|
275
|
-
/**
|
276
|
-
* The selected toggle button.
|
277
|
-
*/
|
278
|
-
this.value = null;
|
279
|
-
/**
|
280
|
-
* The orientation of the toggle group.
|
281
|
-
* @default 'horizontal'
|
282
|
-
*/
|
283
|
-
this.orientation = 'horizontal';
|
284
|
-
/**
|
285
|
-
* Whether the toggle group is disabled.
|
286
|
-
* @default false
|
287
|
-
*/
|
288
|
-
this.disabled = false;
|
289
|
-
/**
|
290
|
-
* Whether the toggle group roving focus should wrap.
|
291
|
-
* @default true
|
292
|
-
*/
|
293
|
-
this.wrap = true;
|
294
|
-
/**
|
295
|
-
* Event emitted when the selected toggle button changes.
|
296
|
-
*/
|
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;
|
358
|
-
}
|
359
|
-
/**
|
360
|
-
* Toggle a value.
|
361
|
-
* @param value The value to toggle.
|
362
|
-
* @internal
|
363
|
-
*/
|
364
|
-
toggle(value) {
|
365
|
-
if (this.disabled) {
|
366
|
-
return;
|
367
|
-
}
|
368
|
-
this.value = this.value === value ? null : value;
|
369
|
-
this.valueChange.emit(this.value);
|
370
|
-
this.onChange?.(this.value);
|
371
|
-
}
|
372
|
-
/**
|
373
|
-
* Select a value from Angular forms.
|
374
|
-
* @param value The value to select.
|
375
|
-
* @internal
|
376
|
-
*/
|
377
|
-
writeValue(value) {
|
378
|
-
this.value = value;
|
379
|
-
}
|
380
|
-
/**
|
381
|
-
* Register a callback to be called when the value changes.
|
382
|
-
* @param fn The callback to register.
|
383
|
-
* @internal
|
384
|
-
*/
|
385
|
-
registerOnChange(fn) {
|
386
|
-
this.onChange = fn;
|
387
|
-
}
|
388
|
-
/**
|
389
|
-
* Register a callback to be called when the toggle group is touched.
|
390
|
-
* @param fn The callback to register.
|
391
|
-
* @internal
|
392
|
-
*/
|
393
|
-
registerOnTouched(fn) {
|
394
|
-
this.onTouched = fn;
|
395
|
-
}
|
396
|
-
/**
|
397
|
-
* Set the disabled state of the toggle group.
|
398
|
-
* @param isDisabled Whether the toggle group is disabled.
|
399
|
-
* @internal
|
400
|
-
*/
|
401
|
-
setDisabledState(isDisabled) {
|
402
|
-
this.disabled = isDisabled;
|
403
|
-
this.buttons?.forEach((button) => button.updateDisabled());
|
156
|
+
this.accessorDisabled.set(isDisabled);
|
404
157
|
}
|
405
158
|
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: "
|
159
|
+
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: [
|
407
160
|
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
|
408
161
|
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
|
409
|
-
],
|
162
|
+
], exportAs: ["rdxToggleGroup"], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["dir", "dir", "orientation", "orientation", "loop", "loop"] }], ngImport: i0 }); }
|
410
163
|
}
|
411
164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupDirective, decorators: [{
|
412
165
|
type: Directive,
|
@@ -418,34 +171,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
418
171
|
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
|
419
172
|
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
|
420
173
|
],
|
174
|
+
hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],
|
421
175
|
host: {
|
422
176
|
role: 'group',
|
423
|
-
'
|
424
|
-
'(focusout)': 'onTouched?.()',
|
425
|
-
'(focusin)': 'onFocusIn()',
|
426
|
-
'(keydown)': 'handleKeydown($event)'
|
177
|
+
'(focusout)': 'onTouched?.()'
|
427
178
|
}
|
428
179
|
}]
|
429
|
-
}]
|
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
|
-
}] } });
|
180
|
+
}] });
|
445
181
|
|
446
182
|
/**
|
447
183
|
* Generated bundle index. Do not edit.
|
448
184
|
*/
|
449
185
|
|
450
|
-
export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken,
|
186
|
+
export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken, RdxToggleGroupToken, injectToggleGroup, injectToggleGroupItem };
|
451
187
|
//# sourceMappingURL=radix-ng-primitives-toggle-group.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"radix-ng-primitives-toggle-group.mjs","sources":["../../../packages/primitives/toggle-group/src/toggle-group-item.token.ts","../../../packages/primitives/toggle-group/src/toggle-group.token.ts","../../../packages/primitives/toggle-group/src/toggle-group-item.directive.ts","../../../packages/primitives/toggle-group/src/toggle-group-multiple.directive.ts","../../../packages/primitives/toggle-group/src/toggle-group.directive.ts","../../../packages/primitives/toggle-group/radix-ng-primitives-toggle-group.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';\n\nexport const RdxToggleGroupItemToken = new InjectionToken<RdxToggleGroupItemDirective>('RdxToggleGroupItemToken');\n","import { inject, InjectionToken } from '@angular/core';\nimport type { RdxToggleGroupMultipleDirective } from './toggle-group-multiple.directive';\nimport type { RdxToggleGroupDirective } from './toggle-group.directive';\n\nexport const RdxToggleGroupToken = new InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultipleDirective>(\n 'RdxToggleGroupToken'\n);\n\nexport function injectToggleGroup(): RdxToggleGroupDirective | RdxToggleGroupMultipleDirective {\n return inject(RdxToggleGroupToken);\n}\n","import { FocusableOption } from '@angular/cdk/a11y';\nimport { booleanAttribute, Directive, ElementRef, inject, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { injectToggleGroup } from './toggle-group.token';\n\n@Directive({\n selector: '[rdxToggleGroupItem]',\n exportAs: 'rdxToggleGroupItem',\n standalone: true,\n providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }],\n host: {\n role: 'radio',\n '[attr.aria-checked]': 'checked',\n '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',\n '[attr.aria-pressed]': 'undefined',\n\n '[attr.data-disabled]': 'disabled || toggleGroup.disabled',\n '[attr.data-state]': 'checked ? \"on\" : \"off\"',\n '[attr.data-orientation]': 'toggleGroup.orientation',\n\n '(click)': 'toggle()',\n '(focus)': 'focus()'\n }\n})\nexport class RdxToggleGroupItemDirective implements OnChanges, FocusableOption {\n /**\n * Access the toggle group.\n * @ignore\n */\n protected readonly toggleGroup = injectToggleGroup();\n\n private readonly elementRef = inject(ElementRef);\n /**\n * The value of this toggle button.\n */\n @Input({ required: true }) value!: string;\n\n /**\n * Whether this toggle button is disabled.\n * @default false\n */\n @Input({ transform: booleanAttribute }) disabled = false;\n\n /**\n * Whether this toggle button is checked.\n */\n protected get checked(): boolean {\n return this.toggleGroup.isSelected(this.value);\n }\n\n /**\n * @ignore\n */\n ngOnChanges(changes: SimpleChanges): void {\n if ('disabled' in changes) {\n // TODO\n }\n }\n\n /**\n * @ignore\n */\n focus(): void {\n this.elementRef.nativeElement.focus();\n }\n\n /**\n * @ignore\n */\n toggle(): void {\n if (this.disabled) {\n return;\n }\n\n this.toggleGroup.toggle(this.value);\n }\n\n /**\n * Ensure the disabled state is propagated to the roving focus item.\n * @internal\n * @ignore\n */\n updateDisabled(): void {\n // TODO\n }\n}\n","import { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n AfterContentInit,\n booleanAttribute,\n ContentChildren,\n Directive,\n EventEmitter,\n Input,\n OnChanges,\n QueryList,\n SimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n selector: '[rdxToggleGroupMultiple]',\n exportAs: 'rdxToggleGroupMultiple',\n standalone: true,\n providers: [\n { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective },\n { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }\n ],\n host: {\n role: 'group',\n '[attr.data-orientation]': 'orientation',\n\n '(keydown)': 'handleKeydown($event)',\n '(focusin)': 'onFocusIn()',\n '(focusout)': 'onTouched?.()'\n }\n})\nexport class RdxToggleGroupMultipleDirective implements OnChanges, AfterContentInit, ControlValueAccessor {\n /**\n * The selected toggle button.\n */\n @Input() value: ReadonlyArray<string> = [];\n\n /**\n * The orientation of the toggle group.\n * @default 'horizontal'\n */\n @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether the toggle group is disabled.\n * @default false\n */\n @Input({ transform: booleanAttribute }) disabled = false;\n\n /**\n * Whether the toggle group roving focus should wrap.\n * @default true\n */\n @Input({ transform: booleanAttribute }) wrap = true;\n\n /**\n * Event emitted when the selected toggle button changes.\n */\n @Input() readonly valueChange = new EventEmitter<ReadonlyArray<string>>();\n\n /**\n * Access the buttons in the toggle group.\n * @ignore\n */\n @ContentChildren(RdxToggleGroupItemToken)\n protected buttons?: QueryList<RdxToggleGroupItemDirective>;\n\n /**\n * FocusKeyManager to manage keyboard interactions.\n */\n private keyManager!: FocusKeyManager<RdxToggleGroupItemDirective>;\n\n /**\n * The value change callback.\n * @ignore\n */\n private onChange?: (value: ReadonlyArray<string>) => void;\n\n /**\n * onTouch function registered via registerOnTouch (ControlValueAccessor).\n * @ignore\n */\n protected onTouched?: () => void;\n\n /**\n * @ignore\n */\n ngOnChanges(changes: SimpleChanges): void {\n if ('disabled' in changes) {\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n }\n\n /**\n * @ignore\n */\n ngAfterContentInit(): void {\n if (this.disabled) {\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n\n if (this.buttons) {\n this.keyManager = new FocusKeyManager(this.buttons).withWrap();\n }\n }\n\n protected onFocusIn(): void {\n if (!this.keyManager.activeItem) {\n this.keyManager.setFirstItemActive();\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n this.keyManager.setNextItemActive();\n event.preventDefault();\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n this.keyManager.setPreviousItemActive();\n event.preventDefault();\n break;\n case 'Home':\n this.keyManager.setFirstItemActive();\n event.preventDefault();\n break;\n case 'End':\n this.keyManager.setLastItemActive();\n event.preventDefault();\n break;\n case 'Enter':\n case ' ':\n // eslint-disable-next-line no-case-declarations\n const activeItem = this.keyManager.activeItem;\n if (activeItem) {\n activeItem.toggle();\n }\n event.preventDefault();\n break;\n default:\n break;\n }\n }\n\n /**\n * Determine if a value is selected.\n * @param value The value to check.\n * @returns Whether the value is selected.\n * @ignore\n */\n isSelected(value: string): boolean {\n return this.value.includes(value);\n }\n\n /**\n * Toggle a value.\n * @param value The value to toggle.\n * @ignore\n */\n toggle(value: string): void {\n if (this.disabled) {\n return;\n }\n\n this.value = this.value.includes(value) ? this.value.filter((v) => v !== value) : [...this.value, value];\n\n this.valueChange.emit(this.value);\n this.onChange?.(this.value);\n }\n\n /**\n * Select a value from Angular forms.\n * @param value The value to select.\n * @ignore\n */\n writeValue(value: ReadonlyArray<string>): void {\n this.value = value;\n }\n\n /**\n * Register a callback to be called when the value changes.\n * @param fn The callback to register.\n * @ignore\n */\n registerOnChange(fn: (value: ReadonlyArray<string>) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Register a callback to be called when the toggle group is touched.\n * @param fn The callback to register.\n * @ignore\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Set the disabled state of the toggle group.\n * @param isDisabled Whether the toggle group is disabled.\n * @ignore\n */\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n}\n","import { FocusKeyManager } from '@angular/cdk/a11y';\nimport {\n AfterContentInit,\n booleanAttribute,\n ContentChildren,\n Directive,\n EventEmitter,\n Input,\n OnChanges,\n QueryList,\n SimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n selector: '[rdxToggleGroup]',\n exportAs: 'rdxToggleGroup',\n standalone: true,\n providers: [\n { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },\n { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }\n ],\n host: {\n role: 'group',\n '[attr.data-orientation]': 'orientation',\n\n '(focusout)': 'onTouched?.()',\n '(focusin)': 'onFocusIn()',\n '(keydown)': 'handleKeydown($event)'\n }\n})\nexport class RdxToggleGroupDirective implements OnChanges, AfterContentInit, ControlValueAccessor {\n /**\n * The selected toggle button.\n */\n @Input() value: string | null = null;\n\n /**\n * The orientation of the toggle group.\n * @default 'horizontal'\n */\n @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether the toggle group is disabled.\n * @default false\n */\n @Input({ transform: booleanAttribute }) disabled = false;\n\n /**\n * Whether the toggle group roving focus should wrap.\n * @default true\n */\n @Input({ transform: booleanAttribute }) wrap = true;\n\n /**\n * Event emitted when the selected toggle button changes.\n */\n @Input() readonly valueChange = new EventEmitter<string | null>();\n\n /**\n * Access the buttons in the toggle group.\n */\n @ContentChildren(RdxToggleGroupItemToken)\n protected buttons?: QueryList<RdxToggleGroupItemDirective>;\n\n /**\n * FocusKeyManager to manage keyboard interactions.\n */\n private keyManager!: FocusKeyManager<RdxToggleGroupItemDirective>;\n\n /**\n * The value change callback.\n */\n private onChange?: (value: string | null) => void;\n\n /**\n * onTouch function registered via registerOnTouch (ControlValueAccessor).\n */\n protected onTouched?: () => void;\n\n ngOnChanges(changes: SimpleChanges): void {\n if ('disabled' in changes) {\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n }\n\n ngAfterContentInit(): void {\n if (this.disabled) {\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n\n if (this.buttons) {\n this.keyManager = new FocusKeyManager(this.buttons).withWrap();\n }\n }\n\n protected onFocusIn(): void {\n if (!this.keyManager.activeItem) {\n this.keyManager.setFirstItemActive();\n }\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n this.keyManager.setNextItemActive();\n event.preventDefault();\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n this.keyManager.setPreviousItemActive();\n event.preventDefault();\n break;\n case 'Home':\n this.keyManager.setFirstItemActive();\n event.preventDefault();\n break;\n case 'End':\n this.keyManager.setLastItemActive();\n event.preventDefault();\n break;\n case 'Enter':\n case ' ':\n // eslint-disable-next-line no-case-declarations\n const activeItem = this.keyManager.activeItem;\n if (activeItem) {\n activeItem.toggle();\n }\n event.preventDefault();\n break;\n default:\n break;\n }\n }\n\n /**\n * Determine if a value is selected.\n * @param value The value to check.\n * @returns Whether the value is selected.\n * @internal\n */\n isSelected(value: string): boolean {\n return this.value === value;\n }\n\n /**\n * Toggle a value.\n * @param value The value to toggle.\n * @internal\n */\n toggle(value: string): void {\n if (this.disabled) {\n return;\n }\n\n this.value = this.value === value ? null : value;\n this.valueChange.emit(this.value);\n this.onChange?.(this.value);\n }\n\n /**\n * Select a value from Angular forms.\n * @param value The value to select.\n * @internal\n */\n writeValue(value: string): void {\n this.value = value;\n }\n\n /**\n * Register a callback to be called when the value changes.\n * @param fn The callback to register.\n * @internal\n */\n registerOnChange(fn: (value: string | null) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Register a callback to be called when the toggle group is touched.\n * @param fn The callback to register.\n * @internal\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Set the disabled state of the toggle group.\n * @param isDisabled Whether the toggle group is disabled.\n * @internal\n */\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.buttons?.forEach((button) => button.updateDisabled());\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
1
|
+
{"version":3,"file":"radix-ng-primitives-toggle-group.mjs","sources":["../../../packages/primitives/toggle-group/src/toggle-group-item.token.ts","../../../packages/primitives/toggle-group/src/toggle-group.token.ts","../../../packages/primitives/toggle-group/src/toggle-group-item.directive.ts","../../../packages/primitives/toggle-group/src/toggle-group.directive.ts","../../../packages/primitives/toggle-group/radix-ng-primitives-toggle-group.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\nimport type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';\n\nexport const RdxToggleGroupItemToken = new InjectionToken<RdxToggleGroupItemDirective>('RdxToggleGroupItemToken');\n\nexport function injectToggleGroupItem(): RdxToggleGroupItemDirective {\n return inject(RdxToggleGroupItemToken);\n}\n","import { inject, InjectionToken } from '@angular/core';\nimport type { RdxToggleGroupDirective } from './toggle-group.directive';\n\nexport const RdxToggleGroupToken = new InjectionToken<RdxToggleGroupDirective>('RdxToggleGroupToken');\n\nexport function injectToggleGroup(): RdxToggleGroupDirective {\n return inject(RdxToggleGroupToken);\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';\nimport { RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';\nimport { RdxToggleDirective } from '@radix-ng/primitives/toggle';\nimport { RdxToggleGroupItemToken } from './toggle-group-item.token';\nimport { injectToggleGroup } from './toggle-group.token';\n\n@Directive({\n selector: '[rdxToggleGroupItem]',\n exportAs: 'rdxToggleGroupItem',\n standalone: true,\n providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }],\n hostDirectives: [\n {\n directive: RdxRovingFocusItemDirective,\n inputs: ['focusable', 'active', 'allowShiftKey']\n },\n {\n directive: RdxToggleDirective,\n inputs: ['pressed', 'disabled']\n }\n ],\n host: {\n '(click)': 'toggle()'\n }\n})\nexport class RdxToggleGroupItemDirective {\n private readonly rdxToggleDirective = inject(RdxToggleDirective);\n\n private readonly rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);\n\n /**\n * Access the toggle group.\n * @ignore\n */\n protected readonly rootContext = injectToggleGroup();\n\n /**\n * The value of this toggle button.\n */\n readonly value = input.required<string>();\n\n /**\n * Whether this toggle button is disabled.\n * @default false\n */\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n private readonly isPressed = computed(() => {\n return this.rootContext.type() === 'single'\n ? this.rootContext.value() === this.value()\n : this.rootContext.value()?.includes(this.value());\n });\n\n private readonly isDisabled = computed(() => this.rootContext.disabled() || this.disabled());\n\n constructor() {\n effect(() => {\n this.rdxToggleDirective.pressed.set(!!this.isPressed());\n this.rdxToggleDirective.disabledModel.set(this.isDisabled());\n\n this.rdxRovingFocusItemDirective.active = !!this.isPressed();\n });\n }\n\n /**\n * @ignore\n */\n toggle(): void {\n if (this.disabled()) {\n return;\n }\n\n this.rootContext.toggle(this.value());\n }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input, model, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\nlet nextId = 0;\n\n@Directive({\n selector: '[rdxToggleGroup]',\n exportAs: 'rdxToggleGroup',\n standalone: true,\n providers: [\n { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },\n { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }\n ],\n hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],\n host: {\n role: 'group',\n\n '(focusout)': 'onTouched?.()'\n }\n})\nexport class RdxToggleGroupDirective implements ControlValueAccessor {\n /**\n * @ignore\n */\n readonly id: string = `rdx-toggle-group-${nextId++}`;\n\n readonly value = model<string | string[] | undefined>(undefined);\n\n readonly type = input<'single' | 'multiple'>('single');\n\n /**\n * Whether the toggle group is disabled.\n * @default false\n */\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * Event emitted when the selected toggle button changes.\n */\n readonly onValueChange = output<string[] | string | undefined>();\n\n /**\n * The value change callback.\n */\n private onChange?: (value: string | string[] | undefined) => void;\n\n /**\n * onTouch function registered via registerOnTouch (ControlValueAccessor).\n */\n protected onTouched?: () => void;\n\n /**\n * Toggle a value.\n * @param value The value to toggle.\n * @ignore\n */\n toggle(value: string): void {\n if (this.disabled()) {\n return;\n }\n\n if (this.type() === 'single') {\n this.value.set(value);\n } else {\n this.value.set(\n ((currentValue) =>\n currentValue && Array.isArray(currentValue)\n ? currentValue.includes(value)\n ? currentValue.filter((v) => v !== value) // delete\n : [...currentValue, value] // update\n : [value])(this.value())\n );\n }\n\n this.onValueChange.emit(this.value());\n this.onChange?.(this.value());\n }\n\n /**\n * Select a value from Angular forms.\n * @param value The value to select.\n * @ignore\n */\n writeValue(value: string): void {\n this.value.set(value);\n }\n\n /**\n * Register a callback to be called when the value changes.\n * @param fn The callback to register.\n * @ignore\n */\n registerOnChange(fn: (value: string | string[] | undefined) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Register a callback to be called when the toggle group is touched.\n * @param fn The callback to register.\n * @ignore\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n private readonly accessorDisabled = signal(false);\n /**\n * Set the disabled state of the toggle group.\n * @param isDisabled Whether the toggle group is disabled.\n * @ignore\n */\n setDisabledState(isDisabled: boolean): void {\n this.accessorDisabled.set(isDisabled);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
@@ -36,29 +36,42 @@ const TOGGLE_VALUE_ACCESSOR = {
|
|
36
36
|
useExisting: forwardRef(() => RdxToggleDirective),
|
37
37
|
multi: true
|
38
38
|
};
|
39
|
+
/**
|
40
|
+
* @group Components
|
41
|
+
*/
|
39
42
|
class RdxToggleDirective {
|
40
43
|
constructor() {
|
41
44
|
/**
|
42
45
|
* The pressed state of the toggle when it is initially rendered.
|
43
46
|
* Use when you do not need to control its pressed state.
|
47
|
+
*
|
48
|
+
* @group Props
|
44
49
|
*/
|
45
50
|
this.defaultPressed = input(false, { transform: booleanAttribute });
|
46
51
|
/**
|
47
52
|
* The controlled pressed state of the toggle.
|
48
53
|
* Must be used in conjunction with `onPressedChange`.
|
54
|
+
*
|
55
|
+
* @group Props
|
49
56
|
*/
|
50
57
|
this.pressed = model(this.defaultPressed());
|
51
58
|
/**
|
52
59
|
* When true, prevents the user from interacting with the toggle.
|
60
|
+
*
|
61
|
+
* @group Props
|
53
62
|
*/
|
54
63
|
this.disabled = input(false, { transform: booleanAttribute });
|
55
64
|
/** @ignore */
|
56
|
-
this.
|
65
|
+
this.disabledModel = model(this.disabled());
|
66
|
+
/** @ignore */
|
67
|
+
this.disabledState = computed(() => this.disabled() || this.disabledModel() || this.accessorDisabled());
|
57
68
|
this.dataState = computed(() => {
|
58
69
|
return this.pressed() ? 'on' : 'off';
|
59
70
|
});
|
60
71
|
/**
|
61
72
|
* Event handler called when the pressed state of the toggle changes.
|
73
|
+
*
|
74
|
+
* @group Emits
|
62
75
|
*/
|
63
76
|
this.onPressedChange = output();
|
64
77
|
this.accessorDisabled = signal(false);
|
@@ -88,7 +101,7 @@ class RdxToggleDirective {
|
|
88
101
|
this.accessorDisabled.set(isDisabled);
|
89
102
|
}
|
90
103
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
91
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxToggleDirective, isStandalone: true, selector: "[rdxToggle]", inputs: { defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange", onPressedChange: "onPressedChange" }, host: { listeners: { "click": "togglePressed()" }, properties: { "attr.aria-pressed": "pressed()", "attr.data-state": "dataState()", "attr.data-disabled": "disabledState() ? \"\" : undefined", "disabled": "disabledState()" } }, providers: [TOGGLE_VALUE_ACCESSOR], exportAs: ["rdxToggle"], ngImport: i0 }); }
|
104
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxToggleDirective, isStandalone: true, selector: "[rdxToggle]", inputs: { defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledModel: { classPropertyName: "disabledModel", publicName: "disabledModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange", disabledModel: "disabledModelChange", onPressedChange: "onPressedChange" }, host: { listeners: { "click": "togglePressed()" }, properties: { "attr.aria-pressed": "pressed()", "attr.data-state": "dataState()", "attr.data-disabled": "disabledState() ? \"\" : undefined", "disabled": "disabledState()" } }, providers: [TOGGLE_VALUE_ACCESSOR], exportAs: ["rdxToggle"], ngImport: i0 }); }
|
92
105
|
}
|
93
106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleDirective, decorators: [{
|
94
107
|
type: Directive,
|