@fluentui/web-components 3.0.0-beta.24 → 3.0.0-beta.26

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.
Files changed (81) hide show
  1. package/CHANGELOG.md +23 -2
  2. package/dist/dts/checkbox/checkbox.d.ts +258 -32
  3. package/dist/dts/checkbox/checkbox.options.d.ts +13 -10
  4. package/dist/dts/checkbox/checkbox.template.d.ts +3 -2
  5. package/dist/dts/checkbox/index.d.ts +2 -2
  6. package/dist/dts/field/define.d.ts +1 -0
  7. package/dist/dts/field/field.bench.d.ts +3 -0
  8. package/dist/dts/field/field.d.ts +99 -0
  9. package/dist/dts/field/field.definition.d.ts +9 -0
  10. package/dist/dts/field/field.options.d.ts +41 -0
  11. package/dist/dts/field/field.styles.d.ts +6 -0
  12. package/dist/dts/field/field.template.d.ts +6 -0
  13. package/dist/dts/field/index.d.ts +6 -0
  14. package/dist/dts/index-rollup.d.ts +1 -0
  15. package/dist/dts/index.d.ts +2 -0
  16. package/dist/dts/switch/switch.d.ts +2 -39
  17. package/dist/dts/text-input/text-input.d.ts +50 -8
  18. package/dist/dts/utils/element-internals.d.ts +20 -0
  19. package/dist/esm/checkbox/checkbox.definition.js +1 -1
  20. package/dist/esm/checkbox/checkbox.definition.js.map +1 -1
  21. package/dist/esm/checkbox/checkbox.js +346 -41
  22. package/dist/esm/checkbox/checkbox.js.map +1 -1
  23. package/dist/esm/checkbox/checkbox.options.js +0 -8
  24. package/dist/esm/checkbox/checkbox.options.js.map +1 -1
  25. package/dist/esm/checkbox/checkbox.styles.js +145 -123
  26. package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
  27. package/dist/esm/checkbox/checkbox.template.js +23 -34
  28. package/dist/esm/checkbox/checkbox.template.js.map +1 -1
  29. package/dist/esm/checkbox/index.js +1 -1
  30. package/dist/esm/checkbox/index.js.map +1 -1
  31. package/dist/esm/dialog/dialog.styles.js +9 -2
  32. package/dist/esm/dialog/dialog.styles.js.map +1 -1
  33. package/dist/esm/field/define.js +4 -0
  34. package/dist/esm/field/define.js.map +1 -0
  35. package/dist/esm/field/field.bench.js +10 -0
  36. package/dist/esm/field/field.bench.js.map +1 -0
  37. package/dist/esm/field/field.definition.js +20 -0
  38. package/dist/esm/field/field.definition.js.map +1 -0
  39. package/dist/esm/field/field.js +139 -0
  40. package/dist/esm/field/field.js.map +1 -0
  41. package/dist/esm/field/field.options.js +27 -0
  42. package/dist/esm/field/field.options.js.map +1 -0
  43. package/dist/esm/field/field.styles.js +186 -0
  44. package/dist/esm/field/field.styles.js.map +1 -0
  45. package/dist/esm/field/field.template.js +26 -0
  46. package/dist/esm/field/field.template.js.map +1 -0
  47. package/dist/esm/field/index.js +6 -0
  48. package/dist/esm/field/index.js.map +1 -0
  49. package/dist/esm/index-rollup.js +1 -0
  50. package/dist/esm/index-rollup.js.map +1 -1
  51. package/dist/esm/index.js +1 -0
  52. package/dist/esm/index.js.map +1 -1
  53. package/dist/esm/label/label.styles.js +12 -5
  54. package/dist/esm/label/label.styles.js.map +1 -1
  55. package/dist/esm/switch/switch.js +2 -52
  56. package/dist/esm/switch/switch.js.map +1 -1
  57. package/dist/esm/switch/switch.styles.js +34 -55
  58. package/dist/esm/switch/switch.styles.js.map +1 -1
  59. package/dist/esm/switch/switch.template.js +6 -16
  60. package/dist/esm/switch/switch.template.js.map +1 -1
  61. package/dist/esm/text/text.styles.js +48 -24
  62. package/dist/esm/text/text.styles.js.map +1 -1
  63. package/dist/esm/text-input/text-input.definition.js +3 -0
  64. package/dist/esm/text-input/text-input.definition.js.map +1 -1
  65. package/dist/esm/text-input/text-input.js +78 -20
  66. package/dist/esm/text-input/text-input.js.map +1 -1
  67. package/dist/esm/text-input/text-input.styles.js +14 -9
  68. package/dist/esm/text-input/text-input.styles.js.map +1 -1
  69. package/dist/esm/text-input/text-input.template.js +39 -33
  70. package/dist/esm/text-input/text-input.template.js.map +1 -1
  71. package/dist/esm/theme/set-theme.js +10 -5
  72. package/dist/esm/theme/set-theme.js.map +1 -1
  73. package/dist/esm/utils/element-internals.js +32 -0
  74. package/dist/esm/utils/element-internals.js.map +1 -0
  75. package/dist/web-components.d.ts +506 -138
  76. package/dist/web-components.js +2264 -1692
  77. package/dist/web-components.min.js +243 -238
  78. package/package.json +1 -1
  79. package/dist/dts/checkbox/checkbox.form-associated.d.ts +0 -14
  80. package/dist/esm/checkbox/checkbox.form-associated.js +0 -14
  81. package/dist/esm/checkbox/checkbox.form-associated.js.map +0 -1
