@fluentui/web-components 3.0.0-beta.83 → 3.0.0-beta.85
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 +20 -2
- package/dist/dts/accordion-item/accordion-item.base.d.ts +71 -0
- package/dist/dts/accordion-item/accordion-item.d.ts +1 -71
- package/dist/dts/accordion-item/index.d.ts +2 -1
- package/dist/dts/anchor-button/anchor-button.base.d.ts +144 -0
- package/dist/dts/anchor-button/anchor-button.d.ts +2 -144
- package/dist/dts/anchor-button/index.d.ts +3 -1
- package/dist/dts/avatar/avatar.base.d.ts +42 -0
- package/dist/dts/avatar/avatar.d.ts +2 -42
- package/dist/dts/avatar/index.d.ts +2 -1
- package/dist/dts/button/button.base.d.ts +242 -0
- package/dist/dts/button/button.d.ts +2 -242
- package/dist/dts/button/index.d.ts +2 -1
- package/dist/dts/checkbox/checkbox.base.d.ts +288 -0
- package/dist/dts/checkbox/checkbox.d.ts +1 -288
- package/dist/dts/checkbox/index.d.ts +2 -1
- package/dist/dts/divider/divider.base.d.ts +49 -0
- package/dist/dts/divider/divider.d.ts +2 -49
- package/dist/dts/divider/index.d.ts +2 -1
- package/dist/dts/dropdown/dropdown.base.d.ts +418 -0
- package/dist/dts/dropdown/dropdown.d.ts +2 -418
- package/dist/dts/dropdown/dropdown.options.d.ts +1 -1
- package/dist/dts/dropdown/dropdown.template.d.ts +1 -1
- package/dist/dts/dropdown/index.d.ts +2 -1
- package/dist/dts/field/field.base.d.ts +120 -0
- package/dist/dts/field/field.d.ts +2 -120
- package/dist/dts/field/index.d.ts +2 -1
- package/dist/dts/index-rollup.d.ts +2 -0
- package/dist/dts/index.d.ts +7 -8
- package/dist/dts/link/link.d.ts +1 -1
- package/dist/dts/listbox/listbox.d.ts +1 -1
- package/dist/dts/progress-bar/index.d.ts +2 -1
- package/dist/dts/progress-bar/progress-bar.base.d.ts +73 -0
- package/dist/dts/progress-bar/progress-bar.d.ts +2 -73
- package/dist/dts/radio/radio.d.ts +1 -1
- package/dist/dts/rating-display/index.d.ts +2 -1
- package/dist/dts/rating-display/rating-display.base.d.ts +89 -0
- package/dist/dts/rating-display/rating-display.d.ts +1 -89
- package/dist/dts/spinner/index.d.ts +2 -1
- package/dist/dts/spinner/spinner.base.d.ts +14 -0
- package/dist/dts/spinner/spinner.d.ts +1 -14
- package/dist/dts/switch/switch.d.ts +1 -1
- package/dist/dts/tablist/index.d.ts +2 -1
- package/dist/dts/tablist/tablist.base.d.ts +95 -0
- package/dist/dts/tablist/tablist.d.ts +2 -95
- package/dist/dts/tabs/tabs.base.d.ts +90 -0
- package/dist/dts/tabs/tabs.d.ts +2 -90
- package/dist/dts/text-input/index.d.ts +2 -1
- package/dist/dts/text-input/text-input.base.d.ts +393 -0
- package/dist/dts/text-input/text-input.d.ts +2 -393
- package/dist/dts/textarea/index.d.ts +2 -1
- package/dist/dts/textarea/textarea.base.d.ts +347 -0
- package/dist/dts/textarea/textarea.d.ts +2 -347
- package/dist/dts/tree/define.d.ts +1 -0
- package/dist/dts/tree/index.d.ts +4 -0
- package/dist/dts/tree/tree.bench.d.ts +3 -0
- package/dist/dts/tree/tree.d.ts +88 -0
- package/dist/dts/tree/tree.definition.d.ts +8 -0
- package/dist/dts/tree/tree.styles.d.ts +1 -0
- package/dist/dts/tree/tree.template.d.ts +2 -0
- package/dist/dts/tree-item/define.d.ts +1 -0
- package/dist/dts/tree-item/index.d.ts +5 -0
- package/dist/dts/tree-item/tree-item.bench.d.ts +3 -0
- package/dist/dts/tree-item/tree-item.d.ts +121 -0
- package/dist/dts/tree-item/tree-item.definition.d.ts +8 -0
- package/dist/dts/tree-item/tree-item.options.d.ts +22 -0
- package/dist/dts/tree-item/tree-item.styles.d.ts +1 -0
- package/dist/dts/tree-item/tree-item.template.d.ts +2 -0
- package/dist/esm/accordion/accordion.js +1 -1
- package/dist/esm/accordion/accordion.js.map +1 -1
- package/dist/esm/accordion-item/accordion-item.base.js +94 -0
- package/dist/esm/accordion-item/accordion-item.base.js.map +1 -0
- package/dist/esm/accordion-item/accordion-item.js +2 -91
- package/dist/esm/accordion-item/accordion-item.js.map +1 -1
- package/dist/esm/accordion-item/index.js +2 -1
- package/dist/esm/accordion-item/index.js.map +1 -1
- package/dist/esm/anchor-button/anchor-button.base.js +147 -0
- package/dist/esm/anchor-button/anchor-button.base.js.map +1 -0
- package/dist/esm/anchor-button/anchor-button.js +3 -145
- package/dist/esm/anchor-button/anchor-button.js.map +1 -1
- package/dist/esm/anchor-button/index.js +3 -1
- package/dist/esm/anchor-button/index.js.map +1 -1
- package/dist/esm/avatar/avatar.base.js +28 -0
- package/dist/esm/avatar/avatar.base.js.map +1 -0
- package/dist/esm/avatar/avatar.js +2 -26
- package/dist/esm/avatar/avatar.js.map +1 -1
- package/dist/esm/avatar/index.js +2 -1
- package/dist/esm/avatar/index.js.map +1 -1
- package/dist/esm/button/button.base.js +283 -0
- package/dist/esm/button/button.base.js.map +1 -0
- package/dist/esm/button/button.js +3 -281
- package/dist/esm/button/button.js.map +1 -1
- package/dist/esm/button/button.styles.js +2 -1
- package/dist/esm/button/button.styles.js.map +1 -1
- package/dist/esm/button/index.js +2 -1
- package/dist/esm/button/index.js.map +1 -1
- package/dist/esm/checkbox/checkbox.base.js +366 -0
- package/dist/esm/checkbox/checkbox.base.js.map +1 -0
- package/dist/esm/checkbox/checkbox.js +2 -363
- package/dist/esm/checkbox/checkbox.js.map +1 -1
- package/dist/esm/checkbox/index.js +2 -1
- package/dist/esm/checkbox/index.js.map +1 -1
- package/dist/esm/divider/divider.base.js +61 -0
- package/dist/esm/divider/divider.base.js.map +1 -0
- package/dist/esm/divider/divider.js +3 -58
- package/dist/esm/divider/divider.js.map +1 -1
- package/dist/esm/divider/index.js +2 -1
- package/dist/esm/divider/index.js.map +1 -1
- package/dist/esm/dropdown/dropdown.base.js +677 -0
- package/dist/esm/dropdown/dropdown.base.js.map +1 -0
- package/dist/esm/dropdown/dropdown.js +3 -674
- package/dist/esm/dropdown/dropdown.js.map +1 -1
- package/dist/esm/dropdown/index.js +2 -1
- package/dist/esm/dropdown/index.js.map +1 -1
- package/dist/esm/field/field.base.js +189 -0
- package/dist/esm/field/field.base.js.map +1 -0
- package/dist/esm/field/field.js +3 -187
- package/dist/esm/field/field.js.map +1 -1
- package/dist/esm/field/index.js +2 -1
- package/dist/esm/field/index.js.map +1 -1
- package/dist/esm/index-rollup.js +2 -0
- package/dist/esm/index-rollup.js.map +1 -1
- package/dist/esm/index.js +6 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/link/link.js +1 -1
- package/dist/esm/link/link.js.map +1 -1
- package/dist/esm/progress-bar/index.js +2 -1
- package/dist/esm/progress-bar/index.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.base.js +90 -0
- package/dist/esm/progress-bar/progress-bar.base.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.js +3 -87
- package/dist/esm/progress-bar/progress-bar.js.map +1 -1
- package/dist/esm/radio/radio.js +1 -1
- package/dist/esm/radio/radio.js.map +1 -1
- package/dist/esm/rating-display/index.js +2 -1
- package/dist/esm/rating-display/index.js.map +1 -1
- package/dist/esm/rating-display/rating-display.base.js +94 -0
- package/dist/esm/rating-display/rating-display.base.js.map +1 -0
- package/dist/esm/rating-display/rating-display.js +2 -92
- package/dist/esm/rating-display/rating-display.js.map +1 -1
- package/dist/esm/spinner/index.js +2 -1
- package/dist/esm/spinner/index.js.map +1 -1
- package/dist/esm/spinner/spinner.base.js +18 -0
- package/dist/esm/spinner/spinner.base.js.map +1 -0
- package/dist/esm/spinner/spinner.js +2 -17
- package/dist/esm/spinner/spinner.js.map +1 -1
- package/dist/esm/switch/switch.js +1 -1
- package/dist/esm/switch/switch.js.map +1 -1
- package/dist/esm/tablist/index.js +2 -1
- package/dist/esm/tablist/index.js.map +1 -1
- package/dist/esm/tablist/tablist.base.js +248 -0
- package/dist/esm/tablist/tablist.base.js.map +1 -0
- package/dist/esm/tablist/tablist.js +3 -245
- package/dist/esm/tablist/tablist.js.map +1 -1
- package/dist/esm/tabs/tabs.base.js +279 -0
- package/dist/esm/tabs/tabs.base.js.map +1 -0
- package/dist/esm/tabs/tabs.js +2 -276
- package/dist/esm/tabs/tabs.js.map +1 -1
- package/dist/esm/text-input/index.js +2 -1
- package/dist/esm/text-input/index.js.map +1 -1
- package/dist/esm/text-input/text-input.base.js +409 -0
- package/dist/esm/text-input/text-input.base.js.map +1 -0
- package/dist/esm/text-input/text-input.js +3 -407
- package/dist/esm/text-input/text-input.js.map +1 -1
- package/dist/esm/textarea/index.js +2 -1
- package/dist/esm/textarea/index.js.map +1 -1
- package/dist/esm/textarea/textarea.base.js +494 -0
- package/dist/esm/textarea/textarea.base.js.map +1 -0
- package/dist/esm/textarea/textarea.js +3 -491
- package/dist/esm/textarea/textarea.js.map +1 -1
- package/dist/esm/tree/define.js +4 -0
- package/dist/esm/tree/define.js.map +1 -0
- package/dist/esm/tree/index.js +5 -0
- package/dist/esm/tree/index.js.map +1 -0
- package/dist/esm/tree/tree.bench.js +10 -0
- package/dist/esm/tree/tree.bench.js.map +1 -0
- package/dist/esm/tree/tree.definition.js +16 -0
- package/dist/esm/tree/tree.definition.js.map +1 -0
- package/dist/esm/tree/tree.js +274 -0
- package/dist/esm/tree/tree.js.map +1 -0
- package/dist/esm/tree/tree.styles.js +9 -0
- package/dist/esm/tree/tree.styles.js.map +1 -0
- package/dist/esm/tree/tree.template.js +18 -0
- package/dist/esm/tree/tree.template.js.map +1 -0
- package/dist/esm/tree-item/define.js +4 -0
- package/dist/esm/tree-item/define.js.map +1 -0
- package/dist/esm/tree-item/index.js +5 -0
- package/dist/esm/tree-item/index.js.map +1 -0
- package/dist/esm/tree-item/tree-item.bench.js +10 -0
- package/dist/esm/tree-item/tree-item.bench.js.map +1 -0
- package/dist/esm/tree-item/tree-item.definition.js +16 -0
- package/dist/esm/tree-item/tree-item.definition.js.map +1 -0
- package/dist/esm/tree-item/tree-item.js +201 -0
- package/dist/esm/tree-item/tree-item.js.map +1 -0
- package/dist/esm/tree-item/tree-item.options.js +24 -0
- package/dist/esm/tree-item/tree-item.options.js.map +1 -0
- package/dist/esm/tree-item/tree-item.styles.js +170 -0
- package/dist/esm/tree-item/tree-item.styles.js.map +1 -0
- package/dist/esm/tree-item/tree-item.template.js +41 -0
- package/dist/esm/tree-item/tree-item.template.js.map +1 -0
- package/dist/web-components.d.ts +157 -0
- package/dist/web-components.js +1445 -842
- package/dist/web-components.min.js +310 -303
- package/package.json +5 -1
|
@@ -1,414 +1,10 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr
|
|
2
|
+
import { attr } from '@microsoft/fast-element';
|
|
3
3
|
import { StartEnd } from '../patterns/start-end.js';
|
|
4
4
|
import { applyMixins } from '../utils/apply-mixins.js';
|
|
5
5
|
import { swapStates } from '../utils/element-internals.js';
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
* A Text Input Custom HTML Element.
|
|
9
|
-
* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | `<input>`} element.
|
|
10
|
-
*
|
|
11
|
-
* @slot start - Content which can be provided before the input
|
|
12
|
-
* @slot end - Content which can be provided after the input
|
|
13
|
-
* @slot - The default slot for button content
|
|
14
|
-
* @csspart label - The internal `<label>` element
|
|
15
|
-
* @csspart root - the root container for the internal control
|
|
16
|
-
* @csspart control - The internal `<input>` control
|
|
17
|
-
* @public
|
|
18
|
-
*/
|
|
19
|
-
export class BaseTextInput extends FASTElement {
|
|
20
|
-
constructor() {
|
|
21
|
-
super(...arguments);
|
|
22
|
-
/**
|
|
23
|
-
* Allows setting a type or mode of text.
|
|
24
|
-
*
|
|
25
|
-
* @public
|
|
26
|
-
* @remarks
|
|
27
|
-
* HTML Attribute: `type`
|
|
28
|
-
*/
|
|
29
|
-
this.type = TextInputType.text;
|
|
30
|
-
/**
|
|
31
|
-
* Indicates that the value has been changed by the user.
|
|
32
|
-
*
|
|
33
|
-
* @internal
|
|
34
|
-
*/
|
|
35
|
-
this.dirtyValue = false;
|
|
36
|
-
/**
|
|
37
|
-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
38
|
-
*
|
|
39
|
-
* @internal
|
|
40
|
-
*/
|
|
41
|
-
this.elementInternals = this.attachInternals();
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* Tracks the current value of the input.
|
|
45
|
-
*
|
|
46
|
-
* @param prev - the previous value
|
|
47
|
-
* @param next - the next value
|
|
48
|
-
*
|
|
49
|
-
* @internal
|
|
50
|
-
*/
|
|
51
|
-
currentValueChanged(prev, next) {
|
|
52
|
-
this.value = next;
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* Updates the control label visibility based on the presence of default slotted content.
|
|
56
|
-
*
|
|
57
|
-
* @internal
|
|
58
|
-
*/
|
|
59
|
-
defaultSlottedNodesChanged(prev, next) {
|
|
60
|
-
if (this.$fastController.isConnected) {
|
|
61
|
-
this.controlLabel.hidden = !next?.length;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* Sets the value of the element to the initial value.
|
|
66
|
-
*
|
|
67
|
-
* @internal
|
|
68
|
-
*/
|
|
69
|
-
initialValueChanged() {
|
|
70
|
-
if (!this.dirtyValue) {
|
|
71
|
-
this.value = this.initialValue;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
/**
|
|
75
|
-
* Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
|
|
76
|
-
*
|
|
77
|
-
* @internal
|
|
78
|
-
*/
|
|
79
|
-
readOnlyChanged() {
|
|
80
|
-
if (this.$fastController.isConnected) {
|
|
81
|
-
this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Syncs the element's internal `aria-required` state with the `required` attribute.
|
|
86
|
-
*
|
|
87
|
-
* @param previous - the previous required state
|
|
88
|
-
* @param next - the current required state
|
|
89
|
-
*
|
|
90
|
-
* @internal
|
|
91
|
-
*/
|
|
92
|
-
requiredChanged(previous, next) {
|
|
93
|
-
if (this.$fastController.isConnected) {
|
|
94
|
-
this.elementInternals.ariaRequired = `${!!next}`;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
/**
|
|
98
|
-
* The form-associated flag.
|
|
99
|
-
* @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
|
|
100
|
-
*
|
|
101
|
-
* @public
|
|
102
|
-
*/
|
|
103
|
-
static { this.formAssociated = true; }
|
|
104
|
-
/**
|
|
105
|
-
* The element's validity state.
|
|
106
|
-
*
|
|
107
|
-
* @public
|
|
108
|
-
* @remarks
|
|
109
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
|
|
110
|
-
*/
|
|
111
|
-
get validity() {
|
|
112
|
-
return this.elementInternals.validity;
|
|
113
|
-
}
|
|
114
|
-
/**
|
|
115
|
-
* The validation message.
|
|
116
|
-
*
|
|
117
|
-
* @public
|
|
118
|
-
* @remarks
|
|
119
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
|
|
120
|
-
*/
|
|
121
|
-
get validationMessage() {
|
|
122
|
-
return this.elementInternals.validationMessage || this.control.validationMessage;
|
|
123
|
-
}
|
|
124
|
-
/**
|
|
125
|
-
* The current value of the input.
|
|
126
|
-
* @public
|
|
127
|
-
*/
|
|
128
|
-
get value() {
|
|
129
|
-
Observable.track(this, 'value');
|
|
130
|
-
return this.currentValue;
|
|
131
|
-
}
|
|
132
|
-
set value(value) {
|
|
133
|
-
this.currentValue = value;
|
|
134
|
-
if (this.$fastController.isConnected) {
|
|
135
|
-
this.control.value = value ?? '';
|
|
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
|
-
* The associated form element.
|
|
153
|
-
*
|
|
154
|
-
* @public
|
|
155
|
-
* @remarks
|
|
156
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
|
|
157
|
-
*/
|
|
158
|
-
get form() {
|
|
159
|
-
return this.elementInternals.form;
|
|
160
|
-
}
|
|
161
|
-
/**
|
|
162
|
-
* Handles the internal control's `keypress` event.
|
|
163
|
-
*
|
|
164
|
-
* @internal
|
|
165
|
-
*/
|
|
166
|
-
beforeinputHandler(e) {
|
|
167
|
-
if (e.inputType === 'insertLineBreak') {
|
|
168
|
-
this.implicitSubmit();
|
|
169
|
-
}
|
|
170
|
-
return true;
|
|
171
|
-
}
|
|
172
|
-
/**
|
|
173
|
-
* Change event handler for inner control.
|
|
174
|
-
*
|
|
175
|
-
* @internal
|
|
176
|
-
* @privateRemarks
|
|
177
|
-
* "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
|
|
178
|
-
* proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
|
|
179
|
-
*/
|
|
180
|
-
changeHandler(e) {
|
|
181
|
-
this.setValidity();
|
|
182
|
-
this.$emit('change', e, {
|
|
183
|
-
bubbles: true,
|
|
184
|
-
composed: true,
|
|
185
|
-
});
|
|
186
|
-
return true;
|
|
187
|
-
}
|
|
188
|
-
/**
|
|
189
|
-
* Checks the validity of the element and returns the result.
|
|
190
|
-
*
|
|
191
|
-
* @public
|
|
192
|
-
* @remarks
|
|
193
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
|
|
194
|
-
*/
|
|
195
|
-
checkValidity() {
|
|
196
|
-
return this.elementInternals.checkValidity();
|
|
197
|
-
}
|
|
198
|
-
/**
|
|
199
|
-
* Clicks the inner control when the component is clicked.
|
|
200
|
-
*
|
|
201
|
-
* @param e - the event object
|
|
202
|
-
*/
|
|
203
|
-
clickHandler(e) {
|
|
204
|
-
if (e.target === this) {
|
|
205
|
-
this.control?.click();
|
|
206
|
-
}
|
|
207
|
-
return true;
|
|
208
|
-
}
|
|
209
|
-
connectedCallback() {
|
|
210
|
-
super.connectedCallback();
|
|
211
|
-
this.setFormValue(this.value);
|
|
212
|
-
this.setValidity();
|
|
213
|
-
}
|
|
214
|
-
/**
|
|
215
|
-
* Focuses the inner control when the component is focused.
|
|
216
|
-
*
|
|
217
|
-
* @param e - the event object
|
|
218
|
-
* @public
|
|
219
|
-
*/
|
|
220
|
-
focusinHandler(e) {
|
|
221
|
-
if (e.target === this) {
|
|
222
|
-
this.control?.focus();
|
|
223
|
-
}
|
|
224
|
-
return true;
|
|
225
|
-
}
|
|
226
|
-
/**
|
|
227
|
-
* Resets the value to its initial value when the form is reset.
|
|
228
|
-
*
|
|
229
|
-
* @internal
|
|
230
|
-
*/
|
|
231
|
-
formResetCallback() {
|
|
232
|
-
this.value = this.initialValue;
|
|
233
|
-
this.dirtyValue = false;
|
|
234
|
-
}
|
|
235
|
-
/**
|
|
236
|
-
* Handles implicit form submission when the user presses the "Enter" key.
|
|
237
|
-
*
|
|
238
|
-
* @internal
|
|
239
|
-
*/
|
|
240
|
-
implicitSubmit() {
|
|
241
|
-
if (!this.elementInternals.form) {
|
|
242
|
-
return;
|
|
243
|
-
}
|
|
244
|
-
if (this.elementInternals.form.elements.length === 1) {
|
|
245
|
-
this.elementInternals.form.requestSubmit();
|
|
246
|
-
return;
|
|
247
|
-
}
|
|
248
|
-
const formElements = [...this.elementInternals.form.elements];
|
|
249
|
-
// Try submitting with the first submit button, if any
|
|
250
|
-
const submitButton = formElements.find(x => x.getAttribute('type') === 'submit');
|
|
251
|
-
if (submitButton) {
|
|
252
|
-
submitButton.click();
|
|
253
|
-
return;
|
|
254
|
-
}
|
|
255
|
-
// Determine if there is only one implicit submission blocking element
|
|
256
|
-
const filteredElements = formElements.filter(x => ImplicitSubmissionBlockingTypes.includes(x.getAttribute('type') ?? ''));
|
|
257
|
-
if (filteredElements.length > 1) {
|
|
258
|
-
return;
|
|
259
|
-
}
|
|
260
|
-
this.elementInternals.form.requestSubmit();
|
|
261
|
-
}
|
|
262
|
-
/**
|
|
263
|
-
* Handles the internal control's `input` event.
|
|
264
|
-
*
|
|
265
|
-
* @internal
|
|
266
|
-
*/
|
|
267
|
-
inputHandler(e) {
|
|
268
|
-
this.dirtyValue = true;
|
|
269
|
-
this.value = this.control.value;
|
|
270
|
-
return true;
|
|
271
|
-
}
|
|
272
|
-
/**
|
|
273
|
-
* Handles the internal control's `keydown` event.
|
|
274
|
-
*
|
|
275
|
-
* @param e - the event object
|
|
276
|
-
* @internal
|
|
277
|
-
*/
|
|
278
|
-
keydownHandler(e) {
|
|
279
|
-
if (e.key === 'Enter') {
|
|
280
|
-
this.implicitSubmit();
|
|
281
|
-
}
|
|
282
|
-
return true;
|
|
283
|
-
}
|
|
284
|
-
/**
|
|
285
|
-
* Selects all the text in the text field.
|
|
286
|
-
*
|
|
287
|
-
* @public
|
|
288
|
-
* @privateRemarks
|
|
289
|
-
* The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
|
|
290
|
-
* emitting a `select` event whenever the internal control emits a `select` event
|
|
291
|
-
*
|
|
292
|
-
*/
|
|
293
|
-
select() {
|
|
294
|
-
this.control.select();
|
|
295
|
-
this.$emit('select');
|
|
296
|
-
}
|
|
297
|
-
/**
|
|
298
|
-
* Sets the custom validity message.
|
|
299
|
-
* @param message - The message to set
|
|
300
|
-
*
|
|
301
|
-
* @public
|
|
302
|
-
*/
|
|
303
|
-
setCustomValidity(message) {
|
|
304
|
-
this.elementInternals.setValidity({ customError: true }, message);
|
|
305
|
-
this.reportValidity();
|
|
306
|
-
}
|
|
307
|
-
/**
|
|
308
|
-
* Reports the validity of the element.
|
|
309
|
-
*
|
|
310
|
-
* @public
|
|
311
|
-
* @remarks
|
|
312
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
|
|
313
|
-
*/
|
|
314
|
-
reportValidity() {
|
|
315
|
-
return this.elementInternals.reportValidity();
|
|
316
|
-
}
|
|
317
|
-
/**
|
|
318
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
|
|
319
|
-
*
|
|
320
|
-
* @internal
|
|
321
|
-
*/
|
|
322
|
-
setFormValue(value, state) {
|
|
323
|
-
this.elementInternals.setFormValue(value, value ?? state);
|
|
324
|
-
}
|
|
325
|
-
/**
|
|
326
|
-
* Sets the validity of the control.
|
|
327
|
-
*
|
|
328
|
-
* @param flags - Validity flags. If not provided, the control's `validity` will be used.
|
|
329
|
-
* @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
|
|
330
|
-
* @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
|
|
331
|
-
*
|
|
332
|
-
* @internal
|
|
333
|
-
*/
|
|
334
|
-
setValidity(flags = this.control.validity, message = this.validationMessage, anchor = this.control) {
|
|
335
|
-
if (this.$fastController.isConnected) {
|
|
336
|
-
if (this.disabled) {
|
|
337
|
-
this.elementInternals.setValidity({});
|
|
338
|
-
return;
|
|
339
|
-
}
|
|
340
|
-
this.elementInternals.setValidity(flags, message, anchor);
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
__decorate([
|
|
345
|
-
attr
|
|
346
|
-
], BaseTextInput.prototype, "autocomplete", void 0);
|
|
347
|
-
__decorate([
|
|
348
|
-
attr({ mode: 'boolean' })
|
|
349
|
-
], BaseTextInput.prototype, "autofocus", void 0);
|
|
350
|
-
__decorate([
|
|
351
|
-
attr({ attribute: 'current-value' })
|
|
352
|
-
], BaseTextInput.prototype, "currentValue", void 0);
|
|
353
|
-
__decorate([
|
|
354
|
-
observable
|
|
355
|
-
], BaseTextInput.prototype, "defaultSlottedNodes", void 0);
|
|
356
|
-
__decorate([
|
|
357
|
-
attr
|
|
358
|
-
], BaseTextInput.prototype, "dirname", void 0);
|
|
359
|
-
__decorate([
|
|
360
|
-
attr({ mode: 'boolean' })
|
|
361
|
-
], BaseTextInput.prototype, "disabled", void 0);
|
|
362
|
-
__decorate([
|
|
363
|
-
attr({ attribute: 'form' })
|
|
364
|
-
], BaseTextInput.prototype, "formAttribute", void 0);
|
|
365
|
-
__decorate([
|
|
366
|
-
attr({ attribute: 'value', mode: 'fromView' })
|
|
367
|
-
], BaseTextInput.prototype, "initialValue", void 0);
|
|
368
|
-
__decorate([
|
|
369
|
-
attr
|
|
370
|
-
], BaseTextInput.prototype, "list", void 0);
|
|
371
|
-
__decorate([
|
|
372
|
-
attr({ converter: nullableNumberConverter })
|
|
373
|
-
], BaseTextInput.prototype, "maxlength", void 0);
|
|
374
|
-
__decorate([
|
|
375
|
-
attr({ converter: nullableNumberConverter })
|
|
376
|
-
], BaseTextInput.prototype, "minlength", void 0);
|
|
377
|
-
__decorate([
|
|
378
|
-
attr({ mode: 'boolean' })
|
|
379
|
-
], BaseTextInput.prototype, "multiple", void 0);
|
|
380
|
-
__decorate([
|
|
381
|
-
attr
|
|
382
|
-
], BaseTextInput.prototype, "name", void 0);
|
|
383
|
-
__decorate([
|
|
384
|
-
attr
|
|
385
|
-
], BaseTextInput.prototype, "pattern", void 0);
|
|
386
|
-
__decorate([
|
|
387
|
-
attr
|
|
388
|
-
], BaseTextInput.prototype, "placeholder", void 0);
|
|
389
|
-
__decorate([
|
|
390
|
-
attr({ attribute: 'readonly', mode: 'boolean' })
|
|
391
|
-
], BaseTextInput.prototype, "readOnly", void 0);
|
|
392
|
-
__decorate([
|
|
393
|
-
attr({ mode: 'boolean' })
|
|
394
|
-
], BaseTextInput.prototype, "required", void 0);
|
|
395
|
-
__decorate([
|
|
396
|
-
attr({ converter: nullableNumberConverter })
|
|
397
|
-
], BaseTextInput.prototype, "size", void 0);
|
|
398
|
-
__decorate([
|
|
399
|
-
attr({
|
|
400
|
-
converter: {
|
|
401
|
-
fromView: value => (typeof value === 'string' ? ['true', ''].includes(value.trim().toLowerCase()) : null),
|
|
402
|
-
toView: value => value.toString(),
|
|
403
|
-
},
|
|
404
|
-
})
|
|
405
|
-
], BaseTextInput.prototype, "spellcheck", void 0);
|
|
406
|
-
__decorate([
|
|
407
|
-
attr
|
|
408
|
-
], BaseTextInput.prototype, "type", void 0);
|
|
409
|
-
__decorate([
|
|
410
|
-
observable
|
|
411
|
-
], BaseTextInput.prototype, "controlLabel", void 0);
|
|
6
|
+
import { BaseTextInput } from './text-input.base.js';
|
|
7
|
+
import { TextInputAppearance, TextInputControlSize } from './text-input.options.js';
|
|
412
8
|
/**
|
|
413
9
|
* A Text Input Custom HTML Element.
|
|
414
10
|
* Based on BaseTextInput and includes style and layout specific attributes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpF;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,aAAa;IAW1C;;;;OAIG;IACI,iBAAiB,CAAC,IAAqC,EAAE,IAAqC;QACnG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,mBAAmB,CAAC,CAAC;IACrE,CAAC;IAYD;;;;OAIG;IACI,kBAAkB,CAAC,IAAsC,EAAE,IAAsC;QACtG,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC;IACtE,CAAC;CACF;AA7BQ;IADN,IAAI;6CACmC;AAmBjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CACM;AAqB5C,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { definition as TextAreaDefinition } from './textarea.definition.js';
|
|
2
|
-
export { BaseTextArea
|
|
2
|
+
export { BaseTextArea } from './textarea.base.js';
|
|
3
|
+
export { TextArea } from './textarea.js';
|
|
3
4
|
export { TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, TextAreaResize, TextAreaSize, } from './textarea.options.js';
|
|
4
5
|
export { styles as TextAreaStyles } from './textarea.styles.js';
|
|
5
6
|
export { template as TextAreaTemplate } from './textarea.template.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,mCAAmC,EACnC,oBAAoB,EACpB,cAAc,EACd,YAAY,GACb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}
|