@radix-ng/primitives 0.29.0 → 0.30.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/checkbox/src/checkbox.directive.d.ts +11 -0
- package/core/index.d.ts +2 -0
- package/core/src/isNumber.d.ts +1 -0
- package/core/src/nullish.d.ts +1 -0
- package/dialog/src/dialog.config.d.ts +1 -0
- package/fesm2022/radix-ng-primitives-accordion.mjs +20 -20
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs +22 -22
- package/fesm2022/radix-ng-primitives-aspect-ratio.mjs +3 -3
- package/fesm2022/radix-ng-primitives-avatar.mjs +16 -16
- package/fesm2022/radix-ng-primitives-checkbox.mjs +28 -17
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-collapsible.mjs +10 -10
- package/fesm2022/radix-ng-primitives-context-menu.mjs +36 -36
- package/fesm2022/radix-ng-primitives-core.mjs +14 -8
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +40 -38
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +35 -35
- package/fesm2022/radix-ng-primitives-hover-card.mjs +30 -33
- package/fesm2022/radix-ng-primitives-hover-card.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-label.mjs +3 -3
- package/fesm2022/radix-ng-primitives-menu.mjs +429 -62
- package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menubar.mjs +87 -139
- package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popover.mjs +30 -33
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-progress.mjs +68 -90
- package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-radio.mjs +13 -13
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +7 -7
- package/fesm2022/radix-ng-primitives-select.mjs +36 -36
- package/fesm2022/radix-ng-primitives-separator.mjs +3 -3
- package/fesm2022/radix-ng-primitives-slider.mjs +32 -32
- package/fesm2022/radix-ng-primitives-switch.mjs +13 -13
- package/fesm2022/radix-ng-primitives-tabs.mjs +16 -16
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +9 -9
- package/fesm2022/radix-ng-primitives-toggle.mjs +6 -6
- package/fesm2022/radix-ng-primitives-toolbar.mjs +22 -22
- package/fesm2022/radix-ng-primitives-tooltip.mjs +30 -33
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs +9 -9
- package/hover-card/src/hover-card-root.directive.d.ts +4 -4
- package/menu/index.d.ts +20 -9
- package/menu/src/menu-content.directive.d.ts +1 -1
- package/menu/src/menu-directive.d.ts +1 -1
- package/menu/src/menu-group.directive.d.ts +1 -1
- package/menu/src/menu-item-checkbox.directive.d.ts +21 -0
- package/menu/src/menu-item-indicator.directive.d.ts +10 -0
- package/menu/src/menu-item-radio.directive.d.ts +20 -0
- package/menu/src/menu-item.directive.d.ts +8 -2
- package/menu/src/menu-label.directive.d.ts +1 -1
- package/menu/src/menu-radio-group.directive.d.ts +6 -0
- package/menu/src/menu-separator.directive.d.ts +1 -2
- package/menu/src/menu-trigger.directive.d.ts +35 -0
- package/menu/src/utils.d.ts +3 -0
- package/menubar/index.d.ts +1 -1
- package/menubar/src/menubar-content.directive.d.ts +2 -2
- package/menubar/src/menubar-item-checkbox.directive.d.ts +2 -10
- package/menubar/src/menubar-item-indicator.directive.d.ts +2 -1
- package/menubar/src/menubar-item-radio.directive.d.ts +2 -10
- package/menubar/src/menubar-item.directive.d.ts +1 -3
- package/menubar/src/menubar-radio-group.directive.d.ts +1 -1
- package/menubar/src/menubar-root.directive.d.ts +3 -4
- package/menubar/src/menubar-separator.directive.d.ts +1 -1
- package/menubar/src/menubar-trigger.directive.d.ts +2 -7
- package/package.json +9 -133
- package/popover/src/popover-root.directive.d.ts +4 -4
- package/progress/src/progress-root.directive.d.ts +19 -33
- package/schematics/collection.json +2 -3
- package/schematics/ng-add/index.d.ts +1 -2
- package/schematics/ng-add/index.js +48 -18
- package/schematics/ng-add/index.js.map +1 -1
- package/schematics/ng-add/package-config.d.ts +18 -0
- package/schematics/ng-add/package-config.js +51 -0
- package/schematics/ng-add/package-config.js.map +1 -0
- package/tooltip/src/tooltip-root.directive.d.ts +4 -4
- package/schematics/ng-add/schema.d.ts +0 -3
- package/schematics/ng-add/schema.js +0 -3
- package/schematics/ng-add/schema.js.map +0 -1
@@ -1,10 +1,7 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import { InjectionToken, inject,
|
2
|
+
import { InjectionToken, inject, model, input, computed, effect, Directive, NgModule } from '@angular/core';
|
3
|
+
import { isNullish, isNumber } from '@radix-ng/primitives/core';
|
3
4
|
|
4
|
-
let idIterator = 0;
|
5
|
-
const MIN_PERCENT = 0;
|
6
|
-
const DEFAULT_MAX = 100;
|
7
|
-
const PROGRESS_NAME = 'Radix Progress';
|
8
5
|
const RdxProgressToken = new InjectionToken('RdxProgressDirective');
|
9
6
|
/**
|
10
7
|
* Injects the current instance of RdxProgressRootDirective.
|
@@ -13,6 +10,8 @@ const RdxProgressToken = new InjectionToken('RdxProgressDirective');
|
|
13
10
|
function injectProgress() {
|
14
11
|
return inject(RdxProgressToken);
|
15
12
|
}
|
13
|
+
const MIN_PERCENT = 0;
|
14
|
+
const DEFAULT_MAX = 100;
|
16
15
|
/**
|
17
16
|
* Directive to manage progress bar state and attributes.
|
18
17
|
*
|
@@ -23,113 +22,93 @@ function injectProgress() {
|
|
23
22
|
*/
|
24
23
|
class RdxProgressRootDirective {
|
25
24
|
constructor() {
|
26
|
-
/**
|
27
|
-
* The unique ID for the progress bar.
|
28
|
-
* @default 'rdx-progress-bar-{idIterator}'
|
29
|
-
*/
|
30
|
-
this.id = `rdx-progress-bar-${idIterator++}`;
|
31
25
|
/**
|
32
26
|
* The current value of the progress bar.
|
33
27
|
* @group Props
|
34
28
|
* @defaultValue 0
|
35
29
|
*/
|
36
|
-
this.value = MIN_PERCENT;
|
30
|
+
this.value = model(MIN_PERCENT);
|
37
31
|
/**
|
38
32
|
* The maximum value of the progress bar.
|
39
33
|
* @defaultValue 100
|
40
34
|
* @group Props
|
41
35
|
*/
|
42
|
-
this.max = DEFAULT_MAX;
|
36
|
+
this.max = model(DEFAULT_MAX);
|
43
37
|
/**
|
44
38
|
* Function to generate the value label.
|
45
39
|
* @group Props
|
46
40
|
*/
|
47
|
-
this.valueLabel = (value, max) => this.defaultGetValueLabel(value, max);
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
}
|
58
|
-
|
59
|
-
|
60
|
-
|
41
|
+
this.valueLabel = input((value, max) => this.defaultGetValueLabel(value, max));
|
42
|
+
this.label = computed(() => this.valueLabel()(this.value(), this.max()));
|
43
|
+
this.progressState = computed(() => {
|
44
|
+
if (isNullish(this.value())) {
|
45
|
+
return 'indeterminate';
|
46
|
+
}
|
47
|
+
if (this.value() === this.max()) {
|
48
|
+
return 'complete';
|
49
|
+
}
|
50
|
+
return 'loading';
|
51
|
+
});
|
52
|
+
effect(() => {
|
53
|
+
const correctedValue = this.validateValue(this.value(), this.max());
|
54
|
+
if (correctedValue != null && correctedValue !== this.value()) {
|
55
|
+
this.value.set(correctedValue);
|
56
|
+
}
|
57
|
+
});
|
58
|
+
effect(() => {
|
59
|
+
const correctedMax = this.validateMax(this.max());
|
60
|
+
if (correctedMax !== this.max()) {
|
61
|
+
this.max.set(correctedMax);
|
62
|
+
}
|
63
|
+
});
|
61
64
|
}
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
65
|
+
validateValue(value, max) {
|
66
|
+
const isValidValueError = isNullish(value) || (isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0);
|
67
|
+
if (isValidValueError)
|
68
|
+
return value;
|
69
|
+
console.error(`Invalid prop \`value\` of value \`${value}\` supplied to \`ProgressRoot\`. The \`value\` prop must be:
|
70
|
+
- a positive number
|
71
|
+
- less than the value passed to \`max\` (or ${DEFAULT_MAX} if no \`max\` prop is set)
|
72
|
+
- \`null\` or \`undefined\` if the progress is indeterminate.
|
73
|
+
|
74
|
+
Defaulting to \`null\`.`);
|
75
|
+
return null;
|
69
76
|
}
|
70
|
-
|
71
|
-
|
77
|
+
validateMax(max) {
|
78
|
+
const isValidMaxError = isNumber(max) && !Number.isNaN(max) && max > 0;
|
79
|
+
if (isValidMaxError)
|
80
|
+
return max;
|
81
|
+
console.error(`Invalid prop \`max\` of value \`${max}\` supplied to \`ProgressRoot\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`);
|
82
|
+
return DEFAULT_MAX;
|
72
83
|
}
|
73
84
|
defaultGetValueLabel(value, max) {
|
74
85
|
return `${Math.round((value / max) * 100)}%`;
|
75
86
|
}
|
76
|
-
|
77
|
-
|
78
|
-
}
|
79
|
-
isNumber(value) {
|
80
|
-
return typeof value === 'number';
|
81
|
-
}
|
82
|
-
isValidValueNumber(value, max) {
|
83
|
-
return this.isNumber(value) && !isNaN(value) && value <= max && value >= 0;
|
84
|
-
}
|
85
|
-
getInvalidMaxError(propValue, componentName) {
|
86
|
-
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
87
|
-
}
|
88
|
-
getInvalidValueError(propValue, componentName) {
|
89
|
-
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
90
|
-
- a positive number
|
91
|
-
- less than the value passed to \`max\` (or ${DEFAULT_MAX} if no \`max\` prop is set)
|
92
|
-
- \`null\` or \`undefined\` if the progress is indeterminate.
|
93
|
-
|
94
|
-
Defaulting to \`null\`.`;
|
95
|
-
}
|
96
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxProgressRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
97
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: RdxProgressRootDirective, isStandalone: true, selector: "[rdxProgressRoot]", inputs: { id: "id", value: ["rdxValue", "value", numberAttribute], max: ["rdxMax", "max", numberAttribute], valueLabel: ["rdxValueLabel", "valueLabel"] }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "id": "id", "attr.aria-valuemax": "max", "attr.aria-valuemin": "0", "attr.aria-valuenow": "value", "attr.aria-valuetext": "valueLabel(value, max)", "attr.data-state": "state", "attr.data-value": "value", "attr.data-max": "max" } }, providers: [{ provide: RdxProgressToken, useExisting: RdxProgressRootDirective }], exportAs: ["rdxProgressRoot"], usesOnChanges: true, ngImport: i0 }); }
|
87
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxProgressRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
88
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: RdxProgressRootDirective, isStandalone: true, selector: "[rdxProgressRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", max: "maxChange" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "attr.aria-valuemax": "max()", "attr.aria-valuemin": "0", "attr.aria-valuenow": "value()", "attr.aria-valuetext": "label()", "attr.aria-label": "label()", "attr.data-state": "progressState()", "attr.data-value": "value() ?? undefined", "attr.data-max": "max()" } }, providers: [{ provide: RdxProgressToken, useExisting: RdxProgressRootDirective }], exportAs: ["rdxProgressRoot"], ngImport: i0 }); }
|
98
89
|
}
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxProgressRootDirective, decorators: [{
|
100
91
|
type: Directive,
|
101
92
|
args: [{
|
102
93
|
selector: '[rdxProgressRoot]',
|
103
94
|
exportAs: 'rdxProgressRoot',
|
104
|
-
standalone: true,
|
105
95
|
providers: [{ provide: RdxProgressToken, useExisting: RdxProgressRootDirective }],
|
106
96
|
host: {
|
107
97
|
role: 'progressbar',
|
108
|
-
'[
|
109
|
-
'[attr.aria-valuemax]': 'max',
|
98
|
+
'[attr.aria-valuemax]': 'max()',
|
110
99
|
'[attr.aria-valuemin]': '0',
|
111
|
-
'[attr.aria-valuenow]': 'value',
|
112
|
-
'[attr.aria-valuetext]': '
|
113
|
-
'[attr.
|
114
|
-
'[attr.data-
|
115
|
-
'[attr.data-
|
100
|
+
'[attr.aria-valuenow]': 'value()',
|
101
|
+
'[attr.aria-valuetext]': 'label()',
|
102
|
+
'[attr.aria-label]': 'label()',
|
103
|
+
'[attr.data-state]': 'progressState()',
|
104
|
+
'[attr.data-value]': 'value() ?? undefined',
|
105
|
+
'[attr.data-max]': 'max()',
|
116
106
|
// set tab index to -1 so screen readers will read the aria-label
|
117
107
|
// Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox
|
118
108
|
tabindex: '-1'
|
119
109
|
}
|
120
110
|
}]
|
121
|
-
}],
|
122
|
-
type: Input
|
123
|
-
}], value: [{
|
124
|
-
type: Input,
|
125
|
-
args: [{ alias: 'rdxValue', transform: numberAttribute }]
|
126
|
-
}], max: [{
|
127
|
-
type: Input,
|
128
|
-
args: [{ alias: 'rdxMax', transform: numberAttribute }]
|
129
|
-
}], valueLabel: [{
|
130
|
-
type: Input,
|
131
|
-
args: ['rdxValueLabel']
|
132
|
-
}] } });
|
111
|
+
}], ctorParameters: () => [] });
|
133
112
|
|
134
113
|
/**
|
135
114
|
* Directive to manage progress indicator state and attributes.
|
@@ -144,19 +123,18 @@ class RdxProgressIndicatorDirective {
|
|
144
123
|
*/
|
145
124
|
this.progress = injectProgress();
|
146
125
|
}
|
147
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
148
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxProgressIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
127
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxProgressIndicatorDirective, isStandalone: true, selector: "[rdxProgressIndicator]", host: { properties: { "attr.data-state": "progress.progressState()", "attr.data-value": "progress.value()", "attr.data-max": "progress.max()" } }, exportAs: ["rdxProgressIndicator"], ngImport: i0 }); }
|
149
128
|
}
|
150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxProgressIndicatorDirective, decorators: [{
|
151
130
|
type: Directive,
|
152
131
|
args: [{
|
153
132
|
selector: '[rdxProgressIndicator]',
|
154
133
|
exportAs: 'rdxProgressIndicator',
|
155
|
-
standalone: true,
|
156
134
|
host: {
|
157
|
-
'[attr.data-state]': 'progress.
|
158
|
-
'[attr.data-value]': 'progress.value',
|
159
|
-
'[attr.data-max]': 'progress.max'
|
135
|
+
'[attr.data-state]': 'progress.progressState()',
|
136
|
+
'[attr.data-value]': 'progress.value()',
|
137
|
+
'[attr.data-max]': 'progress.max()'
|
160
138
|
}
|
161
139
|
}]
|
162
140
|
}] });
|
@@ -166,13 +144,13 @@ const _imports = [
|
|
166
144
|
RdxProgressIndicatorDirective
|
167
145
|
];
|
168
146
|
class RdxProgressModule {
|
169
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
170
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
148
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: RdxProgressModule, imports: [RdxProgressRootDirective,
|
171
149
|
RdxProgressIndicatorDirective], exports: [RdxProgressRootDirective,
|
172
150
|
RdxProgressIndicatorDirective] }); }
|
173
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
151
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxProgressModule }); }
|
174
152
|
}
|
175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxProgressModule, decorators: [{
|
176
154
|
type: NgModule,
|
177
155
|
args: [{
|
178
156
|
imports: [..._imports],
|
@@ -184,5 +162,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
184
162
|
* Generated bundle index. Do not edit.
|
185
163
|
*/
|
186
164
|
|
187
|
-
export { RdxProgressIndicatorDirective, RdxProgressModule, RdxProgressRootDirective, injectProgress };
|
165
|
+
export { RdxProgressIndicatorDirective, RdxProgressModule, RdxProgressRootDirective, RdxProgressToken, injectProgress };
|
188
166
|
//# sourceMappingURL=radix-ng-primitives-progress.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"radix-ng-primitives-progress.mjs","sources":["../../../packages/primitives/progress/src/progress-root.directive.ts","../../../packages/primitives/progress/src/progress-indicator.directive.ts","../../../packages/primitives/progress/index.ts","../../../packages/primitives/progress/radix-ng-primitives-progress.ts"],"sourcesContent":["import { Directive, inject, InjectionToken, Input, numberAttribute, OnChanges, SimpleChanges } from '@angular/core';\n\nlet idIterator = 0;\n\nconst MIN_PERCENT = 0;\nconst DEFAULT_MAX = 100;\nconst PROGRESS_NAME = 'Radix Progress';\n\nconst RdxProgressToken = new InjectionToken<RdxProgressRootDirective>('RdxProgressDirective');\n\n/**\n * Injects the current instance of RdxProgressRootDirective.\n * @returns The instance of RdxProgressRootDirective.\n */\nexport function injectProgress(): RdxProgressRootDirective {\n return inject(RdxProgressToken);\n}\n\nexport type ProgressState = 'indeterminate' | 'complete' | 'loading';\n\nexport interface ProgressProps {\n value?: number | null | undefined;\n max?: number;\n getValueLabel?: string;\n}\n\n/**\n * Directive to manage progress bar state and attributes.\n *\n * This directive provides a way to create a progress bar with customizable value and max attributes.\n * It handles aria attributes for accessibility and provides different states like 'indeterminate', 'complete', and 'loading'.\n *\n * @group Components\n */\n@Directive({\n selector: '[rdxProgressRoot]',\n exportAs: 'rdxProgressRoot',\n standalone: true,\n providers: [{ provide: RdxProgressToken, useExisting: RdxProgressRootDirective }],\n host: {\n role: 'progressbar',\n '[id]': 'id',\n '[attr.aria-valuemax]': 'max',\n '[attr.aria-valuemin]': '0',\n '[attr.aria-valuenow]': 'value',\n '[attr.aria-valuetext]': 'valueLabel(value, max)',\n '[attr.data-state]': 'state',\n '[attr.data-value]': 'value',\n '[attr.data-max]': 'max',\n // set tab index to -1 so screen readers will read the aria-label\n // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox\n tabindex: '-1'\n }\n})\nexport class RdxProgressRootDirective implements ProgressProps, OnChanges {\n /**\n * The unique ID for the progress bar.\n * @default 'rdx-progress-bar-{idIterator}'\n */\n @Input() id = `rdx-progress-bar-${idIterator++}`;\n\n /**\n * The current value of the progress bar.\n * @group Props\n * @defaultValue 0\n */\n @Input({ alias: 'rdxValue', transform: numberAttribute }) value = MIN_PERCENT;\n\n /**\n * The maximum value of the progress bar.\n * @defaultValue 100\n * @group Props\n */\n @Input({ alias: 'rdxMax', transform: numberAttribute }) max = DEFAULT_MAX;\n\n /**\n * Function to generate the value label.\n * @group Props\n */\n @Input('rdxValueLabel') valueLabel: (value: number, max: number) => string = (value, max) =>\n this.defaultGetValueLabel(value, max);\n\n /**\n * Lifecycle hook that is called when any data-bound property of a directive changes.\n * @param changes - The changed properties.\n * @ignore\n */\n ngOnChanges(changes: SimpleChanges) {\n if (changes['max'] && !this.isValidMaxNumber(this.max)) {\n console.error(this.getInvalidMaxError(`${this.max}`, PROGRESS_NAME));\n }\n\n if (changes['value'] && this.value !== null && !this.isValidValueNumber(this.value, this.max)) {\n console.error(this.getInvalidValueError(`${this.value}`, PROGRESS_NAME));\n }\n }\n\n /**\n * Get the state of the progress bar.\n * @returns 'indeterminate' | 'loading' | 'complete'\n * @ignore\n */\n get state(): ProgressState {\n return this.getProgressState(this.value, this.max);\n }\n\n private getProgressState(value: number | undefined | null, maxValue: number): ProgressState {\n return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading';\n }\n\n private defaultGetValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`;\n }\n\n private isValidMaxNumber(max: unknown): max is number {\n return this.isNumber(max) && !isNaN(max) && max > 0;\n }\n\n private isNumber(value: unknown): value is number {\n return typeof value === 'number';\n }\n\n private isValidValueNumber(value: unknown, max: number): value is number {\n return this.isNumber(value) && !isNaN(value) && value <= max && value >= 0;\n }\n\n private getInvalidMaxError(propValue: string, componentName: string): string {\n return `Invalid prop \\`max\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`;\n }\n\n private getInvalidValueError(propValue: string, componentName: string): string {\n return `Invalid prop \\`value\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. The \\`value\\` prop must be:\n - a positive number\n - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n - \\`null\\` or \\`undefined\\` if the progress is indeterminate.\n\n Defaulting to \\`null\\`.`;\n }\n}\n","import { Directive } from '@angular/core';\nimport { injectProgress } from './progress-root.directive';\n\n/**\n * Directive to manage progress indicator state and attributes.\n *\n * This directive is used to display the progress indicator inside the progress bar.\n * It inherits the state and value from the `RdxProgressRootDirective`.\n */\n@Directive({\n selector: '[rdxProgressIndicator]',\n exportAs: 'rdxProgressIndicator',\n standalone: true,\n host: {\n '[attr.data-state]': 'progress.state',\n '[attr.data-value]': 'progress.value',\n '[attr.data-max]': 'progress.max'\n }\n})\nexport class RdxProgressIndicatorDirective {\n /**\n * This allows the directive to access the progress bar state and values.\n */\n protected readonly progress = injectProgress();\n}\n","import { NgModule } from '@angular/core';\nimport { RdxProgressIndicatorDirective } from './src/progress-indicator.directive';\nimport { RdxProgressRootDirective } from './src/progress-root.directive';\n\nexport * from './src/progress-indicator.directive';\nexport * from './src/progress-root.directive';\n\nexport type { ProgressProps } from './src/progress-root.directive';\n\nconst _imports = [\n RdxProgressRootDirective,\n RdxProgressIndicatorDirective\n];\n\n@NgModule({\n imports: [..._imports],\n exports: [..._imports]\n})\nexport class RdxProgressModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
1
|
+
{"version":3,"file":"radix-ng-primitives-progress.mjs","sources":["../../../packages/primitives/progress/src/progress-root.directive.ts","../../../packages/primitives/progress/src/progress-indicator.directive.ts","../../../packages/primitives/progress/index.ts","../../../packages/primitives/progress/radix-ng-primitives-progress.ts"],"sourcesContent":["import { computed, Directive, effect, inject, InjectionToken, input, model } from '@angular/core';\nimport { isNullish, isNumber } from '@radix-ng/primitives/core';\n\nexport const RdxProgressToken = new InjectionToken<RdxProgressRootDirective>('RdxProgressDirective');\n\n/**\n * Injects the current instance of RdxProgressRootDirective.\n * @returns The instance of RdxProgressRootDirective.\n */\nexport function injectProgress(): RdxProgressRootDirective {\n return inject(RdxProgressToken);\n}\n\nexport type ProgressState = 'indeterminate' | 'complete' | 'loading';\n\nexport interface ProgressProps {\n value?: number | null;\n max?: number;\n /**\n * A function to get the accessible label text representing the current value in a human-readable format.\n *\n * If not provided, the value label will be read as the numeric value as a percentage of the max value.\n */\n getValueLabel?: (value: number, max: number) => string;\n}\n\nconst MIN_PERCENT = 0;\nconst DEFAULT_MAX = 100;\n\n/**\n * Directive to manage progress bar state and attributes.\n *\n * This directive provides a way to create a progress bar with customizable value and max attributes.\n * It handles aria attributes for accessibility and provides different states like 'indeterminate', 'complete', and 'loading'.\n *\n * @group Components\n */\n@Directive({\n selector: '[rdxProgressRoot]',\n exportAs: 'rdxProgressRoot',\n providers: [{ provide: RdxProgressToken, useExisting: RdxProgressRootDirective }],\n host: {\n role: 'progressbar',\n '[attr.aria-valuemax]': 'max()',\n '[attr.aria-valuemin]': '0',\n '[attr.aria-valuenow]': 'value()',\n '[attr.aria-valuetext]': 'label()',\n '[attr.aria-label]': 'label()',\n '[attr.data-state]': 'progressState()',\n '[attr.data-value]': 'value() ?? undefined',\n '[attr.data-max]': 'max()',\n // set tab index to -1 so screen readers will read the aria-label\n // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox\n tabindex: '-1'\n }\n})\nexport class RdxProgressRootDirective {\n /**\n * The current value of the progress bar.\n * @group Props\n * @defaultValue 0\n */\n readonly value = model<number>(MIN_PERCENT);\n\n /**\n * The maximum value of the progress bar.\n * @defaultValue 100\n * @group Props\n */\n readonly max = model<number>(DEFAULT_MAX);\n\n /**\n * Function to generate the value label.\n * @group Props\n */\n readonly valueLabel = input<(value: number, max: number) => string>((value, max) =>\n this.defaultGetValueLabel(value, max)\n );\n\n protected readonly label = computed(() => this.valueLabel()(this.value(), this.max()));\n\n readonly progressState = computed<ProgressState>(() => {\n if (isNullish(this.value())) {\n return 'indeterminate';\n }\n if (this.value() === this.max()) {\n return 'complete';\n }\n return 'loading';\n });\n\n constructor() {\n effect(() => {\n const correctedValue = this.validateValue(this.value(), this.max());\n if (correctedValue != null && correctedValue !== this.value()) {\n this.value.set(correctedValue);\n }\n });\n\n effect(() => {\n const correctedMax = this.validateMax(this.max());\n if (correctedMax !== this.max()) {\n this.max.set(correctedMax);\n }\n });\n }\n\n private validateValue(value: any, max: number): number | null {\n const isValidValueError =\n isNullish(value) || (isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0);\n\n if (isValidValueError) return value as null;\n\n console.error(`Invalid prop \\`value\\` of value \\`${value}\\` supplied to \\`ProgressRoot\\`. The \\`value\\` prop must be:\n - a positive number\n - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n - \\`null\\` or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`);\n return null;\n }\n\n private validateMax(max: number): number {\n const isValidMaxError = isNumber(max) && !Number.isNaN(max) && max > 0;\n\n if (isValidMaxError) return max;\n\n console.error(\n `Invalid prop \\`max\\` of value \\`${max}\\` supplied to \\`ProgressRoot\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`\n );\n return DEFAULT_MAX;\n }\n\n private defaultGetValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`;\n }\n}\n","import { Directive } from '@angular/core';\nimport { injectProgress } from './progress-root.directive';\n\n/**\n * Directive to manage progress indicator state and attributes.\n *\n * This directive is used to display the progress indicator inside the progress bar.\n * It inherits the state and value from the `RdxProgressRootDirective`.\n */\n@Directive({\n selector: '[rdxProgressIndicator]',\n exportAs: 'rdxProgressIndicator',\n host: {\n '[attr.data-state]': 'progress.progressState()',\n '[attr.data-value]': 'progress.value()',\n '[attr.data-max]': 'progress.max()'\n }\n})\nexport class RdxProgressIndicatorDirective {\n /**\n * This allows the directive to access the progress bar state and values.\n */\n protected readonly progress = injectProgress();\n}\n","import { NgModule } from '@angular/core';\nimport { RdxProgressIndicatorDirective } from './src/progress-indicator.directive';\nimport { RdxProgressRootDirective } from './src/progress-root.directive';\n\nexport * from './src/progress-indicator.directive';\nexport * from './src/progress-root.directive';\n\nexport type { ProgressProps } from './src/progress-root.directive';\n\nconst _imports = [\n RdxProgressRootDirective,\n RdxProgressIndicatorDirective\n];\n\n@NgModule({\n imports: [..._imports],\n exports: [..._imports]\n})\nexport class RdxProgressModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import { InjectionToken, model, input, booleanAttribute, output, signal, computed,
|
2
|
+
import { InjectionToken, model, input, booleanAttribute, output, signal, computed, Input, Directive, inject, ElementRef } from '@angular/core';
|
3
3
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
4
4
|
import * as i1 from '@radix-ng/primitives/roving-focus';
|
5
5
|
import { RdxRovingFocusGroupDirective, RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';
|
@@ -77,13 +77,13 @@ class RdxRadioGroupDirective {
|
|
77
77
|
if (this.disableState())
|
78
78
|
return;
|
79
79
|
}
|
80
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
81
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.
|
80
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
81
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: RdxRadioGroupDirective, isStandalone: true, selector: "[rdxRadioRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown()" }, properties: { "attr.aria-orientation": "orientation()", "attr.aria-required": "required()", "attr.data-disabled": "disableState() ? \"\" : null" } }, providers: [
|
82
82
|
{ provide: RDX_RADIO_GROUP, useExisting: RdxRadioGroupDirective },
|
83
83
|
{ provide: NG_VALUE_ACCESSOR, useExisting: RdxRadioGroupDirective, multi: true }
|
84
84
|
], exportAs: ["rdxRadioRoot"], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["dir", "dir", "orientation", "orientation", "loop", "loop"] }], ngImport: i0 }); }
|
85
85
|
}
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRadioGroupDirective, decorators: [{
|
87
87
|
type: Directive,
|
88
88
|
args: [{
|
89
89
|
selector: '[rdxRadioRoot]',
|
@@ -159,10 +159,10 @@ class RdxRadioItemDirective {
|
|
159
159
|
}
|
160
160
|
}, 0);
|
161
161
|
}
|
162
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
163
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.
|
162
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRadioItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
163
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: RdxRadioItemDirective, isStandalone: true, selector: "[rdxRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "radio" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)", "keyup": "onKeyUp()", "focus": "onFocus()" }, properties: { "attr.aria-checked": "checkedState()", "attr.data-disabled": "disabledState() ? \"\" : null", "attr.data-state": "checkedState() ? \"checked\" : \"unchecked\"", "disabled": "disabledState()" } }, providers: [{ provide: RdxRadioItemToken, useExisting: RdxRadioItemDirective }], exportAs: ["rdxRadioItem"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["tabStopId", "id", "focusable", "focusable", "active", "active", "allowShiftKey", "allowShiftKey"] }], ngImport: i0 }); }
|
164
164
|
}
|
165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRadioItemDirective, decorators: [{
|
166
166
|
type: Directive,
|
167
167
|
args: [{
|
168
168
|
selector: '[rdxRadioItem]',
|
@@ -192,10 +192,10 @@ class RdxRadioIndicatorDirective {
|
|
192
192
|
this.radioGroup = inject(RDX_RADIO_GROUP);
|
193
193
|
this.radioItem = inject(RdxRadioItemDirective);
|
194
194
|
}
|
195
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
196
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRadioIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
196
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxRadioIndicatorDirective, isStandalone: true, selector: "[rdxRadioIndicator]", host: { properties: { "attr.data-state": "radioItem.checkedState() ? \"checked\" : \"unchecked\"", "attr.data-disabled": "radioItem.disabled ? \"\" : null" } }, exportAs: ["rdxRadioIndicator"], ngImport: i0 }); }
|
197
197
|
}
|
198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRadioIndicatorDirective, decorators: [{
|
199
199
|
type: Directive,
|
200
200
|
args: [{
|
201
201
|
selector: '[rdxRadioIndicator]',
|
@@ -217,10 +217,10 @@ class RdxRadioItemInputDirective {
|
|
217
217
|
this.required = input(this.radioItem.required());
|
218
218
|
this.disabled = input(this.radioItem.disabled());
|
219
219
|
}
|
220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
221
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.
|
220
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRadioItemInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
221
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: RdxRadioItemInputDirective, isStandalone: true, selector: "[rdxRadioItemInput]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "radio" }, properties: { "attr.name": "name()", "attr.required": "required()", "attr.disabled": "disabled() ? disabled() : undefined", "attr.checked": "checked()", "value": "value()" } }, exportAs: ["rdxRadioItemInput"], hostDirectives: [{ directive: i1$1.RdxVisuallyHiddenDirective, inputs: ["feature", "feature"] }], ngImport: i0 }); }
|
222
222
|
}
|
223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRadioItemInputDirective, decorators: [{
|
224
224
|
type: Directive,
|
225
225
|
args: [{
|
226
226
|
selector: '[rdxRadioItemInput]',
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
|
-
import { inject, NgZone, ElementRef, EventEmitter, signal, booleanAttribute,
|
2
|
+
import { inject, NgZone, ElementRef, EventEmitter, signal, booleanAttribute, Output, Input, Directive, computed } from '@angular/core';
|
3
3
|
|
4
4
|
const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
|
5
5
|
const EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
@@ -148,10 +148,10 @@ class RdxRovingFocusGroupDirective {
|
|
148
148
|
getFocusableItemsCount() {
|
149
149
|
return this.focusableItemsCount();
|
150
150
|
}
|
151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
152
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.
|
151
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRovingFocusGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
152
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.4", type: RdxRovingFocusGroupDirective, isStandalone: true, selector: "[rdxRovingFocusGroup]", inputs: { orientation: "orientation", dir: "dir", loop: ["loop", "loop", booleanAttribute], preventScrollOnEntryFocus: ["preventScrollOnEntryFocus", "preventScrollOnEntryFocus", booleanAttribute] }, outputs: { entryFocus: "entryFocus", currentTabStopIdChange: "currentTabStopIdChange" }, host: { listeners: { "focus": "handleFocus($event)", "blur": "handleBlur()", "mouseup": "handleMouseUp()", "mousedown": "handleMouseDown()" }, properties: { "attr.data-orientation": "dataOrientation", "attr.tabindex": "tabIndex", "attr.dir": "dir" }, styleAttribute: "outline: none;" }, ngImport: i0 }); }
|
153
153
|
}
|
154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRovingFocusGroupDirective, decorators: [{
|
155
155
|
type: Directive,
|
156
156
|
args: [{
|
157
157
|
selector: '[rdxRovingFocusGroup]',
|
@@ -281,10 +281,10 @@ class RdxRovingFocusItemDirective {
|
|
281
281
|
});
|
282
282
|
}
|
283
283
|
}
|
284
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
285
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.
|
284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRovingFocusItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
285
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.4", type: RdxRovingFocusItemDirective, isStandalone: true, selector: "[rdxRovingFocusItem]", inputs: { focusable: ["focusable", "focusable", booleanAttribute], active: ["active", "active", booleanAttribute], tabStopId: "tabStopId", allowShiftKey: ["allowShiftKey", "allowShiftKey", booleanAttribute] }, host: { listeners: { "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)", "focus": "onFocus()" }, properties: { "attr.tabindex": "tabIndex", "attr.data-orientation": "parent.orientation", "attr.data-active": "active", "attr.data-disabled": "!focusable ? \"\" : undefined" } }, ngImport: i0 }); }
|
286
286
|
}
|
287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxRovingFocusItemDirective, decorators: [{
|
288
288
|
type: Directive,
|
289
289
|
args: [{
|
290
290
|
selector: '[rdxRovingFocusItem]',
|