@fluentui/web-components 3.0.0-beta.39 → 3.0.0-beta.40
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/CHANGELOG.md +13 -2
- package/dist/dts/accordion/accordion.d.ts +35 -12
- package/dist/dts/accordion-item/accordion-item.d.ts +42 -14
- package/dist/dts/accordion-item/accordion-item.options.d.ts +2 -2
- package/dist/dts/accordion-item/index.d.ts +1 -1
- package/dist/dts/checkbox/checkbox.d.ts +98 -48
- package/dist/dts/field/field.d.ts +30 -1
- package/dist/dts/field/field.options.d.ts +2 -0
- package/dist/dts/index.d.ts +1 -1
- package/dist/dts/radio/index.d.ts +1 -1
- package/dist/dts/radio/radio.d.ts +38 -35
- package/dist/dts/radio/radio.options.d.ts +14 -0
- package/dist/dts/radio/radio.styles.d.ts +3 -1
- package/dist/dts/radio/radio.template.d.ts +13 -1
- package/dist/dts/radio-group/radio-group.d.ts +211 -49
- package/dist/dts/radio-group/radio-group.template.d.ts +1 -1
- package/dist/dts/styles/states/index.d.ts +20 -0
- package/dist/dts/switch/switch.d.ts +1 -0
- package/dist/dts/utils/root-active-element.d.ts +1 -0
- package/dist/esm/accordion/accordion.js +46 -85
- package/dist/esm/accordion/accordion.js.map +1 -1
- package/dist/esm/accordion-item/accordion-item.js +63 -19
- package/dist/esm/accordion-item/accordion-item.js.map +1 -1
- package/dist/esm/accordion-item/accordion-item.options.js +1 -1
- package/dist/esm/accordion-item/accordion-item.options.js.map +1 -1
- package/dist/esm/accordion-item/accordion-item.styles.js +41 -63
- package/dist/esm/accordion-item/accordion-item.styles.js.map +1 -1
- package/dist/esm/accordion-item/accordion-item.template.js +24 -43
- package/dist/esm/accordion-item/accordion-item.template.js.map +1 -1
- package/dist/esm/accordion-item/index.js +1 -1
- package/dist/esm/accordion-item/index.js.map +1 -1
- package/dist/esm/checkbox/checkbox.js +146 -97
- package/dist/esm/checkbox/checkbox.js.map +1 -1
- package/dist/esm/checkbox/checkbox.styles.js +1 -6
- package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
- package/dist/esm/checkbox/checkbox.template.js.map +1 -1
- package/dist/esm/field/field.js +91 -29
- package/dist/esm/field/field.js.map +1 -1
- package/dist/esm/field/field.options.js.map +1 -1
- package/dist/esm/field/field.styles.js +31 -16
- package/dist/esm/field/field.styles.js.map +1 -1
- package/dist/esm/field/field.template.js +1 -1
- package/dist/esm/field/field.template.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/radio/radio.js +59 -72
- package/dist/esm/radio/radio.js.map +1 -1
- package/dist/esm/radio/radio.options.js +2 -0
- package/dist/esm/radio/radio.options.js.map +1 -0
- package/dist/esm/radio/radio.styles.js +95 -88
- package/dist/esm/radio/radio.styles.js.map +1 -1
- package/dist/esm/radio/radio.template.js +21 -24
- package/dist/esm/radio/radio.template.js.map +1 -1
- package/dist/esm/radio-group/radio-group.js +416 -313
- package/dist/esm/radio-group/radio-group.js.map +1 -1
- package/dist/esm/radio-group/radio-group.styles.js +26 -32
- package/dist/esm/radio-group/radio-group.styles.js.map +1 -1
- package/dist/esm/radio-group/radio-group.template.js +6 -21
- package/dist/esm/radio-group/radio-group.template.js.map +1 -1
- package/dist/esm/styles/states/index.js +20 -0
- package/dist/esm/styles/states/index.js.map +1 -1
- package/dist/esm/switch/switch.js +4 -0
- package/dist/esm/switch/switch.js.map +1 -1
- package/dist/esm/switch/switch.styles.js +3 -6
- package/dist/esm/switch/switch.styles.js.map +1 -1
- package/dist/esm/switch/switch.template.js.map +1 -1
- package/dist/esm/theme/set-theme.js +3 -6
- package/dist/esm/theme/set-theme.js.map +1 -1
- package/dist/esm/utils/root-active-element.js +9 -0
- package/dist/esm/utils/root-active-element.js.map +1 -0
- package/dist/web-components.d.ts +461 -181
- package/dist/web-components.js +1387 -1233
- package/dist/web-components.min.js +262 -258
- package/package.json +1 -1
- package/dist/dts/radio/radio.form-associated.d.ts +0 -14
- package/dist/esm/radio/radio.form-associated.js +0 -14
- package/dist/esm/radio/radio.form-associated.js.map +0 -1
package/dist/esm/field/field.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr, FASTElement, observable } from '@microsoft/fast-element';
|
|
3
|
+
import { uniqueId } from '@microsoft/fast-web-utilities';
|
|
3
4
|
import { toggleState } from '../utils/element-internals.js';
|
|
4
5
|
import { LabelPosition, ValidationFlags } from './field.options.js';
|
|
5
6
|
/**
|
|
@@ -8,22 +9,17 @@ import { LabelPosition, ValidationFlags } from './field.options.js';
|
|
|
8
9
|
* @public
|
|
9
10
|
*/
|
|
10
11
|
export class Field extends FASTElement {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
23
|
-
*
|
|
24
|
-
* @internal
|
|
25
|
-
*/
|
|
26
|
-
this.elementInternals = this.attachInternals();
|
|
12
|
+
/**
|
|
13
|
+
* Updates attributes on the slotted label elements.
|
|
14
|
+
*
|
|
15
|
+
* @param prev - the previous list of slotted label elements
|
|
16
|
+
* @param next - the current list of slotted label elements
|
|
17
|
+
*/
|
|
18
|
+
labelSlotChanged(prev, next) {
|
|
19
|
+
if (next && this.input) {
|
|
20
|
+
this.setLabelProperties();
|
|
21
|
+
this.setStates();
|
|
22
|
+
}
|
|
27
23
|
}
|
|
28
24
|
/**
|
|
29
25
|
* Adds or removes the `invalid` event listener based on the presence of slotted message elements.
|
|
@@ -33,6 +29,7 @@ export class Field extends FASTElement {
|
|
|
33
29
|
* @internal
|
|
34
30
|
*/
|
|
35
31
|
messageSlotChanged(prev, next) {
|
|
32
|
+
toggleState(this.elementInternals, 'has-message', !!next.length);
|
|
36
33
|
if (!next.length) {
|
|
37
34
|
this.removeEventListener('invalid', this.invalidHandler, { capture: true });
|
|
38
35
|
return;
|
|
@@ -47,9 +44,21 @@ export class Field extends FASTElement {
|
|
|
47
44
|
* @internal
|
|
48
45
|
*/
|
|
49
46
|
slottedInputsChanged(prev, next) {
|
|
50
|
-
|
|
51
|
-
|
|
47
|
+
if (next === null || next === void 0 ? void 0 : next.length) {
|
|
48
|
+
this.input = next === null || next === void 0 ? void 0 : next[0];
|
|
49
|
+
this.setStates();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Updates the field's states and label properties when the assigned input changes.
|
|
54
|
+
*
|
|
55
|
+
* @param prev - the previous input
|
|
56
|
+
* @param next - the current input
|
|
57
|
+
*/
|
|
58
|
+
inputChanged(prev, next) {
|
|
59
|
+
if (next) {
|
|
52
60
|
this.setStates();
|
|
61
|
+
this.setLabelProperties();
|
|
53
62
|
}
|
|
54
63
|
}
|
|
55
64
|
/**
|
|
@@ -60,20 +69,45 @@ export class Field extends FASTElement {
|
|
|
60
69
|
*/
|
|
61
70
|
changeHandler(e) {
|
|
62
71
|
this.setStates();
|
|
72
|
+
this.setValidationStates();
|
|
73
|
+
return true;
|
|
63
74
|
}
|
|
64
75
|
/**
|
|
65
76
|
* Redirects `click` events to the slotted input.
|
|
66
77
|
*
|
|
78
|
+
* @param e - the event object
|
|
67
79
|
* @internal
|
|
68
80
|
*/
|
|
69
81
|
clickHandler(e) {
|
|
70
|
-
if (this
|
|
71
|
-
this.input.focus();
|
|
82
|
+
if (this === e.target) {
|
|
72
83
|
this.input.click();
|
|
73
|
-
return;
|
|
74
84
|
}
|
|
75
85
|
return true;
|
|
76
86
|
}
|
|
87
|
+
constructor() {
|
|
88
|
+
super();
|
|
89
|
+
/**
|
|
90
|
+
* The position of the label relative to the input.
|
|
91
|
+
*
|
|
92
|
+
* @public
|
|
93
|
+
* @remarks
|
|
94
|
+
* HTML Attribute: `label-position`
|
|
95
|
+
*/
|
|
96
|
+
this.labelPosition = LabelPosition.above;
|
|
97
|
+
/**
|
|
98
|
+
* The slotted label elements.
|
|
99
|
+
*
|
|
100
|
+
* @internal
|
|
101
|
+
*/
|
|
102
|
+
this.labelSlot = [];
|
|
103
|
+
/**
|
|
104
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
105
|
+
*
|
|
106
|
+
* @internal
|
|
107
|
+
*/
|
|
108
|
+
this.elementInternals = this.attachInternals();
|
|
109
|
+
this.elementInternals.role = 'presentation';
|
|
110
|
+
}
|
|
77
111
|
/**
|
|
78
112
|
* Applies the `focus-visible` state to the element when the slotted input receives visible focus.
|
|
79
113
|
*
|
|
@@ -81,7 +115,7 @@ export class Field extends FASTElement {
|
|
|
81
115
|
* @internal
|
|
82
116
|
*/
|
|
83
117
|
focusinHandler(e) {
|
|
84
|
-
if (
|
|
118
|
+
if (this.matches(':focus-within:has(> :focus-visible)')) {
|
|
85
119
|
toggleState(this.elementInternals, 'focus-visible', true);
|
|
86
120
|
}
|
|
87
121
|
return true;
|
|
@@ -106,7 +140,26 @@ export class Field extends FASTElement {
|
|
|
106
140
|
if (this.messageSlot.length) {
|
|
107
141
|
e.preventDefault();
|
|
108
142
|
}
|
|
109
|
-
this.
|
|
143
|
+
this.setValidationStates();
|
|
144
|
+
}
|
|
145
|
+
/**
|
|
146
|
+
* Sets ARIA and form-related attributes on slotted label elements.
|
|
147
|
+
*
|
|
148
|
+
* @internal
|
|
149
|
+
*/
|
|
150
|
+
setLabelProperties() {
|
|
151
|
+
var _a;
|
|
152
|
+
if (this.$fastController.isConnected) {
|
|
153
|
+
this.input.id = this.input.id || uniqueId('input');
|
|
154
|
+
(_a = this.labelSlot) === null || _a === void 0 ? void 0 : _a.forEach(label => {
|
|
155
|
+
if (label instanceof HTMLLabelElement) {
|
|
156
|
+
label.htmlFor = label.htmlFor || this.input.id;
|
|
157
|
+
label.id = label.id || `${this.input.id}--label`;
|
|
158
|
+
label.setAttribute('aria-hidden', 'true');
|
|
159
|
+
this.input.setAttribute('aria-labelledby', label.id);
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
}
|
|
110
163
|
}
|
|
111
164
|
/**
|
|
112
165
|
* Toggles the field's states based on the slotted input.
|
|
@@ -118,22 +171,31 @@ export class Field extends FASTElement {
|
|
|
118
171
|
toggleState(this.elementInternals, 'disabled', !!this.input.disabled);
|
|
119
172
|
toggleState(this.elementInternals, 'readonly', !!this.input.readOnly);
|
|
120
173
|
toggleState(this.elementInternals, 'required', !!this.input.required);
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
174
|
+
toggleState(this.elementInternals, 'checked', !!this.input.checked);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
setValidationStates() {
|
|
178
|
+
if (!this.input.validity) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
for (const [flag, value] of Object.entries(ValidationFlags)) {
|
|
182
|
+
toggleState(this.elementInternals, value, this.input.validity[flag]);
|
|
127
183
|
}
|
|
128
184
|
}
|
|
129
185
|
}
|
|
130
186
|
__decorate([
|
|
131
187
|
attr({ attribute: 'label-position' })
|
|
132
188
|
], Field.prototype, "labelPosition", void 0);
|
|
189
|
+
__decorate([
|
|
190
|
+
observable
|
|
191
|
+
], Field.prototype, "labelSlot", void 0);
|
|
133
192
|
__decorate([
|
|
134
193
|
observable
|
|
135
194
|
], Field.prototype, "messageSlot", void 0);
|
|
136
195
|
__decorate([
|
|
137
196
|
observable
|
|
138
197
|
], Field.prototype, "slottedInputs", void 0);
|
|
198
|
+
__decorate([
|
|
199
|
+
observable
|
|
200
|
+
], Field.prototype, "input", void 0);
|
|
139
201
|
//# sourceMappingURL=field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/field/field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAkB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEpF;;;;GAIG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/field/field.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.options.js","sourceRoot":"","sources":["../../../src/field/field.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;
|
|
1
|
+
{"version":3,"file":"field.options.js","sourceRoot":"","sources":["../../../src/field/field.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAmBX;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,kBAAkB;IACnC,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,eAAe;IAC7B,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;CACN,CAAC"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import {
|
|
2
|
+
import { disabledState } from '../styles/states/index.js';
|
|
3
|
+
import { borderRadiusMedium, colorNeutralForeground1, colorStrokeFocus2, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalM, spacingHorizontalS, spacingVerticalM, spacingVerticalS, spacingVerticalXXS, strokeWidthThick, } from '../theme/design-tokens.js';
|
|
3
4
|
import { display } from '../utils/display.js';
|
|
4
5
|
import { ValidationFlags } from './field.options.js';
|
|
5
|
-
/**
|
|
6
|
-
* Selector for the `disabled` state.
|
|
7
|
-
* @public
|
|
8
|
-
*/
|
|
9
|
-
const disabledState = css.partial `:is([state--disabled], :state(disabled))`;
|
|
10
6
|
/**
|
|
11
7
|
* Selector for the `focus-visible` state.
|
|
12
8
|
* @public
|
|
@@ -67,6 +63,11 @@ const validState = css.partial `:is([state-${ValidationFlags.valid}], :state(${V
|
|
|
67
63
|
* @public
|
|
68
64
|
*/
|
|
69
65
|
const valueMissingState = css.partial `:is([state--${ValidationFlags.valueMissing}], :state(${ValidationFlags.valueMissing}))`;
|
|
66
|
+
/**
|
|
67
|
+
* Selector for the `has-message` state.
|
|
68
|
+
* @public
|
|
69
|
+
*/
|
|
70
|
+
const hasMessageState = css.partial `:is([state--has-message], :state(has-message))`;
|
|
70
71
|
/**
|
|
71
72
|
* The styles for the {@link Field} component.
|
|
72
73
|
*
|
|
@@ -76,11 +77,12 @@ export const styles = css `
|
|
|
76
77
|
${display('inline-grid')}
|
|
77
78
|
|
|
78
79
|
:host {
|
|
80
|
+
color: ${colorNeutralForeground1};
|
|
79
81
|
align-items: center;
|
|
80
|
-
cursor: pointer;
|
|
81
82
|
gap: 0 ${spacingHorizontalM};
|
|
82
83
|
justify-items: start;
|
|
83
|
-
padding: ${spacingVerticalS};
|
|
84
|
+
padding: ${spacingVerticalS} ${spacingHorizontalS};
|
|
85
|
+
position: relative;
|
|
84
86
|
}
|
|
85
87
|
|
|
86
88
|
:has([slot='message']) {
|
|
@@ -113,15 +115,28 @@ export const styles = css `
|
|
|
113
115
|
|
|
114
116
|
:host([label-position='below']) {
|
|
115
117
|
grid-template-areas: 'input' 'label' 'message';
|
|
118
|
+
justify-items: center;
|
|
116
119
|
}
|
|
117
120
|
|
|
118
|
-
::slotted([slot='label']) {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
+
:host([label-position='below']) ::slotted([slot='label']) {
|
|
122
|
+
margin-block-start: ${spacingVerticalM};
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:host([label-position='below']:not(${hasMessageState})) {
|
|
126
|
+
grid-template-areas: 'input' 'label';
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
::slotted([slot='label'])::after {
|
|
130
|
+
content: '';
|
|
131
|
+
display: block;
|
|
132
|
+
position: absolute;
|
|
133
|
+
inset: 0;
|
|
121
134
|
}
|
|
122
135
|
|
|
123
136
|
::slotted([slot='input']) {
|
|
124
137
|
grid-area: input;
|
|
138
|
+
position: relative;
|
|
139
|
+
z-index: 1;
|
|
125
140
|
}
|
|
126
141
|
|
|
127
142
|
::slotted([slot='message']) {
|
|
@@ -134,13 +149,14 @@ export const styles = css `
|
|
|
134
149
|
outline: ${strokeWidthThick} solid ${colorStrokeFocus2};
|
|
135
150
|
}
|
|
136
151
|
|
|
137
|
-
::slotted(label)
|
|
152
|
+
::slotted(label),
|
|
153
|
+
::slotted([slot='label']) {
|
|
154
|
+
cursor: inherit;
|
|
138
155
|
display: inline-flex;
|
|
139
|
-
color: ${colorNeutralForeground1};
|
|
140
|
-
cursor: pointer;
|
|
141
156
|
font-family: ${fontFamilyBase};
|
|
142
157
|
font-size: ${fontSizeBase300};
|
|
143
158
|
font-weight: ${fontWeightRegular};
|
|
159
|
+
grid-area: label;
|
|
144
160
|
line-height: ${lineHeightBase300};
|
|
145
161
|
user-select: none;
|
|
146
162
|
}
|
|
@@ -160,8 +176,7 @@ export const styles = css `
|
|
|
160
176
|
font-weight: ${fontWeightSemibold};
|
|
161
177
|
}
|
|
162
178
|
|
|
163
|
-
:host(${disabledState})
|
|
164
|
-
color: ${colorNeutralForeground1};
|
|
179
|
+
:host(${disabledState}) {
|
|
165
180
|
cursor: default;
|
|
166
181
|
}
|
|
167
182
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../src/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;GAGG;AACH,MAAM,
|
|
1
|
+
{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../src/field/field.styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ export const template = html `
|
|
|
18
18
|
filter: elements(),
|
|
19
19
|
})}
|
|
20
20
|
>
|
|
21
|
-
<slot name="label" part="label"></slot>
|
|
21
|
+
<slot name="label" part="label" ${slotted('labelSlot')}></slot>
|
|
22
22
|
<slot name="input" part="input"></slot>
|
|
23
23
|
<slot name="message" part="message" ${slotted({ property: 'messageSlot', filter: elements('[flag]') })}></slot>
|
|
24
24
|
</template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.template.js","sourceRoot":"","sources":["../../../src/field/field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGjG;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,CAAO;;cAE1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;MAC7D,QAAQ,CAAC;IACT,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,IAAI;IAChB,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;IACrD,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,QAAQ,EAAE;CACnB,CAAC
|
|
1
|
+
{"version":3,"file":"field.template.js","sourceRoot":"","sources":["../../../src/field/field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGjG;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,CAAO;;cAE1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;MAC7D,QAAQ,CAAC;IACT,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,IAAI;IAChB,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;IACrD,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,QAAQ,EAAE;CACnB,CAAC;;sCAEgC,OAAO,CAAC,WAAW,CAAC;;0CAEhB,OAAO,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;;CAEzG,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AccordionItem, accordionItemDefinition,
|
|
1
|
+
export { AccordionItem, accordionItemDefinition, AccordionItemMarkerPosition, AccordionItemSize, accordionItemStyles, accordionItemTemplate, } from './accordion-item/index.js';
|
|
2
2
|
export { Accordion, accordionDefinition, AccordionExpandMode, accordionStyles, accordionTemplate, } from './accordion/index.js';
|
|
3
3
|
export { Link, LinkAppearance, LinkDefinition, LinkTemplate, LinkTarget } from './link/index.js';
|
|
4
4
|
export { Avatar, AvatarActive, AvatarAppearance, AvatarColor, AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, AvatarStyles, AvatarTemplate, } from './avatar/index.js';
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,2BAA2B,EAC3B,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACjG,OAAO,EACL,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,KAAK,EACL,eAAe,EACf,UAAU,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,cAAc,EACd,UAAU,GACX,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,cAAc,EACd,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,iBAAiB,EACjB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACvG,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAChH,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,cAAc,EACd,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,KAAK,EACL,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,WAAW,EACX,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5G,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC9G,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,YAAY,GACb,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,UAAU,EACV,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACtG,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,0BAA0B,GAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,UAAU,EACV,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtF,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,cAAc,GACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,6BAA6B,EAC7B,2BAA2B,EAC3B,qBAAqB,EACrB,qBAAqB,EACrB,gCAAgC,EAChC,8BAA8B,EAC9B,wBAAwB,EACxB,8BAA8B,EAC9B,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,iCAAiC,EACjC,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEhH,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACtG,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EACL,IAAI,EACJ,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,GACb,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,IAAI,EACJ,SAAS,EACT,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,UAAU,GACX,MAAM,iBAAiB,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,0BAA0B,EAC1B,8BAA8B,EAC9B,2BAA2B,EAC3B,kBAAkB,EAClB,4BAA4B,GAC7B,MAAM,sDAAsD,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}
|
package/dist/esm/radio/radio.js
CHANGED
|
@@ -1,96 +1,83 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { observable } from '@microsoft/fast-element';
|
|
3
|
-
import { keySpace } from '@microsoft/fast-web-utilities';
|
|
4
|
-
import { FormAssociatedRadio } from './radio.form-associated.js';
|
|
1
|
+
import { BaseCheckbox } from '../checkbox/checkbox.js';
|
|
5
2
|
/**
|
|
6
3
|
* A Radio Custom HTML Element.
|
|
7
|
-
* Implements the {@link https://
|
|
4
|
+
* Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
|
|
8
5
|
*
|
|
9
|
-
* @slot checked-indicator - The checked indicator
|
|
10
|
-
* @slot - The default slot for the label
|
|
11
|
-
* @csspart control - The element representing the visual radio control
|
|
12
|
-
* @csspart label - The label
|
|
6
|
+
* @slot checked-indicator - The checked indicator slot
|
|
13
7
|
* @fires change - Emits a custom change event when the checked state changes
|
|
8
|
+
* @fires input - Emits a custom input event when the checked state changes
|
|
14
9
|
*
|
|
15
10
|
* @public
|
|
16
11
|
*/
|
|
17
|
-
export class Radio extends
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
export class Radio extends BaseCheckbox {
|
|
13
|
+
connectedCallback() {
|
|
14
|
+
super.connectedCallback();
|
|
15
|
+
this.tabIndex = this.disabled ? -1 : 0;
|
|
16
|
+
}
|
|
17
|
+
constructor() {
|
|
18
|
+
super();
|
|
19
|
+
this.elementInternals.role = 'radio';
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
|
+
* Toggles the disabled state when the user changes the `disabled` property.
|
|
23
|
+
*
|
|
24
|
+
* @param prev - the previous value of the `disabled` property
|
|
25
|
+
* @param next - the current value of the `disabled` property
|
|
22
26
|
* @internal
|
|
27
|
+
* @override
|
|
23
28
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
if (
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
// in a clean state, so reset this.dirtyChecked
|
|
30
|
-
if (!this.isInsideRadioGroup()) {
|
|
31
|
-
this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
|
|
32
|
-
this.dirtyChecked = false;
|
|
33
|
-
}
|
|
29
|
+
disabledChanged(prev, next) {
|
|
30
|
+
super.disabledChanged(prev, next);
|
|
31
|
+
if (next) {
|
|
32
|
+
this.checked = false;
|
|
33
|
+
this.tabIndex = -1;
|
|
34
34
|
}
|
|
35
|
+
this.$emit('disabled', next, { bubbles: true });
|
|
35
36
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
/**
|
|
38
|
+
* This method is a no-op for the radio component.
|
|
39
|
+
*
|
|
40
|
+
* @internal
|
|
41
|
+
* @override
|
|
42
|
+
* @remarks
|
|
43
|
+
* To make a group of radio controls required, see {@link RadioGroup.required}.
|
|
44
|
+
*/
|
|
45
|
+
requiredChanged() {
|
|
46
|
+
return;
|
|
46
47
|
}
|
|
47
48
|
/**
|
|
49
|
+
* This method is a no-op for the radio component.
|
|
50
|
+
*
|
|
48
51
|
* @internal
|
|
52
|
+
* @override
|
|
53
|
+
* @remarks
|
|
54
|
+
* The radio form value is controlled by the `RadioGroup` component.
|
|
49
55
|
*/
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
super.connectedCallback();
|
|
53
|
-
this.validate();
|
|
54
|
-
if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('role')) !== 'radiogroup' && this.getAttribute('tabindex') === null) {
|
|
55
|
-
if (!this.disabled) {
|
|
56
|
-
this.setAttribute('tabindex', '0');
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
if (this.checkedAttribute) {
|
|
60
|
-
if (!this.dirtyChecked) {
|
|
61
|
-
// Setting this.checked will cause us to enter a dirty state,
|
|
62
|
-
// but if we are clean when defaultChecked is changed, we want to stay
|
|
63
|
-
// in a clean state, so reset this.dirtyChecked
|
|
64
|
-
if (!this.isInsideRadioGroup()) {
|
|
65
|
-
this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
|
|
66
|
-
this.dirtyChecked = false;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
}
|
|
56
|
+
setFormValue() {
|
|
57
|
+
return;
|
|
70
58
|
}
|
|
71
|
-
|
|
72
|
-
|
|
59
|
+
/**
|
|
60
|
+
* Sets the validity of the control.
|
|
61
|
+
*
|
|
62
|
+
* @internal
|
|
63
|
+
* @override
|
|
64
|
+
* @remarks
|
|
65
|
+
* The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
|
|
66
|
+
*/
|
|
67
|
+
setValidity() {
|
|
68
|
+
this.elementInternals.setValidity({});
|
|
73
69
|
}
|
|
74
70
|
/**
|
|
75
|
-
*
|
|
76
|
-
*
|
|
71
|
+
* Toggles the checked state of the control.
|
|
72
|
+
*
|
|
73
|
+
* @param force - Forces the element to be checked or unchecked
|
|
74
|
+
* @public
|
|
75
|
+
* @override
|
|
76
|
+
* @remarks
|
|
77
|
+
* The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
|
|
77
78
|
*/
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
switch (e.key) {
|
|
81
|
-
case keySpace:
|
|
82
|
-
if (!this.checked && !((_a = this.radioGroup) === null || _a === void 0 ? void 0 : _a.readOnly)) {
|
|
83
|
-
this.checked = true;
|
|
84
|
-
}
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
return true;
|
|
79
|
+
toggleChecked(force = true) {
|
|
80
|
+
super.toggleChecked(force);
|
|
88
81
|
}
|
|
89
82
|
}
|
|
90
|
-
__decorate([
|
|
91
|
-
observable
|
|
92
|
-
], Radio.prototype, "name", void 0);
|
|
93
|
-
__decorate([
|
|
94
|
-
observable
|
|
95
|
-
], Radio.prototype, "defaultSlottedNodes", void 0);
|
|
96
83
|
//# sourceMappingURL=radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD;;;;;;;;;GASG;AACH,MAAM,OAAO,KAAM,SAAQ,YAAY;IACrC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,OAAO,CAAC;IACvC,CAAC;IAED;;;;;;;OAOG;IACO,eAAe,CAAC,IAAyB,EAAE,IAAyB;QAC5E,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SACpB;QAED,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;;;;;OAOG;IACO,eAAe;QACvB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,YAAY;QACjB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,WAAW;QAChB,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC;IAED;;;;;;;;OAQG;IACI,aAAa,CAAC,QAAiB,IAAI;QACxC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.options.js","sourceRoot":"","sources":["../../../src/radio/radio.options.ts"],"names":[],"mappings":""}
|