@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.
- package/collapsible/src/collapsible-content.directive.d.ts +1 -1
- package/collapsible/src/collapsible-root.directive.d.ts +11 -11
- 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-dialog.mjs +2 -3
- package/fesm2022/radix-ng-primitives-dialog.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-separator.mjs +1 -1
- package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs +101 -72
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +137 -280
- 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-toolbar.mjs +155 -0
- package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -0
- package/hover-card/src/hover-card-root.directive.d.ts +4 -4
- package/package.json +17 -8
- package/popover/src/popover-root.directive.d.ts +4 -4
- 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/schematics/collection.json +11 -0
- package/schematics/ng-add/index.d.ts +7 -0
- package/schematics/ng-add/index.js +31 -0
- package/schematics/ng-add/index.js.map +1 -0
- package/schematics/ng-add/schema.d.ts +3 -0
- package/schematics/ng-add/schema.js +3 -0
- package/schematics/ng-add/schema.js.map +1 -0
- package/separator/src/separator.directive.d.ts +1 -1
- package/slider/src/slider-horizontal.component.d.ts +6 -7
- package/slider/src/slider-impl.directive.d.ts +6 -7
- package/slider/src/slider-root.component.d.ts +78 -4
- package/slider/src/slider-vertical.component.d.ts +6 -7
- package/toggle/src/toggle.directive.d.ts +14 -1
- package/toggle-group/index.d.ts +1 -1
- package/toggle-group/src/toggle-group-item.directive.d.ts +20 -28
- package/toggle-group/src/toggle-group-item.token.d.ts +1 -0
- package/toggle-group/src/toggle-group-without-focus.directive.d.ts +69 -0
- package/toggle-group/src/toggle-group.directive.d.ts +26 -43
- package/toggle-group/src/toggle-group.token.d.ts +8 -4
- package/toolbar/README.md +3 -0
- package/toolbar/index.d.ts +19 -0
- package/toolbar/src/toolbar-button.directive.d.ts +11 -0
- package/toolbar/src/toolbar-link.directive.d.ts +7 -0
- package/toolbar/src/toolbar-root.directive.d.ts +8 -0
- package/toolbar/src/toolbar-root.token.d.ts +5 -0
- package/toolbar/src/toolbar-separator.directive.d.ts +6 -0
- package/toolbar/src/toolbar-toggle-group.directive.d.ts +6 -0
- package/toolbar/src/toolbar-toggle-item.directive.d.ts +6 -0
- package/tooltip/src/tooltip-root.directive.d.ts +4 -4
- package/compodoc/documentation.json +0 -39701
- 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,
|
3
|
-
import
|
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.
|
20
|
-
|
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
|
-
* @
|
39
|
+
* @defaultValue false
|
40
|
+
* @group Props
|
24
41
|
*/
|
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();
|
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.
|
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: "
|
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
|
-
|
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
|
-
}],
|
87
|
-
type: Input,
|
88
|
-
args: [{ required: true }]
|
89
|
-
}], disabled: [{
|
90
|
-
type: Input,
|
91
|
-
args: [{ transform: booleanAttribute }]
|
92
|
-
}] } });
|
88
|
+
}], ctorParameters: () => [] });
|
93
89
|
|
94
|
-
|
90
|
+
let nextId$1 = 0;
|
91
|
+
class RdxToggleGroupWithoutFocusDirective {
|
95
92
|
constructor() {
|
96
93
|
/**
|
97
|
-
*
|
94
|
+
* @ignore
|
98
95
|
*/
|
99
|
-
this.
|
96
|
+
this.id = `rdx-toggle-group-${nextId$1++}`;
|
100
97
|
/**
|
101
|
-
*
|
102
|
-
* @default 'horizontal'
|
98
|
+
* @group Props
|
103
99
|
*/
|
104
|
-
this.
|
100
|
+
this.value = model(undefined);
|
105
101
|
/**
|
106
|
-
*
|
107
|
-
* @default false
|
102
|
+
* @group Props
|
108
103
|
*/
|
109
|
-
this.
|
104
|
+
this.type = input('single');
|
110
105
|
/**
|
111
|
-
* Whether the toggle group
|
112
|
-
* @
|
106
|
+
* Whether the toggle group is disabled.
|
107
|
+
* @defaultValue false
|
108
|
+
* @group Props
|
113
109
|
*/
|
114
|
-
this.
|
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.
|
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
|
-
|
196
|
-
|
197
|
-
|
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
|
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.
|
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:
|
233
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
234
|
-
{ provide: RdxToggleGroupToken, useExisting:
|
235
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting:
|
236
|
-
],
|
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:
|
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: '[
|
242
|
-
exportAs: '
|
181
|
+
selector: '[rdxToggleGroupWithoutFocus]',
|
182
|
+
exportAs: 'rdxToggleGroupWithoutFocus',
|
243
183
|
standalone: true,
|
244
184
|
providers: [
|
245
|
-
{ provide: RdxToggleGroupToken, useExisting:
|
246
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting:
|
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
|
-
}]
|
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
|
-
*
|
202
|
+
* @ignore
|
277
203
|
*/
|
278
|
-
this.
|
204
|
+
this.id = `rdx-toggle-group-${nextId++}`;
|
279
205
|
/**
|
280
|
-
*
|
281
|
-
* @default 'horizontal'
|
206
|
+
* @group Props
|
282
207
|
*/
|
283
|
-
this.
|
208
|
+
this.value = model(undefined);
|
284
209
|
/**
|
285
|
-
*
|
286
|
-
* @default false
|
210
|
+
* @group Props
|
287
211
|
*/
|
288
|
-
this.
|
212
|
+
this.type = input('single');
|
289
213
|
/**
|
290
|
-
* Whether the toggle group
|
291
|
-
* @
|
214
|
+
* Whether the toggle group is disabled.
|
215
|
+
* @defaultValue false
|
216
|
+
* @group Props
|
292
217
|
*/
|
293
|
-
this.
|
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.
|
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
|
-
* @
|
229
|
+
* @ignore
|
363
230
|
*/
|
364
231
|
toggle(value) {
|
365
|
-
if (this.disabled) {
|
232
|
+
if (this.disabled()) {
|
366
233
|
return;
|
367
234
|
}
|
368
|
-
|
369
|
-
|
370
|
-
|
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
|
-
* @
|
251
|
+
* @ignore
|
376
252
|
*/
|
377
253
|
writeValue(value) {
|
378
|
-
this.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
|
-
* @
|
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
|
-
* @
|
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
|
-
* @
|
275
|
+
* @ignore
|
400
276
|
*/
|
401
277
|
setDisabledState(isDisabled) {
|
402
|
-
this.
|
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: "
|
407
|
-
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
|
408
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
|
409
|
-
],
|
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
|
-
'
|
424
|
-
'(focusout)': 'onTouched?.()',
|
425
|
-
'(focusin)': 'onFocusIn()',
|
426
|
-
'(keydown)': 'handleKeydown($event)'
|
298
|
+
'(focusout)': 'onTouched?.()'
|
427
299
|
}
|
428
300
|
}]
|
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
|
-
}] } });
|
301
|
+
}] });
|
445
302
|
|
446
303
|
/**
|
447
304
|
* Generated bundle index. Do not edit.
|
448
305
|
*/
|
449
306
|
|
450
|
-
export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken,
|
307
|
+
export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken, RdxToggleGroupToken, RdxToggleGroupWithoutFocusDirective, injectToggleGroup, injectToggleGroupItem };
|
451
308
|
//# sourceMappingURL=radix-ng-primitives-toggle-group.mjs.map
|