@vonage/vivid 3.0.0-next.53 → 3.0.0-next.56
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/accordion/index.js +1 -1
- package/accordion-item/index.js +1 -1
- package/action-group/index.js +1 -1
- package/avatar/index.js +1 -1
- package/badge/index.js +1 -1
- package/banner/index.js +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/button/index.js +1 -1
- package/calendar/index.js +1 -1
- package/calendar-event/index.js +1 -1
- package/card/index.js +1 -1
- package/checkbox/index.js +1 -1
- package/dialog/index.js +1 -1
- package/divider/index.js +1 -1
- package/fab/index.js +1 -1
- package/focus/index.js +1 -1
- package/header/index.js +1 -1
- package/index.js +1 -0
- package/lib/text-area/index.d.ts +3 -0
- package/lib/text-area/text-area.d.ts +9 -0
- package/lib/text-area/text-area.template.d.ts +4 -0
- package/nav-disclosure/index.js +1 -1
- package/nav-item/index.js +1 -1
- package/note/index.js +1 -1
- package/package.json +3 -2
- package/progress/index.js +1 -1
- package/progress-ring/index.js +1 -1
- package/shared/form-elements.js +294 -0
- package/shared/patterns/form-elements.d.ts +1 -1
- package/side-drawer/index.js +1 -1
- package/styles/themes/dark.css +2 -2
- package/styles/themes/light.css +2 -2
- package/styles/typography/desktop.css +29 -14
- package/text-area/index.js +298 -0
- package/text-field/index.js +6 -292
- package/tooltip/index.js +1 -1
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
import '../focus/index.js';
|
|
2
|
+
import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
3
|
+
import { D as DelegatesARIATextbox, f as formElements } from '../shared/form-elements.js';
|
|
4
|
+
import { a as applyMixins } from '../shared/apply-mixins.js';
|
|
5
|
+
import { F as FormAssociated } from '../shared/form-associated.js';
|
|
6
|
+
import '../shared/affix.js';
|
|
7
|
+
import { f as focusTemplateFactory } from '../shared/focus2.js';
|
|
8
|
+
import { w as when } from '../shared/when.js';
|
|
9
|
+
import { r as ref } from '../shared/ref.js';
|
|
10
|
+
import { c as classNames } from '../shared/class-names.js';
|
|
11
|
+
import '../shared/focus.js';
|
|
12
|
+
import '../shared/aria-global.js';
|
|
13
|
+
import '../shared/web.dom-collections.iterator.js';
|
|
14
|
+
import '../shared/export.js';
|
|
15
|
+
import '../shared/object-keys.js';
|
|
16
|
+
import '../shared/iterators.js';
|
|
17
|
+
import '../shared/icon.js';
|
|
18
|
+
import '../shared/to-string.js';
|
|
19
|
+
import '../shared/_has.js';
|
|
20
|
+
|
|
21
|
+
class _TextArea extends FoundationElement {
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
|
|
25
|
+
*
|
|
26
|
+
* @internal
|
|
27
|
+
*/
|
|
28
|
+
class FormAssociatedTextArea extends FormAssociated(_TextArea) {
|
|
29
|
+
constructor() {
|
|
30
|
+
super(...arguments);
|
|
31
|
+
this.proxy = document.createElement("textarea");
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Resize mode for a TextArea
|
|
37
|
+
* @public
|
|
38
|
+
*/
|
|
39
|
+
const TextAreaResize = {
|
|
40
|
+
/**
|
|
41
|
+
* No resize.
|
|
42
|
+
*/
|
|
43
|
+
none: "none",
|
|
44
|
+
/**
|
|
45
|
+
* Resize vertically and horizontally.
|
|
46
|
+
*/
|
|
47
|
+
both: "both",
|
|
48
|
+
/**
|
|
49
|
+
* Resize horizontally.
|
|
50
|
+
*/
|
|
51
|
+
horizontal: "horizontal",
|
|
52
|
+
/**
|
|
53
|
+
* Resize vertically.
|
|
54
|
+
*/
|
|
55
|
+
vertical: "vertical",
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* A Text Area Custom HTML Element.
|
|
60
|
+
* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
|
|
61
|
+
*
|
|
62
|
+
* @slot - The default slot for the label
|
|
63
|
+
* @csspart label - The label
|
|
64
|
+
* @csspart root - The element wrapping the control
|
|
65
|
+
* @csspart control - The textarea element
|
|
66
|
+
* @fires change - Emits a custom 'change' event when the textarea emits a change event
|
|
67
|
+
*
|
|
68
|
+
* @public
|
|
69
|
+
*/
|
|
70
|
+
class TextArea$1 extends FormAssociatedTextArea {
|
|
71
|
+
constructor() {
|
|
72
|
+
super(...arguments);
|
|
73
|
+
/**
|
|
74
|
+
* The resize mode of the element.
|
|
75
|
+
* @public
|
|
76
|
+
* @remarks
|
|
77
|
+
* HTML Attribute: resize
|
|
78
|
+
*/
|
|
79
|
+
this.resize = TextAreaResize.none;
|
|
80
|
+
/**
|
|
81
|
+
* Sizes the element horizontally by a number of character columns.
|
|
82
|
+
*
|
|
83
|
+
* @public
|
|
84
|
+
* @remarks
|
|
85
|
+
* HTML Attribute: cols
|
|
86
|
+
*/
|
|
87
|
+
this.cols = 20;
|
|
88
|
+
/**
|
|
89
|
+
* @internal
|
|
90
|
+
*/
|
|
91
|
+
this.handleTextInput = () => {
|
|
92
|
+
this.value = this.control.value;
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
readOnlyChanged() {
|
|
96
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
97
|
+
this.proxy.readOnly = this.readOnly;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
autofocusChanged() {
|
|
101
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
102
|
+
this.proxy.autofocus = this.autofocus;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
listChanged() {
|
|
106
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
107
|
+
this.proxy.setAttribute("list", this.list);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
maxlengthChanged() {
|
|
111
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
112
|
+
this.proxy.maxLength = this.maxlength;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
minlengthChanged() {
|
|
116
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
117
|
+
this.proxy.minLength = this.minlength;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
spellcheckChanged() {
|
|
121
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
122
|
+
this.proxy.spellcheck = this.spellcheck;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Selects all the text in the text area
|
|
127
|
+
*
|
|
128
|
+
* @public
|
|
129
|
+
*/
|
|
130
|
+
select() {
|
|
131
|
+
this.control.select();
|
|
132
|
+
/**
|
|
133
|
+
* The select event does not permeate the shadow DOM boundary.
|
|
134
|
+
* This fn effectively proxies the select event,
|
|
135
|
+
* emitting a `select` event whenever the internal
|
|
136
|
+
* control emits a `select` event
|
|
137
|
+
*/
|
|
138
|
+
this.$emit("select");
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* Change event handler for inner control.
|
|
142
|
+
* @remarks
|
|
143
|
+
* "Change" events are not `composable` so they will not
|
|
144
|
+
* permeate the shadow DOM boundary. This fn effectively proxies
|
|
145
|
+
* the change event, emitting a `change` event whenever the internal
|
|
146
|
+
* control emits a `change` event
|
|
147
|
+
* @internal
|
|
148
|
+
*/
|
|
149
|
+
handleChange() {
|
|
150
|
+
this.$emit("change");
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
__decorate([
|
|
154
|
+
attr({ mode: "boolean" })
|
|
155
|
+
], TextArea$1.prototype, "readOnly", void 0);
|
|
156
|
+
__decorate([
|
|
157
|
+
attr
|
|
158
|
+
], TextArea$1.prototype, "resize", void 0);
|
|
159
|
+
__decorate([
|
|
160
|
+
attr({ mode: "boolean" })
|
|
161
|
+
], TextArea$1.prototype, "autofocus", void 0);
|
|
162
|
+
__decorate([
|
|
163
|
+
attr({ attribute: "form" })
|
|
164
|
+
], TextArea$1.prototype, "formId", void 0);
|
|
165
|
+
__decorate([
|
|
166
|
+
attr
|
|
167
|
+
], TextArea$1.prototype, "list", void 0);
|
|
168
|
+
__decorate([
|
|
169
|
+
attr({ converter: nullableNumberConverter })
|
|
170
|
+
], TextArea$1.prototype, "maxlength", void 0);
|
|
171
|
+
__decorate([
|
|
172
|
+
attr({ converter: nullableNumberConverter })
|
|
173
|
+
], TextArea$1.prototype, "minlength", void 0);
|
|
174
|
+
__decorate([
|
|
175
|
+
attr
|
|
176
|
+
], TextArea$1.prototype, "name", void 0);
|
|
177
|
+
__decorate([
|
|
178
|
+
attr
|
|
179
|
+
], TextArea$1.prototype, "placeholder", void 0);
|
|
180
|
+
__decorate([
|
|
181
|
+
attr({ converter: nullableNumberConverter, mode: "fromView" })
|
|
182
|
+
], TextArea$1.prototype, "cols", void 0);
|
|
183
|
+
__decorate([
|
|
184
|
+
attr({ converter: nullableNumberConverter, mode: "fromView" })
|
|
185
|
+
], TextArea$1.prototype, "rows", void 0);
|
|
186
|
+
__decorate([
|
|
187
|
+
attr({ mode: "boolean" })
|
|
188
|
+
], TextArea$1.prototype, "spellcheck", void 0);
|
|
189
|
+
__decorate([
|
|
190
|
+
observable
|
|
191
|
+
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
192
|
+
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
193
|
+
|
|
194
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Fri, 09 Sep 2022 16:43:40 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-alert-500);\n --_appearance-color-fill: var(--vvd-color-alert-100);\n --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: transparent;\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--vvd-color-neutral-400);\n pointer-events: none;\n}\n\n.label {\n contain: inline-size;\n font: var(--vvd-font-base);\n grid-column: 1/4;\n grid-row: 1;\n line-height: 20px;\n}\n.base:not(.disabled) .label {\n color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n color: var(--vvd-color-neutral-400);\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 6px;\n grid-column: 1/4;\n}\n\n.control {\n width: 100%;\n padding: 4px 16px;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n font: var(--vvd-font-base);\n min-block-size: 40px;\n transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control::placeholder {\n color: var(--_low-ink-color);\n}\n\n.helper-text {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base-condensed);\n grid-column: 1/4;\n}\n\n.error-message {\n display: flex;\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-font-base-condensed);\n grid-column: 2/4;\n}\n.error-message-icon {\n color: var(--vvd-color-alert-500);\n font-size: 16px;\n grid-column: 1/2;\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
|
|
195
|
+
|
|
196
|
+
let TextArea = class TextArea extends TextArea$1 {};
|
|
197
|
+
|
|
198
|
+
__decorate([attr, __metadata("design:type", String)], TextArea.prototype, "wrap", void 0);
|
|
199
|
+
|
|
200
|
+
TextArea = __decorate([formElements], TextArea);
|
|
201
|
+
|
|
202
|
+
let _ = t => t,
|
|
203
|
+
_t,
|
|
204
|
+
_t2,
|
|
205
|
+
_t3,
|
|
206
|
+
_t4;
|
|
207
|
+
|
|
208
|
+
const getClasses = ({
|
|
209
|
+
value,
|
|
210
|
+
errorValidationMessage,
|
|
211
|
+
disabled,
|
|
212
|
+
placeholder,
|
|
213
|
+
readOnly
|
|
214
|
+
}) => classNames('base', ['readonly', readOnly], ['placeholder', Boolean(placeholder)], ['disabled', disabled], ['error', Boolean(errorValidationMessage)], ['has-value', Boolean(value)]);
|
|
215
|
+
|
|
216
|
+
function renderLabel() {
|
|
217
|
+
return html(_t || (_t = _`
|
|
218
|
+
<label for="control" class="label">
|
|
219
|
+
${0}
|
|
220
|
+
</label>`), x => x.label);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
function renderHelperText() {
|
|
224
|
+
return html(_t2 || (_t2 = _`<span class="helper-text">${0}</span>`), x => x.helperText);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
function renderErrorMessage() {
|
|
228
|
+
return html(_t3 || (_t3 = _`
|
|
229
|
+
<vwc-icon class="error-message-icon" type="info-negative"></vwc-icon>
|
|
230
|
+
<span class="error-message">${0}</span>
|
|
231
|
+
`), x => x.errorValidationMessage);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
const TextAreaTemplate = context => {
|
|
235
|
+
const focusTemplate = focusTemplateFactory(context);
|
|
236
|
+
return html(_t4 || (_t4 = _`
|
|
237
|
+
<div class="${0}">
|
|
238
|
+
${0}
|
|
239
|
+
<div class="fieldset">
|
|
240
|
+
<textarea class="control"
|
|
241
|
+
?autofocus="${0}"
|
|
242
|
+
placeholder="${0}"
|
|
243
|
+
name="${0}"
|
|
244
|
+
maxlength="${0}"
|
|
245
|
+
rows="${0}"
|
|
246
|
+
cols="${0}"
|
|
247
|
+
wrap="${0}"
|
|
248
|
+
?readonly="${0}"
|
|
249
|
+
?required="${0}"
|
|
250
|
+
?spellcheck="${0}"
|
|
251
|
+
:value="${0}"
|
|
252
|
+
aria-atomic="${0}"
|
|
253
|
+
aria-busy="${0}"
|
|
254
|
+
aria-controls="${0}"
|
|
255
|
+
aria-current="${0}"
|
|
256
|
+
aria-describedby="${0}"
|
|
257
|
+
aria-details="${0}"
|
|
258
|
+
aria-disabled="${0}"
|
|
259
|
+
aria-errormessage="${0}"
|
|
260
|
+
aria-flowto="${0}"
|
|
261
|
+
aria-haspopup="${0}"
|
|
262
|
+
aria-hidden="${0}"
|
|
263
|
+
aria-invalid="${0}"
|
|
264
|
+
aria-keyshortcuts="${0}"
|
|
265
|
+
aria-label="${0}"
|
|
266
|
+
aria-labelledby="${0}"
|
|
267
|
+
aria-live="${0}"
|
|
268
|
+
aria-owns="${0}"
|
|
269
|
+
aria-relevant="${0}"
|
|
270
|
+
aria-roledescription="${0}"
|
|
271
|
+
@input="${0}"
|
|
272
|
+
@change="${0}"
|
|
273
|
+
${0}
|
|
274
|
+
>
|
|
275
|
+
</textarea>
|
|
276
|
+
${0}
|
|
277
|
+
</div>
|
|
278
|
+
${0}
|
|
279
|
+
${0}
|
|
280
|
+
</div>
|
|
281
|
+
`), getClasses, when(x => x.label, renderLabel()), x => x.autofocus, x => x.placeholder ? x.placeholder : null, x => x.name ? x.name : null, x => x.maxlength ? x.maxlength : null, x => x.rows ? x.rows : null, x => x.cols ? x.cols : null, x => x.wrap ? x.wrap : null, x => x.readOnly, x => x.required, x => x.spellcheck, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, x => x.handleTextInput(), x => x.handleChange(), ref('control'), () => focusTemplate, when(x => {
|
|
282
|
+
var _a;
|
|
283
|
+
|
|
284
|
+
return !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
|
|
285
|
+
}, renderHelperText()), when(x => x.errorValidationMessage, renderErrorMessage()));
|
|
286
|
+
};
|
|
287
|
+
|
|
288
|
+
const vividTextArea = TextArea.compose({
|
|
289
|
+
baseName: 'text-area',
|
|
290
|
+
template: TextAreaTemplate,
|
|
291
|
+
styles: css_248z,
|
|
292
|
+
shadowOptions: {
|
|
293
|
+
delegatesFocus: true
|
|
294
|
+
}
|
|
295
|
+
});
|
|
296
|
+
designSystem.register(vividTextArea());
|
|
297
|
+
|
|
298
|
+
export { vividTextArea };
|
package/text-field/index.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import '../icon/index.js';
|
|
2
2
|
import '../focus/index.js';
|
|
3
|
-
import {
|
|
3
|
+
import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
4
4
|
import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
|
|
5
5
|
import '../shared/focus.js';
|
|
6
|
-
import '../shared/
|
|
6
|
+
import { T as TextField$1, f as formElements } from '../shared/form-elements.js';
|
|
7
7
|
import { a as applyMixins } from '../shared/apply-mixins.js';
|
|
8
|
-
import { F as FormAssociated } from '../shared/form-associated.js';
|
|
9
|
-
import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from '../shared/aria-global.js';
|
|
10
8
|
import { f as focusTemplateFactory } from '../shared/focus2.js';
|
|
11
9
|
import { w as when } from '../shared/when.js';
|
|
12
10
|
import { r as ref } from '../shared/ref.js';
|
|
@@ -16,294 +14,10 @@ import '../shared/export.js';
|
|
|
16
14
|
import '../shared/iterators.js';
|
|
17
15
|
import '../shared/to-string.js';
|
|
18
16
|
import '../shared/_has.js';
|
|
17
|
+
import '../shared/web.dom-collections.iterator.js';
|
|
19
18
|
import '../shared/object-keys.js';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
|
|
25
|
-
*
|
|
26
|
-
* @internal
|
|
27
|
-
*/
|
|
28
|
-
class FormAssociatedTextField extends FormAssociated(_TextField) {
|
|
29
|
-
constructor() {
|
|
30
|
-
super(...arguments);
|
|
31
|
-
this.proxy = document.createElement("input");
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Text field sub-types
|
|
37
|
-
* @public
|
|
38
|
-
*/
|
|
39
|
-
const TextFieldType = {
|
|
40
|
-
/**
|
|
41
|
-
* An email TextField
|
|
42
|
-
*/
|
|
43
|
-
email: "email",
|
|
44
|
-
/**
|
|
45
|
-
* A password TextField
|
|
46
|
-
*/
|
|
47
|
-
password: "password",
|
|
48
|
-
/**
|
|
49
|
-
* A telephone TextField
|
|
50
|
-
*/
|
|
51
|
-
tel: "tel",
|
|
52
|
-
/**
|
|
53
|
-
* A text TextField
|
|
54
|
-
*/
|
|
55
|
-
text: "text",
|
|
56
|
-
/**
|
|
57
|
-
* A URL TextField
|
|
58
|
-
*/
|
|
59
|
-
url: "url",
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* A Text Field Custom HTML Element.
|
|
64
|
-
* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
|
|
65
|
-
*
|
|
66
|
-
* @slot start - Content which can be provided before the number field input
|
|
67
|
-
* @slot end - Content which can be provided after the number field input
|
|
68
|
-
* @slot - The default slot for the label
|
|
69
|
-
* @csspart label - The label
|
|
70
|
-
* @csspart root - The element wrapping the control, including start and end slots
|
|
71
|
-
* @csspart control - The text field element
|
|
72
|
-
* @fires change - Fires a custom 'change' event when the value has changed
|
|
73
|
-
*
|
|
74
|
-
* @public
|
|
75
|
-
*/
|
|
76
|
-
class TextField$1 extends FormAssociatedTextField {
|
|
77
|
-
constructor() {
|
|
78
|
-
super(...arguments);
|
|
79
|
-
/**
|
|
80
|
-
* Allows setting a type or mode of text.
|
|
81
|
-
* @public
|
|
82
|
-
* @remarks
|
|
83
|
-
* HTML Attribute: type
|
|
84
|
-
*/
|
|
85
|
-
this.type = TextFieldType.text;
|
|
86
|
-
}
|
|
87
|
-
readOnlyChanged() {
|
|
88
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
89
|
-
this.proxy.readOnly = this.readOnly;
|
|
90
|
-
this.validate();
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
autofocusChanged() {
|
|
94
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
95
|
-
this.proxy.autofocus = this.autofocus;
|
|
96
|
-
this.validate();
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
placeholderChanged() {
|
|
100
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
101
|
-
this.proxy.placeholder = this.placeholder;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
typeChanged() {
|
|
105
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
106
|
-
this.proxy.type = this.type;
|
|
107
|
-
this.validate();
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
listChanged() {
|
|
111
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
112
|
-
this.proxy.setAttribute("list", this.list);
|
|
113
|
-
this.validate();
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
maxlengthChanged() {
|
|
117
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
118
|
-
this.proxy.maxLength = this.maxlength;
|
|
119
|
-
this.validate();
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
minlengthChanged() {
|
|
123
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
124
|
-
this.proxy.minLength = this.minlength;
|
|
125
|
-
this.validate();
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
patternChanged() {
|
|
129
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
130
|
-
this.proxy.pattern = this.pattern;
|
|
131
|
-
this.validate();
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
sizeChanged() {
|
|
135
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
136
|
-
this.proxy.size = this.size;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
spellcheckChanged() {
|
|
140
|
-
if (this.proxy instanceof HTMLInputElement) {
|
|
141
|
-
this.proxy.spellcheck = this.spellcheck;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
/**
|
|
145
|
-
* @internal
|
|
146
|
-
*/
|
|
147
|
-
connectedCallback() {
|
|
148
|
-
super.connectedCallback();
|
|
149
|
-
this.proxy.setAttribute("type", this.type);
|
|
150
|
-
this.validate();
|
|
151
|
-
if (this.autofocus) {
|
|
152
|
-
DOM.queueUpdate(() => {
|
|
153
|
-
this.focus();
|
|
154
|
-
});
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
/**
|
|
158
|
-
* Selects all the text in the text field
|
|
159
|
-
*
|
|
160
|
-
* @public
|
|
161
|
-
*/
|
|
162
|
-
select() {
|
|
163
|
-
this.control.select();
|
|
164
|
-
/**
|
|
165
|
-
* The select event does not permeate the shadow DOM boundary.
|
|
166
|
-
* This fn effectively proxies the select event,
|
|
167
|
-
* emitting a `select` event whenever the internal
|
|
168
|
-
* control emits a `select` event
|
|
169
|
-
*/
|
|
170
|
-
this.$emit("select");
|
|
171
|
-
}
|
|
172
|
-
/**
|
|
173
|
-
* Handles the internal control's `input` event
|
|
174
|
-
* @internal
|
|
175
|
-
*/
|
|
176
|
-
handleTextInput() {
|
|
177
|
-
this.value = this.control.value;
|
|
178
|
-
}
|
|
179
|
-
/**
|
|
180
|
-
* Change event handler for inner control.
|
|
181
|
-
* @remarks
|
|
182
|
-
* "Change" events are not `composable` so they will not
|
|
183
|
-
* permeate the shadow DOM boundary. This fn effectively proxies
|
|
184
|
-
* the change event, emitting a `change` event whenever the internal
|
|
185
|
-
* control emits a `change` event
|
|
186
|
-
* @internal
|
|
187
|
-
*/
|
|
188
|
-
handleChange() {
|
|
189
|
-
this.$emit("change");
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
__decorate([
|
|
193
|
-
attr({ attribute: "readonly", mode: "boolean" })
|
|
194
|
-
], TextField$1.prototype, "readOnly", void 0);
|
|
195
|
-
__decorate([
|
|
196
|
-
attr({ mode: "boolean" })
|
|
197
|
-
], TextField$1.prototype, "autofocus", void 0);
|
|
198
|
-
__decorate([
|
|
199
|
-
attr
|
|
200
|
-
], TextField$1.prototype, "placeholder", void 0);
|
|
201
|
-
__decorate([
|
|
202
|
-
attr
|
|
203
|
-
], TextField$1.prototype, "type", void 0);
|
|
204
|
-
__decorate([
|
|
205
|
-
attr
|
|
206
|
-
], TextField$1.prototype, "list", void 0);
|
|
207
|
-
__decorate([
|
|
208
|
-
attr({ converter: nullableNumberConverter })
|
|
209
|
-
], TextField$1.prototype, "maxlength", void 0);
|
|
210
|
-
__decorate([
|
|
211
|
-
attr({ converter: nullableNumberConverter })
|
|
212
|
-
], TextField$1.prototype, "minlength", void 0);
|
|
213
|
-
__decorate([
|
|
214
|
-
attr
|
|
215
|
-
], TextField$1.prototype, "pattern", void 0);
|
|
216
|
-
__decorate([
|
|
217
|
-
attr({ converter: nullableNumberConverter })
|
|
218
|
-
], TextField$1.prototype, "size", void 0);
|
|
219
|
-
__decorate([
|
|
220
|
-
attr({ mode: "boolean" })
|
|
221
|
-
], TextField$1.prototype, "spellcheck", void 0);
|
|
222
|
-
__decorate([
|
|
223
|
-
observable
|
|
224
|
-
], TextField$1.prototype, "defaultSlottedNodes", void 0);
|
|
225
|
-
/**
|
|
226
|
-
* Includes ARIA states and properties relating to the ARIA textbox role
|
|
227
|
-
*
|
|
228
|
-
* @public
|
|
229
|
-
*/
|
|
230
|
-
class DelegatesARIATextbox {
|
|
231
|
-
}
|
|
232
|
-
applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
|
|
233
|
-
applyMixins(TextField$1, StartEnd, DelegatesARIATextbox);
|
|
234
|
-
|
|
235
|
-
const ElementInternalsKey = 'ElementInternals';
|
|
236
|
-
|
|
237
|
-
const supportsElementInternals = () => ElementInternalsKey in window && 'setFormValue' in window[ElementInternalsKey].prototype;
|
|
238
|
-
|
|
239
|
-
function formElements(constructor) {
|
|
240
|
-
var _Decorated_blurred;
|
|
241
|
-
|
|
242
|
-
class Decorated extends constructor {
|
|
243
|
-
constructor(...args) {
|
|
244
|
-
super(...args);
|
|
245
|
-
this.charCount = false;
|
|
246
|
-
this.userValid = true;
|
|
247
|
-
|
|
248
|
-
_Decorated_blurred.set(this, false);
|
|
249
|
-
|
|
250
|
-
this.validate = () => {
|
|
251
|
-
if (supportsElementInternals() && this.proxy instanceof HTMLElement) {
|
|
252
|
-
this.setValidity(this.proxy.validity, this.proxy.validationMessage, this.control);
|
|
253
|
-
} else {
|
|
254
|
-
super.validate();
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
this.userValid = !this.userValid;
|
|
258
|
-
|
|
259
|
-
if (this.proxy instanceof HTMLElement) {
|
|
260
|
-
this.userValid = __classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue ? !this.validationMessage : true;
|
|
261
|
-
}
|
|
262
|
-
};
|
|
263
|
-
|
|
264
|
-
this.addEventListener('blur', () => {
|
|
265
|
-
__classPrivateFieldSet(this, _Decorated_blurred, true, "f");
|
|
266
|
-
|
|
267
|
-
this.validate();
|
|
268
|
-
});
|
|
269
|
-
this.addEventListener('focus', () => {
|
|
270
|
-
__classPrivateFieldSet(this, _Decorated_blurred, false, "f");
|
|
271
|
-
});
|
|
272
|
-
this.addEventListener('invalid', () => {
|
|
273
|
-
if (__classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue) return;
|
|
274
|
-
|
|
275
|
-
__classPrivateFieldSet(this, _Decorated_blurred, true, "f");
|
|
276
|
-
|
|
277
|
-
this.dirtyValue = true;
|
|
278
|
-
this.validate();
|
|
279
|
-
});
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
get errorValidationMessage() {
|
|
283
|
-
return this.userValid ? '' : this.validationMessage;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
_Decorated_blurred = new WeakMap();
|
|
289
|
-
|
|
290
|
-
__decorate([attr, __metadata("design:type", String)], Decorated.prototype, "label", void 0);
|
|
291
|
-
|
|
292
|
-
__decorate([attr({
|
|
293
|
-
attribute: 'helper-text'
|
|
294
|
-
}), __metadata("design:type", String)], Decorated.prototype, "helperText", void 0);
|
|
295
|
-
|
|
296
|
-
__decorate([attr({
|
|
297
|
-
attribute: 'char-count',
|
|
298
|
-
mode: 'boolean'
|
|
299
|
-
}), __metadata("design:type", Object)], Decorated.prototype, "charCount", void 0);
|
|
300
|
-
|
|
301
|
-
__decorate([observable, __metadata("design:type", Object)], Decorated.prototype, "userValid", void 0);
|
|
302
|
-
|
|
303
|
-
__decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Decorated.prototype, "errorValidationMessage", null);
|
|
304
|
-
|
|
305
|
-
return Decorated;
|
|
306
|
-
}
|
|
19
|
+
import '../shared/form-associated.js';
|
|
20
|
+
import '../shared/aria-global.js';
|
|
307
21
|
|
|
308
22
|
let TextField = class TextField extends TextField$1 {};
|
|
309
23
|
|
|
@@ -318,7 +32,7 @@ __decorate([attr, __metadata("design:type", String)], TextField.prototype, "auto
|
|
|
318
32
|
TextField = __decorate([formElements], TextField);
|
|
319
33
|
applyMixins(TextField, AffixIcon);
|
|
320
34
|
|
|
321
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
35
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Fri, 09 Sep 2022 16:43:40 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-alert-500);\n --_appearance-color-fill: var(--vvd-color-alert-100);\n --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: transparent;\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--vvd-color-neutral-400);\n}\n\n.label {\n contain: inline-size;\n font: var(--vvd-font-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n.base:not(.disabled) .label {\n color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n color: var(--vvd-color-neutral-400);\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n color: var(--_appearance-color-text);\n grid-column: 1/4;\n transition: color 0.2s;\n /* Size */\n /* Shape */\n}\n.base:not(.density-extended) > .fieldset {\n block-size: 40px;\n}\n.base.density-extended > .fieldset {\n block-size: 48px;\n}\n.base:not(.shape-pill) .fieldset {\n border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n border-radius: 24px;\n}\n\n.control {\n width: 100%;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: 100%;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: inherit;\n font: var(--vvd-font-base);\n padding-inline-end: 16px;\n padding-inline-start: 16px;\n transition: box-shadow 0.2s, background-color 0.2s;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control::placeholder {\n color: var(--_low-ink-color);\n}\n\n.icon {\n position: absolute;\n z-index: 1;\n color: var(--_low-ink-color);\n inset-inline-start: 16px;\n}\n.icon + .control {\n padding-inline-start: 44px;\n}\n\n.helper-text {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base-condensed);\n grid-column: 1/4;\n margin-inline-start: 16px;\n}\n\n.error-message {\n display: flex;\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-font-base-condensed);\n grid-column: 2/4;\n}\n.error-message-icon {\n color: var(--vvd-color-alert-500);\n font-size: 16px;\n grid-column: 1/2;\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
|
|
322
36
|
|
|
323
37
|
let _ = t => t,
|
|
324
38
|
_t,
|
package/tooltip/index.js
CHANGED
|
@@ -23,7 +23,7 @@ import '../shared/focus2.js';
|
|
|
23
23
|
import '../shared/object-keys.js';
|
|
24
24
|
import '../shared/es.object.assign.js';
|
|
25
25
|
|
|
26
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
26
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Fri, 09 Sep 2022 16:43:40 GMT\n */\n.control {\n pointer-events: none;\n}\n\n.tooltip {\n width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n padding: 8px 12px;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-font-base-bold);\n}";
|
|
27
27
|
|
|
28
28
|
class Tooltip extends FoundationElement {
|
|
29
29
|
constructor() {
|