@vonage/vivid 3.0.0-next.121 → 3.0.0-next.123
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/header/index.js +4 -56
- package/index.js +21 -20
- package/layout/index.js +1 -1
- package/lib/components.d.ts +1 -0
- package/listbox/index.js +2 -2
- package/menu/index.js +3 -3
- package/menu-item/index.js +1 -1
- package/nav/index.js +1 -1
- package/nav-disclosure/index.js +1 -1
- package/nav-item/index.js +1 -1
- package/note/index.js +1 -1
- package/number-field/index.js +1 -1
- package/option/index.js +1 -1
- package/package.json +1 -43
- package/popup/index.js +1 -1
- package/progress/index.js +1 -1
- package/progress-ring/index.js +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.js +1 -1
- package/shared/definition.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition16.js +1 -1
- package/shared/definition17.js +1 -1
- package/shared/definition18.js +1 -1
- package/shared/definition19.js +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition20.js +46 -32
- package/shared/definition21.js +35 -1069
- package/shared/definition22.js +978 -161
- package/shared/definition23.js +211 -298
- package/shared/definition24.js +310 -1491
- package/shared/definition25.js +1492 -314
- package/shared/definition26.js +346 -13
- package/shared/definition27.js +12 -69
- package/shared/definition28.js +65 -21
- package/shared/definition29.js +20 -45
- package/shared/definition30.js +40 -78
- package/shared/definition31.js +76 -59
- package/shared/definition32.js +67 -35
- package/shared/definition33.js +31 -421
- package/shared/definition34.js +418 -69
- package/shared/definition35.js +66 -572
- package/shared/definition36.js +526 -81
- package/shared/definition37.js +85 -217
- package/shared/definition38.js +245 -85
- package/shared/definition39.js +109 -67
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +77 -0
- package/shared/definition5.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/definition9.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +2 -2
- package/side-drawer/index.js +1 -1
- package/slider/index.js +1 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/switch/index.js +1 -1
- package/text-area/index.js +1 -1
- package/text-field/index.js +1 -1
- package/tooltip/index.js +2 -2
- package/vivid.api.json +105 -0
package/shared/definition38.js
CHANGED
|
@@ -1,119 +1,279 @@
|
|
|
1
|
-
import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
|
-
import { f as focusRegistries } from './definition4.js';
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, Z as nullableNumberConverter, N as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
3
2
|
import { i as iconRegistries } from './definition3.js';
|
|
4
|
-
import {
|
|
3
|
+
import { f as focusRegistries } from './definition4.js';
|
|
4
|
+
import './affix.js';
|
|
5
5
|
import './focus.js';
|
|
6
|
-
import {
|
|
6
|
+
import { D as DelegatesARIATextbox, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
|
|
7
7
|
import { a as applyMixins } from './apply-mixins.js';
|
|
8
|
+
import { F as FormAssociated } from './form-associated.js';
|
|
8
9
|
import { f as focusTemplateFactory } from './focus2.js';
|
|
9
10
|
import { w as when } from './when.js';
|
|
10
11
|
import { r as ref } from './ref.js';
|
|
11
12
|
import { c as classNames } from './class-names.js';
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
class _TextArea extends FoundationElement {
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* A form-associated base class for the {@link @microsoft/fast-foundation#(TextArea:class)} component.
|
|
18
|
+
*
|
|
19
|
+
* @internal
|
|
20
|
+
*/
|
|
21
|
+
class FormAssociatedTextArea extends FormAssociated(_TextArea) {
|
|
22
|
+
constructor() {
|
|
23
|
+
super(...arguments);
|
|
24
|
+
this.proxy = document.createElement("textarea");
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Resize mode for a TextArea
|
|
30
|
+
* @public
|
|
31
|
+
*/
|
|
32
|
+
const TextAreaResize = {
|
|
33
|
+
/**
|
|
34
|
+
* No resize.
|
|
35
|
+
*/
|
|
36
|
+
none: "none",
|
|
37
|
+
/**
|
|
38
|
+
* Resize vertically and horizontally.
|
|
39
|
+
*/
|
|
40
|
+
both: "both",
|
|
41
|
+
/**
|
|
42
|
+
* Resize horizontally.
|
|
43
|
+
*/
|
|
44
|
+
horizontal: "horizontal",
|
|
45
|
+
/**
|
|
46
|
+
* Resize vertically.
|
|
47
|
+
*/
|
|
48
|
+
vertical: "vertical",
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* A Text Area Custom HTML Element.
|
|
53
|
+
* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea | <textarea> element }.
|
|
54
|
+
*
|
|
55
|
+
* @slot - The default slot for the label
|
|
56
|
+
* @csspart label - The label
|
|
57
|
+
* @csspart root - The element wrapping the control
|
|
58
|
+
* @csspart control - The textarea element
|
|
59
|
+
* @fires change - Emits a custom 'change' event when the textarea emits a change event
|
|
60
|
+
*
|
|
61
|
+
* @public
|
|
62
|
+
*/
|
|
63
|
+
class TextArea$1 extends FormAssociatedTextArea {
|
|
64
|
+
constructor() {
|
|
65
|
+
super(...arguments);
|
|
66
|
+
/**
|
|
67
|
+
* The resize mode of the element.
|
|
68
|
+
* @public
|
|
69
|
+
* @remarks
|
|
70
|
+
* HTML Attribute: resize
|
|
71
|
+
*/
|
|
72
|
+
this.resize = TextAreaResize.none;
|
|
73
|
+
/**
|
|
74
|
+
* Sizes the element horizontally by a number of character columns.
|
|
75
|
+
*
|
|
76
|
+
* @public
|
|
77
|
+
* @remarks
|
|
78
|
+
* HTML Attribute: cols
|
|
79
|
+
*/
|
|
80
|
+
this.cols = 20;
|
|
81
|
+
/**
|
|
82
|
+
* @internal
|
|
83
|
+
*/
|
|
84
|
+
this.handleTextInput = () => {
|
|
85
|
+
this.value = this.control.value;
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
readOnlyChanged() {
|
|
89
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
90
|
+
this.proxy.readOnly = this.readOnly;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
autofocusChanged() {
|
|
94
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
95
|
+
this.proxy.autofocus = this.autofocus;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
listChanged() {
|
|
99
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
100
|
+
this.proxy.setAttribute("list", this.list);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
maxlengthChanged() {
|
|
104
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
105
|
+
this.proxy.maxLength = this.maxlength;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
minlengthChanged() {
|
|
109
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
110
|
+
this.proxy.minLength = this.minlength;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
spellcheckChanged() {
|
|
114
|
+
if (this.proxy instanceof HTMLTextAreaElement) {
|
|
115
|
+
this.proxy.spellcheck = this.spellcheck;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Selects all the text in the text area
|
|
120
|
+
*
|
|
121
|
+
* @public
|
|
122
|
+
*/
|
|
123
|
+
select() {
|
|
124
|
+
this.control.select();
|
|
125
|
+
/**
|
|
126
|
+
* The select event does not permeate the shadow DOM boundary.
|
|
127
|
+
* This fn effectively proxies the select event,
|
|
128
|
+
* emitting a `select` event whenever the internal
|
|
129
|
+
* control emits a `select` event
|
|
130
|
+
*/
|
|
131
|
+
this.$emit("select");
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Change event handler for inner control.
|
|
135
|
+
* @remarks
|
|
136
|
+
* "Change" events are not `composable` so they will not
|
|
137
|
+
* permeate the shadow DOM boundary. This fn effectively proxies
|
|
138
|
+
* the change event, emitting a `change` event whenever the internal
|
|
139
|
+
* control emits a `change` event
|
|
140
|
+
* @internal
|
|
141
|
+
*/
|
|
142
|
+
handleChange() {
|
|
143
|
+
this.$emit("change");
|
|
144
|
+
}
|
|
145
|
+
/** {@inheritDoc (FormAssociated:interface).validate} */
|
|
146
|
+
validate() {
|
|
147
|
+
super.validate(this.control);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
__decorate([
|
|
151
|
+
attr({ mode: "boolean" })
|
|
152
|
+
], TextArea$1.prototype, "readOnly", void 0);
|
|
153
|
+
__decorate([
|
|
154
|
+
attr
|
|
155
|
+
], TextArea$1.prototype, "resize", void 0);
|
|
156
|
+
__decorate([
|
|
157
|
+
attr({ mode: "boolean" })
|
|
158
|
+
], TextArea$1.prototype, "autofocus", void 0);
|
|
159
|
+
__decorate([
|
|
160
|
+
attr({ attribute: "form" })
|
|
161
|
+
], TextArea$1.prototype, "formId", void 0);
|
|
162
|
+
__decorate([
|
|
163
|
+
attr
|
|
164
|
+
], TextArea$1.prototype, "list", void 0);
|
|
165
|
+
__decorate([
|
|
166
|
+
attr({ converter: nullableNumberConverter })
|
|
167
|
+
], TextArea$1.prototype, "maxlength", void 0);
|
|
168
|
+
__decorate([
|
|
169
|
+
attr({ converter: nullableNumberConverter })
|
|
170
|
+
], TextArea$1.prototype, "minlength", void 0);
|
|
171
|
+
__decorate([
|
|
172
|
+
attr
|
|
173
|
+
], TextArea$1.prototype, "name", void 0);
|
|
174
|
+
__decorate([
|
|
175
|
+
attr
|
|
176
|
+
], TextArea$1.prototype, "placeholder", void 0);
|
|
177
|
+
__decorate([
|
|
178
|
+
attr({ converter: nullableNumberConverter, mode: "fromView" })
|
|
179
|
+
], TextArea$1.prototype, "cols", void 0);
|
|
180
|
+
__decorate([
|
|
181
|
+
attr({ converter: nullableNumberConverter, mode: "fromView" })
|
|
182
|
+
], TextArea$1.prototype, "rows", void 0);
|
|
183
|
+
__decorate([
|
|
184
|
+
attr({ mode: "boolean" })
|
|
185
|
+
], TextArea$1.prototype, "spellcheck", void 0);
|
|
186
|
+
__decorate([
|
|
187
|
+
observable
|
|
188
|
+
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
189
|
+
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
190
|
+
|
|
191
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 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: 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\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: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-500);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-backdrop: var(--vvd-color-success-50);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-firm: var(--vvd-color-success-600);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-backdrop: var(--vvd-color-alert-50);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n}\n.base:not(.connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\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(--_appearance-color-text);\n pointer-events: none;\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/3;\n grid-row: 1;\n line-height: 20px;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 6px;\n grid-column: 1/3;\n}\n\n.control {\n width: 100%;\n padding: 8px 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-typography-base);\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n.control:disabled {\n cursor: not-allowed;\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\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}";
|
|
19
192
|
|
|
20
|
-
|
|
193
|
+
let TextArea = class TextArea extends TextArea$1 {};
|
|
194
|
+
__decorate([attr, __metadata("design:type", String)], TextArea.prototype, "wrap", void 0);
|
|
195
|
+
TextArea = __decorate([formElements], TextArea);
|
|
21
196
|
|
|
22
197
|
let _ = t => t,
|
|
23
198
|
_t,
|
|
24
|
-
_t2
|
|
25
|
-
|
|
26
|
-
|
|
199
|
+
_t2;
|
|
200
|
+
const getClasses = ({
|
|
201
|
+
value,
|
|
27
202
|
errorValidationMessage,
|
|
28
203
|
disabled,
|
|
29
|
-
value,
|
|
30
|
-
readOnly,
|
|
31
204
|
placeholder,
|
|
32
|
-
|
|
33
|
-
shape,
|
|
34
|
-
label,
|
|
205
|
+
readOnly,
|
|
35
206
|
successText
|
|
36
|
-
}) => classNames(
|
|
207
|
+
}) => classNames('base', ['readonly', readOnly], ['placeholder', Boolean(placeholder)], ['disabled', disabled], ['error connotation-alert', Boolean(errorValidationMessage)], ['has-value', Boolean(value)], ['success connotation-success', !!successText]);
|
|
37
208
|
function renderLabel() {
|
|
38
209
|
return html(_t || (_t = _`
|
|
39
210
|
<label for="control" class="label">
|
|
40
211
|
${0}
|
|
41
212
|
</label>`), x => x.label);
|
|
42
213
|
}
|
|
43
|
-
|
|
44
|
-
return html(_t2 || (_t2 = _`
|
|
45
|
-
<span class="char-count">${0} / ${0}</span>
|
|
46
|
-
`), x => x.value ? x.value.length : 0, x => x.maxlength);
|
|
47
|
-
}
|
|
48
|
-
const TextfieldTemplate = context => {
|
|
49
|
-
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
214
|
+
const TextAreaTemplate = context => {
|
|
50
215
|
const focusTemplate = focusTemplateFactory(context);
|
|
51
|
-
return html(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</div>
|
|
99
|
-
${0}
|
|
100
|
-
${0}
|
|
101
|
-
${0}
|
|
102
|
-
</div>`), getStateClasses, when(x => x.charCount && x.maxlength, renderCharCount()), when(x => x.label, renderLabel()), x => affixIconTemplate(x.icon), x => x.handleTextInput(), x => x.handleChange(), x => x.autofocus, x => x.disabled, x => x.list, x => x.maxlength, x => x.minlength, x => x.pattern, x => x.placeholder, x => x.readOnly, x => x.required, x => x.size, x => x.autoComplete, x => x.name, x => x.spellcheck, x => x.value, x => x.type, 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, ref('control'), () => focusTemplate, when(x => {
|
|
216
|
+
return html(_t2 || (_t2 = _`
|
|
217
|
+
<div class="${0}">
|
|
218
|
+
${0}
|
|
219
|
+
<div class="fieldset">
|
|
220
|
+
<textarea class="control"
|
|
221
|
+
?autofocus="${0}"
|
|
222
|
+
placeholder="${0}"
|
|
223
|
+
name="${0}"
|
|
224
|
+
maxlength="${0}"
|
|
225
|
+
rows="${0}"
|
|
226
|
+
cols="${0}"
|
|
227
|
+
wrap="${0}"
|
|
228
|
+
?readonly="${0}"
|
|
229
|
+
?required="${0}"
|
|
230
|
+
?spellcheck="${0}"
|
|
231
|
+
:value="${0}"
|
|
232
|
+
aria-atomic="${0}"
|
|
233
|
+
aria-busy="${0}"
|
|
234
|
+
aria-controls="${0}"
|
|
235
|
+
aria-current="${0}"
|
|
236
|
+
aria-describedby="${0}"
|
|
237
|
+
aria-details="${0}"
|
|
238
|
+
aria-disabled="${0}"
|
|
239
|
+
aria-errormessage="${0}"
|
|
240
|
+
aria-flowto="${0}"
|
|
241
|
+
aria-haspopup="${0}"
|
|
242
|
+
aria-hidden="${0}"
|
|
243
|
+
aria-invalid="${0}"
|
|
244
|
+
aria-keyshortcuts="${0}"
|
|
245
|
+
aria-label="${0}"
|
|
246
|
+
aria-labelledby="${0}"
|
|
247
|
+
aria-live="${0}"
|
|
248
|
+
aria-owns="${0}"
|
|
249
|
+
aria-relevant="${0}"
|
|
250
|
+
aria-roledescription="${0}"
|
|
251
|
+
@input="${0}"
|
|
252
|
+
@change="${0}"
|
|
253
|
+
${0}
|
|
254
|
+
>
|
|
255
|
+
</textarea>
|
|
256
|
+
${0}
|
|
257
|
+
</div>
|
|
258
|
+
${0}
|
|
259
|
+
${0}
|
|
260
|
+
${0}
|
|
261
|
+
</div>
|
|
262
|
+
`), 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 => {
|
|
103
263
|
var _a;
|
|
104
264
|
return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
|
|
105
265
|
}, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
|
|
106
266
|
};
|
|
107
267
|
|
|
108
|
-
const
|
|
109
|
-
baseName: 'text-
|
|
110
|
-
template:
|
|
268
|
+
const textAreaDefinition = TextArea.compose({
|
|
269
|
+
baseName: 'text-area',
|
|
270
|
+
template: TextAreaTemplate,
|
|
111
271
|
styles: css_248z,
|
|
112
272
|
shadowOptions: {
|
|
113
273
|
delegatesFocus: true
|
|
114
274
|
}
|
|
115
275
|
});
|
|
116
|
-
const
|
|
117
|
-
const
|
|
276
|
+
const textAreaRegistries = [textAreaDefinition(), ...iconRegistries, ...focusRegistries];
|
|
277
|
+
const registerTextArea = registerFactory(textAreaRegistries);
|
|
118
278
|
|
|
119
|
-
export {
|
|
279
|
+
export { textAreaRegistries as a, registerTextArea as r, textAreaDefinition as t };
|
package/shared/definition39.js
CHANGED
|
@@ -1,77 +1,119 @@
|
|
|
1
|
-
import { _ as __decorate, a as attr, b as __metadata,
|
|
2
|
-
import {
|
|
1
|
+
import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
|
+
import { f as focusRegistries } from './definition4.js';
|
|
3
|
+
import { i as iconRegistries } from './definition3.js';
|
|
4
|
+
import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
5
|
+
import './focus.js';
|
|
6
|
+
import { T as TextField$1, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
|
|
7
|
+
import { a as applyMixins } from './apply-mixins.js';
|
|
8
|
+
import { f as focusTemplateFactory } from './focus2.js';
|
|
9
|
+
import { w as when } from './when.js';
|
|
10
|
+
import { r as ref } from './ref.js';
|
|
3
11
|
import { c as classNames } from './class-names.js';
|
|
4
12
|
|
|
5
|
-
|
|
13
|
+
let TextField = class TextField extends TextField$1 {};
|
|
14
|
+
__decorate([attr, __metadata("design:type", String)], TextField.prototype, "appearance", void 0);
|
|
15
|
+
__decorate([attr, __metadata("design:type", String)], TextField.prototype, "shape", void 0);
|
|
16
|
+
__decorate([attr, __metadata("design:type", String)], TextField.prototype, "autoComplete", void 0);
|
|
17
|
+
TextField = __decorate([formElements], TextField);
|
|
18
|
+
applyMixins(TextField, AffixIcon);
|
|
6
19
|
|
|
7
|
-
var
|
|
8
|
-
class Tooltip extends Popup {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
_Tooltip_instances.add(this);
|
|
12
|
-
_Tooltip_show.set(this, () => {
|
|
13
|
-
this.open = true;
|
|
14
|
-
});
|
|
15
|
-
_Tooltip_hide.set(this, () => {
|
|
16
|
-
this.open = false;
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
connectedCallback() {
|
|
20
|
-
super.connectedCallback();
|
|
21
|
-
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
|
|
22
|
-
}
|
|
23
|
-
disconnectedCallback() {
|
|
24
|
-
super.disconnectedCallback();
|
|
25
|
-
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
|
|
26
|
-
}
|
|
27
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
28
|
-
super.attributeChangedCallback(name, oldValue, newValue);
|
|
29
|
-
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
_Tooltip_show = new WeakMap(), _Tooltip_hide = new WeakMap(), _Tooltip_instances = new WeakSet(), _Tooltip_anchorUpdated = function _Tooltip_anchorUpdated() {
|
|
33
|
-
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
|
|
34
|
-
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_addEventListener).call(this);
|
|
35
|
-
}, _Tooltip_addEventListener = function _Tooltip_addEventListener() {
|
|
36
|
-
var _a, _b, _c, _d;
|
|
37
|
-
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
38
|
-
(_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
39
|
-
(_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.addEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
40
|
-
(_d = this.anchorEl) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
41
|
-
}, _Tooltip_removeEventListener = function _Tooltip_removeEventListener() {
|
|
42
|
-
var _a, _b, _c, _d;
|
|
43
|
-
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
44
|
-
(_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
45
|
-
(_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
46
|
-
(_d = this.anchorEl) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
47
|
-
};
|
|
48
|
-
__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "text", void 0);
|
|
20
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 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(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\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: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-500);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-backdrop: var(--vvd-color-success-50);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-firm: var(--vvd-color-success-600);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-backdrop: var(--vvd-color-alert-50);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n}\n.base:not(.connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\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(--_appearance-color-text);\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-typography-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n grid-column: 1/4;\n transition: color 0.2s;\n /* Shape */\n}\n.base > .fieldset {\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\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: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n padding-inline-end: 16px;\n padding-inline-start: 16px;\n transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control:disabled {\n cursor: not-allowed;\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n\n.icon {\n position: absolute;\n z-index: 1;\n color: var(--_low-ink-color);\n font-size: 20px;\n inset-inline-start: 16px;\n}\n.icon + .control {\n padding-inline-start: 44px;\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}";
|
|
49
21
|
|
|
50
22
|
let _ = t => t,
|
|
51
|
-
_t
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
23
|
+
_t,
|
|
24
|
+
_t2,
|
|
25
|
+
_t3;
|
|
26
|
+
const getStateClasses = ({
|
|
27
|
+
errorValidationMessage,
|
|
28
|
+
disabled,
|
|
29
|
+
value,
|
|
30
|
+
readOnly,
|
|
31
|
+
placeholder,
|
|
32
|
+
appearance,
|
|
33
|
+
shape,
|
|
34
|
+
label,
|
|
35
|
+
successText
|
|
36
|
+
}) => classNames(['error connotation-alert', Boolean(errorValidationMessage)], ['disabled', disabled], ['has-value', Boolean(value)], ['readonly', readOnly], ['placeholder', Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['no-label', !label], ['success connotation-success', Boolean(successText)]);
|
|
37
|
+
function renderLabel() {
|
|
57
38
|
return html(_t || (_t = _`
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
39
|
+
<label for="control" class="label">
|
|
40
|
+
${0}
|
|
41
|
+
</label>`), x => x.label);
|
|
42
|
+
}
|
|
43
|
+
function renderCharCount() {
|
|
44
|
+
return html(_t2 || (_t2 = _`
|
|
45
|
+
<span class="char-count">${0} / ${0}</span>
|
|
46
|
+
`), x => x.value ? x.value.length : 0, x => x.maxlength);
|
|
47
|
+
}
|
|
48
|
+
const TextfieldTemplate = context => {
|
|
49
|
+
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
50
|
+
const focusTemplate = focusTemplateFactory(context);
|
|
51
|
+
return html(_t3 || (_t3 = _`
|
|
52
|
+
<div class="base ${0}">
|
|
53
|
+
${0}
|
|
54
|
+
${0}
|
|
55
|
+
<div class="fieldset">
|
|
56
|
+
${0}
|
|
57
|
+
<input class="control"
|
|
58
|
+
id="control"
|
|
59
|
+
@input="${0}"
|
|
60
|
+
@change="${0}"
|
|
61
|
+
?autofocus="${0}"
|
|
62
|
+
?disabled="${0}"
|
|
63
|
+
list="${0}"
|
|
64
|
+
maxlength="${0}"
|
|
65
|
+
minlength="${0}"
|
|
66
|
+
pattern="${0}"
|
|
67
|
+
placeholder="${0}"
|
|
68
|
+
?readonly="${0}"
|
|
69
|
+
?required="${0}"
|
|
70
|
+
size="${0}"
|
|
71
|
+
autocomplete="${0}"
|
|
72
|
+
name="${0}"
|
|
73
|
+
?spellcheck="${0}"
|
|
74
|
+
:value="${0}"
|
|
75
|
+
type="${0}"
|
|
76
|
+
aria-atomic="${0}"
|
|
77
|
+
aria-busy="${0}"
|
|
78
|
+
aria-controls="${0}"
|
|
79
|
+
aria-current="${0}"
|
|
80
|
+
aria-describedby="${0}"
|
|
81
|
+
aria-details="${0}"
|
|
82
|
+
aria-disabled="${0}"
|
|
83
|
+
aria-errormessage="${0}"
|
|
84
|
+
aria-flowto="${0}"
|
|
85
|
+
aria-haspopup="${0}"
|
|
86
|
+
aria-hidden="${0}"
|
|
87
|
+
aria-invalid="${0}"
|
|
88
|
+
aria-keyshortcuts="${0}"
|
|
89
|
+
aria-label="${0}"
|
|
90
|
+
aria-labelledby="${0}"
|
|
91
|
+
aria-live="${0}"
|
|
92
|
+
aria-owns="${0}"
|
|
93
|
+
aria-relevant="${0}"
|
|
94
|
+
aria-roledescription="${0}"
|
|
95
|
+
${0}
|
|
96
|
+
/>
|
|
97
|
+
${0}
|
|
98
|
+
</div>
|
|
99
|
+
${0}
|
|
100
|
+
${0}
|
|
101
|
+
${0}
|
|
102
|
+
</div>`), getStateClasses, when(x => x.charCount && x.maxlength, renderCharCount()), when(x => x.label, renderLabel()), x => affixIconTemplate(x.icon), x => x.handleTextInput(), x => x.handleChange(), x => x.autofocus, x => x.disabled, x => x.list, x => x.maxlength, x => x.minlength, x => x.pattern, x => x.placeholder, x => x.readOnly, x => x.required, x => x.size, x => x.autoComplete, x => x.name, x => x.spellcheck, x => x.value, x => x.type, 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, ref('control'), () => focusTemplate, when(x => {
|
|
103
|
+
var _a;
|
|
104
|
+
return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
|
|
105
|
+
}, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
|
|
67
106
|
};
|
|
68
107
|
|
|
69
|
-
const
|
|
70
|
-
baseName: '
|
|
71
|
-
template:
|
|
72
|
-
styles: css_248z
|
|
108
|
+
const textFieldDefinition = TextField.compose({
|
|
109
|
+
baseName: 'text-field',
|
|
110
|
+
template: TextfieldTemplate,
|
|
111
|
+
styles: css_248z,
|
|
112
|
+
shadowOptions: {
|
|
113
|
+
delegatesFocus: true
|
|
114
|
+
}
|
|
73
115
|
});
|
|
74
|
-
const
|
|
75
|
-
const
|
|
116
|
+
const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
|
|
117
|
+
const registerTextField = registerFactory(textFieldRegistries);
|
|
76
118
|
|
|
77
|
-
export {
|
|
119
|
+
export { textFieldRegistries as a, registerTextField as r, textFieldDefinition as t };
|
package/shared/definition4.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { F as Focus } from './focus.js';
|
|
3
3
|
|
|
4
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
4
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n:host {\n display: contents;\n border-radius: inherit;\n}\n\n.control {\n position: absolute;\n z-index: 1;\n box-sizing: border-box;\n border-radius: inherit;\n box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n inset: var(--focus-inset, 0);\n outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n outline-offset: -2px;\n}";
|
|
5
5
|
|
|
6
6
|
let _ = t => t,
|
|
7
7
|
_t;
|