@@ -171,13 +171,13 @@ export declare class TextInput extends FASTElement {
171
171
  * @remarks
172
172
  * HTML Attribute: `readonly`
173
173
  */
174
- readonly?: boolean;
174
+ readOnly?: boolean;
175
175
  /**
176
176
  * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
177
177
  *
178
178
  * @internal
179
179
  */
180
- readonlyChanged(): void;
180
+ readOnlyChanged(): void;
181
181
  /**
182
182
  * The element's required attribute.
183
183
  *
@@ -249,7 +249,7 @@ export declare class TextInput extends FASTElement {
249
249
  *
250
250
  * @internal
251
251
  */
252
- protected elementInternals: ElementInternals;
252
+ elementInternals: ElementInternals;
253
253
  /**
254
254
  * The form-associated flag.
255
255
  * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
@@ -295,6 +295,12 @@ export declare class TextInput extends FASTElement {
295
295
  * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
296
296
  */
297
297
  get form(): HTMLFormElement | null;
298
+ /**
299
+ * Handles the internal control's `keypress` event.
300
+ *
301
+ * @internal
302
+ */
303
+ beforeinputHandler(e: InputEvent): boolean | void;
298
304
  /**
299
305
  * Change event handler for inner control.
300
306
  *
@@ -303,9 +309,29 @@ export declare class TextInput extends FASTElement {
303
309
  * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
304
310
  * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
305
311
  */
306
- changeHandler(e: InputEvent): void;
312
+ changeHandler(e: InputEvent): boolean | void;
313
+ /**
314
+ * Checks the validity of the element and returns the result.
315
+ *
316
+ * @public
317
+ * @remarks
318
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
319
+ */
320
+ checkValidity(): boolean;
321
+ /**
322
+ * Clicks the inner control when the component is clicked.
323
+ *
324
+ * @param e - the event object
325
+ */
326
+ clickHandler(e: MouseEvent): boolean | void;
307
327
  connectedCallback(): void;
308
- disconnectedCallback(): void;
328
+ /**
329
+ * Focuses the inner control when the component is focused.
330
+ *
331
+ * @param e - the event object
332
+ * @public
333
+ */
334
+ focusinHandler(e: FocusEvent): boolean | void;
309
335
  /**
310
336
  * Resets the value to its initial value when the form is reset.
311
337
  *
@@ -325,11 +351,12 @@ export declare class TextInput extends FASTElement {
325
351
  */
326
352
  inputHandler(e: InputEvent): boolean | void;
327
353
  /**
328
- * Handles the internal control's `keypress` event.
354
+ * Handles the internal control's `keydown` event.
329
355
  *
356
+ * @param e - the event object
330
357
  * @internal
331
358
  */
332
- keypressHandler(e: KeyboardEvent): boolean | void;
359
+ keydownHandler(e: KeyboardEvent): boolean | void;
333
360
  /**
334
361
  * Selects all the text in the text field.
335
362
  *
@@ -340,6 +367,21 @@ export declare class TextInput extends FASTElement {
340
367
  *
341
368
  */
342
369
  select(): void;
370
+ /**
371
+ * Sets the custom validity message.
372
+ * @param message - The message to set
373
+ *
374
+ * @public
375
+ */
376
+ setCustomValidity(message: string): void;
377
+ /**
378
+ * Reports the validity of the element.
379
+ *
380
+ * @public
381
+ * @remarks
382
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
383
+ */
384
+ reportValidity(): boolean;
343
385
  /**
344
386
  * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
345
387
  *
@@ -355,7 +397,7 @@ export declare class TextInput extends FASTElement {
355
397
  *
356
398
  * @internal
357
399
  */
358
- setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
400
+ setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
359
401
  }
