@noctuatech/uswds 1.3.3 → 1.3.5
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/accordion/{accordion.test.ts → accordion.element.test.ts} +28 -31
- package/src/lib/accordion/accordion.element.ts +9 -7
- package/src/lib/alert/{alert.test.ts → alert.element.test.ts} +5 -6
- package/src/lib/alert/alert.element.ts +6 -4
- package/src/lib/breadcrumbs/breadcrumb/breadcrumb.element.ts +10 -10
- package/src/lib/breadcrumbs/breadcrumbs.element.test.ts +23 -0
- package/src/lib/button/button.element.test.ts +15 -0
- package/src/lib/button/button.element.ts +37 -42
- package/src/lib/button-group/button-group.element.test.ts +13 -0
- package/src/lib/card/{card.test.ts → card.element.test.ts} +12 -12
- package/src/lib/checkbox/{checkbox.test.ts → checkbox.element.test.ts} +15 -17
- package/src/lib/checkbox/checkbox.element.ts +32 -32
- package/src/lib/checkbox/checkbox.stories.ts +17 -33
- package/src/lib/collection/collection-item/collection-item.element.test.ts +15 -0
- package/src/lib/collection/collection.element.test.ts +13 -0
- package/src/lib/combo-box/{combo-box.test.ts → combo-box.element.test.ts} +64 -93
- package/src/lib/config/config.element.test.ts +13 -0
- package/src/lib/description/description.element.test.ts +13 -0
- package/src/lib/file-input/file-input-preview/file-input-preview.element.test.ts +93 -0
- package/src/lib/file-input/file-input-preview/file-input-preview.element.ts +15 -13
- package/src/lib/file-input/file-input.element.test.ts +73 -0
- package/src/lib/file-input/file-input.element.ts +10 -20
- package/src/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.ts +20 -20
- package/src/lib/in-page-nav/{in-page-nav.test.ts → in-page-nav.element.test.ts} +18 -21
- package/src/lib/input/input.element.ts +56 -37
- package/src/lib/input-mask/input-mask.element.ts +1 -1
- package/src/lib/input-mask/input-mask.stories.ts +2 -0
- package/src/lib/link/link.element.ts +18 -25
- package/src/lib/modal/modal-close/modal-close.element.test.ts +13 -0
- package/src/lib/modal/modal-heading/modal-heading.element.test.ts +15 -0
- package/src/lib/modal/modal.element.test.ts +23 -0
- package/src/lib/pagination/pagination-item/pagination-item.element.ts +9 -6
- package/src/lib/pagination/pagination-no/pagination-no.element.ts +17 -17
- package/src/lib/pagination/pagination.element.test.ts +13 -0
- package/src/lib/process-list/{process-list.test.ts → process-list.element.test.ts} +19 -12
- package/src/lib/radio/radio-option/radio-option.element.test.ts +20 -0
- package/src/lib/radio/radio.element.test.ts +121 -0
- package/src/lib/range-slider/range-slider.element.test.ts +57 -0
- package/src/lib/range-slider/range-slider.element.ts +48 -33
- package/src/lib/search/search.element.test.ts +71 -0
- package/src/lib/select/{select.test.ts → select.element.test.ts} +23 -26
- package/src/lib/select/select.element.ts +35 -32
- package/src/lib/side-nav/{side-nav.test.ts → side-nav.element.test.ts} +13 -23
- package/src/lib/step-indicator/step/step.element.ts +16 -16
- package/src/lib/step-indicator/{step-indicator.test.ts → step-indicator.element.test.ts} +6 -6
- package/src/lib/summary-box/summary-box.element.test.ts +13 -0
- package/src/lib/tag/tag.element.test.ts +13 -0
- package/src/lib/textarea/{textarea.test.ts → textarea.element.test.ts} +13 -13
- package/src/lib/textarea/textarea.element.ts +22 -19
- package/target/lib/accordion/accordion.element.js +4 -2
- package/target/lib/accordion/accordion.element.js.map +1 -1
- package/target/lib/accordion/accordion.element.test.d.ts +1 -0
- package/target/lib/accordion/{accordion.test.js → accordion.element.test.js} +19 -19
- package/target/lib/accordion/accordion.element.test.js.map +1 -0
- package/target/lib/alert/alert.element.js +4 -2
- package/target/lib/alert/alert.element.js.map +1 -1
- package/target/lib/alert/alert.element.test.d.ts +1 -0
- package/target/lib/alert/{alert.test.js → alert.element.test.js} +5 -5
- package/target/lib/alert/alert.element.test.js.map +1 -0
- package/target/lib/breadcrumbs/breadcrumb/breadcrumb.element.d.ts +1 -1
- package/target/lib/breadcrumbs/breadcrumb/breadcrumb.element.js +6 -6
- package/target/lib/breadcrumbs/breadcrumbs.element.test.d.ts +2 -0
- package/target/lib/breadcrumbs/{breadcrumbs.test.js → breadcrumbs.element.test.js} +6 -6
- package/target/lib/breadcrumbs/breadcrumbs.element.test.js.map +1 -0
- package/target/lib/button/button.element.d.ts +3 -3
- package/target/lib/button/button.element.js +17 -23
- package/target/lib/button/button.element.js.map +1 -1
- package/target/lib/button/button.element.test.d.ts +1 -0
- package/target/lib/button/button.element.test.js +12 -0
- package/target/lib/button/button.element.test.js.map +1 -0
- package/target/lib/button-group/button-group.element.test.d.ts +1 -0
- package/target/lib/button-group/button-group.element.test.js +9 -0
- package/target/lib/button-group/button-group.element.test.js.map +1 -0
- package/target/lib/card/card.element.test.d.ts +6 -0
- package/target/lib/card/{card.test.js → card.element.test.js} +10 -10
- package/target/lib/card/card.element.test.js.map +1 -0
- package/target/lib/checkbox/checkbox.element.d.ts +4 -3
- package/target/lib/checkbox/checkbox.element.js +24 -23
- package/target/lib/checkbox/checkbox.element.js.map +1 -1
- package/target/lib/checkbox/checkbox.element.test.d.ts +1 -0
- package/target/lib/checkbox/{checkbox.test.js → checkbox.element.test.js} +13 -12
- package/target/lib/checkbox/checkbox.element.test.js.map +1 -0
- package/target/lib/checkbox/checkbox.stories.d.ts +2 -2
- package/target/lib/checkbox/checkbox.stories.js +6 -6
- package/target/lib/checkbox/checkbox.stories.js.map +1 -1
- package/target/lib/collection/collection-item/collection-item.element.test.d.ts +1 -0
- package/target/lib/collection/collection-item/collection-item.element.test.js +9 -0
- package/target/lib/collection/collection-item/collection-item.element.test.js.map +1 -0
- package/target/lib/collection/collection.element.test.d.ts +1 -0
- package/target/lib/collection/collection.element.test.js +9 -0
- package/target/lib/collection/collection.element.test.js.map +1 -0
- package/target/lib/combo-box/combo-box.element.test.d.ts +3 -0
- package/target/lib/combo-box/{combo-box.test.js → combo-box.element.test.js} +60 -60
- package/target/lib/combo-box/combo-box.element.test.js.map +1 -0
- package/target/lib/config/config.element.test.d.ts +1 -0
- package/target/lib/config/config.element.test.js +9 -0
- package/target/lib/config/config.element.test.js.map +1 -0
- package/target/lib/description/description.element.test.d.ts +1 -0
- package/target/lib/description/description.element.test.js +9 -0
- package/target/lib/description/description.element.test.js.map +1 -0
- package/target/lib/file-input/file-input-preview/file-input-preview.element.js +12 -10
- package/target/lib/file-input/file-input-preview/file-input-preview.element.js.map +1 -1
- package/target/lib/file-input/file-input-preview/file-input-preview.element.test.d.ts +2 -0
- package/target/lib/file-input/file-input-preview/{file-input-preview.test.js → file-input-preview.element.test.js} +24 -24
- package/target/lib/file-input/file-input-preview/file-input-preview.element.test.js.map +1 -0
- package/target/lib/file-input/file-input.element.js +5 -6
- package/target/lib/file-input/file-input.element.js.map +1 -1
- package/target/lib/file-input/file-input.element.test.d.ts +1 -0
- package/target/lib/file-input/{file-input.test.js → file-input.element.test.js} +16 -16
- package/target/lib/file-input/file-input.element.test.js.map +1 -0
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.d.ts +2 -3
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.js +15 -13
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.js.map +1 -1
- package/target/lib/in-page-nav/in-page-nav.element.test.d.ts +2 -0
- package/target/lib/in-page-nav/{in-page-nav.test.js → in-page-nav.element.test.js} +6 -6
- package/target/lib/in-page-nav/in-page-nav.element.test.js.map +1 -0
- package/target/lib/input/input.element.d.ts +4 -5
- package/target/lib/input/input.element.js +55 -127
- package/target/lib/input/input.element.js.map +1 -1
- package/target/lib/input/{input.test.js → input.element.test.js} +6 -26
- package/target/lib/input/input.element.test.js.map +1 -0
- package/target/lib/input-mask/input-mask.element.d.ts +1 -1
- package/target/lib/input-mask/input-mask.element.js +1 -1
- package/target/lib/input-mask/input-mask.element.js.map +1 -1
- package/target/lib/input-mask/{input-mask.test.js → input-mask.element.test.js} +1 -1
- package/target/lib/input-mask/input-mask.element.test.js.map +1 -0
- package/target/lib/input-mask/input-mask.stories.js +1 -1
- package/target/lib/input-mask/input-mask.stories.js.map +1 -1
- package/target/lib/link/link.element.d.ts +3 -5
- package/target/lib/link/link.element.js +14 -26
- package/target/lib/link/link.element.js.map +1 -1
- package/target/lib/modal/modal-close/modal-close.element.test.d.ts +1 -0
- package/target/lib/modal/modal-close/modal-close.element.test.js +9 -0
- package/target/lib/modal/modal-close/modal-close.element.test.js.map +1 -0
- package/target/lib/modal/modal-heading/modal-heading.element.test.d.ts +1 -0
- package/target/lib/modal/modal-heading/modal-heading.element.test.js +9 -0
- package/target/lib/modal/modal-heading/modal-heading.element.test.js.map +1 -0
- package/target/lib/modal/modal.element.test.d.ts +3 -0
- package/target/lib/modal/modal.element.test.js +11 -0
- package/target/lib/modal/modal.element.test.js.map +1 -0
- package/target/lib/pagination/pagination-item/pagination-item.element.d.ts +1 -1
- package/target/lib/pagination/pagination-item/pagination-item.element.js +3 -3
- package/target/lib/pagination/pagination-item/pagination-item.element.js.map +1 -1
- package/target/lib/pagination/pagination-no/pagination-no.element.d.ts +2 -3
- package/target/lib/pagination/pagination-no/pagination-no.element.js +10 -8
- package/target/lib/pagination/pagination-no/pagination-no.element.js.map +1 -1
- package/target/lib/pagination/pagination.element.test.d.ts +1 -0
- package/target/lib/pagination/pagination.element.test.js +9 -0
- package/target/lib/pagination/pagination.element.test.js.map +1 -0
- package/target/lib/process-list/process-list.element.test.d.ts +2 -0
- package/target/lib/process-list/{process-list.test.js → process-list.element.test.js} +6 -6
- package/target/lib/process-list/process-list.element.test.js.map +1 -0
- package/target/lib/radio/radio-option/radio-option.element.test.d.ts +2 -0
- package/target/lib/radio/radio-option/radio-option.element.test.js +11 -0
- package/target/lib/radio/radio-option/radio-option.element.test.js.map +1 -0
- package/target/lib/radio/radio.element.test.d.ts +2 -0
- package/target/lib/radio/{radio.test.js → radio.element.test.js} +19 -28
- package/target/lib/radio/radio.element.test.js.map +1 -0
- package/target/lib/range-slider/range-slider.element.d.ts +4 -2
- package/target/lib/range-slider/range-slider.element.js +34 -29
- package/target/lib/range-slider/range-slider.element.js.map +1 -1
- package/target/lib/range-slider/range-slider.element.test.d.ts +1 -0
- package/target/lib/range-slider/range-slider.element.test.js +26 -0
- package/target/lib/range-slider/range-slider.element.test.js.map +1 -0
- package/target/lib/search/search.element.test.d.ts +3 -0
- package/target/lib/search/search.element.test.js +52 -0
- package/target/lib/search/search.element.test.js.map +1 -0
- package/target/lib/select/select.element.d.ts +5 -4
- package/target/lib/select/select.element.js +28 -27
- package/target/lib/select/select.element.js.map +1 -1
- package/target/lib/select/select.element.test.d.ts +2 -0
- package/target/lib/select/{select.test.js → select.element.test.js} +23 -27
- package/target/lib/select/select.element.test.js.map +1 -0
- package/target/lib/services/{icon.service.test.js → icon.service.element.test.js} +1 -1
- package/target/lib/services/icon.service.element.test.js.map +1 -0
- package/target/lib/side-nav/side-nav.element.test.d.ts +3 -0
- package/target/lib/side-nav/{side-nav.test.js → side-nav.element.test.js} +11 -11
- package/target/lib/side-nav/side-nav.element.test.js.map +1 -0
- package/target/lib/step-indicator/step/step.element.d.ts +2 -2
- package/target/lib/step-indicator/step/step.element.js +8 -8
- package/target/lib/step-indicator/step-indicator.element.test.d.ts +2 -0
- package/target/lib/step-indicator/{step-indicator.test.js → step-indicator.element.test.js} +6 -6
- package/target/lib/step-indicator/step-indicator.element.test.js.map +1 -0
- package/target/lib/summary-box/summary-box.element.test.d.ts +1 -0
- package/target/lib/summary-box/summary-box.element.test.js +9 -0
- package/target/lib/summary-box/summary-box.element.test.js.map +1 -0
- package/target/lib/tag/tag.element.test.d.ts +1 -0
- package/target/lib/tag/tag.element.test.js +9 -0
- package/target/lib/tag/tag.element.test.js.map +1 -0
- package/target/lib/textarea/textarea.element.d.ts +2 -2
- package/target/lib/textarea/textarea.element.js +19 -24
- package/target/lib/textarea/textarea.element.js.map +1 -1
- package/target/lib/textarea/textarea.element.test.d.ts +1 -0
- package/target/lib/textarea/{textarea.test.js → textarea.element.test.js} +14 -14
- package/target/lib/textarea/textarea.element.test.js.map +1 -0
- package/src/lib/breadcrumbs/breadcrumbs.test.ts +0 -21
- package/src/lib/button/button.test.ts +0 -17
- package/src/lib/button-group/button-group.test.ts +0 -15
- package/src/lib/collection/collection-item/collection-item.test.ts +0 -15
- package/src/lib/collection/collection.test.ts +0 -15
- package/src/lib/config/config.test.ts +0 -15
- package/src/lib/description/description.test.ts +0 -15
- package/src/lib/file-input/file-input-preview/file-input-preview.test.ts +0 -95
- package/src/lib/file-input/file-input.test.ts +0 -79
- package/src/lib/modal/modal-close/modal-close.test.ts +0 -15
- package/src/lib/modal/modal-heading/modal-heading.test.ts +0 -15
- package/src/lib/modal/modal.test.ts +0 -25
- package/src/lib/pagination/pagination.test.ts +0 -15
- package/src/lib/radio/radio-option/radio-option.test.ts +0 -20
- package/src/lib/radio/radio.test.ts +0 -174
- package/src/lib/range-slider/range-slider.test.ts +0 -52
- package/src/lib/search/search.test.ts +0 -81
- package/src/lib/summary-box/summary-box.test.ts +0 -15
- package/src/lib/tag/tag.test.ts +0 -15
- package/target/lib/accordion/accordion.test.d.ts +0 -1
- package/target/lib/accordion/accordion.test.js.map +0 -1
- package/target/lib/alert/alert.test.d.ts +0 -1
- package/target/lib/alert/alert.test.js.map +0 -1
- package/target/lib/breadcrumbs/breadcrumbs.test.d.ts +0 -2
- package/target/lib/breadcrumbs/breadcrumbs.test.js.map +0 -1
- package/target/lib/button/button.test.d.ts +0 -1
- package/target/lib/button/button.test.js +0 -12
- package/target/lib/button/button.test.js.map +0 -1
- package/target/lib/button-group/button-group.test.d.ts +0 -1
- package/target/lib/button-group/button-group.test.js +0 -9
- package/target/lib/button-group/button-group.test.js.map +0 -1
- package/target/lib/card/card.test.d.ts +0 -6
- package/target/lib/card/card.test.js.map +0 -1
- package/target/lib/checkbox/checkbox.test.d.ts +0 -1
- package/target/lib/checkbox/checkbox.test.js.map +0 -1
- package/target/lib/collection/collection-item/collection-item.test.d.ts +0 -1
- package/target/lib/collection/collection-item/collection-item.test.js +0 -9
- package/target/lib/collection/collection-item/collection-item.test.js.map +0 -1
- package/target/lib/collection/collection.test.d.ts +0 -1
- package/target/lib/collection/collection.test.js +0 -9
- package/target/lib/collection/collection.test.js.map +0 -1
- package/target/lib/combo-box/combo-box.test.d.ts +0 -3
- package/target/lib/combo-box/combo-box.test.js.map +0 -1
- package/target/lib/config/config.test.d.ts +0 -1
- package/target/lib/config/config.test.js +0 -9
- package/target/lib/config/config.test.js.map +0 -1
- package/target/lib/description/description.test.d.ts +0 -1
- package/target/lib/description/description.test.js +0 -9
- package/target/lib/description/description.test.js.map +0 -1
- package/target/lib/file-input/file-input-preview/file-input-preview.test.d.ts +0 -2
- package/target/lib/file-input/file-input-preview/file-input-preview.test.js.map +0 -1
- package/target/lib/file-input/file-input.test.d.ts +0 -1
- package/target/lib/file-input/file-input.test.js.map +0 -1
- package/target/lib/in-page-nav/in-page-nav.test.d.ts +0 -2
- package/target/lib/in-page-nav/in-page-nav.test.js.map +0 -1
- package/target/lib/input/input.test.js.map +0 -1
- package/target/lib/input-mask/input-mask.test.js.map +0 -1
- package/target/lib/modal/modal-close/modal-close.test.d.ts +0 -1
- package/target/lib/modal/modal-close/modal-close.test.js +0 -9
- package/target/lib/modal/modal-close/modal-close.test.js.map +0 -1
- package/target/lib/modal/modal-heading/modal-heading.test.d.ts +0 -1
- package/target/lib/modal/modal-heading/modal-heading.test.js +0 -9
- package/target/lib/modal/modal-heading/modal-heading.test.js.map +0 -1
- package/target/lib/modal/modal.test.d.ts +0 -3
- package/target/lib/modal/modal.test.js +0 -11
- package/target/lib/modal/modal.test.js.map +0 -1
- package/target/lib/pagination/pagination.test.d.ts +0 -1
- package/target/lib/pagination/pagination.test.js +0 -9
- package/target/lib/pagination/pagination.test.js.map +0 -1
- package/target/lib/process-list/process-list.test.d.ts +0 -2
- package/target/lib/process-list/process-list.test.js.map +0 -1
- package/target/lib/radio/radio-option/radio-option.test.d.ts +0 -2
- package/target/lib/radio/radio-option/radio-option.test.js +0 -11
- package/target/lib/radio/radio-option/radio-option.test.js.map +0 -1
- package/target/lib/radio/radio.test.d.ts +0 -2
- package/target/lib/radio/radio.test.js.map +0 -1
- package/target/lib/range-slider/range-slider.test.d.ts +0 -1
- package/target/lib/range-slider/range-slider.test.js +0 -25
- package/target/lib/range-slider/range-slider.test.js.map +0 -1
- package/target/lib/search/search.test.d.ts +0 -3
- package/target/lib/search/search.test.js +0 -52
- package/target/lib/search/search.test.js.map +0 -1
- package/target/lib/select/select.test.d.ts +0 -2
- package/target/lib/select/select.test.js.map +0 -1
- package/target/lib/services/icon.service.test.js.map +0 -1
- package/target/lib/side-nav/side-nav.test.d.ts +0 -3
- package/target/lib/side-nav/side-nav.test.js.map +0 -1
- package/target/lib/step-indicator/step-indicator.test.d.ts +0 -2
- package/target/lib/step-indicator/step-indicator.test.js.map +0 -1
- package/target/lib/summary-box/summary-box.test.d.ts +0 -1
- package/target/lib/summary-box/summary-box.test.js +0 -9
- package/target/lib/summary-box/summary-box.test.js.map +0 -1
- package/target/lib/tag/tag.test.d.ts +0 -1
- package/target/lib/tag/tag.test.js +0 -9
- package/target/lib/tag/tag.test.js.map +0 -1
- package/target/lib/textarea/textarea.test.d.ts +0 -1
- package/target/lib/textarea/textarea.test.js.map +0 -1
- /package/src/lib/input/{input.test.ts → input.element.test.ts} +0 -0
- /package/src/lib/input-mask/{input-mask.test.ts → input-mask.element.test.ts} +0 -0
- /package/src/lib/services/{icon.service.test.ts → icon.service.element.test.ts} +0 -0
- /package/target/lib/input/{input.test.d.ts → input.element.test.d.ts} +0 -0
- /package/target/lib/input-mask/{input-mask.test.d.ts → input-mask.element.test.d.ts} +0 -0
- /package/target/lib/services/{icon.service.test.d.ts → icon.service.element.test.d.ts} +0 -0
|
@@ -1,28 +1,29 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { assert, fixture, html } from
|
|
3
|
-
describe(
|
|
4
|
-
it(
|
|
1
|
+
import './checkbox.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
describe('usa-checkbox', () => {
|
|
4
|
+
it('should be accessible', async () => {
|
|
5
5
|
const form = await fixture(html `<usa-checkbox name="fname" value="Foo">Hello World</usa-checkbox>`);
|
|
6
6
|
return assert.isAccessible(form);
|
|
7
7
|
});
|
|
8
|
-
it(
|
|
8
|
+
it('should submit form with default values', async () => {
|
|
9
9
|
const form = await fixture(html `<form><usa-checkbox name="enabled" value="test" checked="checked">Hello World</usa-checkbox><button>Submit</button></form>`);
|
|
10
10
|
const value = new FormData(form);
|
|
11
|
-
assert.equal(value.get(
|
|
11
|
+
assert.equal(value.get('enabled'), 'test');
|
|
12
12
|
});
|
|
13
|
-
it(
|
|
13
|
+
it('should update form value as input value changed', async () => {
|
|
14
14
|
const form = await fixture(html `<form><usa-checkbox name="enabled" value="test">Hello World</usa-checkbox><button>Submit</button></form>`);
|
|
15
|
-
const checkbox = form.querySelector(
|
|
16
|
-
const nativeInput = checkbox?.shadowRoot?.querySelector(
|
|
15
|
+
const checkbox = form.querySelector('usa-checkbox');
|
|
16
|
+
const nativeInput = checkbox?.shadowRoot?.querySelector('input');
|
|
17
17
|
if (nativeInput) {
|
|
18
18
|
nativeInput.click();
|
|
19
19
|
}
|
|
20
|
+
await Promise.resolve();
|
|
20
21
|
const value = new FormData(form);
|
|
21
|
-
assert.equal(value.get(
|
|
22
|
+
assert.equal(value.get('enabled'), 'test');
|
|
22
23
|
});
|
|
23
|
-
it(
|
|
24
|
+
it('should not submit when not valid', async () => {
|
|
24
25
|
const form = await fixture(html `<form><usa-checkbox name="enabled" value="test" required>Hello World</usa-checkbox><button>Submit</button></form>`);
|
|
25
26
|
assert.equal(form.checkValidity(), false);
|
|
26
27
|
});
|
|
27
28
|
});
|
|
28
|
-
//# sourceMappingURL=checkbox.test.js.map
|
|
29
|
+
//# sourceMappingURL=checkbox.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.element.test.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;KAE/C,CAAC,CAAC;QAEH,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,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7C,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,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACpD,MAAM,WAAW,GAAG,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjE,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC;QAED,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAExB,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7C,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,5 +1,5 @@
|
|
|
1
|
-
import type { StoryObj } from
|
|
2
|
-
import type { USACheckboxElement } from
|
|
1
|
+
import type { StoryObj } from '@storybook/web-components';
|
|
2
|
+
import type { USACheckboxElement } from './checkbox.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-checkbox',
|
|
5
|
+
tags: ['autodocs'],
|
|
6
6
|
argTypes: {},
|
|
7
7
|
args: {},
|
|
8
8
|
};
|
|
@@ -10,12 +10,12 @@ export default meta;
|
|
|
10
10
|
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
11
11
|
export const Primary = {
|
|
12
12
|
render(args) {
|
|
13
|
-
return html `<usa-checkbox name="${args.name}" value="${args.value}"
|
|
13
|
+
return html `<usa-checkbox name="${args.name}" value="${args.value}" required>I agree to the above terms and conditions</usa-checkbox>`;
|
|
14
14
|
},
|
|
15
15
|
args: {
|
|
16
16
|
checked: false,
|
|
17
|
-
name:
|
|
18
|
-
value:
|
|
17
|
+
name: 'toc',
|
|
18
|
+
value: 'agree',
|
|
19
19
|
disabled: false,
|
|
20
20
|
required: false,
|
|
21
21
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACoD,CAAC;AAE/D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,KAAK
|
|
1
|
+
{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACoD,CAAC;AAE/D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,KAAK;;;KAGtD,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;KASV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBV,CAAC;IACJ,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './collection-item.element.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './collection-item.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
describe('usa-collection-item', () => {
|
|
4
|
+
it('should be accessible', async () => {
|
|
5
|
+
const collectionItem = await fixture(html `<usa-collection-item>Hello World</usa-collection-item>`);
|
|
6
|
+
return assert.isAccessible(collectionItem);
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
//# sourceMappingURL=collection-item.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collection-item.element.test.js","sourceRoot":"","sources":["../../../../src/lib/collection/collection-item/collection-item.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,cAAc,GAAG,MAAM,OAAO,CAA2B,IAAI,CAAA;;KAElE,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './collection.element.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './collection.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
describe('usa-collection', () => {
|
|
4
|
+
it('should be accessible', async () => {
|
|
5
|
+
const collection = await fixture(html `<usa-collection>Hello World</usa-collection>`);
|
|
6
|
+
return assert.isAccessible(collection);
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
//# sourceMappingURL=collection.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collection.element.test.js","sourceRoot":"","sources":["../../../src/lib/collection/collection.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,UAAU,GAAG,MAAM,OAAO,CAAuB,IAAI,CAAA,gDAAgD,CAAC,CAAC;QAE7G,OAAO,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,108 +1,108 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { assert, fixture, html } from
|
|
5
|
-
describe(
|
|
1
|
+
import './combo-box.element.js';
|
|
2
|
+
import './combo-box-option/combo-box-option.element.js';
|
|
3
|
+
import '../input/input.element.js';
|
|
4
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
5
|
+
describe('usa-combo-box', () => {
|
|
6
6
|
let autocomplete;
|
|
7
7
|
let input;
|
|
8
8
|
beforeEach(async () => {
|
|
9
9
|
autocomplete = await fixture(html `<usa-combo-box name="search" placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box>`);
|
|
10
10
|
input = autocomplete.input();
|
|
11
11
|
});
|
|
12
|
-
it(
|
|
13
|
-
input.value =
|
|
14
|
-
input.dispatchEvent(new Event(
|
|
12
|
+
it('should filter items based on input', async () => {
|
|
13
|
+
input.value = 'b';
|
|
14
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
15
15
|
const suggestions = autocomplete.listItems();
|
|
16
16
|
assert.equal(suggestions.length, 2);
|
|
17
|
-
assert.equal(suggestions[0].dataset.value,
|
|
18
|
-
assert.equal(suggestions[1].dataset.value,
|
|
17
|
+
assert.equal(suggestions[0].dataset.value, 'Banana');
|
|
18
|
+
assert.equal(suggestions[1].dataset.value, 'Blueberry');
|
|
19
19
|
});
|
|
20
|
-
it(
|
|
21
|
-
input.value =
|
|
22
|
-
input.dispatchEvent(new Event(
|
|
20
|
+
it('should show all suggestions when input is empty', async () => {
|
|
21
|
+
input.value = '';
|
|
22
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
23
23
|
const suggestions = autocomplete.listItems();
|
|
24
24
|
assert.equal(suggestions.length, 4);
|
|
25
25
|
});
|
|
26
|
-
it(
|
|
27
|
-
input.value =
|
|
28
|
-
input.dispatchEvent(new Event(
|
|
26
|
+
it('should handle case-insensitive search', async () => {
|
|
27
|
+
input.value = 'B';
|
|
28
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
29
29
|
const suggestions = autocomplete.listItems();
|
|
30
30
|
assert.equal(suggestions.length, 2);
|
|
31
|
-
assert.equal(suggestions[0].dataset.value,
|
|
32
|
-
assert.equal(suggestions[1].dataset.value,
|
|
31
|
+
assert.equal(suggestions[0].dataset.value, 'Banana');
|
|
32
|
+
assert.equal(suggestions[1].dataset.value, 'Blueberry');
|
|
33
33
|
});
|
|
34
|
-
it(
|
|
34
|
+
it('should navigate suggestions with arrow keys', async () => {
|
|
35
35
|
// select item from list
|
|
36
|
-
input.value =
|
|
37
|
-
input.dispatchEvent(new Event(
|
|
36
|
+
input.value = 'b';
|
|
37
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
38
38
|
// Arrow down
|
|
39
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
40
|
-
assert.equal(autocomplete.currentItemEl?.getAttribute(
|
|
39
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
40
|
+
assert.equal(autocomplete.currentItemEl?.getAttribute('data-value'), 'Banana');
|
|
41
41
|
// Arrow down again
|
|
42
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
43
|
-
assert.equal(autocomplete.currentItemEl?.getAttribute(
|
|
42
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
43
|
+
assert.equal(autocomplete.currentItemEl?.getAttribute('data-value'), 'Blueberry');
|
|
44
44
|
});
|
|
45
|
-
it(
|
|
46
|
-
input.value =
|
|
47
|
-
input.dispatchEvent(new Event(
|
|
45
|
+
it('should select suggestion with enter key', async () => {
|
|
46
|
+
input.value = 'b';
|
|
47
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
48
48
|
// Navigate to first suggestion
|
|
49
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
49
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
50
50
|
// Select suggestion
|
|
51
51
|
const firstSuggestion = autocomplete.listItems()[0];
|
|
52
|
-
firstSuggestion?.dispatchEvent(new KeyboardEvent(
|
|
53
|
-
assert.equal(input.value,
|
|
54
|
-
assert.equal(autocomplete.list().innerHTML,
|
|
52
|
+
firstSuggestion?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
|
|
53
|
+
assert.equal(input.value, 'Banana');
|
|
54
|
+
assert.equal(autocomplete.list().innerHTML, '');
|
|
55
55
|
});
|
|
56
|
-
it(
|
|
57
|
-
input.value =
|
|
58
|
-
input.dispatchEvent(new Event(
|
|
59
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
56
|
+
it('should focus back on the input if no other items', async () => {
|
|
57
|
+
input.value = 'b';
|
|
58
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
59
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
60
60
|
// Try to go up from first suggestion
|
|
61
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
61
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
|
|
62
62
|
assert.equal(autocomplete.currentItemEl, null);
|
|
63
63
|
});
|
|
64
|
-
it(
|
|
65
|
-
input.value =
|
|
66
|
-
input.dispatchEvent(new Event(
|
|
64
|
+
it('should not go below last suggestion with arrow down', async () => {
|
|
65
|
+
input.value = 'b';
|
|
66
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
67
67
|
// Navigate to last suggestion
|
|
68
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
69
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
70
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
71
|
-
input.dispatchEvent(new KeyboardEvent(
|
|
72
|
-
assert.equal(autocomplete.currentItemEl?.getAttribute(
|
|
68
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
69
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
70
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
71
|
+
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
72
|
+
assert.equal(autocomplete.currentItemEl?.getAttribute('data-value'), 'Blueberry');
|
|
73
73
|
});
|
|
74
|
-
it(
|
|
74
|
+
it('should submit form with default values', async () => {
|
|
75
75
|
const form = await fixture(html `<form><usa-combo-box name="search" value="Apple" placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box><button>Submit</button></form>`);
|
|
76
76
|
const value = new FormData(form);
|
|
77
|
-
assert.equal(value.get(
|
|
77
|
+
assert.equal(value.get('search'), 'Apple');
|
|
78
78
|
});
|
|
79
|
-
it(
|
|
79
|
+
it('should update form value when an option is selected', async () => {
|
|
80
80
|
const form = await fixture(html `<form><usa-combo-box name="search" placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box><button>Submit</button></form>`);
|
|
81
|
-
const comboBox = form.querySelector(
|
|
81
|
+
const comboBox = form.querySelector('usa-combo-box');
|
|
82
82
|
if (!comboBox) {
|
|
83
|
-
throw new Error(
|
|
83
|
+
throw new Error('Combo box not found');
|
|
84
84
|
}
|
|
85
|
-
const input = comboBox.shadowRoot?.querySelector(
|
|
85
|
+
const input = comboBox.shadowRoot?.querySelector('input');
|
|
86
86
|
if (!input) {
|
|
87
|
-
throw new Error(
|
|
87
|
+
throw new Error('input not found');
|
|
88
88
|
}
|
|
89
89
|
// Type to show suggestions
|
|
90
|
-
input.value =
|
|
91
|
-
input.dispatchEvent(new Event(
|
|
90
|
+
input.value = 'Ban';
|
|
91
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
92
92
|
// Select the first suggestion
|
|
93
93
|
const suggestions = comboBox.listItems();
|
|
94
94
|
suggestions[0]
|
|
95
|
-
.querySelector(
|
|
95
|
+
.querySelector('slot')
|
|
96
96
|
?.assignedElements()[0]
|
|
97
|
-
.dispatchEvent(new MouseEvent(
|
|
97
|
+
.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
|
98
98
|
const value = new FormData(form);
|
|
99
|
-
assert.equal(value.get(
|
|
99
|
+
assert.equal(value.get('search'), 'Banana');
|
|
100
100
|
});
|
|
101
|
-
it(
|
|
101
|
+
it('should not submit when required and no value is selected', async () => {
|
|
102
102
|
const form = await fixture(html `<form><usa-combo-box name="search" required placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box><button>Submit</button></form>`);
|
|
103
103
|
assert.equal(form.checkValidity(), false);
|
|
104
104
|
});
|
|
105
|
-
it(
|
|
105
|
+
it('should not show suggestions when disabled', async () => {
|
|
106
106
|
const disabledComboBox = await fixture(html `<usa-combo-box name="search" disabled="disabled" placeholder="Select a fruit"><span slot="label">Fruits</span><usa-combo-box-option value="Apple">Apple</usa-combo-box-option><usa-combo-box-option value="Banana">Banana</usa-combo-box-option><usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option><usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option></usa-combo-box>`);
|
|
107
107
|
const input = disabledComboBox.input();
|
|
108
108
|
input.focus();
|
|
@@ -110,4 +110,4 @@ describe("usa-combo-box", () => {
|
|
|
110
110
|
assert.equal(suggestions.length, 0);
|
|
111
111
|
});
|
|
112
112
|
});
|
|
113
|
-
//# sourceMappingURL=combo-box.test.js.map
|
|
113
|
+
//# sourceMappingURL=combo-box.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combo-box.element.test.js","sourceRoot":"","sources":["../../../src/lib/combo-box/combo-box.element.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './config.element.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './config.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
describe('usa-config', () => {
|
|
4
|
+
it('should be accessible', async () => {
|
|
5
|
+
const config = await fixture(html `<usa-config>Hello World</usa-config>`);
|
|
6
|
+
return assert.isAccessible(config);
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
//# sourceMappingURL=config.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.element.test.js","sourceRoot":"","sources":["../../../src/lib/config/config.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA,wCAAwC,CAAC,CAAC;QAE7F,OAAO,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './description.element.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './description.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
describe('usa-description', () => {
|
|
4
|
+
it('should be accessible', async () => {
|
|
5
|
+
const description = await fixture(html `<usa-description>Hello World</usa-description>`);
|
|
6
|
+
return assert.isAccessible(description);
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
//# sourceMappingURL=description.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"description.element.test.js","sourceRoot":"","sources":["../../../src/lib/description/description.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,WAAW,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA,kDAAkD,CAAC,CAAC;QAEjH,OAAO,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -8,7 +8,7 @@ let USAFileInputPreviewElement = (() => {
|
|
|
8
8
|
tagName: 'usa-file-input-preview',
|
|
9
9
|
shadowDom: [
|
|
10
10
|
css `*{box-sizing:border-box}:host{display:block;font-size:.87rem;pointer-events:none;position:relative;text-align:left;word-wrap:anywhere;z-index:3;border-radius:0;overflow:hidden}:host([hidden]){display:none}img{border:0;display:block;height:2.5rem;margin-right:.5rem;-o-object-fit:contain;object-fit:contain;width:2.5rem}.preview-heading{background:#d9e8f6;align-items:center;display:flex;pointer-events:none;position:relative;z-index:3;font-weight:700;justify-content:space-between;padding:.5rem;text-align:left;font-size:.93rem;line-height:1.6}.preview-item{background:#d9e8f6;align-items:center;display:flex;padding:.5rem;width:100%;margin-top:1px;margin-bottom:1px}`,
|
|
11
|
-
html `<slot class="preview-heading" part="heading"></slot><j-for bind="fileEntries" key="src"><template><div class="preview-item" part="item"><j-if bind="each.value.isImage"><template><j-props><img height="40" width="40" aria-hidden="true"
|
|
11
|
+
html `<slot class="preview-heading" part="heading"></slot><j-for bind="fileEntries" key="src"><template><div class="preview-item" part="item"><j-if bind="each.value.isImage"><template><j-bind props="src:each.value.src"><img height="40" width="40" aria-hidden="true"></j-bind></template><template else><usa-icon icon="file_present"></usa-icon></template></j-if><j-val bind="each.value.file.name"></j-val></div></template></j-for>`,
|
|
12
12
|
],
|
|
13
13
|
})];
|
|
14
14
|
let _classDescriptor;
|
|
@@ -26,15 +26,17 @@ let USAFileInputPreviewElement = (() => {
|
|
|
26
26
|
static {
|
|
27
27
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
28
28
|
_files_decorators = [observe()];
|
|
29
|
-
_fileEntries_decorators = [bind(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
file
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
_fileEntries_decorators = [bind({
|
|
30
|
+
compute: (i) => {
|
|
31
|
+
if (!i.files || i.files.length === 0) {
|
|
32
|
+
return [];
|
|
33
|
+
}
|
|
34
|
+
return Array.from(i.files).map((file) => ({
|
|
35
|
+
file,
|
|
36
|
+
src: URL.createObjectURL(file),
|
|
37
|
+
isImage: file.type.startsWith('image'),
|
|
38
|
+
}));
|
|
39
|
+
},
|
|
38
40
|
})];
|
|
39
41
|
__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);
|
|
40
42
|
__esDecorate(this, null, _fileEntries_decorators, { kind: "accessor", name: "fileEntries", static: false, private: false, access: { has: obj => "fileEntries" in obj, get: obj => obj.fileEntries, set: (obj, value) => { obj.fileEntries = value; } }, metadata: _metadata }, _fileEntries_initializers, _fileEntries_extraInitializers);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input-preview.element.js","sourceRoot":"","sources":["../../../../src/lib/file-input/file-input-preview/file-input-preview.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IA4F5B,0BAA0B;4BApFtC,OAAO,CAAC;YACP,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBH;aACF;SACF,CAAC;;;;sBAC8C,WAAW;;;;;;;0CAAnB,SAAQ,WAAW;;;;iCACxD,OAAO,EAAE;uCAGT,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"file-input-preview.element.js","sourceRoot":"","sources":["../../../../src/lib/file-input/file-input-preview/file-input-preview.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IA4F5B,0BAA0B;4BApFtC,OAAO,CAAC;YACP,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBH;aACF;SACF,CAAC;;;;sBAC8C,WAAW;;;;;;;0CAAnB,SAAQ,WAAW;;;;iCACxD,OAAO,EAAE;uCAGT,IAAI,CAAC;oBACJ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;4BACrC,OAAO,EAAE,CAAC;wBACZ,CAAC;wBAED,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;4BACxC,IAAI;4BACJ,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;4BAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;yBACvC,CAAC,CAAC,CAAC;oBACN,CAAC;iBACF,CAAC;YAdF,oKAAS,KAAK,6BAAL,KAAK,qFAAyB;YAevC,sLAAS,WAAW,6BAAX,WAAW,iGAAmB;YAjBzC,6KAkBC;;;YAlBY,uDAA0B;;QAErC,uEAAkC,IAAI,EAAC;QAAvC,IAAS,KAAK,2CAAyB;QAAvC,IAAS,KAAK,iDAAyB;QAevC,uIAAoC,EAAE,GAAC;QAAvC,IAAS,WAAW,iDAAmB;QAAvC,IAAS,WAAW,uDAAmB;;;;;;;;SAjB5B,0BAA0B"}
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { assert, fixture, html } from
|
|
4
|
-
describe(
|
|
5
|
-
it(
|
|
1
|
+
import './file-input-preview.element.js';
|
|
2
|
+
import '../../link/link.element.js';
|
|
3
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
4
|
+
describe('usa-file-input-preview', () => {
|
|
5
|
+
it('should be accessible with no files', async () => {
|
|
6
6
|
const fileInputPreview = await fixture(html `<usa-file-input-preview>Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
|
|
7
7
|
return assert.isAccessible(fileInputPreview);
|
|
8
8
|
});
|
|
9
|
-
it(
|
|
9
|
+
it('should be accessible with files', async () => {
|
|
10
10
|
const data = new DataTransfer();
|
|
11
|
-
data.items.add(new File([],
|
|
12
|
-
data.items.add(new File([],
|
|
11
|
+
data.items.add(new File([], 'image1.jpg'));
|
|
12
|
+
data.items.add(new File([], 'image2.jpg'));
|
|
13
13
|
const fileInputPreview = await fixture(html `<usa-file-input-preview .files="${data.files}">Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
|
|
14
14
|
return assert.isAccessible(fileInputPreview);
|
|
15
15
|
});
|
|
16
|
-
it(
|
|
16
|
+
it('should display file preview for images', async () => {
|
|
17
17
|
const data = new DataTransfer();
|
|
18
|
-
data.items.add(new File([],
|
|
19
|
-
data.items.add(new File([],
|
|
18
|
+
data.items.add(new File([], 'image1.jpg'));
|
|
19
|
+
data.items.add(new File([], 'image2.jpg'));
|
|
20
20
|
const { shadowRoot } = await fixture(html `<usa-file-input-preview .files="${data.files}">Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
|
|
21
|
-
const previewItems = Array.from(shadowRoot?.querySelectorAll(
|
|
22
|
-
assert.deepEqual(previewItems, [
|
|
21
|
+
const previewItems = Array.from(shadowRoot?.querySelectorAll('.preview-item') ?? []).map((item) => item.textContent?.trim());
|
|
22
|
+
assert.deepEqual(previewItems, ['image1.jpg', 'image2.jpg']);
|
|
23
23
|
});
|
|
24
|
-
it(
|
|
24
|
+
it('should display fewer previews when the number of items decreases', async () => {
|
|
25
25
|
const data = new DataTransfer();
|
|
26
|
-
data.items.add(new File([],
|
|
27
|
-
data.items.add(new File([],
|
|
26
|
+
data.items.add(new File([], 'image1.jpg'));
|
|
27
|
+
data.items.add(new File([], 'image2.jpg'));
|
|
28
28
|
const fileInputPreview = await fixture(html `<usa-file-input-preview .files="${data.files}">Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
|
|
29
29
|
const data2 = new DataTransfer();
|
|
30
|
-
data2.items.add(new File([],
|
|
30
|
+
data2.items.add(new File([], 'image1.jpg'));
|
|
31
31
|
fileInputPreview.files = data2.files;
|
|
32
32
|
// need this to wait for effects to resolve
|
|
33
33
|
await Promise.resolve();
|
|
34
|
-
const previewItems = Array.from(fileInputPreview.shadowRoot?.querySelectorAll(
|
|
35
|
-
assert.deepEqual(previewItems, [
|
|
34
|
+
const previewItems = Array.from(fileInputPreview.shadowRoot?.querySelectorAll('.preview-item') ?? []).map((item) => item.textContent?.trim());
|
|
35
|
+
assert.deepEqual(previewItems, ['image1.jpg']);
|
|
36
36
|
});
|
|
37
|
-
it(
|
|
37
|
+
it('should create preview images for each file', async () => {
|
|
38
38
|
const data = new DataTransfer();
|
|
39
|
-
data.items.add(new File([
|
|
40
|
-
data.items.add(new File([
|
|
39
|
+
data.items.add(new File(['Image1'], 'image1.jpg', { type: 'image/jpg' }));
|
|
40
|
+
data.items.add(new File(['Image2'], 'image2.jpg', { type: 'image/jpg' }));
|
|
41
41
|
const { shadowRoot } = await fixture(html `<usa-file-input-preview .files="${data.files}">Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
|
|
42
|
-
const [first, second] = Array.from(shadowRoot?.querySelectorAll(
|
|
42
|
+
const [first, second] = Array.from(shadowRoot?.querySelectorAll('.preview-item img') ?? []).map((item) => item.src.substring(29));
|
|
43
43
|
// we are just testing that the two hashes are in fact different
|
|
44
44
|
assert.isFalse(first === second);
|
|
45
45
|
});
|
|
46
46
|
});
|
|
47
|
-
//# sourceMappingURL=file-input-preview.test.js.map
|
|
47
|
+
//# sourceMappingURL=file-input-preview.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"file-input-preview.element.test.js","sourceRoot":"","sources":["../../../../src/lib/file-input/file-input-preview/file-input-preview.element.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -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-props><input id="file-input" type="file" tabindex="0"
|
|
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="filesVisible"><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 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;
|
|
@@ -48,7 +48,9 @@ let USAFileInputElement = (() => {
|
|
|
48
48
|
_accept_decorators = [attr(), bind()];
|
|
49
49
|
_required_decorators = [attr(), bind()];
|
|
50
50
|
_files_decorators = [bind()];
|
|
51
|
-
_filesVisible_decorators = [bind(
|
|
51
|
+
_filesVisible_decorators = [bind({
|
|
52
|
+
compute: (i) => !!i.files?.length,
|
|
53
|
+
})];
|
|
52
54
|
_syncFormValues_decorators = [effect()];
|
|
53
55
|
_onInputChange_decorators = [listen('change')];
|
|
54
56
|
_onDragEnter_decorators = [listen('dragenter')];
|
|
@@ -91,10 +93,7 @@ let USAFileInputElement = (() => {
|
|
|
91
93
|
#internals = (__runInitializers(this, _filesVisible_extraInitializers), this.attachInternals());
|
|
92
94
|
#input = query('input');
|
|
93
95
|
connectedCallback() {
|
|
94
|
-
|
|
95
|
-
if (input.validationMessage) {
|
|
96
|
-
this.#internals.setValidity({ customError: true }, input.validationMessage, input);
|
|
97
|
-
}
|
|
96
|
+
this.syncFormValues();
|
|
98
97
|
}
|
|
99
98
|
syncFormValues() {
|
|
100
99
|
const input = this.#input();
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './file-input.element.js';
|