@noctuatech/uswds 1.3.2 → 1.3.3
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 +1 -1
- package/src/lib/input/input.element.ts +3 -6
- package/src/lib/input/input.test.ts +11 -0
- package/src/lib/textarea/textarea.element.ts +2 -6
- package/target/lib/input/input.element.js +81 -3
- package/target/lib/input/input.element.js.map +1 -1
- package/target/lib/input/input.test.js +29 -4
- package/target/lib/input/input.test.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { attr, css, element, html, listen, query
|
|
1
|
+
import { attr, css, element, html, listen, query } from '@joist/element';
|
|
2
2
|
import { effect, observe } from '@joist/observable';
|
|
3
3
|
|
|
4
4
|
import type { MaskableElement } from '../input-mask/maskable.element.js';
|
|
@@ -149,11 +149,6 @@ export class USATextInputElement extends HTMLElement implements MaskableElement
|
|
|
149
149
|
#internals = this.attachInternals();
|
|
150
150
|
#input = query('input');
|
|
151
151
|
|
|
152
|
-
@ready()
|
|
153
|
-
onReady() {
|
|
154
|
-
this.#input({ autofocus: this.autofocus });
|
|
155
|
-
}
|
|
156
|
-
|
|
157
152
|
attributeChangedCallback() {
|
|
158
153
|
this.#input({
|
|
159
154
|
autocomplete: this.autocomplete,
|
|
@@ -170,6 +165,8 @@ export class USATextInputElement extends HTMLElement implements MaskableElement
|
|
|
170
165
|
}
|
|
171
166
|
|
|
172
167
|
connectedCallback() {
|
|
168
|
+
this.#input({ autofocus: this.autofocus, value: this.value });
|
|
169
|
+
|
|
173
170
|
this.#syncFormState();
|
|
174
171
|
}
|
|
175
172
|
|
|
@@ -2,6 +2,7 @@ import './input.element.js';
|
|
|
2
2
|
|
|
3
3
|
import { assert, fixture, html } from '@open-wc/testing';
|
|
4
4
|
import { userEvent } from '@testing-library/user-event';
|
|
5
|
+
import { USATextInputElement } from './input.element.js';
|
|
5
6
|
|
|
6
7
|
describe('usa-input', () => {
|
|
7
8
|
it('should be accessible', async () => {
|
|
@@ -24,6 +25,16 @@ describe('usa-input', () => {
|
|
|
24
25
|
assert.equal(value.get('fname'), 'Foo');
|
|
25
26
|
});
|
|
26
27
|
|
|
28
|
+
it('should display default attribute value', async () => {
|
|
29
|
+
const input = await fixture<USATextInputElement>(html`
|
|
30
|
+
<usa-input name="fname" value="Foo">Hello World</usa-input>
|
|
31
|
+
`);
|
|
32
|
+
|
|
33
|
+
const nativeInput = input.shadowRoot?.querySelector('input');
|
|
34
|
+
|
|
35
|
+
assert.equal(nativeInput?.value, 'Foo');
|
|
36
|
+
});
|
|
37
|
+
|
|
27
38
|
it('should update form value as input value changed', async () => {
|
|
28
39
|
const form = await fixture<HTMLFormElement>(html`
|
|
29
40
|
<form>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { attr, css, element, html, listen, query
|
|
1
|
+
import { attr, css, element, html, listen, query } from '@joist/element';
|
|
2
2
|
import { effect, observe } from '@joist/observable';
|
|
3
3
|
|
|
4
4
|
declare global {
|
|
@@ -91,11 +91,6 @@ export class USATextareaElement extends HTMLElement {
|
|
|
91
91
|
#internals = this.attachInternals();
|
|
92
92
|
#input = query('textarea');
|
|
93
93
|
|
|
94
|
-
@ready()
|
|
95
|
-
onReady() {
|
|
96
|
-
this.#input({ autofocus: this.autofocus });
|
|
97
|
-
}
|
|
98
|
-
|
|
99
94
|
attributeChangedCallback() {
|
|
100
95
|
this.#input({
|
|
101
96
|
name: this.name,
|
|
@@ -106,6 +101,7 @@ export class USATextareaElement extends HTMLElement {
|
|
|
106
101
|
}
|
|
107
102
|
|
|
108
103
|
connectedCallback() {
|
|
104
|
+
this.#input({ autofocus: this.autofocus, value: this.value });
|
|
109
105
|
this.#syncFormState();
|
|
110
106
|
}
|
|
111
107
|
|
|
@@ -5,8 +5,86 @@ let USATextInputElement = (() => {
|
|
|
5
5
|
let _classDecorators = [element({
|
|
6
6
|
tagName: 'usa-input',
|
|
7
7
|
shadowDom: [
|
|
8
|
-
css
|
|
9
|
-
|
|
8
|
+
css `
|
|
9
|
+
* {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:host {
|
|
14
|
+
font-size: 1.06rem;
|
|
15
|
+
line-height: 1.3;
|
|
16
|
+
display: block;
|
|
17
|
+
font-weight: 400;
|
|
18
|
+
max-width: 30rem;
|
|
19
|
+
margin-bottom: 1.5rem;
|
|
20
|
+
position: relative;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
input {
|
|
24
|
+
background-color: #fff;
|
|
25
|
+
border-width: 1px;
|
|
26
|
+
border-color: #5c5c5c;
|
|
27
|
+
border-style: solid;
|
|
28
|
+
border-radius: 0;
|
|
29
|
+
color: #1b1b1b;
|
|
30
|
+
display: block;
|
|
31
|
+
height: 2.5rem;
|
|
32
|
+
line-height: 1.3;
|
|
33
|
+
font-size: 1.06rem;
|
|
34
|
+
margin-top: 0.5rem;
|
|
35
|
+
padding: 0.5rem;
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
input:not(:disabled):focus {
|
|
40
|
+
outline: 0.25rem solid #2491ff;
|
|
41
|
+
outline-offset: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
input:disabled {
|
|
45
|
+
background-color: #fff;
|
|
46
|
+
border-color: #757575;
|
|
47
|
+
color: #757575;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
slot[name='detail']::slotted(*) {
|
|
51
|
+
color: #757575;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
slot[name='detail']::slotted(usa-icon) {
|
|
55
|
+
width: 1.5rem;
|
|
56
|
+
height: 1.5rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
slot[name='detail'] {
|
|
60
|
+
display: block;
|
|
61
|
+
position: absolute;
|
|
62
|
+
bottom: 0.21rem;
|
|
63
|
+
left: 0.5rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
:host([detail='pfx']) input {
|
|
67
|
+
padding-left: 2.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:host([detail='sfx']) input {
|
|
71
|
+
padding-right: 2.5rem;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:host([detail='sfx']) slot[name='detail'] {
|
|
75
|
+
right: 0.5rem;
|
|
76
|
+
left: auto;
|
|
77
|
+
}
|
|
78
|
+
`,
|
|
79
|
+
html `
|
|
80
|
+
<label>
|
|
81
|
+
<slot name="detail"></slot>
|
|
82
|
+
|
|
83
|
+
<slot></slot>
|
|
84
|
+
|
|
85
|
+
<input tabindex="0" part="input" />
|
|
86
|
+
</label>
|
|
87
|
+
`,
|
|
10
88
|
],
|
|
11
89
|
})];
|
|
12
90
|
let _classDescriptor;
|
|
@@ -155,7 +233,7 @@ let USATextInputElement = (() => {
|
|
|
155
233
|
#internals = (__runInitializers(this, _selectionEnd_extraInitializers), this.attachInternals());
|
|
156
234
|
#input = query('input');
|
|
157
235
|
onReady() {
|
|
158
|
-
this.#input({ autofocus: this.autofocus });
|
|
236
|
+
this.#input({ autofocus: this.autofocus, value: this.value });
|
|
159
237
|
}
|
|
160
238
|
attributeChangedCallback() {
|
|
161
239
|
this.#input({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,16 +3,35 @@ import { assert, fixture, html } from '@open-wc/testing';
|
|
|
3
3
|
import { userEvent } from '@testing-library/user-event';
|
|
4
4
|
describe('usa-input', () => {
|
|
5
5
|
it('should be accessible', async () => {
|
|
6
|
-
const form = await fixture(html
|
|
6
|
+
const form = await fixture(html ` <usa-input name="fname" value="Foo">Hello World</usa-input> `);
|
|
7
7
|
return assert.isAccessible(form);
|
|
8
8
|
});
|
|
9
9
|
it('should submit form with default values', async () => {
|
|
10
|
-
const form = await fixture(html
|
|
10
|
+
const form = await fixture(html `
|
|
11
|
+
<form>
|
|
12
|
+
<usa-input name="fname" value="Foo">Hello World</usa-input>
|
|
13
|
+
|
|
14
|
+
<button>Submit</button>
|
|
15
|
+
</form>
|
|
16
|
+
`);
|
|
11
17
|
const value = new FormData(form);
|
|
12
18
|
assert.equal(value.get('fname'), 'Foo');
|
|
13
19
|
});
|
|
20
|
+
it('should display default attribute value', async () => {
|
|
21
|
+
const input = await fixture(html `
|
|
22
|
+
<usa-input name="fname" value="Foo">Hello World</usa-input>
|
|
23
|
+
`);
|
|
24
|
+
const nativeInput = input.shadowRoot?.querySelector('input');
|
|
25
|
+
assert.equal(nativeInput?.value, 'Foo');
|
|
26
|
+
});
|
|
14
27
|
it('should update form value as input value changed', async () => {
|
|
15
|
-
const form = await fixture(html
|
|
28
|
+
const form = await fixture(html `
|
|
29
|
+
<form>
|
|
30
|
+
<usa-input name="fname">Hello World</usa-input>
|
|
31
|
+
|
|
32
|
+
<button>Submit</button>
|
|
33
|
+
</form>
|
|
34
|
+
`);
|
|
16
35
|
const input = form.querySelector('usa-input');
|
|
17
36
|
const nativeInput = input?.shadowRoot?.querySelector('input');
|
|
18
37
|
if (nativeInput) {
|
|
@@ -22,7 +41,13 @@ describe('usa-input', () => {
|
|
|
22
41
|
assert.equal(value.get('fname'), 'Bar');
|
|
23
42
|
});
|
|
24
43
|
it('should not submit when not valid', async () => {
|
|
25
|
-
const form = await fixture(html
|
|
44
|
+
const form = await fixture(html `
|
|
45
|
+
<form>
|
|
46
|
+
<usa-input name="fname" required>Hello World</usa-input>
|
|
47
|
+
|
|
48
|
+
<button>Submit</button>
|
|
49
|
+
</form>
|
|
50
|
+
`);
|
|
26
51
|
assert.equal(form.checkValidity(), false);
|
|
27
52
|
});
|
|
28
53
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.test.js","sourceRoot":"","sources":["../../../src/lib/input/input.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"input.test.js","sourceRoot":"","sources":["../../../src/lib/input/input.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGxD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA,+DAA+D,CAAC,CAAC;QAEjH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,KAAK,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAEpD,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAE7D,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAC9C,MAAM,WAAW,GAAG,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9D,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAC3C,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|