@phcdevworks/spectre-components 0.0.1
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/LICENSE +21 -0
- package/README.md +177 -0
- package/dist/button.cjs +288 -0
- package/dist/button.cjs.map +1 -0
- package/dist/button.d.cts +142 -0
- package/dist/button.d.ts +142 -0
- package/dist/button.js +282 -0
- package/dist/button.js.map +1 -0
- package/dist/checkbox.cjs +158 -0
- package/dist/checkbox.cjs.map +1 -0
- package/dist/checkbox.d.cts +98 -0
- package/dist/checkbox.d.ts +98 -0
- package/dist/checkbox.js +155 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/fieldset.cjs +179 -0
- package/dist/fieldset.cjs.map +1 -0
- package/dist/fieldset.d.cts +63 -0
- package/dist/fieldset.d.ts +63 -0
- package/dist/fieldset.js +176 -0
- package/dist/fieldset.js.map +1 -0
- package/dist/index.cjs +1600 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +14 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +1576 -0
- package/dist/index.js.map +1 -0
- package/dist/input.cjs +235 -0
- package/dist/input.cjs.map +1 -0
- package/dist/input.d.cts +175 -0
- package/dist/input.d.ts +175 -0
- package/dist/input.js +230 -0
- package/dist/input.js.map +1 -0
- package/dist/label.cjs +156 -0
- package/dist/label.cjs.map +1 -0
- package/dist/label.d.cts +39 -0
- package/dist/label.d.ts +39 -0
- package/dist/label.js +153 -0
- package/dist/label.js.map +1 -0
- package/dist/radio.cjs +158 -0
- package/dist/radio.cjs.map +1 -0
- package/dist/radio.d.cts +98 -0
- package/dist/radio.d.ts +98 -0
- package/dist/radio.js +155 -0
- package/dist/radio.js.map +1 -0
- package/dist/select.cjs +272 -0
- package/dist/select.cjs.map +1 -0
- package/dist/select.d.cts +130 -0
- package/dist/select.d.ts +130 -0
- package/dist/select.js +268 -0
- package/dist/select.js.map +1 -0
- package/dist/textarea.cjs +423 -0
- package/dist/textarea.cjs.map +1 -0
- package/dist/textarea.d.cts +156 -0
- package/dist/textarea.d.ts +156 -0
- package/dist/textarea.js +420 -0
- package/dist/textarea.js.map +1 -0
- package/package.json +124 -0
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import * as lit_html from 'lit-html';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import { SpectreInputSize } from './input.js';
|
|
4
|
+
|
|
5
|
+
interface SpectreTextareaProps {
|
|
6
|
+
autocomplete?: string;
|
|
7
|
+
autofocus?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
fullWidth?: boolean;
|
|
10
|
+
inputmode?: string;
|
|
11
|
+
invalid?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
maxlength?: number | undefined;
|
|
14
|
+
minlength?: number | undefined;
|
|
15
|
+
name?: string;
|
|
16
|
+
pill?: boolean;
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
readonly?: boolean;
|
|
19
|
+
required?: boolean;
|
|
20
|
+
rows?: number;
|
|
21
|
+
size?: SpectreInputSize;
|
|
22
|
+
success?: boolean;
|
|
23
|
+
title?: string;
|
|
24
|
+
value?: string;
|
|
25
|
+
}
|
|
26
|
+
declare class SpectreTextareaElement extends LitElement implements SpectreTextareaProps {
|
|
27
|
+
static properties: {
|
|
28
|
+
ariaLabel: {
|
|
29
|
+
attribute: string;
|
|
30
|
+
type: StringConstructor;
|
|
31
|
+
};
|
|
32
|
+
ariaLabelledBy: {
|
|
33
|
+
attribute: string;
|
|
34
|
+
type: StringConstructor;
|
|
35
|
+
};
|
|
36
|
+
ariaDescribedBy: {
|
|
37
|
+
attribute: string;
|
|
38
|
+
type: StringConstructor;
|
|
39
|
+
};
|
|
40
|
+
autocomplete: {
|
|
41
|
+
type: StringConstructor;
|
|
42
|
+
};
|
|
43
|
+
autofocus: {
|
|
44
|
+
type: BooleanConstructor;
|
|
45
|
+
reflect: boolean;
|
|
46
|
+
};
|
|
47
|
+
disabled: {
|
|
48
|
+
type: BooleanConstructor;
|
|
49
|
+
reflect: boolean;
|
|
50
|
+
};
|
|
51
|
+
fullWidth: {
|
|
52
|
+
attribute: string;
|
|
53
|
+
type: BooleanConstructor;
|
|
54
|
+
reflect: boolean;
|
|
55
|
+
};
|
|
56
|
+
inputmode: {
|
|
57
|
+
type: StringConstructor;
|
|
58
|
+
};
|
|
59
|
+
invalid: {
|
|
60
|
+
type: BooleanConstructor;
|
|
61
|
+
reflect: boolean;
|
|
62
|
+
};
|
|
63
|
+
loading: {
|
|
64
|
+
type: BooleanConstructor;
|
|
65
|
+
reflect: boolean;
|
|
66
|
+
};
|
|
67
|
+
maxlength: {
|
|
68
|
+
type: NumberConstructor;
|
|
69
|
+
};
|
|
70
|
+
minlength: {
|
|
71
|
+
type: NumberConstructor;
|
|
72
|
+
};
|
|
73
|
+
name: {
|
|
74
|
+
type: StringConstructor;
|
|
75
|
+
};
|
|
76
|
+
pill: {
|
|
77
|
+
type: BooleanConstructor;
|
|
78
|
+
reflect: boolean;
|
|
79
|
+
};
|
|
80
|
+
placeholder: {
|
|
81
|
+
type: StringConstructor;
|
|
82
|
+
};
|
|
83
|
+
readonly: {
|
|
84
|
+
type: BooleanConstructor;
|
|
85
|
+
reflect: boolean;
|
|
86
|
+
};
|
|
87
|
+
required: {
|
|
88
|
+
type: BooleanConstructor;
|
|
89
|
+
reflect: boolean;
|
|
90
|
+
};
|
|
91
|
+
rows: {
|
|
92
|
+
type: NumberConstructor;
|
|
93
|
+
};
|
|
94
|
+
size: {
|
|
95
|
+
type: StringConstructor;
|
|
96
|
+
reflect: boolean;
|
|
97
|
+
};
|
|
98
|
+
success: {
|
|
99
|
+
type: BooleanConstructor;
|
|
100
|
+
reflect: boolean;
|
|
101
|
+
};
|
|
102
|
+
title: {
|
|
103
|
+
type: StringConstructor;
|
|
104
|
+
reflect: boolean;
|
|
105
|
+
};
|
|
106
|
+
value: {
|
|
107
|
+
type: StringConstructor;
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
ariaLabel: string | null;
|
|
111
|
+
ariaLabelledBy: string | null;
|
|
112
|
+
ariaDescribedBy: string | null;
|
|
113
|
+
autocomplete?: string;
|
|
114
|
+
autofocus: boolean;
|
|
115
|
+
disabled: boolean;
|
|
116
|
+
fullWidth: boolean;
|
|
117
|
+
inputmode?: string;
|
|
118
|
+
invalid: boolean;
|
|
119
|
+
loading: boolean;
|
|
120
|
+
maxlength?: number | undefined;
|
|
121
|
+
minlength?: number | undefined;
|
|
122
|
+
name?: string;
|
|
123
|
+
pill: boolean;
|
|
124
|
+
placeholder?: string;
|
|
125
|
+
readonly: boolean;
|
|
126
|
+
required: boolean;
|
|
127
|
+
rows: number;
|
|
128
|
+
size: SpectreInputSize;
|
|
129
|
+
success: boolean;
|
|
130
|
+
title: string;
|
|
131
|
+
value: string;
|
|
132
|
+
private _id?;
|
|
133
|
+
get id(): string;
|
|
134
|
+
set id(value: string);
|
|
135
|
+
createRenderRoot(): this;
|
|
136
|
+
connectedCallback(): void;
|
|
137
|
+
getAttribute(qualifiedName: string): string | null;
|
|
138
|
+
hasAttribute(qualifiedName: string): boolean;
|
|
139
|
+
setAttribute(qualifiedName: string, value: string): void;
|
|
140
|
+
removeAttribute(qualifiedName: string): void;
|
|
141
|
+
protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
|
|
142
|
+
private get textareaClasses();
|
|
143
|
+
private get isDisabled();
|
|
144
|
+
private get nativeTextarea();
|
|
145
|
+
private get forwardedAriaLabel();
|
|
146
|
+
private get forwardedAriaLabelledBy();
|
|
147
|
+
private get forwardedAriaDescribedBy();
|
|
148
|
+
private handleInput;
|
|
149
|
+
private handleChange;
|
|
150
|
+
focus(options?: FocusOptions): void;
|
|
151
|
+
blur(): void;
|
|
152
|
+
render(): lit_html.TemplateResult<1>;
|
|
153
|
+
}
|
|
154
|
+
declare function defineSpectreTextarea(tagName?: string): typeof SpectreTextareaElement;
|
|
155
|
+
|
|
156
|
+
export { SpectreTextareaElement, type SpectreTextareaProps, defineSpectreTextarea };
|
package/dist/textarea.js
ADDED
|
@@ -0,0 +1,420 @@
|
|
|
1
|
+
import { LitElement, html } from 'lit';
|
|
2
|
+
import { live } from 'lit/directives/live.js';
|
|
3
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
|
+
import { getInputClasses } from '@phcdevworks/spectre-ui';
|
|
5
|
+
|
|
6
|
+
// src/components/textarea/sp-textarea.ts
|
|
7
|
+
var spectreInputTypes = [
|
|
8
|
+
"text",
|
|
9
|
+
"email",
|
|
10
|
+
"password",
|
|
11
|
+
"search",
|
|
12
|
+
"tel",
|
|
13
|
+
"url",
|
|
14
|
+
"number",
|
|
15
|
+
"date",
|
|
16
|
+
"datetime-local",
|
|
17
|
+
"month",
|
|
18
|
+
"time",
|
|
19
|
+
"week"
|
|
20
|
+
];
|
|
21
|
+
var spectreInputSizes = ["sm", "md", "lg"];
|
|
22
|
+
function isInputType(value) {
|
|
23
|
+
return spectreInputTypes.includes(value);
|
|
24
|
+
}
|
|
25
|
+
function isInputSize(value) {
|
|
26
|
+
return spectreInputSizes.includes(value);
|
|
27
|
+
}
|
|
28
|
+
var SpectreInputElement = class extends LitElement {
|
|
29
|
+
constructor() {
|
|
30
|
+
super(...arguments);
|
|
31
|
+
this.ariaLabel = null;
|
|
32
|
+
this.ariaLabelledBy = null;
|
|
33
|
+
this.ariaDescribedBy = null;
|
|
34
|
+
this.autofocus = false;
|
|
35
|
+
this.disabled = false;
|
|
36
|
+
this.fullWidth = false;
|
|
37
|
+
this.invalid = false;
|
|
38
|
+
this.loading = false;
|
|
39
|
+
this.pill = false;
|
|
40
|
+
this.readonly = false;
|
|
41
|
+
this.required = false;
|
|
42
|
+
this.size = "md";
|
|
43
|
+
this.success = false;
|
|
44
|
+
this.title = "";
|
|
45
|
+
this.type = "text";
|
|
46
|
+
this.value = "";
|
|
47
|
+
}
|
|
48
|
+
get id() {
|
|
49
|
+
return this._id ?? "";
|
|
50
|
+
}
|
|
51
|
+
set id(value) {
|
|
52
|
+
if ((this._id ?? "") === value) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
this._id = value;
|
|
56
|
+
const host = this;
|
|
57
|
+
if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
|
|
58
|
+
HTMLElement.prototype.removeAttribute.call(host, "id");
|
|
59
|
+
}
|
|
60
|
+
this.requestUpdate();
|
|
61
|
+
}
|
|
62
|
+
createRenderRoot() {
|
|
63
|
+
return this;
|
|
64
|
+
}
|
|
65
|
+
connectedCallback() {
|
|
66
|
+
super.connectedCallback();
|
|
67
|
+
const hostId = super.getAttribute("id");
|
|
68
|
+
if (hostId !== null) {
|
|
69
|
+
this.id = hostId;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
getAttribute(qualifiedName) {
|
|
73
|
+
if (qualifiedName === "id") {
|
|
74
|
+
return this.id || null;
|
|
75
|
+
}
|
|
76
|
+
return super.getAttribute(qualifiedName);
|
|
77
|
+
}
|
|
78
|
+
hasAttribute(qualifiedName) {
|
|
79
|
+
if (qualifiedName === "id") {
|
|
80
|
+
return this.id !== "";
|
|
81
|
+
}
|
|
82
|
+
return super.hasAttribute(qualifiedName);
|
|
83
|
+
}
|
|
84
|
+
setAttribute(qualifiedName, value) {
|
|
85
|
+
if (qualifiedName === "id") {
|
|
86
|
+
this.id = value;
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
super.setAttribute(qualifiedName, value);
|
|
90
|
+
}
|
|
91
|
+
removeAttribute(qualifiedName) {
|
|
92
|
+
if (qualifiedName === "id") {
|
|
93
|
+
this.id = "";
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
super.removeAttribute(qualifiedName);
|
|
97
|
+
}
|
|
98
|
+
willUpdate(changedProperties) {
|
|
99
|
+
if (changedProperties.has("size") && !isInputSize(this.size)) {
|
|
100
|
+
this.size = "md";
|
|
101
|
+
}
|
|
102
|
+
if (changedProperties.has("type") && !isInputType(this.type)) {
|
|
103
|
+
this.type = "text";
|
|
104
|
+
}
|
|
105
|
+
if (changedProperties.has("value") && this.value == null) {
|
|
106
|
+
this.value = "";
|
|
107
|
+
}
|
|
108
|
+
if (changedProperties.has("maxlength")) {
|
|
109
|
+
if (this.maxlength == null || !Number.isInteger(this.maxlength) || this.maxlength < 0) {
|
|
110
|
+
this.maxlength = void 0;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
if (changedProperties.has("minlength")) {
|
|
114
|
+
if (this.minlength == null || !Number.isInteger(this.minlength) || this.minlength < 0) {
|
|
115
|
+
this.minlength = void 0;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
get inputClasses() {
|
|
120
|
+
return getInputClasses({
|
|
121
|
+
fullWidth: this.fullWidth,
|
|
122
|
+
pill: this.pill,
|
|
123
|
+
size: this.size,
|
|
124
|
+
state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
get isDisabled() {
|
|
128
|
+
return this.disabled || this.loading;
|
|
129
|
+
}
|
|
130
|
+
get nativeInput() {
|
|
131
|
+
return this.querySelector("[data-sp-input-native]");
|
|
132
|
+
}
|
|
133
|
+
get forwardedAriaLabel() {
|
|
134
|
+
const ariaLabel = this.ariaLabel?.trim();
|
|
135
|
+
return ariaLabel ? ariaLabel : void 0;
|
|
136
|
+
}
|
|
137
|
+
get forwardedAriaLabelledBy() {
|
|
138
|
+
const ariaLabelledBy = this.ariaLabelledBy?.trim();
|
|
139
|
+
return ariaLabelledBy ? ariaLabelledBy : void 0;
|
|
140
|
+
}
|
|
141
|
+
get forwardedAriaDescribedBy() {
|
|
142
|
+
const ariaDescribedBy = this.ariaDescribedBy?.trim();
|
|
143
|
+
return ariaDescribedBy ? ariaDescribedBy : void 0;
|
|
144
|
+
}
|
|
145
|
+
handleInput(event) {
|
|
146
|
+
const input = event.currentTarget;
|
|
147
|
+
this.value = input.value;
|
|
148
|
+
}
|
|
149
|
+
handleChange(event) {
|
|
150
|
+
const input = event.currentTarget;
|
|
151
|
+
this.value = input.value;
|
|
152
|
+
}
|
|
153
|
+
focus(options) {
|
|
154
|
+
this.nativeInput?.focus(options);
|
|
155
|
+
}
|
|
156
|
+
blur() {
|
|
157
|
+
this.nativeInput?.blur();
|
|
158
|
+
}
|
|
159
|
+
render() {
|
|
160
|
+
return html`
|
|
161
|
+
<input
|
|
162
|
+
aria-busy=${this.loading ? "true" : "false"}
|
|
163
|
+
aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
|
|
164
|
+
aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
|
|
165
|
+
aria-label=${ifDefined(this.forwardedAriaLabel)}
|
|
166
|
+
aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
|
|
167
|
+
autocomplete=${ifDefined(this.autocomplete)}
|
|
168
|
+
?autofocus=${this.autofocus}
|
|
169
|
+
class=${this.inputClasses}
|
|
170
|
+
data-sp-input-native
|
|
171
|
+
?disabled=${this.isDisabled}
|
|
172
|
+
?readonly=${this.readonly}
|
|
173
|
+
?required=${this.required}
|
|
174
|
+
id=${ifDefined(this.id || void 0)}
|
|
175
|
+
inputmode=${ifDefined(this.inputmode)}
|
|
176
|
+
max=${ifDefined(this.max)}
|
|
177
|
+
maxlength=${ifDefined(this.maxlength)}
|
|
178
|
+
min=${ifDefined(this.min)}
|
|
179
|
+
minlength=${ifDefined(this.minlength)}
|
|
180
|
+
name=${ifDefined(this.name)}
|
|
181
|
+
placeholder=${ifDefined(this.placeholder)}
|
|
182
|
+
step=${ifDefined(this.step)}
|
|
183
|
+
title=${ifDefined(this.title || void 0)}
|
|
184
|
+
type=${this.type}
|
|
185
|
+
.value=${live(this.value)}
|
|
186
|
+
@change=${this.handleChange}
|
|
187
|
+
@input=${this.handleInput}
|
|
188
|
+
/>
|
|
189
|
+
`;
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
SpectreInputElement.properties = {
|
|
193
|
+
ariaLabel: { attribute: "aria-label", type: String },
|
|
194
|
+
ariaLabelledBy: { attribute: "aria-labelledby", type: String },
|
|
195
|
+
ariaDescribedBy: { attribute: "aria-describedby", type: String },
|
|
196
|
+
autocomplete: { type: String },
|
|
197
|
+
autofocus: { type: Boolean, reflect: true },
|
|
198
|
+
disabled: { type: Boolean, reflect: true },
|
|
199
|
+
fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
|
|
200
|
+
inputmode: { type: String },
|
|
201
|
+
invalid: { type: Boolean, reflect: true },
|
|
202
|
+
loading: { type: Boolean, reflect: true },
|
|
203
|
+
max: { type: String },
|
|
204
|
+
maxlength: { type: Number },
|
|
205
|
+
min: { type: String },
|
|
206
|
+
minlength: { type: Number },
|
|
207
|
+
name: { type: String },
|
|
208
|
+
pill: { type: Boolean, reflect: true },
|
|
209
|
+
placeholder: { type: String },
|
|
210
|
+
readonly: { type: Boolean, reflect: true },
|
|
211
|
+
required: { type: Boolean, reflect: true },
|
|
212
|
+
size: { type: String, reflect: true },
|
|
213
|
+
step: { type: String },
|
|
214
|
+
success: { type: Boolean, reflect: true },
|
|
215
|
+
title: { type: String, reflect: true },
|
|
216
|
+
type: { type: String, reflect: true },
|
|
217
|
+
value: { type: String }
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
// src/components/textarea/sp-textarea.ts
|
|
221
|
+
var DEFAULT_ROWS = 2;
|
|
222
|
+
var SpectreTextareaElement = class extends LitElement {
|
|
223
|
+
constructor() {
|
|
224
|
+
super(...arguments);
|
|
225
|
+
this.ariaLabel = null;
|
|
226
|
+
this.ariaLabelledBy = null;
|
|
227
|
+
this.ariaDescribedBy = null;
|
|
228
|
+
this.autofocus = false;
|
|
229
|
+
this.disabled = false;
|
|
230
|
+
this.fullWidth = false;
|
|
231
|
+
this.invalid = false;
|
|
232
|
+
this.loading = false;
|
|
233
|
+
this.pill = false;
|
|
234
|
+
this.readonly = false;
|
|
235
|
+
this.required = false;
|
|
236
|
+
this.rows = DEFAULT_ROWS;
|
|
237
|
+
this.size = "md";
|
|
238
|
+
this.success = false;
|
|
239
|
+
this.title = "";
|
|
240
|
+
this.value = "";
|
|
241
|
+
}
|
|
242
|
+
get id() {
|
|
243
|
+
return this._id ?? "";
|
|
244
|
+
}
|
|
245
|
+
set id(value) {
|
|
246
|
+
if ((this._id ?? "") === value) {
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
this._id = value;
|
|
250
|
+
const host = this;
|
|
251
|
+
if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
|
|
252
|
+
HTMLElement.prototype.removeAttribute.call(host, "id");
|
|
253
|
+
}
|
|
254
|
+
this.requestUpdate();
|
|
255
|
+
}
|
|
256
|
+
createRenderRoot() {
|
|
257
|
+
return this;
|
|
258
|
+
}
|
|
259
|
+
connectedCallback() {
|
|
260
|
+
super.connectedCallback();
|
|
261
|
+
const hostId = super.getAttribute("id");
|
|
262
|
+
if (hostId !== null) {
|
|
263
|
+
this.id = hostId;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
getAttribute(qualifiedName) {
|
|
267
|
+
if (qualifiedName === "id") {
|
|
268
|
+
return this.id || null;
|
|
269
|
+
}
|
|
270
|
+
return super.getAttribute(qualifiedName);
|
|
271
|
+
}
|
|
272
|
+
hasAttribute(qualifiedName) {
|
|
273
|
+
if (qualifiedName === "id") {
|
|
274
|
+
return this.id !== "";
|
|
275
|
+
}
|
|
276
|
+
return super.hasAttribute(qualifiedName);
|
|
277
|
+
}
|
|
278
|
+
setAttribute(qualifiedName, value) {
|
|
279
|
+
if (qualifiedName === "id") {
|
|
280
|
+
this.id = value;
|
|
281
|
+
return;
|
|
282
|
+
}
|
|
283
|
+
super.setAttribute(qualifiedName, value);
|
|
284
|
+
}
|
|
285
|
+
removeAttribute(qualifiedName) {
|
|
286
|
+
if (qualifiedName === "id") {
|
|
287
|
+
this.id = "";
|
|
288
|
+
return;
|
|
289
|
+
}
|
|
290
|
+
super.removeAttribute(qualifiedName);
|
|
291
|
+
}
|
|
292
|
+
willUpdate(changedProperties) {
|
|
293
|
+
if (changedProperties.has("size") && !isInputSize(this.size)) {
|
|
294
|
+
this.size = "md";
|
|
295
|
+
}
|
|
296
|
+
if (changedProperties.has("rows")) {
|
|
297
|
+
if (this.rows == null || !Number.isInteger(this.rows) || this.rows < 1) {
|
|
298
|
+
this.rows = DEFAULT_ROWS;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
if (changedProperties.has("value") && this.value == null) {
|
|
302
|
+
this.value = "";
|
|
303
|
+
}
|
|
304
|
+
if (changedProperties.has("maxlength")) {
|
|
305
|
+
if (this.maxlength == null || !Number.isInteger(this.maxlength) || this.maxlength < 0) {
|
|
306
|
+
this.maxlength = void 0;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
if (changedProperties.has("minlength")) {
|
|
310
|
+
if (this.minlength == null || !Number.isInteger(this.minlength) || this.minlength < 0) {
|
|
311
|
+
this.minlength = void 0;
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
get textareaClasses() {
|
|
316
|
+
return getInputClasses({
|
|
317
|
+
fullWidth: this.fullWidth,
|
|
318
|
+
pill: this.pill,
|
|
319
|
+
size: this.size,
|
|
320
|
+
state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
|
|
321
|
+
});
|
|
322
|
+
}
|
|
323
|
+
get isDisabled() {
|
|
324
|
+
return this.disabled || this.loading;
|
|
325
|
+
}
|
|
326
|
+
get nativeTextarea() {
|
|
327
|
+
return this.querySelector("[data-sp-textarea-native]");
|
|
328
|
+
}
|
|
329
|
+
get forwardedAriaLabel() {
|
|
330
|
+
const ariaLabel = this.ariaLabel?.trim();
|
|
331
|
+
return ariaLabel ? ariaLabel : void 0;
|
|
332
|
+
}
|
|
333
|
+
get forwardedAriaLabelledBy() {
|
|
334
|
+
const ariaLabelledBy = this.ariaLabelledBy?.trim();
|
|
335
|
+
return ariaLabelledBy ? ariaLabelledBy : void 0;
|
|
336
|
+
}
|
|
337
|
+
get forwardedAriaDescribedBy() {
|
|
338
|
+
const ariaDescribedBy = this.ariaDescribedBy?.trim();
|
|
339
|
+
return ariaDescribedBy ? ariaDescribedBy : void 0;
|
|
340
|
+
}
|
|
341
|
+
handleInput(event) {
|
|
342
|
+
const textarea = event.currentTarget;
|
|
343
|
+
this.value = textarea.value;
|
|
344
|
+
}
|
|
345
|
+
handleChange(event) {
|
|
346
|
+
const textarea = event.currentTarget;
|
|
347
|
+
this.value = textarea.value;
|
|
348
|
+
}
|
|
349
|
+
focus(options) {
|
|
350
|
+
this.nativeTextarea?.focus(options);
|
|
351
|
+
}
|
|
352
|
+
blur() {
|
|
353
|
+
this.nativeTextarea?.blur();
|
|
354
|
+
}
|
|
355
|
+
render() {
|
|
356
|
+
return html`
|
|
357
|
+
<textarea
|
|
358
|
+
aria-busy=${this.loading ? "true" : "false"}
|
|
359
|
+
aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
|
|
360
|
+
aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
|
|
361
|
+
aria-label=${ifDefined(this.forwardedAriaLabel)}
|
|
362
|
+
aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
|
|
363
|
+
autocomplete=${ifDefined(this.autocomplete)}
|
|
364
|
+
?autofocus=${this.autofocus}
|
|
365
|
+
class=${this.textareaClasses}
|
|
366
|
+
data-sp-textarea-native
|
|
367
|
+
?disabled=${this.isDisabled}
|
|
368
|
+
inputmode=${ifDefined(this.inputmode)}
|
|
369
|
+
?readonly=${this.readonly}
|
|
370
|
+
?required=${this.required}
|
|
371
|
+
id=${ifDefined(this.id || void 0)}
|
|
372
|
+
maxlength=${ifDefined(this.maxlength)}
|
|
373
|
+
minlength=${ifDefined(this.minlength)}
|
|
374
|
+
name=${ifDefined(this.name)}
|
|
375
|
+
placeholder=${ifDefined(this.placeholder)}
|
|
376
|
+
rows=${this.rows}
|
|
377
|
+
title=${ifDefined(this.title || void 0)}
|
|
378
|
+
.value=${live(this.value)}
|
|
379
|
+
@change=${this.handleChange}
|
|
380
|
+
@input=${this.handleInput}
|
|
381
|
+
></textarea>
|
|
382
|
+
`;
|
|
383
|
+
}
|
|
384
|
+
};
|
|
385
|
+
SpectreTextareaElement.properties = {
|
|
386
|
+
ariaLabel: { attribute: "aria-label", type: String },
|
|
387
|
+
ariaLabelledBy: { attribute: "aria-labelledby", type: String },
|
|
388
|
+
ariaDescribedBy: { attribute: "aria-describedby", type: String },
|
|
389
|
+
autocomplete: { type: String },
|
|
390
|
+
autofocus: { type: Boolean, reflect: true },
|
|
391
|
+
disabled: { type: Boolean, reflect: true },
|
|
392
|
+
fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
|
|
393
|
+
inputmode: { type: String },
|
|
394
|
+
invalid: { type: Boolean, reflect: true },
|
|
395
|
+
loading: { type: Boolean, reflect: true },
|
|
396
|
+
maxlength: { type: Number },
|
|
397
|
+
minlength: { type: Number },
|
|
398
|
+
name: { type: String },
|
|
399
|
+
pill: { type: Boolean, reflect: true },
|
|
400
|
+
placeholder: { type: String },
|
|
401
|
+
readonly: { type: Boolean, reflect: true },
|
|
402
|
+
required: { type: Boolean, reflect: true },
|
|
403
|
+
rows: { type: Number },
|
|
404
|
+
size: { type: String, reflect: true },
|
|
405
|
+
success: { type: Boolean, reflect: true },
|
|
406
|
+
title: { type: String, reflect: true },
|
|
407
|
+
value: { type: String }
|
|
408
|
+
};
|
|
409
|
+
function defineSpectreTextarea(tagName = "sp-textarea") {
|
|
410
|
+
const existingElement = customElements.get(tagName);
|
|
411
|
+
if (existingElement) {
|
|
412
|
+
return existingElement;
|
|
413
|
+
}
|
|
414
|
+
customElements.define(tagName, SpectreTextareaElement);
|
|
415
|
+
return SpectreTextareaElement;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
export { SpectreTextareaElement, defineSpectreTextarea };
|
|
419
|
+
//# sourceMappingURL=textarea.js.map
|
|
420
|
+
//# sourceMappingURL=textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/input/sp-input.ts","../src/components/textarea/sp-textarea.ts"],"names":["LitElement","getInputClasses","html","ifDefined","live"],"mappings":"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","file":"textarea.js","sourcesContent":["import { LitElement, html } from 'lit';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n getInputClasses,\n type InputSize,\n} from '@phcdevworks/spectre-ui';\n\nexport const spectreInputTypes = [\n 'text',\n 'email',\n 'password',\n 'search',\n 'tel',\n 'url',\n 'number',\n 'date',\n 'datetime-local',\n 'month',\n 'time',\n 'week',\n] as const;\n\nexport const spectreInputSizes = ['sm', 'md', 'lg'] as const;\n\nexport type SpectreInputType = (typeof spectreInputTypes)[number];\nexport type SpectreInputSize = (typeof spectreInputSizes)[number];\n\nexport interface SpectreInputProps {\n autocomplete?: string;\n autofocus?: boolean;\n disabled?: boolean;\n fullWidth?: boolean;\n inputmode?: string;\n invalid?: boolean;\n loading?: boolean;\n max?: string;\n maxlength?: number | undefined;\n min?: string;\n minlength?: number | undefined;\n name?: string;\n pill?: boolean;\n placeholder?: string;\n readonly?: boolean;\n required?: boolean;\n size?: SpectreInputSize;\n step?: string;\n success?: boolean;\n title?: string;\n type?: SpectreInputType;\n value?: string;\n}\n\nfunction isInputType(value: string): value is SpectreInputType {\n return (spectreInputTypes as readonly string[]).includes(value);\n}\n\nexport function isInputSize(value: string): value is InputSize {\n return (spectreInputSizes as readonly string[]).includes(value);\n}\n\nexport class SpectreInputElement extends LitElement implements SpectreInputProps {\n static properties = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n autocomplete: { type: String },\n autofocus: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n inputmode: { type: String },\n invalid: { type: Boolean, reflect: true },\n loading: { type: Boolean, reflect: true },\n max: { type: String },\n maxlength: { type: Number },\n min: { type: String },\n minlength: { type: Number },\n name: { type: String },\n pill: { type: Boolean, reflect: true },\n placeholder: { type: String },\n readonly: { type: Boolean, reflect: true },\n required: { type: Boolean, reflect: true },\n size: { type: String, reflect: true },\n step: { type: String },\n success: { type: Boolean, reflect: true },\n title: { type: String, reflect: true },\n type: { type: String, reflect: true },\n value: { type: String },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n autocomplete?: string;\n autofocus = false;\n disabled = false;\n fullWidth = false;\n inputmode?: string;\n invalid = false;\n loading = false;\n max?: string;\n maxlength?: number | undefined;\n min?: string;\n minlength?: number | undefined;\n name?: string;\n pill = false;\n placeholder?: string;\n readonly = false;\n required = false;\n size: SpectreInputSize = 'md';\n step?: string;\n success = false;\n override title = '';\n type: SpectreInputType = 'text';\n value = '';\n private _id?: string;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n createRenderRoot(): this {\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const hostId = super.getAttribute('id');\n\n if (hostId !== null) {\n this.id = hostId;\n }\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected override willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n if (changedProperties.has('size') && !isInputSize(this.size)) {\n this.size = 'md';\n }\n\n if (changedProperties.has('type') && !isInputType(this.type)) {\n this.type = 'text';\n }\n\n if (changedProperties.has('value') && this.value == null) {\n this.value = '';\n }\n\n if (changedProperties.has('maxlength')) {\n if (\n this.maxlength == null ||\n !Number.isInteger(this.maxlength) ||\n this.maxlength < 0\n ) {\n this.maxlength = undefined;\n }\n }\n\n if (changedProperties.has('minlength')) {\n if (\n this.minlength == null ||\n !Number.isInteger(this.minlength) ||\n this.minlength < 0\n ) {\n this.minlength = undefined;\n }\n }\n }\n\n private get inputClasses(): string {\n return getInputClasses({\n fullWidth: this.fullWidth,\n pill: this.pill,\n size: this.size,\n state: this.isDisabled\n ? this.disabled\n ? 'disabled'\n : 'loading'\n : this.invalid\n ? 'error'\n : this.success\n ? 'success'\n : 'default',\n });\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.loading;\n }\n\n private get nativeInput(): HTMLInputElement | null {\n return this.querySelector('[data-sp-input-native]');\n }\n\n private get forwardedAriaLabel(): string | undefined {\n const ariaLabel = this.ariaLabel?.trim();\n return ariaLabel ? ariaLabel : undefined;\n }\n\n private get forwardedAriaLabelledBy(): string | undefined {\n const ariaLabelledBy = this.ariaLabelledBy?.trim();\n return ariaLabelledBy ? ariaLabelledBy : undefined;\n }\n\n private get forwardedAriaDescribedBy(): string | undefined {\n const ariaDescribedBy = this.ariaDescribedBy?.trim();\n return ariaDescribedBy ? ariaDescribedBy : undefined;\n }\n\n private handleInput(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.value = input.value;\n }\n\n private handleChange(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.value = input.value;\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeInput?.focus(options);\n }\n\n override blur(): void {\n this.nativeInput?.blur();\n }\n\n override render() {\n return html`\n <input\n aria-busy=${this.loading ? 'true' : 'false'}\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-invalid=${ifDefined(this.invalid ? 'true' : undefined)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n autocomplete=${ifDefined(this.autocomplete)}\n ?autofocus=${this.autofocus}\n class=${this.inputClasses}\n data-sp-input-native\n ?disabled=${this.isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n id=${ifDefined(this.id || undefined)}\n inputmode=${ifDefined(this.inputmode)}\n max=${ifDefined(this.max)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n minlength=${ifDefined(this.minlength)}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n step=${ifDefined(this.step)}\n title=${ifDefined(this.title || undefined)}\n type=${this.type}\n .value=${live(this.value)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n />\n `;\n }\n}\n\nexport function defineSpectreInput(tagName = 'sp-input'): typeof SpectreInputElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreInputElement;\n }\n\n customElements.define(tagName, SpectreInputElement);\n return SpectreInputElement;\n}\n","import { LitElement, html } from 'lit';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { getInputClasses } from '@phcdevworks/spectre-ui';\n\nimport {\n isInputSize,\n type SpectreInputSize,\n} from '../input/sp-input';\n\nexport interface SpectreTextareaProps {\n autocomplete?: string;\n autofocus?: boolean;\n disabled?: boolean;\n fullWidth?: boolean;\n inputmode?: string;\n invalid?: boolean;\n loading?: boolean;\n maxlength?: number | undefined;\n minlength?: number | undefined;\n name?: string;\n pill?: boolean;\n placeholder?: string;\n readonly?: boolean;\n required?: boolean;\n rows?: number;\n size?: SpectreInputSize;\n success?: boolean;\n title?: string;\n value?: string;\n}\n\nconst DEFAULT_ROWS = 2;\n\nexport class SpectreTextareaElement\n extends LitElement\n implements SpectreTextareaProps {\n static properties = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n autocomplete: { type: String },\n autofocus: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n inputmode: { type: String },\n invalid: { type: Boolean, reflect: true },\n loading: { type: Boolean, reflect: true },\n maxlength: { type: Number },\n minlength: { type: Number },\n name: { type: String },\n pill: { type: Boolean, reflect: true },\n placeholder: { type: String },\n readonly: { type: Boolean, reflect: true },\n required: { type: Boolean, reflect: true },\n rows: { type: Number },\n size: { type: String, reflect: true },\n success: { type: Boolean, reflect: true },\n title: { type: String, reflect: true },\n value: { type: String },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n autocomplete?: string;\n autofocus = false;\n disabled = false;\n fullWidth = false;\n inputmode?: string;\n invalid = false;\n loading = false;\n maxlength?: number | undefined;\n minlength?: number | undefined;\n name?: string;\n pill = false;\n placeholder?: string;\n readonly = false;\n required = false;\n rows = DEFAULT_ROWS;\n size: SpectreInputSize = 'md';\n success = false;\n override title = '';\n value = '';\n private _id?: string;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n createRenderRoot(): this {\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const hostId = super.getAttribute('id');\n\n if (hostId !== null) {\n this.id = hostId;\n }\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected override willUpdate(\n changedProperties: Map<PropertyKey, unknown>,\n ): void {\n if (changedProperties.has('size') && !isInputSize(this.size)) {\n this.size = 'md';\n }\n\n if (changedProperties.has('rows')) {\n if (\n this.rows == null ||\n !Number.isInteger(this.rows) ||\n this.rows < 1\n ) {\n this.rows = DEFAULT_ROWS;\n }\n }\n\n if (changedProperties.has('value') && this.value == null) {\n this.value = '';\n }\n\n if (changedProperties.has('maxlength')) {\n if (\n this.maxlength == null ||\n !Number.isInteger(this.maxlength) ||\n this.maxlength < 0\n ) {\n this.maxlength = undefined;\n }\n }\n\n if (changedProperties.has('minlength')) {\n if (\n this.minlength == null ||\n !Number.isInteger(this.minlength) ||\n this.minlength < 0\n ) {\n this.minlength = undefined;\n }\n }\n }\n\n private get textareaClasses(): string {\n return getInputClasses({\n fullWidth: this.fullWidth,\n pill: this.pill,\n size: this.size,\n state: this.isDisabled\n ? this.disabled\n ? 'disabled'\n : 'loading'\n : this.invalid\n ? 'error'\n : this.success\n ? 'success'\n : 'default',\n });\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.loading;\n }\n\n private get nativeTextarea(): HTMLTextAreaElement | null {\n return this.querySelector('[data-sp-textarea-native]');\n }\n\n private get forwardedAriaLabel(): string | undefined {\n const ariaLabel = this.ariaLabel?.trim();\n return ariaLabel ? ariaLabel : undefined;\n }\n\n private get forwardedAriaLabelledBy(): string | undefined {\n const ariaLabelledBy = this.ariaLabelledBy?.trim();\n return ariaLabelledBy ? ariaLabelledBy : undefined;\n }\n\n private get forwardedAriaDescribedBy(): string | undefined {\n const ariaDescribedBy = this.ariaDescribedBy?.trim();\n return ariaDescribedBy ? ariaDescribedBy : undefined;\n }\n\n private handleInput(event: Event): void {\n const textarea = event.currentTarget as HTMLTextAreaElement;\n this.value = textarea.value;\n }\n\n private handleChange(event: Event): void {\n const textarea = event.currentTarget as HTMLTextAreaElement;\n this.value = textarea.value;\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeTextarea?.focus(options);\n }\n\n override blur(): void {\n this.nativeTextarea?.blur();\n }\n\n override render() {\n return html`\n <textarea\n aria-busy=${this.loading ? 'true' : 'false'}\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-invalid=${ifDefined(this.invalid ? 'true' : undefined)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n autocomplete=${ifDefined(this.autocomplete)}\n ?autofocus=${this.autofocus}\n class=${this.textareaClasses}\n data-sp-textarea-native\n ?disabled=${this.isDisabled}\n inputmode=${ifDefined(this.inputmode)}\n ?readonly=${this.readonly}\n ?required=${this.required}\n id=${ifDefined(this.id || undefined)}\n maxlength=${ifDefined(this.maxlength)}\n minlength=${ifDefined(this.minlength)}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n rows=${this.rows}\n title=${ifDefined(this.title || undefined)}\n .value=${live(this.value)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n ></textarea>\n `;\n }\n}\n\nexport function defineSpectreTextarea(\n tagName = 'sp-textarea',\n): typeof SpectreTextareaElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreTextareaElement;\n }\n\n customElements.define(tagName, SpectreTextareaElement);\n return SpectreTextareaElement;\n}\n"]}
|