360
402
  /**
361
403
  * @internal
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Check if the browser supports Custom States.
3
+ * @public
4
+ */
5
+ export declare const CustomStatesSetSupported: boolean;
6
+ /**
7
+ * This function is used to toggle a state on the control. If the browser supports Custom States, the state is toggled
8
+ * on the `ElementInternals.states` set. If the browser does not support Custom States, the state is toggled on the host
9
+ * element as an attribute with the format `state--{state}`.
10
+ *
11
+ * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet | CustomStateSet} interface
12
+ * @see The {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | ElementInternals} interface
13
+ * @see The CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:state | `:state()`} pseudo-class
14
+ *
15
+ * @param elementInternals - the `ElementInternals` instance for the component
16
+ * @param state - the state to toggle
17
+ * @param force - force the state to be toggled on or off
18
+ * @internal
19
+ */
20
+ export declare function toggleState(elementInternals: ElementInternals, state: string, force?: boolean): void;
@@ -1,7 +1,7 @@
1
1
  import { FluentDesignSystem } from '../fluent-design-system.js';
2
2
  import { Checkbox } from './checkbox.js';
3
- import { template } from './checkbox.template.js';
4
3
  import { styles } from './checkbox.styles.js';
4
+ import { template } from './checkbox.template.js';
5
5
  /**
6
6
  * The Fluent Checkbox Element
7
7
  *
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.definition.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,WAAW;IAC7C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
1
+ {"version":3,"file":"checkbox.definition.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,WAAW;IAC7C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
@@ -1,77 +1,382 @@
1
1
  import { __decorate } from "tslib";
2
- import { attr, observable } from '@microsoft/fast-element';
3
- import { keySpace } from '@microsoft/fast-web-utilities';
4
- import { FormAssociatedCheckbox } from './checkbox.form-associated.js';
2
+ import { attr, FASTElement, Observable, observable } from '@microsoft/fast-element';
3
+ import { toggleState } from '../utils/element-internals.js';
5
4
  /**
6
5
  * A Checkbox Custom HTML Element.
7
6
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
8
7
  *
9
8
  * @slot checked-indicator - The checked indicator
10
9
  * @slot indeterminate-indicator - The indeterminate indicator
11
- * @slot - The default slot for the label
12
- * @csspart control - The element representing the visual checkbox control
13
- * @csspart label - The label
14
10
  * @fires change - Emits a custom change event when the checked state changes
11
+ * @fires input - Emits a custom input event when the checked state changes
15
12
  *
16
13
  * @public
17
14
  */
