@radix-ng/primitives 0.3.0 → 0.5.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/accordion/README.md +3 -0
- package/accordion/index.d.ts +7 -0
- package/accordion/src/accordion/accordion.directive.d.ts +64 -0
- package/accordion/src/accordion/accordion.token.d.ts +4 -0
- package/accordion/src/accordion-content/accordion-content.directive.d.ts +44 -0
- package/accordion/src/accordion-header/accordion-header.directive.d.ts +6 -0
- package/accordion/src/accordion-item/accordion-item.directive.d.ts +42 -0
- package/accordion/src/accordion-item/accordion-item.token.d.ts +4 -0
- package/accordion/src/accordion-state.directive.d.ts +28 -0
- package/accordion/src/accordion-trigger/accordion-trigger.directive.d.ts +23 -0
- package/accordion/src/accordion.config.d.ts +25 -0
- package/checkbox/src/checkbox-indicator.directive.d.ts +4 -4
- package/checkbox/src/checkbox.directive.d.ts +3 -3
- package/checkbox/src/checkbox.token.d.ts +3 -3
- package/esm2022/accordion/index.mjs +8 -0
- package/esm2022/accordion/radix-ng-primitives-accordion.mjs +5 -0
- package/esm2022/accordion/src/accordion/accordion.directive.mjs +108 -0
- package/esm2022/accordion/src/accordion/accordion.token.mjs +6 -0
- package/esm2022/accordion/src/accordion-content/accordion-content.directive.mjs +75 -0
- package/esm2022/accordion/src/accordion-header/accordion-header.directive.mjs +17 -0
- package/esm2022/accordion/src/accordion-item/accordion-item.directive.mjs +81 -0
- package/esm2022/accordion/src/accordion-item/accordion-item.token.mjs +6 -0
- package/esm2022/accordion/src/accordion-state.directive.mjs +49 -0
- package/esm2022/accordion/src/accordion-trigger/accordion-trigger.directive.mjs +49 -0
- package/esm2022/accordion/src/accordion.config.mjs +27 -0
- package/esm2022/checkbox/src/checkbox-indicator.directive.mjs +5 -5
- package/esm2022/checkbox/src/checkbox.directive.mjs +10 -10
- package/esm2022/checkbox/src/checkbox.token.mjs +3 -3
- package/esm2022/label/src/label.directive.mjs +20 -6
- package/esm2022/overlay/src/overlay-arrow.directive.mjs +7 -7
- package/esm2022/overlay/src/overlay-arrow.token.mjs +2 -2
- package/esm2022/overlay/src/overlay-trigger.directive.mjs +7 -7
- package/esm2022/overlay/src/overlay-trigger.token.mjs +3 -3
- package/esm2022/overlay/src/overlay.directive.mjs +7 -7
- package/esm2022/overlay/src/overlay.token.mjs +2 -2
- package/esm2022/progress/src/progress-indicator.directive.mjs +5 -5
- package/esm2022/progress/src/progress.directive.mjs +7 -7
- package/esm2022/progress/src/progress.token.mjs +3 -3
- package/esm2022/radio/src/radio-group.directive.mjs +13 -13
- package/esm2022/radio/src/radio-group.token.mjs +3 -3
- package/esm2022/radio/src/radio-indicator.directive.mjs +5 -5
- package/esm2022/radio/src/radio-item.directive.mjs +9 -9
- package/esm2022/radio/src/radio-item.token.mjs +3 -3
- package/esm2022/roving-focus/src/roving-focus-group.directive.mjs +10 -9
- package/esm2022/roving-focus/src/roving-focus-group.token.mjs +3 -3
- package/esm2022/roving-focus/src/roving-focus-item.directive.mjs +7 -7
- package/esm2022/roving-focus/src/roving-focus-item.token.mjs +3 -3
- package/esm2022/separator/src/separator.directive.mjs +5 -5
- package/esm2022/switch/src/switch-thumb.directive.mjs +5 -5
- package/esm2022/switch/src/switch.directive.mjs +10 -10
- package/esm2022/switch/src/switch.token.mjs +3 -3
- package/esm2022/toggle/index.mjs +2 -0
- package/esm2022/toggle/radix-ng-primitives-toggle.mjs +5 -0
- package/esm2022/toggle/src/toggle.directive.mjs +65 -0
- package/esm2022/toggle-group/index.mjs +6 -0
- package/esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs +5 -0
- package/esm2022/toggle-group/src/toggle-group-button.directive.mjs +79 -0
- package/esm2022/toggle-group/src/toggle-group-button.token.mjs +6 -0
- package/esm2022/toggle-group/src/toggle-group-multi.directive.mjs +159 -0
- package/esm2022/toggle-group/src/toggle-group.directive.mjs +157 -0
- package/esm2022/toggle-group/src/toggle-group.token.mjs +6 -0
- package/esm2022/visually-hidden/src/visually-hidden.directive.mjs +5 -5
- package/fesm2022/radix-ng-primitives-accordion.mjs +394 -0
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-checkbox.mjs +15 -15
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-label.mjs +20 -6
- package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-overlay.mjs +20 -20
- package/fesm2022/radix-ng-primitives-overlay.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-progress.mjs +12 -12
- package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-radio.mjs +26 -26
- package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +18 -17
- package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-separator.mjs +5 -5
- package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-switch.mjs +15 -15
- package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +397 -0
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-toggle.mjs +72 -0
- package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs +5 -5
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map +1 -1
- package/label/src/label.directive.d.ts +8 -3
- package/overlay/src/overlay-arrow.directive.d.ts +3 -3
- package/overlay/src/overlay-arrow.token.d.ts +2 -2
- package/overlay/src/overlay-trigger.directive.d.ts +7 -7
- package/overlay/src/overlay-trigger.token.d.ts +3 -3
- package/overlay/src/overlay.directive.d.ts +3 -3
- package/overlay/src/overlay.token.d.ts +2 -2
- package/package.json +18 -6
- package/progress/src/progress-indicator.directive.d.ts +4 -4
- package/progress/src/progress.directive.d.ts +3 -3
- package/progress/src/progress.token.d.ts +3 -3
- package/radio/src/radio-group.directive.d.ts +3 -3
- package/radio/src/radio-group.token.d.ts +3 -3
- package/radio/src/radio-indicator.directive.d.ts +5 -5
- package/radio/src/radio-item.directive.d.ts +4 -4
- package/radio/src/radio-item.token.d.ts +3 -3
- package/roving-focus/src/roving-focus-group.directive.d.ts +7 -7
- package/roving-focus/src/roving-focus-group.token.d.ts +3 -3
- package/roving-focus/src/roving-focus-item.directive.d.ts +3 -3
- package/roving-focus/src/roving-focus-item.token.d.ts +3 -3
- package/separator/src/separator.directive.d.ts +3 -3
- package/switch/src/switch-thumb.directive.d.ts +4 -4
- package/switch/src/switch.directive.d.ts +3 -3
- package/switch/src/switch.token.d.ts +3 -3
- package/toggle/README.md +3 -0
- package/toggle/index.d.ts +1 -0
- package/toggle/src/toggle.directive.d.ts +30 -0
- package/toggle-group/README.md +3 -0
- package/toggle-group/index.d.ts +5 -0
- package/toggle-group/src/toggle-group-button.directive.d.ts +39 -0
- package/toggle-group/src/toggle-group-button.token.d.ts +4 -0
- package/toggle-group/src/toggle-group-multi.directive.d.ts +90 -0
- package/toggle-group/src/toggle-group.directive.d.ts +90 -0
- package/toggle-group/src/toggle-group.token.d.ts +5 -0
- package/visually-hidden/src/visually-hidden.directive.d.ts +3 -3
- package/esm2022/tooltip/index.mjs +0 -5
- package/esm2022/tooltip/radix-ng-primitives-tooltip.mjs +0 -5
- package/esm2022/tooltip/src/tooltip-arrow.directive.mjs +0 -17
- package/esm2022/tooltip/src/tooltip-trigger.directive.mjs +0 -148
- package/esm2022/tooltip/src/tooltip-trigger.token.mjs +0 -6
- package/esm2022/tooltip/src/tooltip.config.mjs +0 -31
- package/esm2022/tooltip/src/tooltip.directive.mjs +0 -46
- package/fesm2022/radix-ng-primitives-tooltip.mjs +0 -242
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +0 -1
- package/tooltip/README.md +0 -1
- package/tooltip/index.d.ts +0 -4
- package/tooltip/src/tooltip-arrow.directive.d.ts +0 -6
- package/tooltip/src/tooltip-trigger.directive.d.ts +0 -79
- package/tooltip/src/tooltip-trigger.token.d.ts +0 -4
- package/tooltip/src/tooltip.config.d.ts +0 -46
- package/tooltip/src/tooltip.directive.d.ts +0 -17
@@ -0,0 +1,397 @@
|
|
1
|
+
import * as i0 from '@angular/core';
|
2
|
+
import { InjectionToken, inject, booleanAttribute, Directive, Input, HostListener, EventEmitter, ContentChildren } from '@angular/core';
|
3
|
+
import * as i1 from '@radix-ng/primitives/roving-focus';
|
4
|
+
import { injectRovingFocusItem, RdxRovingFocusItemDirective, injectRovingFocusGroup, RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';
|
5
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
6
|
+
|
7
|
+
const RdxToggleGroupButtonToken = new InjectionToken('RdxToggleGroupButtonToken');
|
8
|
+
function injectToggleGroupButton() {
|
9
|
+
return inject(RdxToggleGroupButtonToken);
|
10
|
+
}
|
11
|
+
|
12
|
+
const RdxToggleGroupToken = new InjectionToken('RdxToggleGroupToken');
|
13
|
+
function injectToggleGroup() {
|
14
|
+
return inject(RdxToggleGroupToken);
|
15
|
+
}
|
16
|
+
|
17
|
+
class RdxToggleGroupButtonDirective {
|
18
|
+
constructor() {
|
19
|
+
/**
|
20
|
+
* Access the toggle group.
|
21
|
+
*/
|
22
|
+
this.toggleGroup = injectToggleGroup();
|
23
|
+
/**
|
24
|
+
* Access the roving focus item.
|
25
|
+
*/
|
26
|
+
this.rovingFocusItem = injectRovingFocusItem();
|
27
|
+
/**
|
28
|
+
* Whether this toggle button is disabled.
|
29
|
+
* @default false
|
30
|
+
*/
|
31
|
+
this.disabled = false;
|
32
|
+
}
|
33
|
+
/**
|
34
|
+
* Whether this toggle button is checked.
|
35
|
+
*/
|
36
|
+
get checked() {
|
37
|
+
return this.toggleGroup.isSelected(this.value);
|
38
|
+
}
|
39
|
+
ngOnChanges(changes) {
|
40
|
+
if ('disabled' in changes) {
|
41
|
+
this.updateDisabled();
|
42
|
+
}
|
43
|
+
}
|
44
|
+
/**
|
45
|
+
* Toggle this toggle button.
|
46
|
+
*/
|
47
|
+
toggle() {
|
48
|
+
if (this.disabled) {
|
49
|
+
return;
|
50
|
+
}
|
51
|
+
this.toggleGroup.toggle(this.value);
|
52
|
+
}
|
53
|
+
/**
|
54
|
+
* Ensure the disabled state is propagated to the roving focus item.
|
55
|
+
* @internal
|
56
|
+
*/
|
57
|
+
updateDisabled() {
|
58
|
+
this.rovingFocusItem.disabled = this.disabled || this.toggleGroup.disabled;
|
59
|
+
}
|
60
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
61
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxToggleGroupButtonDirective, isStandalone: true, selector: "button[rdxToggleGroupButton]", inputs: { value: ["rdxToggleGroupButtonValue", "value"], disabled: ["rdxToggleGroupButtonDisabled", "disabled", booleanAttribute] }, host: { attributes: { "role": "radio" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "checked", "attr.aria-disabled": "disabled || toggleGroup.disabled", "attr.data-disabled": "disabled || toggleGroup.disabled", "attr.data-state": "checked ? \"on\" : \"off\"", "attr.data-orientation": "toggleGroup.orientation" } }, providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }], usesOnChanges: true, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
|
62
|
+
}
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupButtonDirective, decorators: [{
|
64
|
+
type: Directive,
|
65
|
+
args: [{
|
66
|
+
selector: 'button[rdxToggleGroupButton]',
|
67
|
+
standalone: true,
|
68
|
+
hostDirectives: [RdxRovingFocusItemDirective],
|
69
|
+
providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }],
|
70
|
+
host: {
|
71
|
+
role: 'radio',
|
72
|
+
'[attr.aria-checked]': 'checked',
|
73
|
+
'[attr.aria-disabled]': 'disabled || toggleGroup.disabled',
|
74
|
+
'[attr.data-disabled]': 'disabled || toggleGroup.disabled',
|
75
|
+
'[attr.data-state]': 'checked ? "on" : "off"',
|
76
|
+
'[attr.data-orientation]': 'toggleGroup.orientation'
|
77
|
+
}
|
78
|
+
}]
|
79
|
+
}], propDecorators: { value: [{
|
80
|
+
type: Input,
|
81
|
+
args: [{ alias: 'rdxToggleGroupButtonValue', required: true }]
|
82
|
+
}], disabled: [{
|
83
|
+
type: Input,
|
84
|
+
args: [{ alias: 'rdxToggleGroupButtonDisabled', transform: booleanAttribute }]
|
85
|
+
}], toggle: [{
|
86
|
+
type: HostListener,
|
87
|
+
args: ['click']
|
88
|
+
}] } });
|
89
|
+
|
90
|
+
class RdxToggleGroupMultiDirective {
|
91
|
+
constructor() {
|
92
|
+
/**
|
93
|
+
* Access the roving focus group
|
94
|
+
*/
|
95
|
+
this.rovingFocusGroup = injectRovingFocusGroup();
|
96
|
+
/**
|
97
|
+
* The selected toggle button.
|
98
|
+
*/
|
99
|
+
this.value = [];
|
100
|
+
/**
|
101
|
+
* The orientation of the toggle group.
|
102
|
+
* @default 'horizontal'
|
103
|
+
*/
|
104
|
+
this.orientation = 'horizontal';
|
105
|
+
/**
|
106
|
+
* Whether the toggle group is disabled.
|
107
|
+
* @default false
|
108
|
+
*/
|
109
|
+
this.disabled = false;
|
110
|
+
/**
|
111
|
+
* Whether the toggle group roving focus should wrap.
|
112
|
+
* @default true
|
113
|
+
*/
|
114
|
+
this.wrap = true;
|
115
|
+
/**
|
116
|
+
* Event emitted when the selected toggle button changes.
|
117
|
+
*/
|
118
|
+
this.valueChange = new EventEmitter();
|
119
|
+
}
|
120
|
+
ngOnInit() {
|
121
|
+
// the toggle button group has a default orientation of horizontal
|
122
|
+
// whereas the roving focus group has a default orientation of vertical
|
123
|
+
// if the toggle button group input is not defined, the orientation will not be set
|
124
|
+
// in the roving focus group and the default vertical orientation will be used.
|
125
|
+
// we must initially set the orientation of the roving focus group to match the toggle button group orientation
|
126
|
+
this.rovingFocusGroup.setOrientation(this.orientation);
|
127
|
+
}
|
128
|
+
ngOnChanges(changes) {
|
129
|
+
if ('disabled' in changes) {
|
130
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
131
|
+
}
|
132
|
+
}
|
133
|
+
ngAfterContentInit() {
|
134
|
+
if (this.disabled) {
|
135
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
136
|
+
}
|
137
|
+
}
|
138
|
+
/**
|
139
|
+
* Determine if a value is selected.
|
140
|
+
* @param value The value to check.
|
141
|
+
* @returns Whether the value is selected.
|
142
|
+
* @internal
|
143
|
+
*/
|
144
|
+
isSelected(value) {
|
145
|
+
return this.value.includes(value);
|
146
|
+
}
|
147
|
+
/**
|
148
|
+
* Toggle a value.
|
149
|
+
* @param value The value to toggle.
|
150
|
+
* @internal
|
151
|
+
*/
|
152
|
+
toggle(value) {
|
153
|
+
if (this.disabled) {
|
154
|
+
return;
|
155
|
+
}
|
156
|
+
this.value = this.value.includes(value)
|
157
|
+
? this.value.filter((v) => v !== value)
|
158
|
+
: [...this.value, value];
|
159
|
+
this.valueChange.emit(this.value);
|
160
|
+
this.onChange?.(this.value);
|
161
|
+
}
|
162
|
+
/**
|
163
|
+
* Select a value from Angular forms.
|
164
|
+
* @param value The value to select.
|
165
|
+
* @internal
|
166
|
+
*/
|
167
|
+
writeValue(value) {
|
168
|
+
this.value = value;
|
169
|
+
}
|
170
|
+
/**
|
171
|
+
* Register a callback to be called when the value changes.
|
172
|
+
* @param fn The callback to register.
|
173
|
+
* @internal
|
174
|
+
*/
|
175
|
+
registerOnChange(fn) {
|
176
|
+
this.onChange = fn;
|
177
|
+
}
|
178
|
+
/**
|
179
|
+
* Register a callback to be called when the toggle group is touched.
|
180
|
+
* @param fn The callback to register.
|
181
|
+
* @internal
|
182
|
+
*/
|
183
|
+
registerOnTouched(fn) {
|
184
|
+
this.onTouched = fn;
|
185
|
+
}
|
186
|
+
/**
|
187
|
+
* Set the disabled state of the toggle group.
|
188
|
+
* @param isDisabled Whether the toggle group is disabled.
|
189
|
+
* @internal
|
190
|
+
*/
|
191
|
+
setDisabledState(isDisabled) {
|
192
|
+
this.disabled = isDisabled;
|
193
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
194
|
+
}
|
195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupMultiDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
196
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxToggleGroupMultiDirective, isStandalone: true, selector: "[rdxToggleGroupMulti]", inputs: { value: ["rdxToggleGroupMultiValue", "value"], orientation: ["rdxToggleGroupMultiOrientation", "orientation"], disabled: ["rdxToggleGroupMultiDisabled", "disabled", booleanAttribute], wrap: ["rdxToggleGroupMultiWrap", "wrap", booleanAttribute], valueChange: ["rdxToggleGroupMultiValueChange", "valueChange"] }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
|
197
|
+
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },
|
198
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }
|
199
|
+
], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupButtonToken }], usesOnChanges: true, hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["rdxRovingFocusGroupWrap", "wrap", "rdxRovingFocusGroupOrientation", "orientation"] }], ngImport: i0 }); }
|
200
|
+
}
|
201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupMultiDirective, decorators: [{
|
202
|
+
type: Directive,
|
203
|
+
args: [{
|
204
|
+
selector: '[rdxToggleGroupMulti]',
|
205
|
+
standalone: true,
|
206
|
+
hostDirectives: [
|
207
|
+
{
|
208
|
+
directive: RdxRovingFocusGroupDirective,
|
209
|
+
inputs: ['rdxRovingFocusGroupWrap:wrap', 'rdxRovingFocusGroupOrientation:orientation']
|
210
|
+
}
|
211
|
+
],
|
212
|
+
providers: [
|
213
|
+
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },
|
214
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }
|
215
|
+
],
|
216
|
+
host: {
|
217
|
+
role: 'group',
|
218
|
+
'[attr.data-orientation]': 'orientation',
|
219
|
+
'(focusout)': 'onTouched?.()'
|
220
|
+
}
|
221
|
+
}]
|
222
|
+
}], propDecorators: { value: [{
|
223
|
+
type: Input,
|
224
|
+
args: ['rdxToggleGroupMultiValue']
|
225
|
+
}], orientation: [{
|
226
|
+
type: Input,
|
227
|
+
args: ['rdxToggleGroupMultiOrientation']
|
228
|
+
}], disabled: [{
|
229
|
+
type: Input,
|
230
|
+
args: [{ alias: 'rdxToggleGroupMultiDisabled', transform: booleanAttribute }]
|
231
|
+
}], wrap: [{
|
232
|
+
type: Input,
|
233
|
+
args: [{ alias: 'rdxToggleGroupMultiWrap', transform: booleanAttribute }]
|
234
|
+
}], valueChange: [{
|
235
|
+
type: Input,
|
236
|
+
args: ['rdxToggleGroupMultiValueChange']
|
237
|
+
}], buttons: [{
|
238
|
+
type: ContentChildren,
|
239
|
+
args: [RdxToggleGroupButtonToken]
|
240
|
+
}] } });
|
241
|
+
|
242
|
+
class RdxToggleGroupDirective {
|
243
|
+
constructor() {
|
244
|
+
/**
|
245
|
+
* Access the roving focus group
|
246
|
+
*/
|
247
|
+
this.rovingFocusGroup = injectRovingFocusGroup();
|
248
|
+
/**
|
249
|
+
* The selected toggle button.
|
250
|
+
*/
|
251
|
+
this.value = null;
|
252
|
+
/**
|
253
|
+
* The orientation of the toggle group.
|
254
|
+
* @default 'horizontal'
|
255
|
+
*/
|
256
|
+
this.orientation = 'horizontal';
|
257
|
+
/**
|
258
|
+
* Whether the toggle group is disabled.
|
259
|
+
* @default false
|
260
|
+
*/
|
261
|
+
this.disabled = false;
|
262
|
+
/**
|
263
|
+
* Whether the toggle group roving focus should wrap.
|
264
|
+
* @default true
|
265
|
+
*/
|
266
|
+
this.wrap = true;
|
267
|
+
/**
|
268
|
+
* Event emitted when the selected toggle button changes.
|
269
|
+
*/
|
270
|
+
this.valueChange = new EventEmitter();
|
271
|
+
}
|
272
|
+
ngOnInit() {
|
273
|
+
// the toggle button group has a default orientation of horizontal
|
274
|
+
// whereas the roving focus group has a default orientation of vertical
|
275
|
+
// if the toggle button group input is not defined, the orientation will not be set
|
276
|
+
// in the roving focus group and the default vertical orientation will be used.
|
277
|
+
// we must initially set the orientation of the roving focus group to match the toggle button group orientation
|
278
|
+
this.rovingFocusGroup.setOrientation(this.orientation);
|
279
|
+
}
|
280
|
+
ngOnChanges(changes) {
|
281
|
+
if ('disabled' in changes) {
|
282
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
283
|
+
}
|
284
|
+
}
|
285
|
+
ngAfterContentInit() {
|
286
|
+
if (this.disabled) {
|
287
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
288
|
+
}
|
289
|
+
}
|
290
|
+
/**
|
291
|
+
* Determine if a value is selected.
|
292
|
+
* @param value The value to check.
|
293
|
+
* @returns Whether the value is selected.
|
294
|
+
* @internal
|
295
|
+
*/
|
296
|
+
isSelected(value) {
|
297
|
+
return this.value === value;
|
298
|
+
}
|
299
|
+
/**
|
300
|
+
* Toggle a value.
|
301
|
+
* @param value The value to toggle.
|
302
|
+
* @internal
|
303
|
+
*/
|
304
|
+
toggle(value) {
|
305
|
+
if (this.disabled) {
|
306
|
+
return;
|
307
|
+
}
|
308
|
+
this.value = this.value === value ? null : value;
|
309
|
+
this.valueChange.emit(this.value);
|
310
|
+
this.onChange?.(this.value);
|
311
|
+
}
|
312
|
+
/**
|
313
|
+
* Select a value from Angular forms.
|
314
|
+
* @param value The value to select.
|
315
|
+
* @internal
|
316
|
+
*/
|
317
|
+
writeValue(value) {
|
318
|
+
this.value = value;
|
319
|
+
}
|
320
|
+
/**
|
321
|
+
* Register a callback to be called when the value changes.
|
322
|
+
* @param fn The callback to register.
|
323
|
+
* @internal
|
324
|
+
*/
|
325
|
+
registerOnChange(fn) {
|
326
|
+
this.onChange = fn;
|
327
|
+
}
|
328
|
+
/**
|
329
|
+
* Register a callback to be called when the toggle group is touched.
|
330
|
+
* @param fn The callback to register.
|
331
|
+
* @internal
|
332
|
+
*/
|
333
|
+
registerOnTouched(fn) {
|
334
|
+
this.onTouched = fn;
|
335
|
+
}
|
336
|
+
/**
|
337
|
+
* Set the disabled state of the toggle group.
|
338
|
+
* @param isDisabled Whether the toggle group is disabled.
|
339
|
+
* @internal
|
340
|
+
*/
|
341
|
+
setDisabledState(isDisabled) {
|
342
|
+
this.disabled = isDisabled;
|
343
|
+
this.buttons?.forEach((button) => button.updateDisabled());
|
344
|
+
}
|
345
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
346
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxToggleGroupDirective, isStandalone: true, selector: "[rdxToggleGroup]", inputs: { value: ["rdxToggleGroupValue", "value"], orientation: ["rdxToggleGroupOrientation", "orientation"], disabled: ["rdxToggleGroupDisabled", "disabled", booleanAttribute], wrap: ["rdxToggleGroupWrap", "wrap", booleanAttribute], valueChange: ["rdxToggleGroupValueChange", "valueChange"] }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
|
347
|
+
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
|
348
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
|
349
|
+
], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupButtonToken }], usesOnChanges: true, hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["rdxRovingFocusGroupWrap", "wrap", "rdxRovingFocusGroupOrientation", "orientation"] }], ngImport: i0 }); }
|
350
|
+
}
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleGroupDirective, decorators: [{
|
352
|
+
type: Directive,
|
353
|
+
args: [{
|
354
|
+
selector: '[rdxToggleGroup]',
|
355
|
+
standalone: true,
|
356
|
+
hostDirectives: [
|
357
|
+
{
|
358
|
+
directive: RdxRovingFocusGroupDirective,
|
359
|
+
inputs: ['rdxRovingFocusGroupWrap:wrap', 'rdxRovingFocusGroupOrientation:orientation']
|
360
|
+
}
|
361
|
+
],
|
362
|
+
providers: [
|
363
|
+
{ provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
|
364
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
|
365
|
+
],
|
366
|
+
host: {
|
367
|
+
role: 'group',
|
368
|
+
'[attr.data-orientation]': 'orientation',
|
369
|
+
'(focusout)': 'onTouched?.()'
|
370
|
+
}
|
371
|
+
}]
|
372
|
+
}], propDecorators: { value: [{
|
373
|
+
type: Input,
|
374
|
+
args: ['rdxToggleGroupValue']
|
375
|
+
}], orientation: [{
|
376
|
+
type: Input,
|
377
|
+
args: ['rdxToggleGroupOrientation']
|
378
|
+
}], disabled: [{
|
379
|
+
type: Input,
|
380
|
+
args: [{ alias: 'rdxToggleGroupDisabled', transform: booleanAttribute }]
|
381
|
+
}], wrap: [{
|
382
|
+
type: Input,
|
383
|
+
args: [{ alias: 'rdxToggleGroupWrap', transform: booleanAttribute }]
|
384
|
+
}], valueChange: [{
|
385
|
+
type: Input,
|
386
|
+
args: ['rdxToggleGroupValueChange']
|
387
|
+
}], buttons: [{
|
388
|
+
type: ContentChildren,
|
389
|
+
args: [RdxToggleGroupButtonToken]
|
390
|
+
}] } });
|
391
|
+
|
392
|
+
/**
|
393
|
+
* Generated bundle index. Do not edit.
|
394
|
+
*/
|
395
|
+
|
396
|
+
export { RdxToggleGroupButtonDirective, RdxToggleGroupButtonToken, RdxToggleGroupDirective, RdxToggleGroupMultiDirective, RdxToggleGroupToken, injectToggleGroup, injectToggleGroupButton };
|
397
|
+
//# sourceMappingURL=radix-ng-primitives-toggle-group.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"radix-ng-primitives-toggle-group.mjs","sources":["../../../packages/primitives/toggle-group/src/toggle-group-button.token.ts","../../../packages/primitives/toggle-group/src/toggle-group.token.ts","../../../packages/primitives/toggle-group/src/toggle-group-button.directive.ts","../../../packages/primitives/toggle-group/src/toggle-group-multi.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';\n\nimport type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';\n\nexport const RdxToggleGroupButtonToken = new InjectionToken<RdxToggleGroupButtonDirective>(\n 'RdxToggleGroupButtonToken'\n);\n\nexport function injectToggleGroupButton(): RdxToggleGroupButtonDirective {\n return inject(RdxToggleGroupButtonToken);\n}\n","import { inject, InjectionToken } from '@angular/core';\n\nimport type { RdxToggleGroupMultiDirective } from './toggle-group-multi.directive';\nimport type { RdxToggleGroupDirective } from './toggle-group.directive';\n\nexport const RdxToggleGroupToken = new InjectionToken<\n RdxToggleGroupDirective | RdxToggleGroupMultiDirective\n>('RdxToggleGroupToken');\n\nexport function injectToggleGroup(): RdxToggleGroupDirective | RdxToggleGroupMultiDirective {\n return inject(RdxToggleGroupToken);\n}\n","import {\n booleanAttribute,\n Directive,\n HostListener,\n Input,\n OnChanges,\n SimpleChanges\n} from '@angular/core';\n\nimport {\n injectRovingFocusItem,\n RdxRovingFocusItemDirective\n} from '@radix-ng/primitives/roving-focus';\n\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { injectToggleGroup } from './toggle-group.token';\n\n@Directive({\n selector: 'button[rdxToggleGroupButton]',\n standalone: true,\n hostDirectives: [RdxRovingFocusItemDirective],\n providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }],\n host: {\n role: 'radio',\n '[attr.aria-checked]': 'checked',\n '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',\n '[attr.data-disabled]': 'disabled || toggleGroup.disabled',\n '[attr.data-state]': 'checked ? \"on\" : \"off\"',\n '[attr.data-orientation]': 'toggleGroup.orientation'\n }\n})\nexport class RdxToggleGroupButtonDirective implements OnChanges {\n /**\n * Access the toggle group.\n */\n protected readonly toggleGroup = injectToggleGroup();\n\n /**\n * Access the roving focus item.\n */\n private readonly rovingFocusItem = injectRovingFocusItem();\n\n /**\n * The value of this toggle button.\n */\n @Input({ alias: 'rdxToggleGroupButtonValue', required: true }) value!: string;\n\n /**\n * Whether this toggle button is disabled.\n * @default false\n */\n @Input({ alias: 'rdxToggleGroupButtonDisabled', 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 ngOnChanges(changes: SimpleChanges): void {\n if ('disabled' in changes) {\n this.updateDisabled();\n }\n }\n\n /**\n * Toggle this toggle button.\n */\n @HostListener('click')\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 */\n updateDisabled(): void {\n this.rovingFocusItem.disabled = this.disabled || this.toggleGroup.disabled;\n }\n}\n","import {\n AfterContentInit,\n booleanAttribute,\n ContentChildren,\n Directive,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n QueryList,\n SimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n injectRovingFocusGroup,\n RdxRovingFocusGroupDirective\n} from '@radix-ng/primitives/roving-focus';\n\nimport type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n selector: '[rdxToggleGroupMulti]',\n standalone: true,\n hostDirectives: [\n {\n directive: RdxRovingFocusGroupDirective,\n inputs: ['rdxRovingFocusGroupWrap:wrap', 'rdxRovingFocusGroupOrientation:orientation']\n }\n ],\n providers: [\n { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },\n { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }\n ],\n host: {\n role: 'group',\n '[attr.data-orientation]': 'orientation',\n '(focusout)': 'onTouched?.()'\n }\n})\nexport class RdxToggleGroupMultiDirective\n implements OnInit, OnChanges, AfterContentInit, ControlValueAccessor\n{\n /**\n * Access the roving focus group\n */\n private readonly rovingFocusGroup = injectRovingFocusGroup();\n\n /**\n * The selected toggle button.\n */\n @Input('rdxToggleGroupMultiValue') value: ReadonlyArray<string> = [];\n\n /**\n * The orientation of the toggle group.\n * @default 'horizontal'\n */\n @Input('rdxToggleGroupMultiOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether the toggle group is disabled.\n * @default false\n */\n @Input({ alias: 'rdxToggleGroupMultiDisabled', transform: booleanAttribute }) disabled = false;\n\n /**\n * Whether the toggle group roving focus should wrap.\n * @default true\n */\n @Input({ alias: 'rdxToggleGroupMultiWrap', transform: booleanAttribute }) wrap = true;\n\n /**\n * Event emitted when the selected toggle button changes.\n */\n @Input('rdxToggleGroupMultiValueChange') readonly valueChange = new EventEmitter<\n ReadonlyArray<string>\n >();\n\n /**\n * Access the buttons in the toggle group.\n */\n @ContentChildren(RdxToggleGroupButtonToken)\n protected buttons?: QueryList<RdxToggleGroupButtonDirective>;\n\n /**\n * The value change callback.\n */\n private onChange?: (value: ReadonlyArray<string>) => void;\n\n /**\n * The touched callback.\n */\n protected onTouched?: () => void;\n\n ngOnInit(): void {\n // the toggle button group has a default orientation of horizontal\n // whereas the roving focus group has a default orientation of vertical\n // if the toggle button group input is not defined, the orientation will not be set\n // in the roving focus group and the default vertical orientation will be used.\n // we must initially set the orientation of the roving focus group to match the toggle button group orientation\n this.rovingFocusGroup.setOrientation(this.orientation);\n }\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\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.includes(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.includes(value)\n ? this.value.filter((v) => v !== value)\n : [...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 * @internal\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 * @internal\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 * @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","import {\n AfterContentInit,\n booleanAttribute,\n ContentChildren,\n Directive,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n QueryList,\n SimpleChanges\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport {\n injectRovingFocusGroup,\n RdxRovingFocusGroupDirective\n} from '@radix-ng/primitives/roving-focus';\n\nimport type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';\nimport { RdxToggleGroupButtonToken } from './toggle-group-button.token';\nimport { RdxToggleGroupToken } from './toggle-group.token';\n\n@Directive({\n selector: '[rdxToggleGroup]',\n standalone: true,\n hostDirectives: [\n {\n directive: RdxRovingFocusGroupDirective,\n inputs: ['rdxRovingFocusGroupWrap:wrap', 'rdxRovingFocusGroupOrientation:orientation']\n }\n ],\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 '(focusout)': 'onTouched?.()'\n }\n})\nexport class RdxToggleGroupDirective\n implements OnInit, OnChanges, AfterContentInit, ControlValueAccessor\n{\n /**\n * Access the roving focus group\n */\n private readonly rovingFocusGroup = injectRovingFocusGroup();\n\n /**\n * The selected toggle button.\n */\n @Input('rdxToggleGroupValue') value: string | null = null;\n\n /**\n * The orientation of the toggle group.\n * @default 'horizontal'\n */\n @Input('rdxToggleGroupOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether the toggle group is disabled.\n * @default false\n */\n @Input({ alias: 'rdxToggleGroupDisabled', transform: booleanAttribute }) disabled = false;\n\n /**\n * Whether the toggle group roving focus should wrap.\n * @default true\n */\n @Input({ alias: 'rdxToggleGroupWrap', transform: booleanAttribute }) wrap = true;\n\n /**\n * Event emitted when the selected toggle button changes.\n */\n @Input('rdxToggleGroupValueChange') readonly valueChange = new EventEmitter<string | null>();\n\n /**\n * Access the buttons in the toggle group.\n */\n @ContentChildren(RdxToggleGroupButtonToken)\n protected buttons?: QueryList<RdxToggleGroupButtonDirective>;\n\n /**\n * The value change callback.\n */\n private onChange?: (value: string | null) => void;\n\n /**\n * The touched callback.\n */\n protected onTouched?: () => void;\n\n ngOnInit(): void {\n // the toggle button group has a default orientation of horizontal\n // whereas the roving focus group has a default orientation of vertical\n // if the toggle button group input is not defined, the orientation will not be set\n // in the roving focus group and the default vertical orientation will be used.\n // we must initially set the orientation of the roving focus group to match the toggle button group orientation\n this.rovingFocusGroup.setOrientation(this.orientation);\n }\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\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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"}
|
@@ -0,0 +1,72 @@
|
|
1
|
+
import * as i0 from '@angular/core';
|
2
|
+
import { EventEmitter, booleanAttribute, Directive, Input, Output, HostListener } from '@angular/core';
|
3
|
+
|
4
|
+
let uniqueId = 0;
|
5
|
+
class RdxToggleDirective {
|
6
|
+
constructor() {
|
7
|
+
/**
|
8
|
+
* Whether the toggle is pressed.
|
9
|
+
* @default false
|
10
|
+
*/
|
11
|
+
this.pressed = false;
|
12
|
+
/**
|
13
|
+
* Whether the toggle is disabled.
|
14
|
+
* @default false
|
15
|
+
*/
|
16
|
+
this.disabled = false;
|
17
|
+
/**
|
18
|
+
* Determine element id
|
19
|
+
*/
|
20
|
+
this.id = 'rdx-toggle-' + uniqueId++;
|
21
|
+
/**
|
22
|
+
* Event emitted when the toggle is pressed.
|
23
|
+
*/
|
24
|
+
this.pressedChange = new EventEmitter();
|
25
|
+
}
|
26
|
+
/**
|
27
|
+
* Toggle the pressed state.
|
28
|
+
*/
|
29
|
+
toggle() {
|
30
|
+
if (this.disabled) {
|
31
|
+
return;
|
32
|
+
}
|
33
|
+
this.pressed = !this.pressed;
|
34
|
+
this.pressedChange.emit(this.pressed);
|
35
|
+
}
|
36
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
37
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: RdxToggleDirective, isStandalone: true, selector: "button[rdxToggle]", inputs: { pressed: ["rdxTogglePressed", "pressed", booleanAttribute], disabled: ["rdxToggleDisabled", "disabled", booleanAttribute], id: "id" }, outputs: { pressedChange: "rdxToggleOnPressedChange" }, host: { attributes: { "type": "button" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-pressed": "pressed", "attr.data-state": "pressed ? \"on\" : \"off\"", "attr.data-disabled": "disabled" } }, ngImport: i0 }); }
|
38
|
+
}
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxToggleDirective, decorators: [{
|
40
|
+
type: Directive,
|
41
|
+
args: [{
|
42
|
+
selector: 'button[rdxToggle]',
|
43
|
+
standalone: true,
|
44
|
+
host: {
|
45
|
+
type: 'button',
|
46
|
+
'[attr.aria-pressed]': 'pressed',
|
47
|
+
'[attr.data-state]': 'pressed ? "on" : "off"',
|
48
|
+
'[attr.data-disabled]': 'disabled'
|
49
|
+
}
|
50
|
+
}]
|
51
|
+
}], propDecorators: { pressed: [{
|
52
|
+
type: Input,
|
53
|
+
args: [{ alias: 'rdxTogglePressed', transform: booleanAttribute }]
|
54
|
+
}], disabled: [{
|
55
|
+
type: Input,
|
56
|
+
args: [{ alias: 'rdxToggleDisabled', transform: booleanAttribute }]
|
57
|
+
}], id: [{
|
58
|
+
type: Input
|
59
|
+
}], pressedChange: [{
|
60
|
+
type: Output,
|
61
|
+
args: ['rdxToggleOnPressedChange']
|
62
|
+
}], toggle: [{
|
63
|
+
type: HostListener,
|
64
|
+
args: ['click']
|
65
|
+
}] } });
|
66
|
+
|
67
|
+
/**
|
68
|
+
* Generated bundle index. Do not edit.
|
69
|
+
*/
|
70
|
+
|
71
|
+
export { RdxToggleDirective };
|
72
|
+
//# sourceMappingURL=radix-ng-primitives-toggle.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"radix-ng-primitives-toggle.mjs","sources":["../../../packages/primitives/toggle/src/toggle.directive.ts","../../../packages/primitives/toggle/radix-ng-primitives-toggle.ts"],"sourcesContent":["import {\n booleanAttribute,\n Directive,\n EventEmitter,\n HostListener,\n Input,\n Output\n} from '@angular/core';\n\nlet uniqueId = 0;\n\n@Directive({\n selector: 'button[rdxToggle]',\n standalone: true,\n host: {\n type: 'button',\n '[attr.aria-pressed]': 'pressed',\n '[attr.data-state]': 'pressed ? \"on\" : \"off\"',\n '[attr.data-disabled]': 'disabled'\n }\n})\nexport class RdxToggleDirective {\n /**\n * Whether the toggle is pressed.\n * @default false\n */\n @Input({ alias: 'rdxTogglePressed', transform: booleanAttribute }) pressed = false;\n\n /**\n * Whether the toggle is disabled.\n * @default false\n */\n @Input({ alias: 'rdxToggleDisabled', transform: booleanAttribute }) disabled = false;\n\n /**\n * Determine element id\n */\n @Input() id = 'rdx-toggle-' + uniqueId++;\n /**\n * Event emitted when the toggle is pressed.\n */\n @Output('rdxToggleOnPressedChange') readonly pressedChange = new EventEmitter<boolean>();\n\n /**\n * Toggle the pressed state.\n */\n @HostListener('click')\n toggle(): void {\n if (this.disabled) {\n return;\n }\n\n this.pressed = !this.pressed;\n this.pressedChange.emit(this.pressed);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AASA,IAAI,QAAQ,GAAG,CAAC,CAAC;MAYJ,kBAAkB,CAAA;AAV/B,IAAA,WAAA,GAAA;AAWI;;;AAGG;QACgE,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAEnF;;;AAGG;QACiE,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAErF;;AAEG;AACM,QAAA,IAAA,CAAA,EAAE,GAAG,aAAa,GAAG,QAAQ,EAAE,CAAC;AACzC;;AAEG;AAC0C,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;AAc5F,KAAA;AAZG;;AAEG;IAEH,MAAM,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;AAED,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACzC;8GAjCQ,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,EAAA,SAAA,EAKoB,gBAAgB,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,EAAA,UAAA,EAMf,gBAAgB,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,0BAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAXvD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,qBAAqB,EAAE,SAAS;AAChC,wBAAA,mBAAmB,EAAE,wBAAwB;AAC7C,wBAAA,sBAAsB,EAAE,UAAU;AACrC,qBAAA;AACJ,iBAAA,CAAA;8BAMsE,OAAO,EAAA,CAAA;sBAAzE,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAMG,QAAQ,EAAA,CAAA;sBAA3E,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAKzD,EAAE,EAAA,CAAA;sBAAV,KAAK;gBAIuC,aAAa,EAAA,CAAA;sBAAzD,MAAM;uBAAC,0BAA0B,CAAA;gBAMlC,MAAM,EAAA,CAAA;sBADL,YAAY;uBAAC,OAAO,CAAA;;;AC9CzB;;AAEG;;;;"}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
2
|
import { inject, ElementRef, Directive } from '@angular/core';
|
3
3
|
|
4
|
-
class
|
4
|
+
class RdxVisuallyHiddenDirective {
|
5
5
|
constructor() {
|
6
6
|
/**
|
7
7
|
* Access the element.
|
@@ -30,10 +30,10 @@ class VisuallyHiddenDirective {
|
|
30
30
|
left: 0
|
31
31
|
});
|
32
32
|
}
|
33
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type:
|
34
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type:
|
33
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxVisuallyHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
34
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: RdxVisuallyHiddenDirective, isStandalone: true, selector: "[rdxVisuallyHidden]", ngImport: i0 }); }
|
35
35
|
}
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type:
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RdxVisuallyHiddenDirective, decorators: [{
|
37
37
|
type: Directive,
|
38
38
|
args: [{
|
39
39
|
selector: '[rdxVisuallyHidden]',
|
@@ -45,5 +45,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
|
|
45
45
|
* Generated bundle index. Do not edit.
|
46
46
|
*/
|
47
47
|
|
48
|
-
export {
|
48
|
+
export { RdxVisuallyHiddenDirective };
|
49
49
|
//# sourceMappingURL=radix-ng-primitives-visually-hidden.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"radix-ng-primitives-visually-hidden.mjs","sources":["../../../packages/primitives/visually-hidden/src/visually-hidden.directive.ts","../../../packages/primitives/visually-hidden/radix-ng-primitives-visually-hidden.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnInit } from '@angular/core';\n\n@Directive({\n selector: '[rdxVisuallyHidden]',\n standalone: true\n})\nexport class
|
1
|
+
{"version":3,"file":"radix-ng-primitives-visually-hidden.mjs","sources":["../../../packages/primitives/visually-hidden/src/visually-hidden.directive.ts","../../../packages/primitives/visually-hidden/radix-ng-primitives-visually-hidden.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnInit } from '@angular/core';\n\n@Directive({\n selector: '[rdxVisuallyHidden]',\n standalone: true\n})\nexport class RdxVisuallyHiddenDirective implements OnInit {\n /**\n * Access the element.\n */\n private readonly element = inject<ElementRef<HTMLElement>>(ElementRef);\n\n ngOnInit(): void {\n // hide the element\n Object.assign(this.element.nativeElement.style, {\n position: 'absolute',\n border: 0,\n width: '1px',\n height: '1px',\n padding: 0,\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n // Avoid browsers rendering the focus ring in some cases.\n outline: 'none',\n appearance: 'none',\n // Avoid some cases where the browser will still render the native controls\n '-webkit-appearance': 'none',\n '-moz-appearance': 'none',\n left: 0\n });\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAMa,0BAA0B,CAAA;AAJvC,IAAA,WAAA,GAAA;AAKI;;AAEG;AACc,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;AAwB1E,KAAA;IAtBG,QAAQ,GAAA;;QAEJ,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,EAAE;AAC5C,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,IAAI,EAAE,kBAAkB;AACxB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,QAAQ,EAAE,QAAQ;;AAElB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,MAAM;;AAElB,YAAA,oBAAoB,EAAE,MAAM;AAC5B,YAAA,iBAAiB,EAAE,MAAM;AACzB,YAAA,IAAI,EAAE,CAAC;AACV,SAAA,CAAC,CAAC;KACN;8GA3BQ,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAJtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,UAAU,EAAE,IAAI;AACnB,iBAAA,CAAA;;;ACLD;;AAEG;;;;"}
|
@@ -1,14 +1,19 @@
|
|
1
1
|
import { ElementRef } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
|
-
export declare class
|
3
|
+
export declare class RdxLabelDirective {
|
4
4
|
private el;
|
5
|
+
/** The HTML id attribute applied to this element. */
|
6
|
+
protected readonly _id: import("@angular/core").WritableSignal<string>;
|
5
7
|
/**
|
6
8
|
* The id of the element the label is associated with.
|
7
9
|
* @default '-'
|
8
10
|
*/
|
9
11
|
htmlFor: string;
|
12
|
+
/** The HTML id of the Label. */
|
13
|
+
set id(id: string);
|
14
|
+
get id(): string;
|
10
15
|
constructor(el: ElementRef);
|
11
16
|
onMouseDown(event: MouseEvent): void;
|
12
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<
|
13
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<
|
17
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxLabelDirective, [{ optional: true; }]>;
|
18
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxLabelDirective, "label[rdxLabel]", never, { "htmlFor": { "alias": "htmlFor"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
|
14
19
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { ElementRef, OnDestroy, OnInit } from '@angular/core';
|
2
2
|
import { Placement } from '@floating-ui/dom';
|
3
3
|
import * as i0 from "@angular/core";
|
4
|
-
export declare class
|
4
|
+
export declare class RdxOverlayArrowDirective implements OnInit, OnDestroy {
|
5
5
|
/**
|
6
6
|
* Access the arrow element
|
7
7
|
*/
|
@@ -24,6 +24,6 @@ export declare class OverlayArrowDirective implements OnInit, OnDestroy {
|
|
24
24
|
* Define the position of the arrow.
|
25
25
|
*/
|
26
26
|
setPosition(placement: Placement, arrowX?: number, arrowY?: number): void;
|
27
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<
|
28
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<
|
27
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxOverlayArrowDirective, never>;
|
28
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxOverlayArrowDirective, "[rdxOverlayArrow]", never, {}, {}, never, never, true, never>;
|
29
29
|
}
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { InjectionToken } from '@angular/core';
|
2
|
-
import type {
|
3
|
-
export declare const
|
2
|
+
import type { RdxOverlayArrowDirective } from './overlay-arrow.directive';
|
3
|
+
export declare const RdxOverlayArrowToken: InjectionToken<RdxOverlayArrowDirective>;
|