@noctuatech/uswds 1.3.1 → 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 +6 -6
- package/src/lib/accordion/accordion.element.ts +18 -26
- package/src/lib/alert/alert.element.ts +21 -20
- package/src/lib/alert/alert.stories.ts +10 -15
- package/src/lib/file-input/file-input.element.ts +36 -31
- package/src/lib/icon/icon.element.ts +37 -27
- package/src/lib/input/input.element.ts +32 -44
- package/src/lib/input/input.test.ts +25 -16
- package/src/lib/input-mask/input-mask.element.ts +13 -13
- package/src/lib/input-mask/input-mask.stories.ts +7 -12
- package/src/lib/input-mask/input-mask.test.ts +45 -50
- package/src/lib/services/icon.service.test.ts +14 -14
- package/src/lib/services/icon.service.ts +18 -17
- package/src/lib/textarea/textarea.element.ts +15 -23
- package/target/lib/accordion/accordion.element.d.ts +4 -3
- package/target/lib/accordion/accordion.element.js +20 -12
- package/target/lib/accordion/accordion.element.js.map +1 -1
- package/target/lib/alert/alert.element.d.ts +4 -4
- package/target/lib/alert/alert.element.js +20 -12
- package/target/lib/alert/alert.element.js.map +1 -1
- package/target/lib/alert/alert.stories.d.ts +2 -2
- package/target/lib/alert/alert.stories.js +3 -3
- package/target/lib/alert/alert.stories.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 +6 -14
- package/target/lib/file-input/file-input.element.js.map +1 -1
- package/target/lib/icon/icon.element.d.ts +4 -4
- package/target/lib/icon/icon.element.js +35 -25
- package/target/lib/icon/icon.element.js.map +1 -1
- package/target/lib/input/input.element.d.ts +5 -5
- package/target/lib/input/input.element.js +101 -25
- package/target/lib/input/input.element.js.map +1 -1
- package/target/lib/input/input.test.d.ts +1 -1
- package/target/lib/input/input.test.js +42 -17
- package/target/lib/input/input.test.js.map +1 -1
- package/target/lib/input-mask/input-mask.element.d.ts +1 -1
- package/target/lib/input-mask/input-mask.element.js +11 -11
- package/target/lib/input-mask/input-mask.element.js.map +1 -1
- package/target/lib/input-mask/input-mask.stories.d.ts +2 -2
- package/target/lib/input-mask/input-mask.stories.js +5 -5
- package/target/lib/input-mask/input-mask.stories.js.map +1 -1
- package/target/lib/input-mask/input-mask.test.d.ts +2 -2
- package/target/lib/input-mask/input-mask.test.js +43 -43
- package/target/lib/input-mask/input-mask.test.js.map +1 -1
- package/target/lib/services/icon.service.d.ts +2 -1
- package/target/lib/services/icon.service.js +15 -15
- package/target/lib/services/icon.service.js.map +1 -1
- package/target/lib/services/icon.service.test.js +14 -14
- package/target/lib/services/icon.service.test.js.map +1 -1
- package/target/lib/textarea/textarea.element.d.ts +1 -1
- package/target/lib/textarea/textarea.element.js +10 -10
- package/target/lib/textarea/textarea.element.js.map +1 -1
|
@@ -1,12 +1,90 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import { attr, css, element, html, listen, query, ready } from
|
|
3
|
-
import { effect, observe } from
|
|
2
|
+
import { attr, css, element, html, listen, query, ready } from '@joist/element';
|
|
3
|
+
import { effect, observe } from '@joist/observable';
|
|
4
4
|
let USATextInputElement = (() => {
|
|
5
5
|
let _classDecorators = [element({
|
|
6
|
-
tagName:
|
|
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;
|
|
@@ -74,9 +152,7 @@ let USATextInputElement = (() => {
|
|
|
74
152
|
_required_decorators = [attr()];
|
|
75
153
|
_disabled_decorators = [attr()];
|
|
76
154
|
_type_decorators = [attr()];
|
|
77
|
-
_detail_decorators = [attr(
|
|
78
|
-
observed: false,
|
|
79
|
-
})];
|
|
155
|
+
_detail_decorators = [attr()];
|
|
80
156
|
_value_decorators = [attr({
|
|
81
157
|
reflect: false,
|
|
82
158
|
}), observe()];
|
|
@@ -84,8 +160,8 @@ let USATextInputElement = (() => {
|
|
|
84
160
|
_selectionEnd_decorators = [observe()];
|
|
85
161
|
_onReady_decorators = [ready()];
|
|
86
162
|
_onChange_decorators = [effect()];
|
|
87
|
-
_onKeyDown_decorators = [listen(
|
|
88
|
-
_onInputChange_decorators = [listen(
|
|
163
|
+
_onKeyDown_decorators = [listen('keydown')];
|
|
164
|
+
_onInputChange_decorators = [listen('input')];
|
|
89
165
|
__esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
|
|
90
166
|
__esDecorate(this, null, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
|
|
91
167
|
__esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
|
|
@@ -109,19 +185,19 @@ let USATextInputElement = (() => {
|
|
|
109
185
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
110
186
|
}
|
|
111
187
|
static formAssociated = true;
|
|
112
|
-
#name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers,
|
|
188
|
+
#name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ''));
|
|
113
189
|
get name() { return this.#name_accessor_storage; }
|
|
114
190
|
set name(value) { this.#name_accessor_storage = value; }
|
|
115
|
-
#autocomplete_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _autocomplete_initializers,
|
|
191
|
+
#autocomplete_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _autocomplete_initializers, 'on'));
|
|
116
192
|
get autocomplete() { return this.#autocomplete_accessor_storage; }
|
|
117
193
|
set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
|
|
118
|
-
#placeholder_accessor_storage = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _placeholder_initializers,
|
|
194
|
+
#placeholder_accessor_storage = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _placeholder_initializers, ''));
|
|
119
195
|
get placeholder() { return this.#placeholder_accessor_storage; }
|
|
120
196
|
set placeholder(value) { this.#placeholder_accessor_storage = value; }
|
|
121
|
-
#min_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _min_initializers,
|
|
197
|
+
#min_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _min_initializers, ''));
|
|
122
198
|
get min() { return this.#min_accessor_storage; }
|
|
123
199
|
set min(value) { this.#min_accessor_storage = value; }
|
|
124
|
-
#max_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers,
|
|
200
|
+
#max_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, ''));
|
|
125
201
|
get max() { return this.#max_accessor_storage; }
|
|
126
202
|
set max(value) { this.#max_accessor_storage = value; }
|
|
127
203
|
#minLength_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _minLength_initializers, -1));
|
|
@@ -136,13 +212,13 @@ let USATextInputElement = (() => {
|
|
|
136
212
|
#disabled_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
137
213
|
get disabled() { return this.#disabled_accessor_storage; }
|
|
138
214
|
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
139
|
-
#type_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _type_initializers,
|
|
215
|
+
#type_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _type_initializers, 'text'));
|
|
140
216
|
get type() { return this.#type_accessor_storage; }
|
|
141
217
|
set type(value) { this.#type_accessor_storage = value; }
|
|
142
|
-
#detail_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _detail_initializers,
|
|
218
|
+
#detail_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _detail_initializers, ''));
|
|
143
219
|
get detail() { return this.#detail_accessor_storage; }
|
|
144
220
|
set detail(value) { this.#detail_accessor_storage = value; }
|
|
145
|
-
#value_accessor_storage = (__runInitializers(this, _detail_extraInitializers), __runInitializers(this, _value_initializers,
|
|
221
|
+
#value_accessor_storage = (__runInitializers(this, _detail_extraInitializers), __runInitializers(this, _value_initializers, ''));
|
|
146
222
|
get value() { return this.#value_accessor_storage; }
|
|
147
223
|
set value(value) { this.#value_accessor_storage = value; }
|
|
148
224
|
#selectionStart_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _selectionStart_initializers, null));
|
|
@@ -155,11 +231,11 @@ let USATextInputElement = (() => {
|
|
|
155
231
|
return this.#input().validationMessage;
|
|
156
232
|
}
|
|
157
233
|
#internals = (__runInitializers(this, _selectionEnd_extraInitializers), this.attachInternals());
|
|
158
|
-
#input = query(
|
|
234
|
+
#input = query('input');
|
|
159
235
|
onReady() {
|
|
160
|
-
this.#input({ autofocus: this.autofocus });
|
|
236
|
+
this.#input({ autofocus: this.autofocus, value: this.value });
|
|
161
237
|
}
|
|
162
|
-
attributeChangedCallback(
|
|
238
|
+
attributeChangedCallback() {
|
|
163
239
|
this.#input({
|
|
164
240
|
autocomplete: this.autocomplete,
|
|
165
241
|
placeholder: this.placeholder,
|
|
@@ -188,7 +264,7 @@ let USATextInputElement = (() => {
|
|
|
188
264
|
const form = this.#internals.form;
|
|
189
265
|
if (form) {
|
|
190
266
|
const hasModifier = e.metaKey || e.ctrlKey || e.shiftKey || e.altKey;
|
|
191
|
-
if (e.key.toUpperCase() ===
|
|
267
|
+
if (e.key.toUpperCase() === 'ENTER' && !hasModifier) {
|
|
192
268
|
// this makes sure that the user has a chance to cancel the event before submitting
|
|
193
269
|
setTimeout(() => {
|
|
194
270
|
if (!e.defaultPrevented && !e.isComposing) {
|
|
@@ -207,14 +283,14 @@ let USATextInputElement = (() => {
|
|
|
207
283
|
#syncFormState() {
|
|
208
284
|
const input = this.#input();
|
|
209
285
|
this.#internals.setValidity({});
|
|
210
|
-
this.#internals.setFormValue(
|
|
286
|
+
this.#internals.setFormValue(this.value);
|
|
211
287
|
if (input.validationMessage) {
|
|
212
288
|
this.#internals.setValidity({ customError: true }, input.validationMessage, input);
|
|
213
289
|
}
|
|
214
290
|
}
|
|
215
291
|
#submit(form) {
|
|
216
|
-
const btn = document.createElement(
|
|
217
|
-
btn.type =
|
|
292
|
+
const btn = document.createElement('button');
|
|
293
|
+
btn.type = 'submit';
|
|
218
294
|
form.append(btn);
|
|
219
295
|
btn.click();
|
|
220
296
|
btn.remove();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IA+FvC,mBAAmB;4BArF/B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsEF;gBACD,IAAI,CAAA;;;;;;;;KAQH;aACF;SACF,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import './input.element.js';
|
|
@@ -1,28 +1,53 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { assert, fixture, html } from
|
|
3
|
-
import { userEvent } from
|
|
4
|
-
describe(
|
|
5
|
-
it(
|
|
6
|
-
const form = await fixture(html
|
|
1
|
+
import './input.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
import { userEvent } from '@testing-library/user-event';
|
|
4
|
+
describe('usa-input', () => {
|
|
5
|
+
it('should be accessible', async () => {
|
|
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
|
-
it(
|
|
10
|
-
const form = await fixture(html
|
|
9
|
+
it('should submit form with default values', async () => {
|
|
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
|
-
assert.equal(value.get(
|
|
18
|
+
assert.equal(value.get('fname'), 'Foo');
|
|
13
19
|
});
|
|
14
|
-
it(
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
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
|
+
});
|
|
27
|
+
it('should update form value as input value changed', async () => {
|
|
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
|
+
`);
|
|
35
|
+
const input = form.querySelector('usa-input');
|
|
36
|
+
const nativeInput = input?.shadowRoot?.querySelector('input');
|
|
18
37
|
if (nativeInput) {
|
|
19
|
-
await userEvent.type(nativeInput,
|
|
38
|
+
await userEvent.type(nativeInput, 'Bar');
|
|
20
39
|
}
|
|
21
40
|
const value = new FormData(form);
|
|
22
|
-
assert.equal(value.get(
|
|
41
|
+
assert.equal(value.get('fname'), 'Bar');
|
|
23
42
|
});
|
|
24
|
-
it(
|
|
25
|
-
const form = await fixture(html
|
|
43
|
+
it('should not submit when not valid', async () => {
|
|
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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import { attr, css, element, html, listen, queryAll } from
|
|
3
|
-
import { PATTERN_CHARS, REG_EXPS, format } from
|
|
2
|
+
import { attr, css, element, html, listen, queryAll } from '@joist/element';
|
|
3
|
+
import { PATTERN_CHARS, REG_EXPS, format } from './format.js';
|
|
4
4
|
let USAInputMaskElement = (() => {
|
|
5
5
|
let _classDecorators = [element({
|
|
6
|
-
tagName:
|
|
6
|
+
tagName: 'usa-input-mask',
|
|
7
7
|
shadowDom: [
|
|
8
8
|
css `:host{display:contents}`,
|
|
9
9
|
html `<slot></slot>`,
|
|
@@ -24,8 +24,8 @@ let USAInputMaskElement = (() => {
|
|
|
24
24
|
static {
|
|
25
25
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
26
26
|
_mask_decorators = [attr()];
|
|
27
|
-
_onInput_decorators = [listen(
|
|
28
|
-
_onKeyDown_decorators = [listen(
|
|
27
|
+
_onInput_decorators = [listen('input')];
|
|
28
|
+
_onKeyDown_decorators = [listen('keydown')];
|
|
29
29
|
__esDecorate(this, null, _mask_decorators, { kind: "accessor", name: "mask", static: false, private: false, access: { has: obj => "mask" in obj, get: obj => obj.mask, set: (obj, value) => { obj.mask = value; } }, metadata: _metadata }, _mask_initializers, _mask_extraInitializers);
|
|
30
30
|
__esDecorate(this, null, _onInput_decorators, { kind: "method", name: "onInput", static: false, private: false, access: { has: obj => "onInput" in obj, get: obj => obj.onInput }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
31
31
|
__esDecorate(this, null, _onKeyDown_decorators, { kind: "method", name: "onKeyDown", static: false, private: false, access: { has: obj => "onKeyDown" in obj, get: obj => obj.onKeyDown }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
@@ -34,13 +34,13 @@ let USAInputMaskElement = (() => {
|
|
|
34
34
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
35
35
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
36
36
|
}
|
|
37
|
-
#mask_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _mask_initializers,
|
|
37
|
+
#mask_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _mask_initializers, ''));
|
|
38
38
|
get mask() { return this.#mask_accessor_storage; }
|
|
39
39
|
set mask(value) { this.#mask_accessor_storage = value; }
|
|
40
|
-
#maskables = (__runInitializers(this, _mask_extraInitializers), queryAll(
|
|
40
|
+
#maskables = (__runInitializers(this, _mask_extraInitializers), queryAll('[mask]', this));
|
|
41
41
|
connectedCallback() {
|
|
42
42
|
for (const input of this.#maskables()) {
|
|
43
|
-
const { formatted } = format(input.value, this.#getMaskFor(input));
|
|
43
|
+
const { formatted } = format(input.value || input.getAttribute('value') || '', this.#getMaskFor(input));
|
|
44
44
|
if (formatted) {
|
|
45
45
|
input.value = formatted;
|
|
46
46
|
}
|
|
@@ -75,13 +75,13 @@ let USAInputMaskElement = (() => {
|
|
|
75
75
|
// prevent default once value is the same as the mask length
|
|
76
76
|
e.preventDefault();
|
|
77
77
|
}
|
|
78
|
-
else if (patternChar ===
|
|
78
|
+
else if (patternChar === '9') {
|
|
79
79
|
if (!REG_EXPS.Numbers.test(e.key)) {
|
|
80
80
|
// if pattern char specifies number and is not
|
|
81
81
|
e.preventDefault();
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
|
-
else if (patternChar ===
|
|
84
|
+
else if (patternChar === 'A') {
|
|
85
85
|
if (!REG_EXPS.Letters.test(e.key)) {
|
|
86
86
|
// if pattern char specifies letter and is not
|
|
87
87
|
e.preventDefault();
|
|
@@ -90,7 +90,7 @@ let USAInputMaskElement = (() => {
|
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
#getMaskFor(input) {
|
|
93
|
-
return this.mask || input.getAttribute(
|
|
93
|
+
return this.mask || input.getAttribute('mask') || '';
|
|
94
94
|
}
|
|
95
95
|
};
|
|
96
96
|
return USAInputMaskElement = _classThis;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-mask.element.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAoB,QAAQ,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;IAoBnE,mBAAmB;4BAX/B,OAAO,CAAC;YACP,OAAO,EAAE,gBAAgB;YACzB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCACjD,IAAI,EAAE;mCAeN,MAAM,CAAC,OAAO,CAAC;qCAwBf,MAAM,CAAC,SAAS,CAAC;YAtClB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAenB,wKAAA,OAAO,6DAqBN;YAGD,8KAAA,SAAS,6DAuBR;YAhEH,6KAqEC;;;YArEY,uDAAmB;;QAE9B,0BAFW,mDAAmB,8CAEd,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAEnB,UAAU,sDAAG,QAAQ,CAAkB,QAAQ,EAAE,IAAI,CAAC,EAAC;QAEvD,iBAAiB;YACf,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;gBACtC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"input-mask.element.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { StoryObj } from
|
|
2
|
-
import type { USAInputMaskElement } from
|
|
1
|
+
import type { StoryObj } from '@storybook/web-components';
|
|
2
|
+
import type { USAInputMaskElement } from './input-mask.element.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
tags: string[];
|
|
@@ -1,14 +1,14 @@
|
|
|
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: 'input-mask',
|
|
5
|
+
tags: ['autodocs'],
|
|
6
6
|
render(args) {
|
|
7
|
-
return html `<usa-input-mask><usa-input name="phone" placeholder="${args.mask}" autocomplete="off" mask="${args.mask}">Phone:</usa-input></usa-input-mask>`;
|
|
7
|
+
return html `<usa-input-mask><usa-input name="phone" placeholder="${args.mask}" autocomplete="off" mask="${args.mask}" value="1234567890">Phone:</usa-input></usa-input-mask>`;
|
|
8
8
|
},
|
|
9
9
|
argTypes: {},
|
|
10
10
|
args: {
|
|
11
|
-
mask:
|
|
11
|
+
mask: '(999) 999-9999',
|
|
12
12
|
},
|
|
13
13
|
};
|
|
14
14
|
export default meta;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-mask.stories.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"input-mask.stories.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;8CAE+B,IAAI,CAAC,IAAI,4BAA4B,IAAI,CAAC,IAAI;;;;KAIvF,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;KACvB;CACkC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import './input-mask.element.js';
|
|
2
|
+
import '../input/input.element.js';
|
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { assert, fixture, html } from
|
|
4
|
-
import { format } from
|
|
5
|
-
describe(
|
|
6
|
-
it(
|
|
7
|
-
assert.deepEqual(format(
|
|
8
|
-
raw:
|
|
9
|
-
formatted:
|
|
1
|
+
import './input-mask.element.js';
|
|
2
|
+
import '../input/input.element.js';
|
|
3
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
4
|
+
import { format } from './format.js';
|
|
5
|
+
describe('format', () => {
|
|
6
|
+
it('should retrn the correct raw value', () => {
|
|
7
|
+
assert.deepEqual(format('(123) 456 7890', '(***) ***-****'), {
|
|
8
|
+
raw: '1234567890',
|
|
9
|
+
formatted: '(123) 456-7890',
|
|
10
10
|
});
|
|
11
11
|
});
|
|
12
|
-
it(
|
|
13
|
-
assert.deepEqual(format(
|
|
14
|
-
raw:
|
|
15
|
-
formatted:
|
|
12
|
+
it('should return a formatted phone number (***) ***-****', () => {
|
|
13
|
+
assert.deepEqual(format('1234567890', '(***) ***-****'), {
|
|
14
|
+
raw: '1234567890',
|
|
15
|
+
formatted: '(123) 456-7890',
|
|
16
16
|
});
|
|
17
17
|
});
|
|
18
|
-
it(
|
|
19
|
-
assert.deepEqual(format(
|
|
20
|
-
raw:
|
|
21
|
-
formatted:
|
|
18
|
+
it('should return a formatted phone number ***-***-****', () => {
|
|
19
|
+
assert.deepEqual(format('1234567890', '***-***-****'), {
|
|
20
|
+
raw: '1234567890',
|
|
21
|
+
formatted: '123-456-7890',
|
|
22
22
|
});
|
|
23
23
|
});
|
|
24
|
-
it(
|
|
25
|
-
assert.deepEqual(format(
|
|
26
|
-
raw:
|
|
27
|
-
formatted:
|
|
24
|
+
it('should only allow numbers', () => {
|
|
25
|
+
assert.deepEqual(format('304213abcd', '999-999-9999'), {
|
|
26
|
+
raw: '304213abcd',
|
|
27
|
+
formatted: '304-213-',
|
|
28
28
|
});
|
|
29
29
|
});
|
|
30
|
-
it(
|
|
31
|
-
assert.deepEqual(format(
|
|
32
|
-
raw:
|
|
33
|
-
formatted:
|
|
30
|
+
it('should only allow a mix of letters and numbers', () => {
|
|
31
|
+
assert.deepEqual(format('C94749', 'A-99999'), {
|
|
32
|
+
raw: 'C94749',
|
|
33
|
+
formatted: 'C-94749',
|
|
34
34
|
});
|
|
35
35
|
});
|
|
36
36
|
});
|
|
37
|
-
describe(
|
|
38
|
-
it(
|
|
37
|
+
describe('usa-input-mask', () => {
|
|
38
|
+
it('should format default value', async () => {
|
|
39
39
|
const el = await fixture(html `<usa-input-mask mask="(999) 999-9999"><input name="phone" value="1234567890" mask></usa-input-mask>`);
|
|
40
|
-
const input = el.querySelector(
|
|
41
|
-
assert.equal(input?.value,
|
|
40
|
+
const input = el.querySelector('input');
|
|
41
|
+
assert.equal(input?.value, '(123) 456-7890');
|
|
42
42
|
});
|
|
43
|
-
it(
|
|
43
|
+
it('should update value when on input event', async () => {
|
|
44
44
|
const el = await fixture(html `<usa-input-mask><input name="phone" mask="(999) 999-9999"></usa-input-mask>`);
|
|
45
|
-
const input = el.querySelector(
|
|
45
|
+
const input = el.querySelector('input');
|
|
46
46
|
if (input) {
|
|
47
|
-
input.value =
|
|
48
|
-
input.dispatchEvent(new Event(
|
|
47
|
+
input.value = '8888888888';
|
|
48
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
49
49
|
}
|
|
50
|
-
assert.equal(input?.value,
|
|
50
|
+
assert.equal(input?.value, '(888) 888-8888');
|
|
51
51
|
});
|
|
52
52
|
});
|
|
53
|
-
describe(
|
|
54
|
-
it(
|
|
53
|
+
describe('usa-input-mask with usa-input', () => {
|
|
54
|
+
it('should format default value', async () => {
|
|
55
55
|
const el = await fixture(html `<usa-input-mask mask="(999) 999-9999"><usa-input name="phone" value="1234567890" id="TEST" mask></usa-input></usa-input-mask>`);
|
|
56
|
-
const input = el.querySelector(
|
|
57
|
-
assert.equal(input?.value,
|
|
56
|
+
const input = el.querySelector('usa-input');
|
|
57
|
+
assert.equal(input?.value, '(123) 456-7890');
|
|
58
58
|
});
|
|
59
|
-
it(
|
|
59
|
+
it('should update value when on input event', async () => {
|
|
60
60
|
const el = await fixture(html `<usa-input-mask><usa-input name="phone" value="1234567890" mask="(999) 999-9999"></usa-input></usa-input-mask>`);
|
|
61
|
-
const input = el.querySelector(
|
|
61
|
+
const input = el.querySelector('usa-input');
|
|
62
62
|
if (input) {
|
|
63
|
-
input.value =
|
|
64
|
-
input.dispatchEvent(new Event(
|
|
63
|
+
input.value = '8888888888';
|
|
64
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
65
65
|
}
|
|
66
|
-
assert.equal(input?.value,
|
|
66
|
+
assert.equal(input?.value, '(888) 888-8888');
|
|
67
67
|
});
|
|
68
68
|
});
|
|
69
69
|
//# sourceMappingURL=input-mask.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-mask.test.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE;YAC3D,GAAG,EAAE,YAAY;YACjB,SAAS,EAAE,gBAAgB;SAC5B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE;YACvD,GAAG,EAAE,YAAY;YACjB,SAAS,EAAE,gBAAgB;SAC5B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC7D,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,EAAE;YACrD,GAAG,EAAE,YAAY;YACjB,SAAS,EAAE,cAAc;SAC1B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,EAAE;YACrD,GAAG,EAAE,YAAY;YACjB,SAAS,EAAE,UAAU;SACtB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACxD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE;YAC5C,GAAG,EAAE,QAAQ;YACb,SAAS,EAAE,SAAS;SACrB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;;;KAIjD,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAExC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;;;KAIjD,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAExC,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,GAAG,YAAY,CAAC;YAC3B,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC;
|
|
1
|
+
{"version":3,"file":"input-mask.test.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.test.ts"],"names":[],"mappings":"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"}
|