18
- export class Checkbox extends FormAssociatedCheckbox {
15
+ export class BaseCheckbox extends FASTElement {
16
+ /**
17
+ * The element's current checked state.
18
+ *
19
+ * @public
20
+ */
21
+ get checked() {
22
+ Observable.track(this, 'checked');
23
+ return this._checked;
24
+ }
25
+ set checked(state) {
26
+ this._checked = state;
27
+ this.setFormValue(state ? this.value : null);
28
+ this.setValidity();
29
+ this.setAriaChecked();
30
+ toggleState(this.elementInternals, 'checked', state);
31
+ Observable.notify(this, 'checked');
32
+ }
33
+ /**
34
+ * Synchronizes the element's indeterminate state with the internal ElementInternals state.
35
+ *
36
+ * @internal
37
+ */
38
+ indeterminateChanged(prev, next) {
39
+ this.setAriaChecked();
40
+ toggleState(this.elementInternals, 'indeterminate', next);
41
+ }
42
+ /**
43
+ * Updates the form value when the checked state changes.
44
+ *
45
+ * @internal
46
+ */
47
+ initialCheckedChanged(prev, next) {
48
+ if (!this.dirtyChecked) {
49
+ this.checked = next;
50
+ }
51
+ }
52
+ /**
53
+ * Sets the value of the input when the value attribute changes.
54
+ *
55
+ * @param prev - The previous value
56
+ * @param next - The current value
57
+ * @internal
58
+ */
59
+ initialValueChanged(prev, next) {
60
+ this._value = next;
61
+ }
62
+ /**
63
+ * Sets the validity of the control when the required state changes.
64
+ *
65
+ * @param prev - The previous required state
66
+ * @param next - The current required state
67
+ * @internal
68
+ */
69
+ requiredChanged(prev, next) {
70
+ if (this.$fastController.isConnected) {
71
+ this.setValidity();
72
+ this.elementInternals.ariaRequired = `${!!next}`;
73
+ }
74
+ }
75
+ /**
76
+ * The associated `<form>` element.
77
+ *
78
+ * @public
79
+ * @remarks
80
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
81
+ */
82
+ get form() {
83
+ return this.elementInternals.form;
84
+ }
85
+ /**
86
+ * A reference to all associated `<label>` elements.
87
+ *
88
+ * @public
89
+ */
90
+ get labels() {
91
+ return Object.freeze(Array.from(this.elementInternals.labels));
92
+ }
93
+ /**
94
+ * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
95
+ * specified (e.g., via `setCustomValidity`).
96
+ *
97
+ * @public
98
+ * @remarks
99
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
100
+ */
101
+ get validationMessage() {
102
+ if (this.elementInternals.validationMessage) {
103
+ return this.elementInternals.validationMessage;
104
+ }
105
+ if (!this._validationFallbackMessage) {
106
+ const validationMessageFallbackControl = document.createElement('input');
107
+ validationMessageFallbackControl.type = 'checkbox';
108
+ validationMessageFallbackControl.required = true;
109
+ validationMessageFallbackControl.checked = false;
110
+ this._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
111
+ }
112
+ return this._validationFallbackMessage;
113
+ }
114
+ /**
115
+ * The element's validity state.
116
+ *
117
+ * @public
118
+ * @remarks
119
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
120
+ */
121
+ get validity() {
122
+ return this.elementInternals.validity;
123
+ }
124
+ /**
125
+ * The current value of the input.
126
+ *
127
+ * @public
128
+ */
129
+ get value() {
130
+ Observable.track(this, 'value');
131
+ return this._value;
132
+ }
133
+ set value(value) {
134
+ this._value = value;
135
+ if (this.$fastController.isConnected) {
136
+ this.setFormValue(value);
137
+ this.setValidity();
138
+ Observable.notify(this, 'value');
139
+ }
140
+ }
141
+ /**
142
+ * Determines if the control can be submitted for constraint validation.
143
+ *
144
+ * @public
145
+ * @remarks
146
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
147
+ */
148
+ get willValidate() {
149
+ return this.elementInternals.willValidate;
150
+ }
151
+ /**
152
+ * Sets the `elementInternals.ariaChecked` value based on the checked state.
153
+ *
154
+ * @internal
155
+ */
156
+ setAriaChecked() {
157
+ this.elementInternals.ariaChecked = this.indeterminate ? 'mixed' : `${this.checked}`;
158
+ }
159
+ /**
160
+ * Checks the validity of the element and returns the result.
161
+ *
162
+ * @public
163
+ * @remarks
164
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
165
+ */
166
+ checkValidity() {
167
+ return this.elementInternals.checkValidity();
168
+ }
169
+ /**
170
+ * Toggles the checked state when the user clicks the element.
171
+ *
172
+ * @param e - the event object
173
+ * @internal
174
+ */
175
+ clickHandler(e) {
176
+ if (this.disabled) {
177
+ return;
178
+ }
179
+ this.dirtyChecked = true;
180
+ this.toggleChecked();
181
+ this.$emit('change');
182
+ this.$emit('input');
183
+ return true;
184
+ }
185
+ connectedCallback() {
186
+ super.connectedCallback();
187
+ this.setFormValue(this.checked ? this.value : null);
188
+ this.setAriaChecked();
189
+ this.setValidity();
190
+ }
19
191
  constructor() {
192
+ var _a;
20
193
  super();
21
194
  /**
22
- * The element's value to be included in form submission when checked.
23
- * Default to "on" to reach parity with input[type="checkbox"]
195
+ * The element's disabled state.
196
+ * @public
197
+ * @remarks
198
+ * HTML Attribute: `disabled`
199
+ */
200
+ this.disabled = false;
201
+ /**
202
+ * The initial value of the input.
24
203
  *
25
- * @internal
204
+ * @public
205
+ * @remarks
206
+ * HTML Attribute: `value`
26
207
  */
27
208
  this.initialValue = 'on';
28
209
  /**
29
- * The indeterminate state of the control
210
+ * The internal checked state of the control.
211
+ *
212
+ * @internal
30
213
  */
31
- this.indeterminate = false;
214
+ this._checked = (_a = this.initialChecked) !== null && _a !== void 0 ? _a : false;
215
+ /**
216
+ * Indicates that the checked state has been changed by the user.
217
+ *
218
+ * @internal
219
+ */
220
+ this.dirtyChecked = false;
32
221
  /**
222
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
223
+ *
33
224
  * @internal
34
225
  */
35
- this.keypressHandler = (e) => {
36
- if (this.disabled) {
37
- return;
38
- }
39
- switch (e.key) {
40
- case keySpace:
41
- this.toggleChecked();
42
- break;
43
- }
44
- };
226
+ this.elementInternals = this.attachInternals();
45
227
  /**
228
+ * The fallback validation message, taken from a native checkbox `<input>` element.
229
+ *
46
230
  * @internal
47
231
  */
48
- this.clickHandler = (e) => {
49
- if (!this.disabled) {
50
- this.toggleChecked();
51
- }
52
- };
53
- this.proxy.setAttribute('type', 'checkbox');
232
+ this._validationFallbackMessage = '';
233
+ /**
234
+ * The internal value of the input.
235
+ *
236
+ * @internal
237
+ */
238
+ this._value = this.initialValue;
239
+ this.elementInternals.role = 'checkbox';
240
+ }
241
+ /**
242
+ * Updates the form value when a user changes the `checked` state.
243
+ *
244
+ * @param e - the event object
245
+ * @internal
246
+ */
247
+ inputHandler(e) {
248
+ this.elementInternals.setFormValue(this.value);
249
+ this.setValidity();
250
+ return true;
251
+ }
252
+ /**
253
+ * Prevents scrolling when the user presses the space key.
254
+ *
255
+ * @param e - the event object
256
+ * @internal
257
+ */
258
+ keydownHandler(e) {
259
+ if (e.key !== ' ') {
260
+ return true;
261
+ }
262
+ }
263
+ /**
264
+ * Toggles the checked state when the user releases the space key.
265
+ *
266
+ * @param e - the event object
267
+ * @internal
268
+ */
269
+ keyupHandler(e) {
270
+ if (e.key !== ' ') {
271
+ return true;
272
+ }
273
+ this.click();
274
+ }
275
+ /**
276
+ * Resets the form value to its initial value when the form is reset.
277
+ *
278
+ * @internal
279
+ */
280
+ formResetCallback() {
281
+ var _a;
282
+ this.checked = (_a = this.initialChecked) !== null && _a !== void 0 ? _a : false;
283
+ this.dirtyChecked = false;
284
+ this.indeterminate = false;
285
+ this.setValidity();
286
+ }
287
+ /**
288
+ * Reports the validity of the element.
289
+ *
290
+ * @public
291
+ * @remarks
292
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
293
+ */
294
+ reportValidity() {
295
+ return this.elementInternals.reportValidity();
296
+ }
297
+ /**
298
+ * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
299
+ *
300
+ * @internal
301
+ */
302
+ setFormValue(value, state) {
303
+ this.elementInternals.setFormValue(value, value !== null && value !== void 0 ? value : state);
54
304
  }
55
- toggleChecked() {
56
- if (this.indeterminate) {
57
- this.indeterminate = false;
305
+ /**
306
+ * Sets a custom validity message.
307
+ *
308
+ * @param message - The message to set
309
+ * @public
310
+ */
311
+ setCustomValidity(message) {
312
+ this.elementInternals.setValidity({ customError: true }, message);
313
+ this.setValidity();
314
+ }
315
+ /**
316
+ * Sets the validity of the control.
317
+ *
318
+ * @param flags - Validity flags to set.
319
+ * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
320
+ * @param anchor - Optional anchor to use for the validation message.
321
+ *
322
+ * @internal
323
+ */
324
+ setValidity(flags = { valueMissing: !!this.required && !this.checked }, message = this.validationMessage, anchor) {
325
+ if (this.$fastController.isConnected) {
326
+ if (this.disabled) {
327
+ this.elementInternals.setValidity({});
328
+ return;
329
+ }
330
+ this.elementInternals.setValidity(flags, message, anchor);
58
331
  }
59
- this.checked = !this.checked;
332
+ }
333
+ /**
334
+ * Toggles the checked state of the control.
335
+ *
336
+ * @public
337
+ */
338
+ toggleChecked(force = !this.checked) {
339
+ this.indeterminate = false;
340
+ this.checked = force;
60
341
  }
61
342
  }
343
+ /**
344
+ * The form-associated flag.
345
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
346
+ *
347
+ * @public
348
+ */
349
+ BaseCheckbox.formAssociated = true;
62
350
  __decorate([
63
- attr
64
- ], Checkbox.prototype, "shape", void 0);
351
+ attr({ mode: 'boolean' })
352
+ ], BaseCheckbox.prototype, "autofocus", void 0);
65
353
  __decorate([
66
- attr
67
- ], Checkbox.prototype, "size", void 0);
354
+ attr({ mode: 'boolean' })
355
+ ], BaseCheckbox.prototype, "disabled", void 0);
68
356
  __decorate([
69
- attr({ attribute: 'label-position' })
70
- ], Checkbox.prototype, "labelPosition", void 0);
357
+ attr({ attribute: 'form' })
358
+ ], BaseCheckbox.prototype, "formAttribute", void 0);
71
359
  __decorate([
72
360
  observable
73
- ], Checkbox.prototype, "defaultSlottedNodes", void 0);
361
+ ], BaseCheckbox.prototype, "indeterminate", void 0);
74
362
  __decorate([
75
- observable
76
- ], Checkbox.prototype, "indeterminate", void 0);
363
+ attr({ attribute: 'checked', mode: 'boolean' })
364
+ ], BaseCheckbox.prototype, "initialChecked", void 0);
365
+ __decorate([
366
+ attr({ attribute: 'value', mode: 'fromView' })
367
+ ], BaseCheckbox.prototype, "initialValue", void 0);
368
+ __decorate([
369
+ attr
370
+ ], BaseCheckbox.prototype, "name", void 0);
371
+ __decorate([
372
+ attr({ mode: 'boolean' })
373
+ ], BaseCheckbox.prototype, "required", void 0);
374
+ export class Checkbox extends BaseCheckbox {
375
+ }
376
+ __decorate([
377
+ attr
378
+ ], Checkbox.prototype, "shape", void 0);
379
+ __decorate([
380
+ attr
381
+ ], Checkbox.prototype, "size", void 0);
77
382
  //# sourceMappingURL=checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAYvE;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,QAAS,SAAQ,sBAAsB;IAkDlD;QACE,KAAK,EAAE,CAAC;QArBV;;;;;WAKG;QACI,iBAAY,GAAW,IAAI,CAAC;QAQnC;;WAEG;QAEI,kBAAa,GAAY,KAAK,CAAC;QAetC;;WAEG;QACI,oBAAe,GAAG,CAAC,CAAgB,EAAQ,EAAE;YAClD,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,QAAQ,CAAC,CAAC,GAAG,EAAE;gBACb,KAAK,QAAQ;oBACX,IAAI,CAAC,aAAa,EAAE,CAAC;oBACrB,MAAM;aACT;QACH,CAAC,CAAC;QAEF;;WAEG;QACI,iBAAY,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC5C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;QACH,CAAC,CAAC;QAhCA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC9C,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;CAyBF;AA7EC;IADC,IAAI;uCACwB;AAU7B;IADC,IAAI;sCACsB;AAU3B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACO;AAa7C;IADC,UAAU;qDACyB;AAMpC;IADC,UAAU;+CAC2B"}
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.ts"],"names":[],"mappings":"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"}
@@ -14,12 +14,4 @@ export const CheckboxSize = {
14
14
  medium: 'medium',
15
15
  large: 'large',
16
16
  };
17
- /**
18
- * Checkbox label position
19
- * @public
20
- */
21
- export const CheckboxLabelPosition = {
22
- before: 'before',
23
- after: 'after',
24
- };
25
17
  //# sourceMappingURL=checkbox.options.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.options.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}
1
+ {"version":3,"file":"checkbox.options.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.options.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACR,CAAC;AAKX;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}