@radix-ng/primitives 0.1.0 → 0.1.1
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/README.md +2 -4
- package/checkbox/src/checkbox-indicator.directive.d.ts +6 -0
- package/checkbox/src/checkbox.directive.d.ts +71 -0
- package/checkbox/src/checkbox.token.d.ts +4 -0
- package/esm2022/checkbox/index.mjs +4 -0
- package/esm2022/checkbox/radix-ng-primitives-checkbox.mjs +5 -0
- package/esm2022/checkbox/src/checkbox-indicator.directive.mjs +23 -0
- package/esm2022/checkbox/src/checkbox.directive.mjs +135 -0
- package/esm2022/checkbox/src/checkbox.token.mjs +6 -0
- package/esm2022/index.mjs +2 -0
- package/esm2022/label/index.mjs +2 -0
- package/esm2022/label/radix-ng-primitives-label.mjs +5 -0
- package/esm2022/label/src/label.directive.mjs +46 -0
- package/esm2022/progress/index.mjs +3 -0
- package/esm2022/progress/radix-ng-primitives-progress.mjs +5 -0
- package/esm2022/progress/src/progress-indicator.directive.mjs +23 -0
- package/esm2022/progress/src/progress.directive.mjs +62 -0
- package/esm2022/progress/src/progress.token.mjs +6 -0
- package/esm2022/radix-ng-primitives.mjs +5 -0
- package/esm2022/roving-focus/index.mjs +5 -0
- package/esm2022/roving-focus/radix-ng-primitives-roving-focus.mjs +5 -0
- package/esm2022/roving-focus/src/roving-focus-group.directive.mjs +115 -0
- package/esm2022/roving-focus/src/roving-focus-group.token.mjs +9 -0
- package/esm2022/roving-focus/src/roving-focus-item.directive.mjs +91 -0
- package/esm2022/roving-focus/src/roving-focus-item.token.mjs +6 -0
- package/esm2022/separator/index.mjs +2 -0
- package/esm2022/separator/radix-ng-primitives-separator.mjs +5 -0
- package/esm2022/separator/src/separator.directive.mjs +37 -0
- package/esm2022/switch/index.mjs +4 -0
- package/esm2022/switch/radix-ng-primitives-switch.mjs +5 -0
- package/esm2022/switch/src/switch-thumb.directive.mjs +25 -0
- package/esm2022/switch/src/switch.directive.mjs +125 -0
- package/esm2022/switch/src/switch.token.mjs +6 -0
- package/esm2022/visually-hidden/index.mjs +2 -0
- package/esm2022/visually-hidden/radix-ng-primitives-visually-hidden.mjs +5 -0
- package/esm2022/visually-hidden/src/visually-hidden.directive.mjs +42 -0
- package/fesm2022/radix-ng-primitives-checkbox.mjs +166 -0
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-label.mjs +53 -0
- package/fesm2022/radix-ng-primitives-label.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-progress.mjs +93 -0
- package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +220 -0
- package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-separator.mjs +44 -0
- package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-switch.mjs +158 -0
- package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs +49 -0
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives.mjs +4 -0
- package/fesm2022/radix-ng-primitives.mjs.map +1 -0
- package/label/src/label.directive.d.ts +14 -0
- package/package.json +82 -24
- package/progress/src/progress-indicator.directive.d.ts +6 -0
- package/progress/src/progress.directive.d.ts +26 -0
- package/progress/src/progress.token.d.ts +4 -0
- package/roving-focus/src/roving-focus-group.directive.d.ts +55 -0
- package/roving-focus/src/roving-focus-group.token.d.ts +7 -0
- package/roving-focus/src/roving-focus-item.directive.d.ts +52 -0
- package/roving-focus/src/roving-focus-item.token.d.ts +4 -0
- package/separator/src/separator.directive.d.ts +16 -0
- package/switch/src/switch-thumb.directive.d.ts +9 -0
- package/switch/src/switch.directive.d.ts +73 -0
- package/switch/src/switch.token.d.ts +4 -0
- package/visually-hidden/src/visually-hidden.directive.d.ts +11 -0
- package/.docs/overview/accessibility.docs.mdx +0 -45
- package/.docs/overview/installation.docs.mdx +0 -15
- package/.docs/overview/introduction.docs.mdx +0 -59
- package/.docs/utils/storybook.ts +0 -30
- package/.eslintrc.json +0 -56
- package/.storybook/helpers/bages-config.ts +0 -43
- package/.storybook/main.ts +0 -24
- package/.storybook/manager-head.html +0 -76
- package/.storybook/manager.ts +0 -6
- package/.storybook/preview.ts +0 -58
- package/.storybook/rdxTheme.ts +0 -8
- package/.storybook/tsconfig.json +0 -20
- package/CHANGELOG.md +0 -6
- package/checkbox/ng-package.json +0 -5
- package/checkbox/src/checkbox-indicator.directive.ts +0 -15
- package/checkbox/src/checkbox.directive.ts +0 -138
- package/checkbox/src/checkbox.token.ts +0 -8
- package/checkbox/stories/checkbox.component.ts +0 -50
- package/checkbox/stories/checkbox.stories.ts +0 -29
- package/checkbox/stories/style.css +0 -265
- package/jest.config.ts +0 -22
- package/label/ng-package.json +0 -5
- package/label/src/label.directive.ts +0 -36
- package/label/stories/label.docs.mdx +0 -40
- package/label/stories/label.stories.ts +0 -63
- package/ng-package.json +0 -7
- package/progress/ng-package.json +0 -5
- package/progress/src/progress-indicator.directive.ts +0 -15
- package/progress/src/progress.directive.ts +0 -51
- package/progress/src/progress.token.ts +0 -8
- package/progress/stories/progress.docs.mdx +0 -66
- package/progress/stories/progress.stories.ts +0 -61
- package/project.json +0 -90
- package/roving-focus/ng-package.json +0 -5
- package/roving-focus/src/roving-focus-group.directive.ts +0 -135
- package/roving-focus/src/roving-focus-group.token.ts +0 -13
- package/roving-focus/src/roving-focus-item.directive.ts +0 -98
- package/roving-focus/src/roving-focus-item.token.ts +0 -10
- package/separator/ng-package.json +0 -5
- package/separator/src/separator.directive.spec.ts +0 -59
- package/separator/src/separator.directive.ts +0 -24
- package/separator/stories/separator.docs.mdx +0 -38
- package/separator/stories/separator.stories.ts +0 -91
- package/switch/ng-package.json +0 -5
- package/switch/src/switch-thumb.directive.ts +0 -17
- package/switch/src/switch.directive.ts +0 -132
- package/switch/src/switch.token.ts +0 -8
- package/switch/stories/switch.docs.mdx +0 -74
- package/switch/stories/switch.stories.ts +0 -76
- package/test-setup.ts +0 -8
- package/tsconfig.json +0 -32
- package/tsconfig.lib.json +0 -19
- package/tsconfig.lib.prod.json +0 -9
- package/tsconfig.spec.json +0 -21
- package/visually-hidden/ng-package.json +0 -5
- package/visually-hidden/src/visually-hidden.directive.spec.ts +0 -48
- package/visually-hidden/src/visually-hidden.directive.ts +0 -35
- package/visually-hidden/stories/visually-hidden.docs.mdx +0 -35
- /package/checkbox/{index.ts → index.d.ts} +0 -0
- /package/{index.ts → index.d.ts} +0 -0
- /package/label/{index.ts → index.d.ts} +0 -0
- /package/progress/{index.ts → index.d.ts} +0 -0
- /package/roving-focus/{index.ts → index.d.ts} +0 -0
- /package/separator/{index.ts → index.d.ts} +0 -0
- /package/switch/{index.ts → index.d.ts} +0 -0
- /package/visually-hidden/{index.ts → index.d.ts} +0 -0
@@ -0,0 +1,44 @@
|
|
1
|
+
import * as i0 from '@angular/core';
|
2
|
+
import { booleanAttribute, Directive, Input } from '@angular/core';
|
3
|
+
|
4
|
+
class SeparatorDirective {
|
5
|
+
constructor() {
|
6
|
+
/**
|
7
|
+
* The orientation of the separator.
|
8
|
+
* @default 'horizontal'
|
9
|
+
*/
|
10
|
+
this.orientation = 'horizontal';
|
11
|
+
/**
|
12
|
+
* Whether the separator is for decoration purposes. If true, the separator will not be included in the accessibility tree.
|
13
|
+
* @default false
|
14
|
+
*/
|
15
|
+
this.decorative = false;
|
16
|
+
}
|
17
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
18
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: SeparatorDirective, isStandalone: true, selector: "[rdxSeparator]", inputs: { orientation: ["rdxSeparatorOrientation", "orientation"], decorative: ["rdxSeparatorDecorative", "decorative", booleanAttribute] }, host: { properties: { "attr.role": "decorative ? \"none\" : \"separator\"", "attr.aria-orientation": "!decorative && orientation === \"vertical\" ? \"vertical\" : null", "attr.data-orientation": "orientation" } }, ngImport: i0 }); }
|
19
|
+
}
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SeparatorDirective, decorators: [{
|
21
|
+
type: Directive,
|
22
|
+
args: [{
|
23
|
+
selector: '[rdxSeparator]',
|
24
|
+
standalone: true,
|
25
|
+
host: {
|
26
|
+
'[attr.role]': 'decorative ? "none" : "separator"',
|
27
|
+
'[attr.aria-orientation]': '!decorative && orientation === "vertical" ? "vertical" : null',
|
28
|
+
'[attr.data-orientation]': 'orientation'
|
29
|
+
}
|
30
|
+
}]
|
31
|
+
}], propDecorators: { orientation: [{
|
32
|
+
type: Input,
|
33
|
+
args: ['rdxSeparatorOrientation']
|
34
|
+
}], decorative: [{
|
35
|
+
type: Input,
|
36
|
+
args: [{ alias: 'rdxSeparatorDecorative', transform: booleanAttribute }]
|
37
|
+
}] } });
|
38
|
+
|
39
|
+
/**
|
40
|
+
* Generated bundle index. Do not edit.
|
41
|
+
*/
|
42
|
+
|
43
|
+
export { SeparatorDirective };
|
44
|
+
//# sourceMappingURL=radix-ng-primitives-separator.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"radix-ng-primitives-separator.mjs","sources":["../../../packages/primitives/separator/src/separator.directive.ts","../../../packages/primitives/separator/radix-ng-primitives-separator.ts"],"sourcesContent":["import { Directive, Input, booleanAttribute } from '@angular/core';\n\n@Directive({\n selector: '[rdxSeparator]',\n standalone: true,\n host: {\n '[attr.role]': 'decorative ? \"none\" : \"separator\"',\n '[attr.aria-orientation]': '!decorative && orientation === \"vertical\" ? \"vertical\" : null',\n '[attr.data-orientation]': 'orientation'\n }\n})\nexport class SeparatorDirective {\n /**\n * The orientation of the separator.\n * @default 'horizontal'\n */\n @Input('rdxSeparatorOrientation') orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Whether the separator is for decoration purposes. If true, the separator will not be included in the accessibility tree.\n * @default false\n */\n @Input({ alias: 'rdxSeparatorDecorative', transform: booleanAttribute }) decorative = false;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAWa,kBAAkB,CAAA;AAT/B,IAAA,WAAA,GAAA;AAUI;;;AAGG;QAC+B,IAAW,CAAA,WAAA,GAA8B,YAAY,CAAC;AAExF;;;AAGG;QACsE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AAC/F,KAAA;8GAZY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,0KAW0B,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,uCAAA,EAAA,uBAAA,EAAA,mEAAA,EAAA,uBAAA,EAAA,aAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAX5D,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAT9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,aAAa,EAAE,mCAAmC;AAClD,wBAAA,yBAAyB,EAAE,+DAA+D;AAC1F,wBAAA,yBAAyB,EAAE,aAAa;AAC3C,qBAAA;AACJ,iBAAA,CAAA;8BAMqC,WAAW,EAAA,CAAA;sBAA5C,KAAK;uBAAC,yBAAyB,CAAA;gBAMyC,UAAU,EAAA,CAAA;sBAAlF,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;ACtB3E;;AAEG;;;;"}
|
@@ -0,0 +1,158 @@
|
|
1
|
+
import * as i0 from '@angular/core';
|
2
|
+
import { InjectionToken, inject, ElementRef, EventEmitter, booleanAttribute, Directive, Input, Output, HostListener } from '@angular/core';
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
4
|
+
|
5
|
+
const SwitchToken = new InjectionToken('SwitchToken');
|
6
|
+
function injectSwitch() {
|
7
|
+
return inject(SwitchToken);
|
8
|
+
}
|
9
|
+
|
10
|
+
class SwitchDirective {
|
11
|
+
constructor() {
|
12
|
+
/**
|
13
|
+
* Access the element ref.
|
14
|
+
*/
|
15
|
+
this.elementRef = inject(ElementRef);
|
16
|
+
/**
|
17
|
+
* Determine if the switch is a button
|
18
|
+
*/
|
19
|
+
this.isButton = this.elementRef.nativeElement.tagName === 'BUTTON';
|
20
|
+
/**
|
21
|
+
* Determine if the switch is checked.
|
22
|
+
* The controlled state of the switch.
|
23
|
+
* @default false
|
24
|
+
*/
|
25
|
+
this.checked = false;
|
26
|
+
/**
|
27
|
+
* Determine if the switch is disabled.
|
28
|
+
* When true, prevents the user from interacting with the switch.
|
29
|
+
* @default false
|
30
|
+
*/
|
31
|
+
this.disabled = false;
|
32
|
+
/**
|
33
|
+
* Event emitted when the checked state changes.
|
34
|
+
*/
|
35
|
+
this.checkedChange = new EventEmitter();
|
36
|
+
}
|
37
|
+
/**
|
38
|
+
* Register the onChange callback.
|
39
|
+
* @param fn The onChange callback.
|
40
|
+
* @internal
|
41
|
+
*/
|
42
|
+
registerOnChange(fn) {
|
43
|
+
this.onChange = fn;
|
44
|
+
}
|
45
|
+
/**
|
46
|
+
* Register the onTouched callback.
|
47
|
+
* @param fn The onTouched callback.
|
48
|
+
* @internal
|
49
|
+
*/
|
50
|
+
registerOnTouched(fn) {
|
51
|
+
this.onTouched = fn;
|
52
|
+
}
|
53
|
+
/**
|
54
|
+
* Write the value to the checked state.
|
55
|
+
* @param checked The checked state.
|
56
|
+
* @internal
|
57
|
+
*/
|
58
|
+
writeValue(checked) {
|
59
|
+
this.checked = checked;
|
60
|
+
}
|
61
|
+
/**
|
62
|
+
* Set the disabled state.
|
63
|
+
* @param isDisabled The disabled state.
|
64
|
+
* @internal
|
65
|
+
*/
|
66
|
+
setDisabledState(isDisabled) {
|
67
|
+
this.disabled = isDisabled;
|
68
|
+
}
|
69
|
+
/**
|
70
|
+
* Toggle the checked state.
|
71
|
+
*/
|
72
|
+
toggle() {
|
73
|
+
if (this.disabled) {
|
74
|
+
return;
|
75
|
+
}
|
76
|
+
this.checked = !this.checked;
|
77
|
+
this.checkedChange.emit(this.checked);
|
78
|
+
this.onChange?.(this.checked);
|
79
|
+
}
|
80
|
+
/**
|
81
|
+
* Handle the keydown event.
|
82
|
+
*/
|
83
|
+
onKeyDown() {
|
84
|
+
// If the switch is not a button then the space key will not toggle the checked state automatically,
|
85
|
+
// so we need to do it manually.
|
86
|
+
if (!this.isButton) {
|
87
|
+
this.toggle();
|
88
|
+
}
|
89
|
+
}
|
90
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SwitchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
91
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: SwitchDirective, isStandalone: true, selector: "[rdxSwitch]", inputs: { checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { checkedChange: "checkedChange" }, host: { attributes: { "role": "switch" }, listeners: { "focus": "onTouched?.()", "click": "toggle()", "keydown.space": "onKeyDown()" }, properties: { "attr.type": "isButton ? \"button\" : null", "attr.aria-checked": "checked", "attr.data-state": "checked ? \"checked\" : \"unchecked\"", "attr.data-disabled": "disabled ? \"true\" : null", "attr.disabled": "isButton && disabled ? disabled : null" } }, providers: [
|
92
|
+
{ provide: SwitchToken, useExisting: SwitchDirective },
|
93
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: SwitchDirective, multi: true }
|
94
|
+
], ngImport: i0 }); }
|
95
|
+
}
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SwitchDirective, decorators: [{
|
97
|
+
type: Directive,
|
98
|
+
args: [{
|
99
|
+
selector: '[rdxSwitch]',
|
100
|
+
standalone: true,
|
101
|
+
providers: [
|
102
|
+
{ provide: SwitchToken, useExisting: SwitchDirective },
|
103
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: SwitchDirective, multi: true }
|
104
|
+
],
|
105
|
+
host: {
|
106
|
+
role: 'switch',
|
107
|
+
'[attr.type]': 'isButton ? "button" : null',
|
108
|
+
'[attr.aria-checked]': 'checked',
|
109
|
+
'[attr.data-state]': 'checked ? "checked" : "unchecked"',
|
110
|
+
'[attr.data-disabled]': 'disabled ? "true" : null',
|
111
|
+
'[attr.disabled]': 'isButton && disabled ? disabled : null',
|
112
|
+
'(focus)': 'onTouched?.()'
|
113
|
+
}
|
114
|
+
}]
|
115
|
+
}], propDecorators: { checked: [{
|
116
|
+
type: Input,
|
117
|
+
args: [{ transform: booleanAttribute }]
|
118
|
+
}], disabled: [{
|
119
|
+
type: Input,
|
120
|
+
args: [{ transform: booleanAttribute }]
|
121
|
+
}], checkedChange: [{
|
122
|
+
type: Output
|
123
|
+
}], toggle: [{
|
124
|
+
type: HostListener,
|
125
|
+
args: ['click']
|
126
|
+
}], onKeyDown: [{
|
127
|
+
type: HostListener,
|
128
|
+
args: ['keydown.space']
|
129
|
+
}] } });
|
130
|
+
|
131
|
+
class SwitchThumbDirective {
|
132
|
+
constructor() {
|
133
|
+
/**
|
134
|
+
* Access the switch directive.
|
135
|
+
*/
|
136
|
+
this.switch = injectSwitch();
|
137
|
+
}
|
138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SwitchThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
139
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: SwitchThumbDirective, isStandalone: true, selector: "[rdxSwitchThumb]", host: { properties: { "attr.data-state": "switch.checked ? \"checked\" : \"unchecked\"", "attr.data-disabled": "switch.disabled ? \"true\" : null" } }, ngImport: i0 }); }
|
140
|
+
}
|
141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SwitchThumbDirective, decorators: [{
|
142
|
+
type: Directive,
|
143
|
+
args: [{
|
144
|
+
selector: '[rdxSwitchThumb]',
|
145
|
+
standalone: true,
|
146
|
+
host: {
|
147
|
+
'[attr.data-state]': 'switch.checked ? "checked" : "unchecked"',
|
148
|
+
'[attr.data-disabled]': 'switch.disabled ? "true" : null'
|
149
|
+
}
|
150
|
+
}]
|
151
|
+
}] });
|
152
|
+
|
153
|
+
/**
|
154
|
+
* Generated bundle index. Do not edit.
|
155
|
+
*/
|
156
|
+
|
157
|
+
export { SwitchDirective, SwitchThumbDirective, SwitchToken, injectSwitch };
|
158
|
+
//# sourceMappingURL=radix-ng-primitives-switch.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"radix-ng-primitives-switch.mjs","sources":["../../../packages/primitives/switch/src/switch.token.ts","../../../packages/primitives/switch/src/switch.directive.ts","../../../packages/primitives/switch/src/switch-thumb.directive.ts","../../../packages/primitives/switch/radix-ng-primitives-switch.ts"],"sourcesContent":["import { InjectionToken, inject } from '@angular/core';\nimport type { SwitchDirective } from './switch.directive';\n\nexport const SwitchToken = new InjectionToken<SwitchDirective>('SwitchToken');\n\nexport function injectSwitch(): SwitchDirective {\n return inject(SwitchToken);\n}\n","import {\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n booleanAttribute,\n inject\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { SwitchToken } from './switch.token';\n\n@Directive({\n selector: '[rdxSwitch]',\n standalone: true,\n providers: [\n { provide: SwitchToken, useExisting: SwitchDirective },\n { provide: NG_VALUE_ACCESSOR, useExisting: SwitchDirective, multi: true }\n ],\n host: {\n role: 'switch',\n '[attr.type]': 'isButton ? \"button\" : null',\n '[attr.aria-checked]': 'checked',\n '[attr.data-state]': 'checked ? \"checked\" : \"unchecked\"',\n '[attr.data-disabled]': 'disabled ? \"true\" : null',\n '[attr.disabled]': 'isButton && disabled ? disabled : null',\n '(focus)': 'onTouched?.()'\n }\n})\nexport class SwitchDirective implements ControlValueAccessor {\n /**\n * Access the element ref.\n */\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n /**\n * Determine if the switch is a button\n */\n protected isButton = this.elementRef.nativeElement.tagName === 'BUTTON';\n\n /**\n * Determine if the switch is checked.\n * The controlled state of the switch.\n * @default false\n */\n @Input({ transform: booleanAttribute }) checked = false;\n\n /**\n * Determine if the switch is disabled.\n * When true, prevents the user from interacting with the switch.\n * @default false\n */\n @Input({ transform: booleanAttribute }) disabled = false;\n\n /**\n * Event emitted when the checked state changes.\n */\n @Output() readonly checkedChange = new EventEmitter<boolean>();\n\n /**\n * Store the onChange callback.\n */\n private onChange?: (checked: boolean) => void;\n\n /**\n * Store the onTouched callback.\n */\n protected onTouched?: () => void;\n\n /**\n * Register the onChange callback.\n * @param fn The onChange callback.\n * @internal\n */\n registerOnChange(fn: (checked: boolean) => void): void {\n this.onChange = fn;\n }\n\n /**\n * Register the onTouched callback.\n * @param fn The onTouched callback.\n * @internal\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * Write the value to the checked state.\n * @param checked The checked state.\n * @internal\n */\n writeValue(checked: boolean): void {\n this.checked = checked;\n }\n\n /**\n * Set the disabled state.\n * @param isDisabled The disabled state.\n * @internal\n */\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n /**\n * Toggle the checked state.\n */\n @HostListener('click')\n toggle(): void {\n if (this.disabled) {\n return;\n }\n\n this.checked = !this.checked;\n this.checkedChange.emit(this.checked);\n this.onChange?.(this.checked);\n }\n\n /**\n * Handle the keydown event.\n */\n @HostListener('keydown.space')\n protected onKeyDown(): void {\n // If the switch is not a button then the space key will not toggle the checked state automatically,\n // so we need to do it manually.\n if (!this.isButton) {\n this.toggle();\n }\n }\n}\n","import { Directive } from '@angular/core';\nimport { injectSwitch } from './switch.token';\n\n@Directive({\n selector: '[rdxSwitchThumb]',\n standalone: true,\n host: {\n '[attr.data-state]': 'switch.checked ? \"checked\" : \"unchecked\"',\n '[attr.data-disabled]': 'switch.disabled ? \"true\" : null'\n }\n})\nexport class SwitchThumbDirective {\n /**\n * Access the switch directive.\n */\n protected readonly switch = injectSwitch();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import * as i0 from '@angular/core';
|
2
|
+
import { inject, ElementRef, Directive } from '@angular/core';
|
3
|
+
|
4
|
+
class VisuallyHiddenDirective {
|
5
|
+
constructor() {
|
6
|
+
/**
|
7
|
+
* Access the element.
|
8
|
+
*/
|
9
|
+
this.element = inject(ElementRef);
|
10
|
+
}
|
11
|
+
ngOnInit() {
|
12
|
+
// hide the element
|
13
|
+
Object.assign(this.element.nativeElement.style, {
|
14
|
+
position: 'absolute',
|
15
|
+
border: 0,
|
16
|
+
width: '1px',
|
17
|
+
height: '1px',
|
18
|
+
padding: 0,
|
19
|
+
margin: '-1px',
|
20
|
+
overflow: 'hidden',
|
21
|
+
clip: 'rect(0, 0, 0, 0)',
|
22
|
+
whiteSpace: 'nowrap',
|
23
|
+
wordWrap: 'normal',
|
24
|
+
// Avoid browsers rendering the focus ring in some cases.
|
25
|
+
outline: 'none',
|
26
|
+
appearance: 'none',
|
27
|
+
// Avoid some cases where the browser will still render the native controls
|
28
|
+
'-webkit-appearance': 'none',
|
29
|
+
'-moz-appearance': 'none',
|
30
|
+
left: 0
|
31
|
+
});
|
32
|
+
}
|
33
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: VisuallyHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
34
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: VisuallyHiddenDirective, isStandalone: true, selector: "[rdxVisuallyHidden]", ngImport: i0 }); }
|
35
|
+
}
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: VisuallyHiddenDirective, decorators: [{
|
37
|
+
type: Directive,
|
38
|
+
args: [{
|
39
|
+
selector: '[rdxVisuallyHidden]',
|
40
|
+
standalone: true
|
41
|
+
}]
|
42
|
+
}] });
|
43
|
+
|
44
|
+
/**
|
45
|
+
* Generated bundle index. Do not edit.
|
46
|
+
*/
|
47
|
+
|
48
|
+
export { VisuallyHiddenDirective };
|
49
|
+
//# sourceMappingURL=radix-ng-primitives-visually-hidden.mjs.map
|
@@ -0,0 +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, OnInit, inject } from '@angular/core';\n\n@Directive({\n selector: '[rdxVisuallyHidden]',\n standalone: true\n})\nexport class VisuallyHiddenDirective 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,uBAAuB,CAAA;AAJpC,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,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,UAAU,EAAE,IAAI;AACnB,iBAAA,CAAA;;;ACLD;;AAEG;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"radix-ng-primitives.mjs","sources":["../../../packages/primitives/radix-ng-primitives.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;AAEG"}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export declare class LabelDirective {
|
4
|
+
private el;
|
5
|
+
/**
|
6
|
+
* The id of the element the label is associated with.
|
7
|
+
* @default '-'
|
8
|
+
*/
|
9
|
+
htmlFor: string;
|
10
|
+
constructor(el: ElementRef);
|
11
|
+
onMouseDown(event: MouseEvent): void;
|
12
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LabelDirective, [{ optional: true; }]>;
|
13
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<LabelDirective, "label[rdxLabel]", never, { "htmlFor": { "alias": "htmlFor"; "required": false; }; }, {}, never, never, true, never>;
|
14
|
+
}
|
package/package.json
CHANGED
@@ -1,25 +1,83 @@
|
|
1
1
|
{
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
2
|
+
"name": "@radix-ng/primitives",
|
3
|
+
"version": "0.1.1",
|
4
|
+
"license": "MIT",
|
5
|
+
"publishConfig": {
|
6
|
+
"access": "public"
|
7
|
+
},
|
8
|
+
"repository": {
|
9
|
+
"type": "git",
|
10
|
+
"url": "https://github.com/radix-ng/primitives.git",
|
11
|
+
"directory": "packages/primitives"
|
12
|
+
},
|
13
|
+
"keywords": [
|
14
|
+
"components",
|
15
|
+
"ui",
|
16
|
+
"angular",
|
17
|
+
"radix-ng",
|
18
|
+
"headless"
|
19
|
+
],
|
20
|
+
"peerDependencies": {
|
21
|
+
"@angular/core": "^17.0.0",
|
22
|
+
"@angular/cdk": "^17.0.0"
|
23
|
+
},
|
24
|
+
"sideEffects": false,
|
25
|
+
"module": "fesm2022/radix-ng-primitives.mjs",
|
26
|
+
"typings": "index.d.ts",
|
27
|
+
"exports": {
|
28
|
+
"./package.json": {
|
29
|
+
"default": "./package.json"
|
30
|
+
},
|
31
|
+
".": {
|
32
|
+
"types": "./index.d.ts",
|
33
|
+
"esm2022": "./esm2022/radix-ng-primitives.mjs",
|
34
|
+
"esm": "./esm2022/radix-ng-primitives.mjs",
|
35
|
+
"default": "./fesm2022/radix-ng-primitives.mjs"
|
36
|
+
},
|
37
|
+
"./checkbox": {
|
38
|
+
"types": "./checkbox/index.d.ts",
|
39
|
+
"esm2022": "./esm2022/checkbox/radix-ng-primitives-checkbox.mjs",
|
40
|
+
"esm": "./esm2022/checkbox/radix-ng-primitives-checkbox.mjs",
|
41
|
+
"default": "./fesm2022/radix-ng-primitives-checkbox.mjs"
|
42
|
+
},
|
43
|
+
"./label": {
|
44
|
+
"types": "./label/index.d.ts",
|
45
|
+
"esm2022": "./esm2022/label/radix-ng-primitives-label.mjs",
|
46
|
+
"esm": "./esm2022/label/radix-ng-primitives-label.mjs",
|
47
|
+
"default": "./fesm2022/radix-ng-primitives-label.mjs"
|
48
|
+
},
|
49
|
+
"./progress": {
|
50
|
+
"types": "./progress/index.d.ts",
|
51
|
+
"esm2022": "./esm2022/progress/radix-ng-primitives-progress.mjs",
|
52
|
+
"esm": "./esm2022/progress/radix-ng-primitives-progress.mjs",
|
53
|
+
"default": "./fesm2022/radix-ng-primitives-progress.mjs"
|
54
|
+
},
|
55
|
+
"./roving-focus": {
|
56
|
+
"types": "./roving-focus/index.d.ts",
|
57
|
+
"esm2022": "./esm2022/roving-focus/radix-ng-primitives-roving-focus.mjs",
|
58
|
+
"esm": "./esm2022/roving-focus/radix-ng-primitives-roving-focus.mjs",
|
59
|
+
"default": "./fesm2022/radix-ng-primitives-roving-focus.mjs"
|
60
|
+
},
|
61
|
+
"./separator": {
|
62
|
+
"types": "./separator/index.d.ts",
|
63
|
+
"esm2022": "./esm2022/separator/radix-ng-primitives-separator.mjs",
|
64
|
+
"esm": "./esm2022/separator/radix-ng-primitives-separator.mjs",
|
65
|
+
"default": "./fesm2022/radix-ng-primitives-separator.mjs"
|
66
|
+
},
|
67
|
+
"./switch": {
|
68
|
+
"types": "./switch/index.d.ts",
|
69
|
+
"esm2022": "./esm2022/switch/radix-ng-primitives-switch.mjs",
|
70
|
+
"esm": "./esm2022/switch/radix-ng-primitives-switch.mjs",
|
71
|
+
"default": "./fesm2022/radix-ng-primitives-switch.mjs"
|
72
|
+
},
|
73
|
+
"./visually-hidden": {
|
74
|
+
"types": "./visually-hidden/index.d.ts",
|
75
|
+
"esm2022": "./esm2022/visually-hidden/radix-ng-primitives-visually-hidden.mjs",
|
76
|
+
"esm": "./esm2022/visually-hidden/radix-ng-primitives-visually-hidden.mjs",
|
77
|
+
"default": "./fesm2022/radix-ng-primitives-visually-hidden.mjs"
|
78
|
+
}
|
79
|
+
},
|
80
|
+
"dependencies": {
|
81
|
+
"tslib": "^2.3.0"
|
82
|
+
}
|
83
|
+
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class ProgressIndicatorDirective {
|
3
|
+
protected readonly progress: import("@radix-ng/primitives/progress").ProgressDirective;
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressIndicatorDirective, never>;
|
5
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ProgressIndicatorDirective, "[rdxProgressIndicator]", never, {}, {}, never, never, true, never>;
|
6
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class ProgressDirective {
|
3
|
+
/**
|
4
|
+
* Define the progress value.
|
5
|
+
*/
|
6
|
+
value: number;
|
7
|
+
/**
|
8
|
+
* Define the progress max value.
|
9
|
+
* @default 100
|
10
|
+
*/
|
11
|
+
max: number;
|
12
|
+
/**
|
13
|
+
* Define a function that returns the progress value label.
|
14
|
+
*/
|
15
|
+
valueLabel: (value: number, max: number) => string;
|
16
|
+
/**
|
17
|
+
* Get the state of the progress bar.
|
18
|
+
* @returns 'indeterminate' | 'loading' | 'complete'
|
19
|
+
* @internal
|
20
|
+
*/
|
21
|
+
get state(): 'indeterminate' | 'loading' | 'complete';
|
22
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressDirective, never>;
|
23
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ProgressDirective, "[rdxProgress]", never, { "value": { "alias": "rdxProgressValue"; "required": false; }; "max": { "alias": "rdxProgressMax"; "required": false; }; "valueLabel": { "alias": "rdxProgressValueLabel"; "required": false; }; }, {}, never, never, true, never>;
|
24
|
+
static ngAcceptInputType_value: unknown;
|
25
|
+
static ngAcceptInputType_max: unknown;
|
26
|
+
}
|
@@ -0,0 +1,55 @@
|
|
1
|
+
import { FocusKeyManager } from '@angular/cdk/a11y';
|
2
|
+
import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
3
|
+
import type { RovingFocusItemDirective } from './roving-focus-item.directive';
|
4
|
+
import * as i0 from "@angular/core";
|
5
|
+
export declare class RovingFocusGroupDirective implements OnInit, OnChanges, OnDestroy {
|
6
|
+
private readonly directionality;
|
7
|
+
private readonly destroyRef;
|
8
|
+
/**
|
9
|
+
* Create a query list of all the roving focus items.
|
10
|
+
* We don't use ContentChildren as dynamically added items may not be in the correct order.
|
11
|
+
*/
|
12
|
+
private readonly items;
|
13
|
+
/**
|
14
|
+
* Create the focus key manager instance.
|
15
|
+
* @internal
|
16
|
+
*/
|
17
|
+
readonly keyManager: FocusKeyManager<RovingFocusItemDirective>;
|
18
|
+
/**
|
19
|
+
* Determine the orientation of the roving focus group.
|
20
|
+
* @default vertical
|
21
|
+
*/
|
22
|
+
orientation: 'horizontal' | 'vertical';
|
23
|
+
/**
|
24
|
+
* Determine if focus should wrap when the end or beginning is reached.
|
25
|
+
* @default true
|
26
|
+
*/
|
27
|
+
wrap: boolean;
|
28
|
+
ngOnInit(): void;
|
29
|
+
ngOnChanges(changes: SimpleChanges): void;
|
30
|
+
ngOnDestroy(): void;
|
31
|
+
/**
|
32
|
+
* Register a roving focus item.
|
33
|
+
* @param item The roving focus item to register.
|
34
|
+
*/
|
35
|
+
register(item: RovingFocusItemDirective): void;
|
36
|
+
/**
|
37
|
+
* Unregister a roving focus item.
|
38
|
+
* @param item The roving focus item to unregister.
|
39
|
+
*/
|
40
|
+
unregister(item: RovingFocusItemDirective): void;
|
41
|
+
/**
|
42
|
+
* Handle key events on the roving focus items.
|
43
|
+
* @param event The key event.
|
44
|
+
* @internal
|
45
|
+
*/
|
46
|
+
onKeydown(event: KeyboardEvent): void;
|
47
|
+
/**
|
48
|
+
* Set the orientation of the roving focus group.
|
49
|
+
* @param orientation The orientation of the roving focus group.
|
50
|
+
*/
|
51
|
+
setOrientation(orientation: 'horizontal' | 'vertical'): void;
|
52
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RovingFocusGroupDirective, never>;
|
53
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RovingFocusGroupDirective, "[rdxRovingFocusGroup]", never, { "orientation": { "alias": "orientation"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; }, {}, never, never, true, never>;
|
54
|
+
static ngAcceptInputType_wrap: unknown;
|
55
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { InjectionToken } from '@angular/core';
|
2
|
+
import type { RovingFocusGroupDirective } from './roving-focus-group.directive';
|
3
|
+
export declare const RovingFocusGroupToken: InjectionToken<RovingFocusGroupDirective>;
|
4
|
+
/**
|
5
|
+
* Inject the roving focus directive instance.
|
6
|
+
*/
|
7
|
+
export declare function injectRovingFocusGroup(): RovingFocusGroupDirective;
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import { FocusableOption } from '@angular/cdk/a11y';
|
2
|
+
import { OnDestroy, OnInit } from '@angular/core';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
export declare class RovingFocusItemDirective implements OnInit, OnDestroy, FocusableOption {
|
5
|
+
/**
|
6
|
+
* Access the group the roving focus item belongs to.
|
7
|
+
*/
|
8
|
+
private readonly group;
|
9
|
+
/**
|
10
|
+
* Access the element reference of the roving focus item.
|
11
|
+
*/
|
12
|
+
private readonly elementRef;
|
13
|
+
/**
|
14
|
+
* Access the destroyRef
|
15
|
+
*/
|
16
|
+
private readonly destroyRef;
|
17
|
+
/**
|
18
|
+
* Access the change detector ref
|
19
|
+
*/
|
20
|
+
private readonly changeDetectorRef;
|
21
|
+
/**
|
22
|
+
* Define the order of the roving focus item in the group.
|
23
|
+
*/
|
24
|
+
order: number;
|
25
|
+
/**
|
26
|
+
* Define if the item is disabled.
|
27
|
+
*/
|
28
|
+
disabled: boolean;
|
29
|
+
/**
|
30
|
+
* Derive the tabindex of the roving focus item.
|
31
|
+
* @internal
|
32
|
+
*/
|
33
|
+
get tabindex(): number;
|
34
|
+
ngOnInit(): void;
|
35
|
+
ngOnDestroy(): void;
|
36
|
+
/**
|
37
|
+
* Handle key events on the roving focus item.
|
38
|
+
* @param event The key event.
|
39
|
+
* @internal
|
40
|
+
*/
|
41
|
+
onKeydown(event: KeyboardEvent): void;
|
42
|
+
/**
|
43
|
+
* Focus the roving focus item.
|
44
|
+
* @param origin The origin of the focus request.
|
45
|
+
* @internal
|
46
|
+
*/
|
47
|
+
focus(): void;
|
48
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RovingFocusItemDirective, never>;
|
49
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RovingFocusItemDirective, "[rdxRovingFocusItem]", never, { "order": { "alias": "order"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
|
50
|
+
static ngAcceptInputType_order: unknown;
|
51
|
+
static ngAcceptInputType_disabled: unknown;
|
52
|
+
}
|
@@ -0,0 +1,4 @@
|
|
1
|
+
import { InjectionToken } from '@angular/core';
|
2
|
+
import type { RovingFocusItemDirective } from './roving-focus-item.directive';
|
3
|
+
export declare const RovingFocusItemToken: InjectionToken<RovingFocusItemDirective>;
|
4
|
+
export declare function injectRovingFocusItem(): RovingFocusItemDirective;
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class SeparatorDirective {
|
3
|
+
/**
|
4
|
+
* The orientation of the separator.
|
5
|
+
* @default 'horizontal'
|
6
|
+
*/
|
7
|
+
orientation: 'horizontal' | 'vertical';
|
8
|
+
/**
|
9
|
+
* Whether the separator is for decoration purposes. If true, the separator will not be included in the accessibility tree.
|
10
|
+
* @default false
|
11
|
+
*/
|
12
|
+
decorative: boolean;
|
13
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SeparatorDirective, never>;
|
14
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SeparatorDirective, "[rdxSeparator]", never, { "orientation": { "alias": "rdxSeparatorOrientation"; "required": false; }; "decorative": { "alias": "rdxSeparatorDecorative"; "required": false; }; }, {}, never, never, true, never>;
|
15
|
+
static ngAcceptInputType_decorative: unknown;
|
16
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class SwitchThumbDirective {
|
3
|
+
/**
|
4
|
+
* Access the switch directive.
|
5
|
+
*/
|
6
|
+
protected readonly switch: import("@radix-ng/primitives/switch").SwitchDirective;
|
7
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SwitchThumbDirective, never>;
|
8
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SwitchThumbDirective, "[rdxSwitchThumb]", never, {}, {}, never, never, true, never>;
|
9
|
+
}
|