@noctuatech/uswds 1.3.8 → 1.3.10
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/package.json +5 -5
- package/src/lib/alert/alert.element.ts +4 -3
- package/src/lib/checkbox/checkbox.element.ts +3 -1
- package/src/lib/file-input/file-input.element.test.ts +0 -1
- package/src/lib/file-input/file-input.element.ts +3 -8
- package/src/lib/file-input/file-input.stories.ts +40 -16
- package/src/lib/icon/icon.element.ts +1 -3
- package/src/lib/input/input.element.ts +4 -2
- package/src/lib/textarea/textarea.element.ts +9 -3
- package/src/lib/textarea/textarea.stories.ts +5 -5
- package/target/lib/alert/alert.element.js +2 -2
- package/target/lib/alert/alert.element.js.map +1 -1
- package/target/lib/checkbox/checkbox.element.js +2 -1
- package/target/lib/checkbox/checkbox.element.js.map +1 -1
- package/target/lib/file-input/file-input.element.d.ts +0 -1
- package/target/lib/file-input/file-input.element.js +3 -13
- package/target/lib/file-input/file-input.element.js.map +1 -1
- package/target/lib/file-input/file-input.element.test.js +0 -1
- package/target/lib/file-input/file-input.element.test.js.map +1 -1
- package/target/lib/file-input/file-input.stories.d.ts +4 -4
- package/target/lib/file-input/file-input.stories.js +20 -9
- package/target/lib/file-input/file-input.stories.js.map +1 -1
- package/target/lib/icon/icon.element.js +0 -1
- package/target/lib/icon/icon.element.js.map +1 -1
- package/target/lib/input/input.element.d.ts +1 -1
- package/target/lib/input/input.element.js +3 -2
- package/target/lib/input/input.element.js.map +1 -1
- package/target/lib/textarea/textarea.element.d.ts +2 -2
- package/target/lib/textarea/textarea.element.js +6 -3
- package/target/lib/textarea/textarea.element.js.map +1 -1
- package/target/lib/textarea/textarea.stories.d.ts +2 -2
- package/target/lib/textarea/textarea.stories.js +3 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@noctuatech/uswds",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"workspaces": [
|
|
6
6
|
"packages/**"
|
|
@@ -103,10 +103,10 @@
|
|
|
103
103
|
"license": "ISC",
|
|
104
104
|
"description": "",
|
|
105
105
|
"dependencies": {
|
|
106
|
-
"@joist/di": "^4.2.4-next.
|
|
107
|
-
"@joist/element": "^4.2.4-next.
|
|
108
|
-
"@joist/observable": "^4.2.4-next.
|
|
109
|
-
"@joist/templating": "^4.2.4-next.
|
|
106
|
+
"@joist/di": "^4.2.4-next.5",
|
|
107
|
+
"@joist/element": "^4.2.4-next.5",
|
|
108
|
+
"@joist/observable": "^4.2.4-next.5",
|
|
109
|
+
"@joist/templating": "^4.2.4-next.5",
|
|
110
110
|
"tslib": "2.8.1"
|
|
111
111
|
},
|
|
112
112
|
"devDependencies": {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { attr, css, element, html
|
|
1
|
+
import { attr, css, element, html } from '@joist/element';
|
|
2
|
+
import { observe } from '@joist/observable';
|
|
3
|
+
import { bind } from '@joist/templating';
|
|
2
4
|
|
|
3
5
|
import { type USAAlertType, USA_ALERT_CONFIG } from './alert-types.js';
|
|
4
|
-
import { bind } from '@joist/templating';
|
|
5
6
|
import { USAIcon } from '../icon/icon-types.js';
|
|
6
|
-
import { observe } from '@joist/observable';
|
|
7
7
|
|
|
8
8
|
declare global {
|
|
9
9
|
interface HTMLElementTagNameMap {
|
|
@@ -84,6 +84,7 @@ declare global {
|
|
|
84
84
|
<slot id="heading" name="heading"></slot>
|
|
85
85
|
</div>
|
|
86
86
|
|
|
87
|
+
<!-- this makes the heading and content are aligned properly -->
|
|
87
88
|
<div class="spacer"></div>
|
|
88
89
|
|
|
89
90
|
<div>
|
|
@@ -174,12 +174,14 @@ export class USACheckboxElement extends HTMLElement {
|
|
|
174
174
|
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
-
#syncFormState() {
|
|
177
|
+
async #syncFormState() {
|
|
178
178
|
const checkbox = this.#checkbox();
|
|
179
179
|
|
|
180
180
|
this.#internals.setValidity({});
|
|
181
181
|
this.#internals.setFormValue(this.checked ? this.value : null);
|
|
182
182
|
|
|
183
|
+
await Promise.resolve();
|
|
184
|
+
|
|
183
185
|
if (checkbox.validationMessage) {
|
|
184
186
|
this.#internals.setValidity({ customError: true }, checkbox.validationMessage, checkbox);
|
|
185
187
|
}
|
|
@@ -66,7 +66,6 @@ describe('usa-file-input', () => {
|
|
|
66
66
|
await Promise.resolve();
|
|
67
67
|
|
|
68
68
|
// Verify that filesVisible is true and files are set
|
|
69
|
-
assert.isTrue(fileInput.filesVisible);
|
|
70
69
|
assert.equal(fileInput.files?.length, 1);
|
|
71
70
|
assert.equal(fileInput.files?.[0].name, 'test.txt');
|
|
72
71
|
});
|
|
@@ -86,7 +86,7 @@ declare global {
|
|
|
86
86
|
<input id="file-input" type="file" tabindex="0" />
|
|
87
87
|
</j-bind>
|
|
88
88
|
|
|
89
|
-
<j-if bind="
|
|
89
|
+
<j-if bind="files.length">
|
|
90
90
|
<template>
|
|
91
91
|
<j-bind props="files">
|
|
92
92
|
<usa-file-input-preview part="preview" exportparts="heading, item">
|
|
@@ -95,7 +95,7 @@ declare global {
|
|
|
95
95
|
</j-bind>
|
|
96
96
|
</template>
|
|
97
97
|
|
|
98
|
-
<template else>
|
|
98
|
+
<template id="test" else>
|
|
99
99
|
<div class="box" part="input">
|
|
100
100
|
<slot name="description"> Drag file here or <usa-link>choose from folder</usa-link> </slot>
|
|
101
101
|
</div>
|
|
@@ -114,7 +114,7 @@ export class USAFileInputElement extends HTMLElement {
|
|
|
114
114
|
|
|
115
115
|
@attr()
|
|
116
116
|
@bind()
|
|
117
|
-
accessor multiple =
|
|
117
|
+
accessor multiple = false;
|
|
118
118
|
|
|
119
119
|
@attr()
|
|
120
120
|
@bind()
|
|
@@ -127,11 +127,6 @@ export class USAFileInputElement extends HTMLElement {
|
|
|
127
127
|
@bind()
|
|
128
128
|
accessor files: FileList | null = null;
|
|
129
129
|
|
|
130
|
-
@bind({
|
|
131
|
-
compute: (i) => !!i.files?.length,
|
|
132
|
-
})
|
|
133
|
-
accessor filesVisible = false;
|
|
134
|
-
|
|
135
130
|
#internals = this.attachInternals();
|
|
136
131
|
#input = query('input');
|
|
137
132
|
|
|
@@ -1,19 +1,31 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { html } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import { html } from 'lit';
|
|
3
3
|
|
|
4
|
-
import type { USAFileInputElement } from
|
|
4
|
+
import type { USAFileInputElement } from './file-input.element.js';
|
|
5
5
|
|
|
6
6
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
7
7
|
const meta = {
|
|
8
|
-
title:
|
|
9
|
-
tags: [
|
|
8
|
+
title: 'usa-file-input',
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
|
|
11
|
+
argTypes: {},
|
|
12
|
+
args: {},
|
|
13
|
+
} satisfies Meta<USAFileInputElement>;
|
|
14
|
+
|
|
15
|
+
export default meta;
|
|
16
|
+
|
|
17
|
+
type Story = StoryObj<USAFileInputElement>;
|
|
18
|
+
|
|
19
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
20
|
+
export const Single: Story = {
|
|
21
|
+
args: {},
|
|
10
22
|
render() {
|
|
11
23
|
function onSubmit(e: Event) {
|
|
12
24
|
e.preventDefault();
|
|
13
25
|
|
|
14
26
|
const data = new FormData(e.target as HTMLFormElement);
|
|
15
27
|
|
|
16
|
-
console.log(data.getAll(
|
|
28
|
+
console.log(data.getAll('upload'));
|
|
17
29
|
}
|
|
18
30
|
|
|
19
31
|
return html`
|
|
@@ -21,24 +33,36 @@ const meta = {
|
|
|
21
33
|
<usa-file-input name="upload" required>
|
|
22
34
|
Input accepts a single file
|
|
23
35
|
|
|
24
|
-
<div slot="description">
|
|
25
|
-
Drag file here or <usa-link>choose from folder</usa-link>
|
|
26
|
-
</div>
|
|
36
|
+
<div slot="description">Drag file here or <usa-link>choose from folder</usa-link></div>
|
|
27
37
|
</usa-file-input>
|
|
28
38
|
|
|
29
39
|
<usa-button type="submit">SUBMIT</usa-button>
|
|
30
40
|
</form>
|
|
31
41
|
`;
|
|
32
42
|
},
|
|
33
|
-
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export const Multiple: Story = {
|
|
34
46
|
args: {},
|
|
35
|
-
|
|
47
|
+
render() {
|
|
48
|
+
function onSubmit(e: Event) {
|
|
49
|
+
e.preventDefault();
|
|
36
50
|
|
|
37
|
-
|
|
51
|
+
const data = new FormData(e.target as HTMLFormElement);
|
|
38
52
|
|
|
39
|
-
|
|
53
|
+
console.log(data.getAll('upload'));
|
|
54
|
+
}
|
|
40
55
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
56
|
+
return html`
|
|
57
|
+
<form @submit=${onSubmit}>
|
|
58
|
+
<usa-file-input name="upload" required multiple>
|
|
59
|
+
Input accepts multiple files
|
|
60
|
+
|
|
61
|
+
<div slot="description">Drag file here or <usa-link>choose from folder</usa-link></div>
|
|
62
|
+
</usa-file-input>
|
|
63
|
+
|
|
64
|
+
<usa-button type="submit">SUBMIT</usa-button>
|
|
65
|
+
</form>
|
|
66
|
+
`;
|
|
67
|
+
},
|
|
44
68
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { inject, injectable
|
|
1
|
+
import { inject, injectable } from '@joist/di';
|
|
2
2
|
import { attr, css, element } from '@joist/element';
|
|
3
3
|
|
|
4
4
|
import { IconService } from '../services/icon.service.js';
|
|
@@ -49,8 +49,6 @@ export class USAIconElement extends HTMLElement {
|
|
|
49
49
|
|
|
50
50
|
@effect()
|
|
51
51
|
onIconUpdate() {
|
|
52
|
-
console.log('onIconUpdate', this.icon);
|
|
53
|
-
|
|
54
52
|
this.#updateIcon();
|
|
55
53
|
}
|
|
56
54
|
|
|
@@ -185,7 +185,7 @@ export class USATextInputElement extends HTMLElement implements MaskableElement
|
|
|
185
185
|
#internals = this.attachInternals();
|
|
186
186
|
#input = query('input');
|
|
187
187
|
|
|
188
|
-
|
|
188
|
+
formAssociatedCallback() {
|
|
189
189
|
this.#syncFormState();
|
|
190
190
|
}
|
|
191
191
|
|
|
@@ -229,12 +229,14 @@ export class USATextInputElement extends HTMLElement implements MaskableElement
|
|
|
229
229
|
this.dispatchEvent(new Event('input', { bubbles: true }));
|
|
230
230
|
}
|
|
231
231
|
|
|
232
|
-
#syncFormState() {
|
|
232
|
+
async #syncFormState() {
|
|
233
233
|
const input = this.#input();
|
|
234
234
|
|
|
235
235
|
this.#internals.setValidity({});
|
|
236
236
|
this.#internals.setFormValue(this.value);
|
|
237
237
|
|
|
238
|
+
await Promise.resolve();
|
|
239
|
+
|
|
238
240
|
if (input.validationMessage) {
|
|
239
241
|
this.#internals.setValidity({ customError: true }, input.validationMessage, input);
|
|
240
242
|
}
|
|
@@ -106,7 +106,7 @@ export class USATextareaElement extends HTMLElement {
|
|
|
106
106
|
#internals = this.attachInternals();
|
|
107
107
|
#input = query('textarea');
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
formAssociatedCallback() {
|
|
110
110
|
this.#syncFormState();
|
|
111
111
|
}
|
|
112
112
|
|
|
@@ -116,16 +116,22 @@ export class USATextareaElement extends HTMLElement {
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
@listen('input')
|
|
119
|
-
onInputChange() {
|
|
119
|
+
onInputChange(e: Event) {
|
|
120
|
+
e.stopPropagation();
|
|
121
|
+
|
|
120
122
|
this.value = this.#input().value;
|
|
123
|
+
|
|
124
|
+
this.dispatchEvent(new Event('input', { bubbles: true }));
|
|
121
125
|
}
|
|
122
126
|
|
|
123
|
-
#syncFormState() {
|
|
127
|
+
async #syncFormState() {
|
|
124
128
|
const input = this.#input();
|
|
125
129
|
|
|
126
130
|
this.#internals.setFormValue(this.value);
|
|
127
131
|
this.#internals.setValidity({});
|
|
128
132
|
|
|
133
|
+
await Promise.resolve();
|
|
134
|
+
|
|
129
135
|
if (input.validationMessage) {
|
|
130
136
|
this.#internals.setValidity({ customError: true }, input.validationMessage, input);
|
|
131
137
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { html } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import { html } from 'lit';
|
|
3
3
|
|
|
4
|
-
import type { USATextareaElement } from
|
|
4
|
+
import type { USATextareaElement } from './textarea.element.js';
|
|
5
5
|
|
|
6
6
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
7
7
|
const meta = {
|
|
8
|
-
title:
|
|
9
|
-
tags: [
|
|
8
|
+
title: 'usa-textarea',
|
|
9
|
+
tags: ['autodocs'],
|
|
10
10
|
render(args) {
|
|
11
11
|
return html`<usa-textarea>Hello World</usa-textarea>`;
|
|
12
12
|
},
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
2
|
import { attr, css, element, html } from '@joist/element';
|
|
3
|
-
import { USA_ALERT_CONFIG } from './alert-types.js';
|
|
4
|
-
import { bind } from '@joist/templating';
|
|
5
3
|
import { observe } from '@joist/observable';
|
|
4
|
+
import { bind } from '@joist/templating';
|
|
5
|
+
import { USA_ALERT_CONFIG } from './alert-types.js';
|
|
6
6
|
let USAAlertElement = (() => {
|
|
7
7
|
let _classDecorators = [element({
|
|
8
8
|
tagName: 'usa-alert',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;IA4F1D,eAAe;4BAnF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;KAiBH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE,EACN,OAAO,EAAE;gCAGT,IAAI,CAAC;oBACJ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;iBAC9C,CAAC;YAJF,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAKrC,iKAAS,IAAI,6BAAJ,IAAI,mFAAmB;YARlC,6KASC;;;YATY,uDAAe;;QAG1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAKrC,wHAAyB,MAAM,GAAC;QAAhC,IAAS,IAAI,0CAAmB;QAAhC,IAAS,IAAI,gDAAmB;;;;;;;;SARrB,eAAe"}
|
|
@@ -92,10 +92,11 @@ let USACheckboxElement = (() => {
|
|
|
92
92
|
this.checked = checkbox.checked;
|
|
93
93
|
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
94
94
|
}
|
|
95
|
-
#syncFormState() {
|
|
95
|
+
async #syncFormState() {
|
|
96
96
|
const checkbox = this.#checkbox();
|
|
97
97
|
this.#internals.setValidity({});
|
|
98
98
|
this.#internals.setFormValue(this.checked ? this.value : null);
|
|
99
|
+
await Promise.resolve();
|
|
99
100
|
if (checkbox.validationMessage) {
|
|
100
101
|
this.#internals.setValidity({ customError: true }, checkbox.validationMessage, checkbox);
|
|
101
102
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;IA8H9B,kBAAkB;4BAtH9B,OAAO,CAAC;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoGF;gBACD,IAAI,CAAA;;;;;;;;;;;KAWH;aACF;SACF,CAAC;;;;sBACsC,WAAW;;;;;;;;;;;;;;;;;;;;;;kCAAnB,SAAQ,WAAW;;;;mCAGhD,IAAI,EAAE,EACN,IAAI,EAAE;gCAGN,IAAI,EAAE,EACN,IAAI,EAAE;iCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;iCAGN,IAAI,CAAC;oBACJ,QAAQ,EAAE,KAAK;iBAChB,CAAC;oCAMD,MAAM,EAAE;4CAKR,MAAM,CAAC,QAAQ,EAAE,sBAAsB,CAAC;YA/BzC,0KAAS,OAAO,6BAAP,OAAO,yFAAS;YAIzB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAIpB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAI1B,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAK1B,oKAAS,KAAK,6BAAL,KAAK,qFAAS;YAMvB,2KAAA,QAAQ,6DAEP;YAGD,mMAAA,gBAAgB,6DAOf;YA5CH,
|
|
1
|
+
{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -12,7 +12,6 @@ export declare class USAFileInputElement extends HTMLElement {
|
|
|
12
12
|
accessor accept: string;
|
|
13
13
|
accessor required: boolean;
|
|
14
14
|
accessor files: FileList | null;
|
|
15
|
-
accessor filesVisible: boolean;
|
|
16
15
|
connectedCallback(): void;
|
|
17
16
|
syncFormValues(): void;
|
|
18
17
|
onInputChange(e: Event): void;
|
|
@@ -8,7 +8,7 @@ let USAFileInputElement = (() => {
|
|
|
8
8
|
tagName: 'usa-file-input',
|
|
9
9
|
shadowDom: [
|
|
10
10
|
css `*{box-sizing:border-box}:host{display:block;max-width:30rem;position:relative;margin-bottom:1.5rem}label{display:block}input{cursor:pointer;left:0;margin:0;max-width:none;position:absolute;text-indent:-999em;width:100%;z-index:1;bottom:0;top:0}input:focus{outline:.25rem solid #2491ff;outline-offset:0}label slot.label{font-size:1.06rem;line-height:1.3;display:block;font-weight:400;margin-bottom:.5rem}:host(.dragenter) .box{border-color:#2491ff}.box{border:1px dashed #adadad;border-radius:0;display:flex;font-size:.93rem;position:relative;text-align:center;width:100%;height:5.2rem;align-items:center;justify-content:center}.container{position:relative}`,
|
|
11
|
-
html `<label for="file-input"><slot class="label"></slot></label><div class="container"><j-bind props="name,multiple,accept,required"><input id="file-input" type="file" tabindex="0"></j-bind><j-if bind="
|
|
11
|
+
html `<label for="file-input"><slot class="label"></slot></label><div class="container"><j-bind props="name,multiple,accept,required"><input id="file-input" type="file" tabindex="0"></j-bind><j-if bind="files.length"><template><j-bind props="files"><usa-file-input-preview part="preview" exportparts="heading, item">Selected file <usa-link>Change file</usa-link></usa-file-input-preview></j-bind></template><template id="test" else><div class="box" part="input"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div></template></j-if></div>`,
|
|
12
12
|
],
|
|
13
13
|
})];
|
|
14
14
|
let _classDescriptor;
|
|
@@ -31,9 +31,6 @@ let USAFileInputElement = (() => {
|
|
|
31
31
|
let _files_decorators;
|
|
32
32
|
let _files_initializers = [];
|
|
33
33
|
let _files_extraInitializers = [];
|
|
34
|
-
let _filesVisible_decorators;
|
|
35
|
-
let _filesVisible_initializers = [];
|
|
36
|
-
let _filesVisible_extraInitializers = [];
|
|
37
34
|
let _syncFormValues_decorators;
|
|
38
35
|
let _onInputChange_decorators;
|
|
39
36
|
let _onDragEnter_decorators;
|
|
@@ -48,9 +45,6 @@ let USAFileInputElement = (() => {
|
|
|
48
45
|
_accept_decorators = [attr(), bind()];
|
|
49
46
|
_required_decorators = [attr(), bind()];
|
|
50
47
|
_files_decorators = [bind()];
|
|
51
|
-
_filesVisible_decorators = [bind({
|
|
52
|
-
compute: (i) => !!i.files?.length,
|
|
53
|
-
})];
|
|
54
48
|
_syncFormValues_decorators = [effect()];
|
|
55
49
|
_onInputChange_decorators = [listen('input')];
|
|
56
50
|
_onDragEnter_decorators = [listen('dragenter')];
|
|
@@ -61,7 +55,6 @@ let USAFileInputElement = (() => {
|
|
|
61
55
|
__esDecorate(this, null, _accept_decorators, { kind: "accessor", name: "accept", static: false, private: false, access: { has: obj => "accept" in obj, get: obj => obj.accept, set: (obj, value) => { obj.accept = value; } }, metadata: _metadata }, _accept_initializers, _accept_extraInitializers);
|
|
62
56
|
__esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
|
|
63
57
|
__esDecorate(this, null, _files_decorators, { kind: "accessor", name: "files", static: false, private: false, access: { has: obj => "files" in obj, get: obj => obj.files, set: (obj, value) => { obj.files = value; } }, metadata: _metadata }, _files_initializers, _files_extraInitializers);
|
|
64
|
-
__esDecorate(this, null, _filesVisible_decorators, { kind: "accessor", name: "filesVisible", static: false, private: false, access: { has: obj => "filesVisible" in obj, get: obj => obj.filesVisible, set: (obj, value) => { obj.filesVisible = value; } }, metadata: _metadata }, _filesVisible_initializers, _filesVisible_extraInitializers);
|
|
65
58
|
__esDecorate(this, null, _syncFormValues_decorators, { kind: "method", name: "syncFormValues", static: false, private: false, access: { has: obj => "syncFormValues" in obj, get: obj => obj.syncFormValues }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
66
59
|
__esDecorate(this, null, _onInputChange_decorators, { kind: "method", name: "onInputChange", static: false, private: false, access: { has: obj => "onInputChange" in obj, get: obj => obj.onInputChange }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
67
60
|
__esDecorate(this, null, _onDragEnter_decorators, { kind: "method", name: "onDragEnter", static: false, private: false, access: { has: obj => "onDragEnter" in obj, get: obj => obj.onDragEnter }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
@@ -75,7 +68,7 @@ let USAFileInputElement = (() => {
|
|
|
75
68
|
#name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ''));
|
|
76
69
|
get name() { return this.#name_accessor_storage; }
|
|
77
70
|
set name(value) { this.#name_accessor_storage = value; }
|
|
78
|
-
#multiple_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _multiple_initializers,
|
|
71
|
+
#multiple_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _multiple_initializers, false));
|
|
79
72
|
get multiple() { return this.#multiple_accessor_storage; }
|
|
80
73
|
set multiple(value) { this.#multiple_accessor_storage = value; }
|
|
81
74
|
#accept_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _accept_initializers, ''));
|
|
@@ -87,10 +80,7 @@ let USAFileInputElement = (() => {
|
|
|
87
80
|
#files_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _files_initializers, null));
|
|
88
81
|
get files() { return this.#files_accessor_storage; }
|
|
89
82
|
set files(value) { this.#files_accessor_storage = value; }
|
|
90
|
-
#
|
|
91
|
-
get filesVisible() { return this.#filesVisible_accessor_storage; }
|
|
92
|
-
set filesVisible(value) { this.#filesVisible_accessor_storage = value; }
|
|
93
|
-
#internals = (__runInitializers(this, _filesVisible_extraInitializers), this.attachInternals());
|
|
83
|
+
#internals = (__runInitializers(this, _files_extraInitializers), this.attachInternals());
|
|
94
84
|
#input = query('input');
|
|
95
85
|
connectedCallback() {
|
|
96
86
|
this.syncFormValues();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAuG5B,mBAAmB;4BA/F/B,OAAO,CAAC;YACP,OAAO,EAAE,gBAAgB;YACzB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BH;aACF;SACF,CAAC;;;;sBACuC,WAAW
|
|
1
|
+
{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAuG5B,mBAAmB;4BA/F/B,OAAO,CAAC;YACP,OAAO,EAAE,gBAAgB;YACzB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;;;;;;;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCAGjD,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;kCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;iCAGN,IAAI,EAAE;0CAUN,MAAM,EAAE;yCAqBR,MAAM,CAAC,OAAO,CAAC;uCAWf,MAAM,CAAC,WAAW,CAAC;uCAKnB,MAAM,CAAC,WAAW,CAAC;kCAKnB,MAAM,CAAC,MAAM,CAAC;YAlEf,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAI1B,uKAAS,MAAM,6BAAN,MAAM,uFAAM;YAIrB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAG1B,oKAAS,KAAK,6BAAL,KAAK,qFAAyB;YAUvC,6LAAA,cAAc,6DAkBb;YAGD,0LAAA,aAAa,6DAQZ;YAGD,oLAAA,WAAW,6DAEV;YAGD,oLAAA,WAAW,6DAEV;YAGD,qKAAA,MAAM,6DAoBL;YA5FH,6KA6FC;;;;QA5FC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAI7B,0BALW,mDAAmB,8CAKd,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAInB,gIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAI1B,gIAAkB,EAAE,GAAC;QAArB,IAAS,MAAM,4CAAM;QAArB,IAAS,MAAM,kDAAM;QAIrB,kIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAG1B,8HAAkC,IAAI,GAAC;QAAvC,IAAS,KAAK,2CAAyB;QAAvC,IAAS,KAAK,iDAAyB;QAEvC,UAAU,uDAAG,IAAI,CAAC,eAAe,EAAE,EAAC;QACpC,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;QAExB,iBAAiB;YACf,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAGD,cAAc;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;YAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;gBACvB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBAC9B,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;YAED,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YAEvC,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;YACrF,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QAGD,aAAa,CAAC,CAAQ;YACpB,CAAC,CAAC,eAAe,EAAE,CAAC;YAEpB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YAEzB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC5D,CAAC;QAGD,WAAW;YACT,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAClC,CAAC;QAGD,WAAW;YACT,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC;QAGD,MAAM,CAAC,CAAY;YACjB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YAEnC,IAAI,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC;gBAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;gBAEhC,KAAK,MAAM,IAAI,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;oBACxC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;wBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;wBAE9B,IAAI,IAAI,EAAE,CAAC;4BACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;wBACvB,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAC1B,CAAC;QACH,CAAC;;YA5FU,uDAAmB;;;;;SAAnB,mBAAmB"}
|
|
@@ -35,7 +35,6 @@ describe('usa-file-input', () => {
|
|
|
35
35
|
// Wait for effects to resolve
|
|
36
36
|
await Promise.resolve();
|
|
37
37
|
// Verify that filesVisible is true and files are set
|
|
38
|
-
assert.isTrue(fileInput.filesVisible);
|
|
39
38
|
assert.equal(fileInput.files?.length, 1);
|
|
40
39
|
assert.equal(fileInput.files?.[0].name, 'test.txt');
|
|
41
40
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.element.test.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA,gDAAgD,CAAC,CAAC;QAE3G,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;QAE3C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;+CAEL,IAAI,CAAC,KAAK;;;;;;;;KAQpD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvD,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;gBACzB,OAAO,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAExD,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEzB,qCAAqC;QACrC,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,MAAM,EAAE;YACtC,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAErC,8BAA8B;QAC9B,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAExB,qDAAqD;QACrD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"file-input.element.test.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA,gDAAgD,CAAC,CAAC;QAE3G,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;QAE3C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;+CAEL,IAAI,CAAC,KAAK;;;;;;;;KAQpD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvD,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;gBACzB,OAAO,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAExD,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEzB,qCAAqC;QACrC,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,MAAM,EAAE;YACtC,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAErC,8BAA8B;QAC9B,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAExB,qDAAqD;QACrD,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import type { StoryObj } from
|
|
2
|
-
import type { USAFileInputElement } from
|
|
1
|
+
import type { StoryObj } from '@storybook/web-components';
|
|
2
|
+
import type { USAFileInputElement } from './file-input.element.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
tags: string[];
|
|
6
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
7
6
|
argTypes: {};
|
|
8
7
|
args: {};
|
|
9
8
|
};
|
|
10
9
|
export default meta;
|
|
11
10
|
type Story = StoryObj<USAFileInputElement>;
|
|
12
|
-
export declare const
|
|
11
|
+
export declare const Single: Story;
|
|
12
|
+
export declare const Multiple: Story;
|
|
@@ -1,22 +1,33 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from 'lit';
|
|
2
2
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
3
3
|
const meta = {
|
|
4
|
-
title:
|
|
5
|
-
tags: [
|
|
4
|
+
title: 'usa-file-input',
|
|
5
|
+
tags: ['autodocs'],
|
|
6
|
+
argTypes: {},
|
|
7
|
+
args: {},
|
|
8
|
+
};
|
|
9
|
+
export default meta;
|
|
10
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
11
|
+
export const Single = {
|
|
12
|
+
args: {},
|
|
6
13
|
render() {
|
|
7
14
|
function onSubmit(e) {
|
|
8
15
|
e.preventDefault();
|
|
9
16
|
const data = new FormData(e.target);
|
|
10
|
-
console.log(data.getAll(
|
|
17
|
+
console.log(data.getAll('upload'));
|
|
11
18
|
}
|
|
12
19
|
return html `<form @submit="${onSubmit}"><usa-file-input name="upload" required>Input accepts a single file<div slot="description">Drag file here or<usa-link>choose from folder</usa-link></div></usa-file-input><usa-button type="submit">SUBMIT</usa-button></form>`;
|
|
13
20
|
},
|
|
14
|
-
argTypes: {},
|
|
15
|
-
args: {},
|
|
16
21
|
};
|
|
17
|
-
export
|
|
18
|
-
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
19
|
-
export const Primary = {
|
|
22
|
+
export const Multiple = {
|
|
20
23
|
args: {},
|
|
24
|
+
render() {
|
|
25
|
+
function onSubmit(e) {
|
|
26
|
+
e.preventDefault();
|
|
27
|
+
const data = new FormData(e.target);
|
|
28
|
+
console.log(data.getAll('upload'));
|
|
29
|
+
}
|
|
30
|
+
return html `<form @submit="${onSubmit}"><usa-file-input name="upload" required multiple="multiple">Input accepts multiple files<div slot="description">Drag file here or<usa-link>choose from folder</usa-link></div></usa-file-input><usa-button type="submit">SUBMIT</usa-button></form>`;
|
|
31
|
+
},
|
|
21
32
|
};
|
|
22
33
|
//# sourceMappingURL=file-input.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.stories.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"file-input.stories.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE;IACR,MAAM;QACJ,SAAS,QAAQ,CAAC,CAAQ;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;YAEvD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,IAAI,CAAA;sBACO,QAAQ;;;;;;;;;KASzB,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,MAAM;QACJ,SAAS,QAAQ,CAAC,CAAQ;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;YAEvD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,IAAI,CAAA;sBACO,QAAQ;;;;;;;;;KASzB,CAAC;IACJ,CAAC;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.element.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"icon.element.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IA8BvC,cAAc;4BAtB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;aACF;SACF,CAAC,EACD,UAAU,CAAC;YACV,IAAI,EAAE,cAAc;SACrB,CAAC;;;;sBACkC,WAAW;;;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE,EACN,OAAO,EAAE;wCAYT,MAAM,EAAE;YAXT,iKAAS,IAAI,6BAAJ,IAAI,mFAAoB;YAYjC,uLAAA,YAAY,6DAEX;YAjBH,6KA0CC;;;YA1CY,uDAAc;;QAGzB,0BAHW,mDAAc,8CAGK,EAAE,GAAC;QAAjC,IAAS,IAAI,0CAAoB;QAAjC,IAAS,IAAI,gDAAoB;QAEjC,UAAU,sDAAkB,MAAM,EAAC;QAEnC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;QAC5B,gBAAgB,GAA2B,IAAI,CAAC;QAEhD,iBAAiB;YACf,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAGD,YAAY;YACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,KAAK,CAAC,WAAW;YACf,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,CAAC;YAC/B,IAAI,CAAC,gBAAgB,GAAG,IAAI,eAAe,EAAE,CAAC;YAE9C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,OAAO;YACT,CAAC;YAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI;iBACD,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;iBACjD,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE;gBACpB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;oBACpB,IAAI,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;wBACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;oBAC7D,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;oBACtC,CAAC;gBACH,CAAC;YACH,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACrB,CAAC;;;;SAzCU,cAAc"}
|
|
@@ -23,7 +23,7 @@ export declare class USATextInputElement extends HTMLElement implements Maskable
|
|
|
23
23
|
accessor value: string;
|
|
24
24
|
accessor selectionStart: number | null;
|
|
25
25
|
accessor selectionEnd: number | null;
|
|
26
|
-
|
|
26
|
+
formAssociatedCallback(): void;
|
|
27
27
|
onChange(): void;
|
|
28
28
|
focus(options?: FocusOptions): void;
|
|
29
29
|
onKeyDown(e: KeyboardEvent): void;
|
|
@@ -177,7 +177,7 @@ let USATextInputElement = (() => {
|
|
|
177
177
|
set selectionEnd(value) { this.#selectionEnd_accessor_storage = value; }
|
|
178
178
|
#internals = (__runInitializers(this, _selectionEnd_extraInitializers), this.attachInternals());
|
|
179
179
|
#input = query('input');
|
|
180
|
-
|
|
180
|
+
formAssociatedCallback() {
|
|
181
181
|
this.#syncFormState();
|
|
182
182
|
}
|
|
183
183
|
onChange() {
|
|
@@ -208,10 +208,11 @@ let USATextInputElement = (() => {
|
|
|
208
208
|
this.selectionEnd = input.selectionEnd;
|
|
209
209
|
this.dispatchEvent(new Event('input', { bubbles: true }));
|
|
210
210
|
}
|
|
211
|
-
#syncFormState() {
|
|
211
|
+
async #syncFormState() {
|
|
212
212
|
const input = this.#input();
|
|
213
213
|
this.#internals.setValidity({});
|
|
214
214
|
this.#internals.setFormValue(this.value);
|
|
215
|
+
await Promise.resolve();
|
|
215
216
|
if (input.validationMessage) {
|
|
216
217
|
this.#internals.setValidity({ customError: true }, input.validationMessage, input);
|
|
217
218
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAkH5B,mBAAmB;4BAxG/B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsEF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCAGjD,IAAI,EAAE,EACN,IAAI,EAAE;wCAGN,IAAI,EAAE,EACN,IAAI,EAAE;uCAGN,IAAI,EAAE,EACN,IAAI,EAAE;+BAGN,IAAI,EAAE,EACN,IAAI,EAAE;+BAGN,IAAI,EAAE,EACN,IAAI,EAAE;qCAGN,IAAI,EAAE,EACN,IAAI,EAAE;qCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;gCAGN,IAAI,EAAE,EACN,IAAI,EAAE;qCAGN,IAAI,EAAE,EACN,IAAI,EAAE;kCAGN,IAAI,EAAE;iCAGN,IAAI,CAAC;oBACJ,OAAO,EAAE,KAAK;iBACf,CAAC,EACD,IAAI,EAAE;0CAGN,IAAI,CAAC;oBACJ,YAAY,EAAE,IAAI;iBACnB,CAAC;wCAGD,IAAI,CAAC;oBACJ,YAAY,EAAE,IAAI;iBACnB,CAAC;oCAUD,MAAM,EAAE;qCASR,MAAM,CAAC,SAAS,CAAC;yCAkBjB,MAAM,CAAC,OAAO,CAAC;YA/FhB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,yLAAS,YAAY,6BAAZ,YAAY,mGAAkB;YAIvC,sLAAS,WAAW,6BAAX,WAAW,iGAAM;YAI1B,8JAAS,GAAG,6BAAH,GAAG,iFAAM;YAIlB,8JAAS,GAAG,6BAAH,GAAG,iFAAM;YAIlB,gLAAS,SAAS,6BAAT,SAAS,6FAAK;YAIvB,gLAAS,SAAS,6BAAT,SAAS,6FAAW;YAI7B,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAI1B,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAI1B,iKAAS,IAAI,6BAAJ,IAAI,mFAA0C;YAIvD,gLAAS,SAAS,6BAAT,SAAS,6FAAS;YAG3B,uKAAS,MAAM,6BAAN,MAAM,uFAA0B;YAMzC,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAKpB,+LAAS,cAAc,6BAAd,cAAc,uGAAuB;YAK9C,yLAAS,YAAY,6BAAZ,YAAY,mGAAuB;YAU5C,2KAAA,QAAQ,6DAEP;YAOD,8KAAA,SAAS,6DAeR;YAGD,0LAAA,aAAa,6DAUZ;YA/GH,
|
|
1
|
+
{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAkH5B,mBAAmB;4BAxG/B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsEF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCAGjD,IAAI,EAAE,EACN,IAAI,EAAE;wCAGN,IAAI,EAAE,EACN,IAAI,EAAE;uCAGN,IAAI,EAAE,EACN,IAAI,EAAE;+BAGN,IAAI,EAAE,EACN,IAAI,EAAE;+BAGN,IAAI,EAAE,EACN,IAAI,EAAE;qCAGN,IAAI,EAAE,EACN,IAAI,EAAE;qCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;gCAGN,IAAI,EAAE,EACN,IAAI,EAAE;qCAGN,IAAI,EAAE,EACN,IAAI,EAAE;kCAGN,IAAI,EAAE;iCAGN,IAAI,CAAC;oBACJ,OAAO,EAAE,KAAK;iBACf,CAAC,EACD,IAAI,EAAE;0CAGN,IAAI,CAAC;oBACJ,YAAY,EAAE,IAAI;iBACnB,CAAC;wCAGD,IAAI,CAAC;oBACJ,YAAY,EAAE,IAAI;iBACnB,CAAC;oCAUD,MAAM,EAAE;qCASR,MAAM,CAAC,SAAS,CAAC;yCAkBjB,MAAM,CAAC,OAAO,CAAC;YA/FhB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,yLAAS,YAAY,6BAAZ,YAAY,mGAAkB;YAIvC,sLAAS,WAAW,6BAAX,WAAW,iGAAM;YAI1B,8JAAS,GAAG,6BAAH,GAAG,iFAAM;YAIlB,8JAAS,GAAG,6BAAH,GAAG,iFAAM;YAIlB,gLAAS,SAAS,6BAAT,SAAS,6FAAK;YAIvB,gLAAS,SAAS,6BAAT,SAAS,6FAAW;YAI7B,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAI1B,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAI1B,iKAAS,IAAI,6BAAJ,IAAI,mFAA0C;YAIvD,gLAAS,SAAS,6BAAT,SAAS,6FAAS;YAG3B,uKAAS,MAAM,6BAAN,MAAM,uFAA0B;YAMzC,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAKpB,+LAAS,cAAc,6BAAd,cAAc,uGAAuB;YAK9C,yLAAS,YAAY,6BAAZ,YAAY,mGAAuB;YAU5C,2KAAA,QAAQ,6DAEP;YAOD,8KAAA,SAAS,6DAeR;YAGD,0LAAA,aAAa,6DAUZ;YA/GH,6KAsIC;;;;QArIC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAI7B,0BALW,mDAAmB,8CAKd,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAInB,wIAAkC,IAAI,GAAC;QAAvC,IAAS,YAAY,kDAAkB;QAAvC,IAAS,YAAY,wDAAkB;QAIvC,8IAAuB,EAAE,GAAC;QAA1B,IAAS,WAAW,iDAAM;QAA1B,IAAS,WAAW,uDAAM;QAI1B,6HAAe,EAAE,GAAC;QAAlB,IAAS,GAAG,yCAAM;QAAlB,IAAS,GAAG,+CAAM;QAIlB,qHAAe,EAAE,GAAC;QAAlB,IAAS,GAAG,yCAAM;QAAlB,IAAS,GAAG,+CAAM;QAIlB,iIAAqB,CAAC,GAAC;QAAvB,IAAS,SAAS,+CAAK;QAAvB,IAAS,SAAS,qDAAK;QAIvB,uIAAqB,OAAO,GAAC;QAA7B,IAAS,SAAS,+CAAW;QAA7B,IAAS,SAAS,qDAAW;QAI7B,qIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAI1B,oIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAI1B,4HAAgD,MAAM,GAAC;QAAvD,IAAS,IAAI,0CAA0C;QAAvD,IAAS,IAAI,gDAA0C;QAIvD,kIAAqB,KAAK,GAAC;QAA3B,IAAS,SAAS,+CAAS;QAA3B,IAAS,SAAS,qDAAS;QAG3B,iIAAsC,EAAE,GAAC;QAAzC,IAAS,MAAM,4CAA0B;QAAzC,IAAS,MAAM,kDAA0B;QAMzC,4HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAKpB,6IAAyC,IAAI,GAAC;QAA9C,IAAS,cAAc,oDAAuB;QAA9C,IAAS,cAAc,0DAAuB;QAK9C,kJAAuC,IAAI,GAAC;QAA5C,IAAS,YAAY,kDAAuB;QAA5C,IAAS,YAAY,wDAAuB;QAE5C,UAAU,8DAAG,IAAI,CAAC,eAAe,EAAE,EAAC;QACpC,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;QAExB,sBAAsB;YACpB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAGD,QAAQ;YACN,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,KAAK,CAAC,OAAsB;YAC1B,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC;QAGD,SAAS,CAAC,CAAgB;YACxB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAElC,IAAI,IAAI,EAAE,CAAC;gBACT,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,CAAC;gBAErE,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;oBACpD,mFAAmF;oBACnF,UAAU,CAAC,GAAG,EAAE;wBACd,IAAI,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;4BAC1C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;wBACrB,CAAC;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;QACH,CAAC;QAGD,aAAa,CAAC,CAAQ;YACpB,CAAC,CAAC,eAAe,EAAE,CAAC;YAEpB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC;YAC3C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YAEvC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC5D,CAAC;QAED,KAAK,CAAC,cAAc;YAClB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAChC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEzC,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;YAExB,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;YACrF,CAAC;QACH,CAAC;QAED,OAAO,CAAC,IAAqB;YAC3B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC7C,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC;YACpB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAEjB,GAAG,CAAC,KAAK,EAAE,CAAC;YACZ,GAAG,CAAC,MAAM,EAAE,CAAC;QACf,CAAC;;YArIU,uDAAmB;;;;;SAAnB,mBAAmB"}
|
|
@@ -13,7 +13,7 @@ export declare class USATextareaElement extends HTMLElement {
|
|
|
13
13
|
accessor required: boolean;
|
|
14
14
|
accessor autofocus: boolean;
|
|
15
15
|
accessor value: string;
|
|
16
|
-
|
|
16
|
+
formAssociatedCallback(): void;
|
|
17
17
|
onChange(): void;
|
|
18
|
-
onInputChange(): void;
|
|
18
|
+
onInputChange(e: Event): void;
|
|
19
19
|
}
|
|
@@ -83,19 +83,22 @@ let USATextareaElement = (() => {
|
|
|
83
83
|
set value(value) { this.#value_accessor_storage = value; }
|
|
84
84
|
#internals = (__runInitializers(this, _value_extraInitializers), this.attachInternals());
|
|
85
85
|
#input = query('textarea');
|
|
86
|
-
|
|
86
|
+
formAssociatedCallback() {
|
|
87
87
|
this.#syncFormState();
|
|
88
88
|
}
|
|
89
89
|
onChange() {
|
|
90
90
|
this.#syncFormState();
|
|
91
91
|
}
|
|
92
|
-
onInputChange() {
|
|
92
|
+
onInputChange(e) {
|
|
93
|
+
e.stopPropagation();
|
|
93
94
|
this.value = this.#input().value;
|
|
95
|
+
this.dispatchEvent(new Event('input', { bubbles: true }));
|
|
94
96
|
}
|
|
95
|
-
#syncFormState() {
|
|
97
|
+
async #syncFormState() {
|
|
96
98
|
const input = this.#input();
|
|
97
99
|
this.#internals.setFormValue(this.value);
|
|
98
100
|
this.#internals.setValidity({});
|
|
101
|
+
await Promise.resolve();
|
|
99
102
|
if (input.validationMessage) {
|
|
100
103
|
this.#internals.setValidity({ customError: true }, input.validationMessage, input);
|
|
101
104
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.element.js","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAwE5B,kBAAkB;4BAhE9B,OAAO,CAAC;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CF;gBACD,IAAI,CAAA;;;;;;;;;;KAUH;aACF;SACF,CAAC;;;;sBACsC,WAAW;;;;;;;;;;;;;;;;;;;;;;kCAAnB,SAAQ,WAAW;;;;gCAGhD,IAAI,EAAE,EACN,IAAI,EAAE;wCAGN,IAAI,EAAE,EACN,IAAI,EAAE;uCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;qCAGN,IAAI,EAAE,EACN,IAAI,EAAE;iCAGN,IAAI,CAAC;oBACJ,OAAO,EAAE,KAAK;iBACf,CAAC,EACD,IAAI,EAAE;oCAUN,MAAM,EAAE;yCAKR,MAAM,CAAC,OAAO,CAAC;YApChB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,yLAAS,YAAY,6BAAZ,YAAY,mGAAkB;YAIvC,sLAAS,WAAW,6BAAX,WAAW,iGAAM;YAI1B,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAI1B,gLAAS,SAAS,6BAAT,SAAS,6FAAS;YAM3B,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAUpB,2KAAA,QAAQ,6DAEP;YAGD,0LAAA,aAAa,
|
|
1
|
+
{"version":3,"file":"textarea.element.js","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { StoryObj } from
|
|
2
|
-
import type { USATextareaElement } from
|
|
1
|
+
import type { StoryObj } from '@storybook/web-components';
|
|
2
|
+
import type { USATextareaElement } from './textarea.element.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
tags: string[];
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { html } from
|
|
1
|
+
import { html } from 'lit';
|
|
2
2
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
3
3
|
const meta = {
|
|
4
|
-
title:
|
|
5
|
-
tags: [
|
|
4
|
+
title: 'usa-textarea',
|
|
5
|
+
tags: ['autodocs'],
|
|
6
6
|
render(args) {
|
|
7
7
|
return html `<usa-textarea>Hello World</usa-textarea>`;
|
|
8
8
|
},
|