@noctuatech/uswds 0.0.8 → 0.0.9
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/README.md +2 -2
- package/package.json +2 -1
- package/src/lib/define.ts +2 -1
- package/src/lib/file-input/{file-input-preview.element.ts → file-input-preview/file-input-preview.element.ts} +20 -17
- package/src/lib/file-input/file-input.element.ts +22 -18
- package/src/lib/modal/modal.element.ts +5 -23
- package/src/lib/summary-box/summary-box.element.ts +35 -0
- package/src/lib/summary-box/summary-box.stories.ts +24 -0
- package/src/lib/summary-box/summary-box.test.ts +15 -0
- package/src/lib.ts +2 -0
- package/target/lib/button/button.element.d.ts +3 -0
- package/target/lib/button/button.element.js +27 -3
- package/target/lib/button/button.element.js.map +1 -1
- package/target/lib/define.d.ts +4 -0
- package/target/lib/define.js +4 -0
- package/target/lib/define.js.map +1 -1
- package/target/lib/file-input/file-input-preview.element.js +1 -1
- package/target/lib/file-input/file-input-preview.element.js.map +1 -1
- package/target/lib/file-input/file-input.element.js +30 -16
- package/target/lib/file-input/file-input.element.js.map +1 -1
- package/target/lib/file-input/file-input.stories.js +0 -2
- package/target/lib/file-input/file-input.stories.js.map +1 -1
- package/target/lib/input/input.element.d.ts +1 -0
- package/target/lib/input/input.element.js +12 -8
- package/target/lib/input/input.element.js.map +1 -1
- package/target/lib/modal/modal-close/modal-close.element.d.ts +8 -0
- package/target/lib/modal/modal-close/modal-close.element.js +78 -0
- package/target/lib/modal/modal-close/modal-close.element.js.map +1 -0
- package/target/lib/modal/modal-close/modal-close.test.d.ts +1 -0
- package/target/lib/modal/modal-close/modal-close.test.js +11 -0
- package/target/lib/modal/modal-close/modal-close.test.js.map +1 -0
- package/target/lib/modal/modal-heading/modal-heading.element.d.ts +7 -0
- package/target/lib/modal/modal-heading/modal-heading.element.js +50 -0
- package/target/lib/modal/modal-heading/modal-heading.element.js.map +1 -0
- package/target/lib/modal/modal-heading/modal-heading.test.d.ts +1 -0
- package/target/lib/modal/modal-heading/modal-heading.test.js +11 -0
- package/target/lib/modal/modal-heading/modal-heading.test.js.map +1 -0
- package/target/lib/modal/modal.element.d.ts +13 -0
- package/target/lib/modal/modal.element.js +96 -0
- package/target/lib/modal/modal.element.js.map +1 -0
- package/target/lib/modal/modal.stories.d.ts +12 -0
- package/target/lib/modal/modal.stories.js +34 -0
- package/target/lib/modal/modal.stories.js.map +1 -0
- package/target/lib/modal/modal.test.d.ts +3 -0
- package/target/lib/modal/modal.test.js +21 -0
- package/target/lib/modal/modal.test.js.map +1 -0
- package/target/lib/summary-box/summary-box.element.d.ts +7 -0
- package/target/lib/summary-box/summary-box.element.js +47 -0
- package/target/lib/summary-box/summary-box.element.js.map +1 -0
- package/target/lib/summary-box/summary-box.stories.d.ts +12 -0
- package/target/lib/summary-box/summary-box.stories.js +17 -0
- package/target/lib/summary-box/summary-box.stories.js.map +1 -0
- package/target/lib/summary-box/summary-box.test.d.ts +1 -0
- package/target/lib/summary-box/summary-box.test.js +11 -0
- package/target/lib/summary-box/summary-box.test.js.map +1 -0
- package/target/lib.d.ts +4 -0
- package/target/lib.js +4 -0
- package/target/lib.js.map +1 -1
- package/assets/css/global.css +0 -21
- package/assets/uswds.min.js +0 -1
- /package/src/lib/file-input/{file-input-preview.test.ts → file-input-preview/file-input-preview.test.ts} +0 -0
package/README.md
CHANGED
|
@@ -23,10 +23,10 @@ npm i @noctuatech/uswds
|
|
|
23
23
|
}
|
|
24
24
|
</style>
|
|
25
25
|
|
|
26
|
-
<script src="/node_modules/@noctuatech/uswds
|
|
26
|
+
<script src="/node_modules/@noctuatech/uswds/assets/uswds.min.js"></script>
|
|
27
27
|
|
|
28
28
|
<usa-config
|
|
29
|
-
spritesheet="/node_modules/@noctuatech/uswds
|
|
29
|
+
spritesheet="/node_modules/@noctuatech/uswds/assets/img/sprite.svg"
|
|
30
30
|
>
|
|
31
31
|
<usa-alert type="info">
|
|
32
32
|
<h3 slot="heading">Informative status</h3>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@noctuatech/uswds",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"workspaces": [
|
|
6
6
|
"packages/**"
|
|
@@ -102,6 +102,7 @@
|
|
|
102
102
|
"@storybook/web-components-vite": "^8.4.4",
|
|
103
103
|
"@types/mocha": "^10.0.7",
|
|
104
104
|
"@types/node": "^22.0.0",
|
|
105
|
+
"@uswds/uswds": "^3.10.0",
|
|
105
106
|
"@web/test-runner": "^0.19.0",
|
|
106
107
|
"browser-sync": "^3.0.3",
|
|
107
108
|
"husky": "^9.0.11",
|
package/src/lib/define.ts
CHANGED
|
@@ -4,7 +4,7 @@ import "./button/button.element.js";
|
|
|
4
4
|
import "./checkbox/checkbox.element.js";
|
|
5
5
|
import "./description/description.element.js";
|
|
6
6
|
import "./file-input/file-input.element.js";
|
|
7
|
-
import "./file-input/file-input-preview.element.js";
|
|
7
|
+
import "./file-input/file-input-preview/file-input-preview.element.js";
|
|
8
8
|
import "./icon/icon.element.js";
|
|
9
9
|
import "./input/input.element.js";
|
|
10
10
|
import "./input-mask/input-mask.element.js";
|
|
@@ -16,6 +16,7 @@ import "./select/select-option.element.js";
|
|
|
16
16
|
import "./tag/tag.element.js";
|
|
17
17
|
import "./accordion/accordion.element.js";
|
|
18
18
|
import "./side-nav/side-nav.element.js";
|
|
19
|
+
import "./summary-box/summary-box.element.js";
|
|
19
20
|
import "./step-indicator/step-indicator.element.js";
|
|
20
21
|
import "./step-indicator/step/step-indicator-step.element.js";
|
|
21
22
|
import "./modal/modal.element.js";
|
|
@@ -61,14 +61,23 @@ declare global {
|
|
|
61
61
|
margin-top: 1px;
|
|
62
62
|
}
|
|
63
63
|
`,
|
|
64
|
-
html
|
|
64
|
+
html`
|
|
65
|
+
<template>
|
|
66
|
+
<div class="preview-item">
|
|
67
|
+
<img height="40" width="40" aria-hidden="true" />
|
|
68
|
+
</div>
|
|
69
|
+
</template>
|
|
70
|
+
|
|
71
|
+
<slot class="preview-heading"></slot>
|
|
72
|
+
`,
|
|
65
73
|
],
|
|
66
74
|
})
|
|
67
75
|
export class USAFileInputPreviewElement extends HTMLElement {
|
|
68
76
|
@observe()
|
|
69
77
|
accessor files: FileList | null = null;
|
|
70
78
|
|
|
71
|
-
#items = new Map<string,
|
|
79
|
+
#items = new Map<string, Element>();
|
|
80
|
+
#template = query("template");
|
|
72
81
|
|
|
73
82
|
connectedCallback() {
|
|
74
83
|
this.onChange();
|
|
@@ -76,7 +85,9 @@ export class USAFileInputPreviewElement extends HTMLElement {
|
|
|
76
85
|
|
|
77
86
|
@effect()
|
|
78
87
|
onChange() {
|
|
79
|
-
|
|
88
|
+
const template = this.#template();
|
|
89
|
+
|
|
90
|
+
if (this.files && this.files.length) {
|
|
80
91
|
this.hidden = false;
|
|
81
92
|
|
|
82
93
|
let names = new Set<string>();
|
|
@@ -85,13 +96,15 @@ export class USAFileInputPreviewElement extends HTMLElement {
|
|
|
85
96
|
names.add(file.name);
|
|
86
97
|
|
|
87
98
|
if (!this.#items.has(file.name)) {
|
|
88
|
-
const
|
|
99
|
+
const clone = template.content.cloneNode(true);
|
|
100
|
+
const item = clone.childNodes[1] as Element;
|
|
101
|
+
|
|
89
102
|
item.id = file.name;
|
|
90
|
-
item.className = "preview-item";
|
|
91
103
|
|
|
92
|
-
const img =
|
|
104
|
+
const img = item.querySelector("img")!;
|
|
105
|
+
img.src = URL.createObjectURL(file);
|
|
93
106
|
|
|
94
|
-
item.append(
|
|
107
|
+
item.append(document.createTextNode(file.name));
|
|
95
108
|
|
|
96
109
|
this.shadowRoot!.append(item);
|
|
97
110
|
this.#items.set(file.name, item);
|
|
@@ -109,13 +122,3 @@ export class USAFileInputPreviewElement extends HTMLElement {
|
|
|
109
122
|
}
|
|
110
123
|
}
|
|
111
124
|
}
|
|
112
|
-
|
|
113
|
-
function createImagePreview(file: File) {
|
|
114
|
-
const img = new Image();
|
|
115
|
-
img.height = 40;
|
|
116
|
-
img.width = 40;
|
|
117
|
-
img.src = URL.createObjectURL(file);
|
|
118
|
-
img.ariaHidden = "true";
|
|
119
|
-
|
|
120
|
-
return img;
|
|
121
|
-
}
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
import "./file-input-preview.element.js";
|
|
2
|
-
import "../link/link.element.js";
|
|
3
|
-
|
|
4
1
|
import { attr, css, element, html, listen, query } from "@joist/element";
|
|
5
2
|
import { effect, observe } from "@joist/observable";
|
|
6
3
|
|
|
@@ -39,7 +36,7 @@ declare global {
|
|
|
39
36
|
width: 100%;
|
|
40
37
|
z-index: 1;
|
|
41
38
|
bottom: 0;
|
|
42
|
-
top:
|
|
39
|
+
top: 0;
|
|
43
40
|
}
|
|
44
41
|
|
|
45
42
|
input:focus {
|
|
@@ -47,7 +44,7 @@ declare global {
|
|
|
47
44
|
outline-offset: 0;
|
|
48
45
|
}
|
|
49
46
|
|
|
50
|
-
label slot {
|
|
47
|
+
label slot.label {
|
|
51
48
|
font-size: 1.06rem;
|
|
52
49
|
line-height: 1.3;
|
|
53
50
|
display: block;
|
|
@@ -67,22 +64,29 @@ declare global {
|
|
|
67
64
|
align-items: center;
|
|
68
65
|
justify-content: center;
|
|
69
66
|
}
|
|
67
|
+
|
|
68
|
+
.container {
|
|
69
|
+
position: relative;
|
|
70
|
+
}
|
|
70
71
|
`,
|
|
71
72
|
html`
|
|
72
73
|
<label>
|
|
73
|
-
<slot></slot>
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
<slot class="label"></slot>
|
|
75
|
+
|
|
76
|
+
<div class="container">
|
|
77
|
+
<input type="file" />
|
|
76
78
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
<div class="box">
|
|
80
|
+
<slot name="description">
|
|
81
|
+
Drag file here or <usa-link>choose from folder</usa-link>
|
|
82
|
+
</slot>
|
|
83
|
+
</div>
|
|
82
84
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
<usa-file-input-preview>
|
|
86
|
+
Selected file <usa-link>Change file</usa-link>
|
|
87
|
+
</usa-file-input-preview>
|
|
88
|
+
</div>
|
|
89
|
+
</label>
|
|
86
90
|
`,
|
|
87
91
|
],
|
|
88
92
|
})
|
|
@@ -133,14 +137,14 @@ export class USAFileInputElement extends HTMLElement {
|
|
|
133
137
|
|
|
134
138
|
const formData = new FormData();
|
|
135
139
|
|
|
136
|
-
if (input.files) {
|
|
140
|
+
if (input.files && input.files.length) {
|
|
137
141
|
box.style.display = "none";
|
|
138
142
|
|
|
139
143
|
for (let file of input.files) {
|
|
140
144
|
formData.append(this.name, file);
|
|
141
145
|
}
|
|
142
146
|
} else {
|
|
143
|
-
box.style.display = "
|
|
147
|
+
box.style.display = "flex";
|
|
144
148
|
}
|
|
145
149
|
|
|
146
150
|
this.#internals.setFormValue(formData);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { css, element, html, listen, query } from "@joist/element";
|
|
2
2
|
|
|
3
3
|
declare global {
|
|
4
4
|
interface HTMLElementTagNameMap {
|
|
@@ -30,7 +30,6 @@ declare global {
|
|
|
30
30
|
padding-left: 4rem;
|
|
31
31
|
padding-right: 4rem;
|
|
32
32
|
padding-bottom: 2rem;
|
|
33
|
-
position: relative;
|
|
34
33
|
width: 100%;
|
|
35
34
|
}
|
|
36
35
|
|
|
@@ -46,17 +45,10 @@ declare global {
|
|
|
46
45
|
],
|
|
47
46
|
})
|
|
48
47
|
export class USAModalElement extends HTMLElement {
|
|
49
|
-
|
|
50
|
-
accessor open = false;
|
|
48
|
+
modalAction: null | string = null;
|
|
51
49
|
|
|
52
50
|
#dialog = query("dialog");
|
|
53
51
|
|
|
54
|
-
connectedCallback() {
|
|
55
|
-
if (this.open) {
|
|
56
|
-
this.openModal();
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
52
|
openModal() {
|
|
61
53
|
const dialog = this.#dialog();
|
|
62
54
|
|
|
@@ -83,21 +75,11 @@ export class USAModalElement extends HTMLElement {
|
|
|
83
75
|
@listen("click", (host) => host)
|
|
84
76
|
onModalAction(e: Event) {
|
|
85
77
|
if (e.target instanceof Element) {
|
|
86
|
-
|
|
78
|
+
this.modalAction = e.target.getAttribute("modal-action");
|
|
87
79
|
|
|
88
|
-
|
|
89
|
-
case "confirm":
|
|
90
|
-
this.closeModal();
|
|
91
|
-
break;
|
|
80
|
+
this.closeModal();
|
|
92
81
|
|
|
93
|
-
|
|
94
|
-
this.closeModal();
|
|
95
|
-
break;
|
|
96
|
-
|
|
97
|
-
case "close":
|
|
98
|
-
this.closeModal();
|
|
99
|
-
break;
|
|
100
|
-
}
|
|
82
|
+
this.dispatchEvent(new Event("usa::modal::close"));
|
|
101
83
|
}
|
|
102
84
|
}
|
|
103
85
|
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { css, element, html } from "@joist/element";
|
|
2
|
+
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
"usa-summary-box": USASummaryBoxElement;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@element({
|
|
10
|
+
tagName: "usa-summary-box",
|
|
11
|
+
shadowDom: [
|
|
12
|
+
css`
|
|
13
|
+
:host {
|
|
14
|
+
font-family:
|
|
15
|
+
Source Sans Pro Web,
|
|
16
|
+
Helvetica Neue,
|
|
17
|
+
Helvetica,
|
|
18
|
+
Roboto,
|
|
19
|
+
Arial,
|
|
20
|
+
sans-serif;
|
|
21
|
+
font-size: 1.06rem;
|
|
22
|
+
line-height: 1.5;
|
|
23
|
+
color: #1b1b1b;
|
|
24
|
+
background-color: #e7f6f8;
|
|
25
|
+
border-radius: 0.25rem;
|
|
26
|
+
border: 1px #99deea solid;
|
|
27
|
+
padding: 1.5rem;
|
|
28
|
+
position: relative;
|
|
29
|
+
display: block;
|
|
30
|
+
}
|
|
31
|
+
`,
|
|
32
|
+
html` <slot></slot> `,
|
|
33
|
+
],
|
|
34
|
+
})
|
|
35
|
+
export class USASummaryBoxElement extends HTMLElement {}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/web-components";
|
|
2
|
+
import { html } from "lit";
|
|
3
|
+
|
|
4
|
+
import type { USASummaryBoxElement } from "./summary-box.element.js";
|
|
5
|
+
|
|
6
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
7
|
+
const meta = {
|
|
8
|
+
title: "usa-summary-box",
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
render(args) {
|
|
11
|
+
return html` <usa-summary-box> Hello World </usa-summary-box>`;
|
|
12
|
+
},
|
|
13
|
+
argTypes: {},
|
|
14
|
+
args: {},
|
|
15
|
+
} satisfies Meta<USASummaryBoxElement>;
|
|
16
|
+
|
|
17
|
+
export default meta;
|
|
18
|
+
|
|
19
|
+
type Story = StoryObj<USASummaryBoxElement>;
|
|
20
|
+
|
|
21
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
22
|
+
export const Primary: Story = {
|
|
23
|
+
args: {},
|
|
24
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import "./summary-box.element.js";
|
|
2
|
+
|
|
3
|
+
import { fixture, html, assert } from "@open-wc/testing";
|
|
4
|
+
|
|
5
|
+
import { USASummaryBoxElement } from "./summary-box.element.js";
|
|
6
|
+
|
|
7
|
+
describe("usa-summary-box", () => {
|
|
8
|
+
it("should be accessible", async () => {
|
|
9
|
+
const summaryBox = await fixture<USASummaryBoxElement>(html`
|
|
10
|
+
<usa-summary-box>Hello World</usa-summary-box>
|
|
11
|
+
`);
|
|
12
|
+
|
|
13
|
+
return assert.isAccessible(summaryBox);
|
|
14
|
+
});
|
|
15
|
+
});
|
package/src/lib.ts
CHANGED
|
@@ -13,8 +13,10 @@ export { USASelecOptionElement } from "./lib/select/select-option.element.js";
|
|
|
13
13
|
export { USATagElement } from "./lib/tag/tag.element.js";
|
|
14
14
|
export { USAAccordionElement } from "./lib/accordion/accordion.element.js";
|
|
15
15
|
export { USASideNavElement } from "./lib/side-nav/side-nav.element.js";
|
|
16
|
+
export { USASummaryBoxElement } from "./lib/summary-box/summary-box.element.js";
|
|
16
17
|
export { USAStepIndicatorElement } from "./lib/step-indicator/step-indicator.element.js";
|
|
17
18
|
export { USAStepIndicatorStepElement } from "./lib/step-indicator/step/step-indicator-step.element.js";
|
|
18
19
|
export { USAModalElement } from "./lib/modal/modal.element.js";
|
|
19
20
|
export { USAModalCloseElement } from "./lib/modal/modal-close/modal-close.element.js";
|
|
20
21
|
export { USAModalHeadingElement } from "./lib/modal/modal-heading/modal-heading.element.js";
|
|
22
|
+
|
|
@@ -11,6 +11,9 @@ export declare class USAButtonElement extends HTMLElement {
|
|
|
11
11
|
accessor type: "button" | "submit" | "reset";
|
|
12
12
|
accessor disabled: boolean;
|
|
13
13
|
accessor variant: ButtonVariant;
|
|
14
|
+
accessor value: string;
|
|
15
|
+
accessor tabIndex: number;
|
|
16
|
+
onReady(): void;
|
|
14
17
|
onKeyDown(e: KeyboardEvent): void;
|
|
15
18
|
onInternalClick(): void;
|
|
16
19
|
attributeChangedCallback(): void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
|
|
2
|
-
import { attr, css, element, html, listen, query } from "@joist/element";
|
|
2
|
+
import { attr, css, element, html, listen, query, ready } from "@joist/element";
|
|
3
3
|
export const BUTTON_VARIANTS = [
|
|
4
4
|
"primary",
|
|
5
5
|
"secondary",
|
|
@@ -8,9 +8,13 @@ export const BUTTON_VARIANTS = [
|
|
|
8
8
|
"outline",
|
|
9
9
|
];
|
|
10
10
|
let USAButtonElement = (() => {
|
|
11
|
-
var _USAButtonElement_instances, _USAButtonElement_internals, _USAButtonElement_button, _USAButtonElement_handleForm, _USAButtonElement_type_accessor_storage, _USAButtonElement_disabled_accessor_storage, _USAButtonElement_variant_accessor_storage;
|
|
11
|
+
var _USAButtonElement_instances, _USAButtonElement_internals, _USAButtonElement_button, _USAButtonElement_handleForm, _USAButtonElement_type_accessor_storage, _USAButtonElement_disabled_accessor_storage, _USAButtonElement_variant_accessor_storage, _USAButtonElement_value_accessor_storage, _USAButtonElement_tabIndex_accessor_storage;
|
|
12
12
|
let _classDecorators = [element({
|
|
13
13
|
tagName: "usa-button",
|
|
14
|
+
shadowDomOpts: {
|
|
15
|
+
mode: "open",
|
|
16
|
+
delegatesFocus: true,
|
|
17
|
+
},
|
|
14
18
|
shadowDom: [
|
|
15
19
|
css `
|
|
16
20
|
:host {
|
|
@@ -177,6 +181,10 @@ let USAButtonElement = (() => {
|
|
|
177
181
|
let _variant_decorators;
|
|
178
182
|
let _variant_initializers = [];
|
|
179
183
|
let _variant_extraInitializers = [];
|
|
184
|
+
let _value_decorators;
|
|
185
|
+
let _value_initializers = [];
|
|
186
|
+
let _value_extraInitializers = [];
|
|
187
|
+
let _onReady_decorators;
|
|
180
188
|
let _onKeyDown_decorators;
|
|
181
189
|
let _onInternalClick_decorators;
|
|
182
190
|
var USAButtonElement = _classThis = class extends _classSuper {
|
|
@@ -186,7 +194,9 @@ let USAButtonElement = (() => {
|
|
|
186
194
|
_USAButtonElement_type_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, "button")));
|
|
187
195
|
_USAButtonElement_disabled_accessor_storage.set(this, (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _disabled_initializers, false)));
|
|
188
196
|
_USAButtonElement_variant_accessor_storage.set(this, (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _variant_initializers, "primary")));
|
|
189
|
-
|
|
197
|
+
_USAButtonElement_value_accessor_storage.set(this, (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, "")));
|
|
198
|
+
_USAButtonElement_tabIndex_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), 0));
|
|
199
|
+
_USAButtonElement_internals.set(this, this.attachInternals());
|
|
190
200
|
_USAButtonElement_button.set(this, query("button"));
|
|
191
201
|
}
|
|
192
202
|
get type() { return __classPrivateFieldGet(this, _USAButtonElement_type_accessor_storage, "f"); }
|
|
@@ -195,6 +205,14 @@ let USAButtonElement = (() => {
|
|
|
195
205
|
set disabled(value) { __classPrivateFieldSet(this, _USAButtonElement_disabled_accessor_storage, value, "f"); }
|
|
196
206
|
get variant() { return __classPrivateFieldGet(this, _USAButtonElement_variant_accessor_storage, "f"); }
|
|
197
207
|
set variant(value) { __classPrivateFieldSet(this, _USAButtonElement_variant_accessor_storage, value, "f"); }
|
|
208
|
+
get value() { return __classPrivateFieldGet(this, _USAButtonElement_value_accessor_storage, "f"); }
|
|
209
|
+
set value(value) { __classPrivateFieldSet(this, _USAButtonElement_value_accessor_storage, value, "f"); }
|
|
210
|
+
get tabIndex() { return __classPrivateFieldGet(this, _USAButtonElement_tabIndex_accessor_storage, "f"); }
|
|
211
|
+
set tabIndex(value) { __classPrivateFieldSet(this, _USAButtonElement_tabIndex_accessor_storage, value, "f"); }
|
|
212
|
+
onReady() {
|
|
213
|
+
const input = __classPrivateFieldGet(this, _USAButtonElement_button, "f").call(this);
|
|
214
|
+
input.autofocus = this.autofocus;
|
|
215
|
+
}
|
|
198
216
|
onKeyDown(e) {
|
|
199
217
|
if (this.type === "submit") {
|
|
200
218
|
if (e.key.toUpperCase() === "ENTER") {
|
|
@@ -217,6 +235,8 @@ let USAButtonElement = (() => {
|
|
|
217
235
|
_USAButtonElement_type_accessor_storage = new WeakMap();
|
|
218
236
|
_USAButtonElement_disabled_accessor_storage = new WeakMap();
|
|
219
237
|
_USAButtonElement_variant_accessor_storage = new WeakMap();
|
|
238
|
+
_USAButtonElement_value_accessor_storage = new WeakMap();
|
|
239
|
+
_USAButtonElement_tabIndex_accessor_storage = new WeakMap();
|
|
220
240
|
_USAButtonElement_handleForm = function _USAButtonElement_handleForm() {
|
|
221
241
|
const { form } = __classPrivateFieldGet(this, _USAButtonElement_internals, "f");
|
|
222
242
|
if (form) {
|
|
@@ -238,11 +258,15 @@ let USAButtonElement = (() => {
|
|
|
238
258
|
_type_decorators = [attr()];
|
|
239
259
|
_disabled_decorators = [attr()];
|
|
240
260
|
_variant_decorators = [attr()];
|
|
261
|
+
_value_decorators = [attr()];
|
|
262
|
+
_onReady_decorators = [ready()];
|
|
241
263
|
_onKeyDown_decorators = [listen("keydown", () => document.body)];
|
|
242
264
|
_onInternalClick_decorators = [listen("click")];
|
|
243
265
|
__esDecorate(_classThis, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
|
|
244
266
|
__esDecorate(_classThis, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
245
267
|
__esDecorate(_classThis, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
|
|
268
|
+
__esDecorate(_classThis, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
269
|
+
__esDecorate(_classThis, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
246
270
|
__esDecorate(_classThis, 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);
|
|
247
271
|
__esDecorate(_classThis, null, _onInternalClick_decorators, { kind: "method", name: "onInternalClick", static: false, private: false, access: { has: obj => "onInternalClick" in obj, get: obj => obj.onInternalClick }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
248
272
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":"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"}
|
package/target/lib/define.d.ts
CHANGED
|
@@ -16,5 +16,9 @@ import "./select/select-option.element.js";
|
|
|
16
16
|
import "./tag/tag.element.js";
|
|
17
17
|
import "./accordion/accordion.element.js";
|
|
18
18
|
import "./side-nav/side-nav.element.js";
|
|
19
|
+
import "./summary-box/summary-box.element.js";
|
|
19
20
|
import "./step-indicator/step-indicator.element.js";
|
|
20
21
|
import "./step-indicator/step/step-indicator-step.element.js";
|
|
22
|
+
import "./modal/modal.element.js";
|
|
23
|
+
import "./modal/modal-close/modal-close.element.js";
|
|
24
|
+
import "./modal/modal-heading/modal-heading.element.js";
|
package/target/lib/define.js
CHANGED
|
@@ -16,6 +16,10 @@ import "./select/select-option.element.js";
|
|
|
16
16
|
import "./tag/tag.element.js";
|
|
17
17
|
import "./accordion/accordion.element.js";
|
|
18
18
|
import "./side-nav/side-nav.element.js";
|
|
19
|
+
import "./summary-box/summary-box.element.js";
|
|
19
20
|
import "./step-indicator/step-indicator.element.js";
|
|
20
21
|
import "./step-indicator/step/step-indicator-step.element.js";
|
|
22
|
+
import "./modal/modal.element.js";
|
|
23
|
+
import "./modal/modal-close/modal-close.element.js";
|
|
24
|
+
import "./modal/modal-heading/modal-heading.element.js";
|
|
21
25
|
//# sourceMappingURL=define.js.map
|
package/target/lib/define.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,4CAA4C,CAAC;AACpD,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,4CAA4C,CAAC;AACpD,OAAO,sDAAsD,CAAC"}
|
|
1
|
+
{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,4CAA4C,CAAC;AACpD,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,4CAA4C,CAAC;AACpD,OAAO,sDAAsD,CAAC;AAC9D,OAAO,0BAA0B,CAAC;AAClC,OAAO,4CAA4C,CAAC;AACpD,OAAO,gDAAgD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input-preview.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input-preview.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAS,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IAiEvC,0BAA0B;;4BAzDtC,OAAO,CAAC;YACP,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;gBACD,IAAI,CAAA,uCAAuC;aAC5C;SACF,CAAC;;;;sBAC8C,WAAW;;;;;;uDAAnB,SAAQ,WAAW;;;YAEhD,8DAFE,mDAA0B,+CAEH,IAAI,IAAC;YAEvC,gGAAS,IAAI,GAAG,EAAuB,GAAC;QAwC1C,CAAC;QA1CC,IAAS,KAAK,oGAAyB;QAAvC,IAAS,KAAK,yGAAyB;QAIvC,iBAAiB;YACf,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;QAGD,QAAQ;YACN,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"file-input-preview.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input-preview.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -26,15 +26,20 @@ let USAFileInputElement = (() => {
|
|
|
26
26
|
|
|
27
27
|
input {
|
|
28
28
|
cursor: pointer;
|
|
29
|
-
height: 100%;
|
|
30
29
|
left: 0;
|
|
31
30
|
margin: 0;
|
|
32
31
|
max-width: none;
|
|
33
32
|
position: absolute;
|
|
34
33
|
text-indent: -999em;
|
|
35
|
-
top: 0;
|
|
36
34
|
width: 100%;
|
|
37
35
|
z-index: 1;
|
|
36
|
+
bottom: 0;
|
|
37
|
+
top: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
input:focus {
|
|
41
|
+
outline: 0.25rem solid #2491ff;
|
|
42
|
+
outline-offset: 0;
|
|
38
43
|
}
|
|
39
44
|
|
|
40
45
|
label slot {
|
|
@@ -47,30 +52,39 @@ let USAFileInputElement = (() => {
|
|
|
47
52
|
|
|
48
53
|
.box {
|
|
49
54
|
border: 1px dashed #adadad;
|
|
50
|
-
display:
|
|
55
|
+
display: flex;
|
|
51
56
|
font-size: 0.93rem;
|
|
52
57
|
position: relative;
|
|
53
58
|
text-align: center;
|
|
54
59
|
width: 100%;
|
|
55
60
|
max-width: 30rem;
|
|
56
|
-
|
|
61
|
+
height: 5.2rem;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.container {
|
|
67
|
+
position: relative;
|
|
57
68
|
}
|
|
58
69
|
`,
|
|
59
70
|
html `
|
|
60
71
|
<label>
|
|
61
72
|
<slot></slot>
|
|
62
|
-
<input type="file" />
|
|
63
|
-
</label>
|
|
64
73
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
Drag file here or <usa-link>choose from folder</usa-link>
|
|
68
|
-
</slot>
|
|
69
|
-
</div>
|
|
74
|
+
<div class="container">
|
|
75
|
+
<input type="file" />
|
|
70
76
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
77
|
+
<div class="box">
|
|
78
|
+
<slot name="description">
|
|
79
|
+
Drag file here or <usa-link>choose from folder</usa-link>
|
|
80
|
+
</slot>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<usa-file-input-preview>
|
|
84
|
+
Selected file <usa-link>Change file</usa-link>
|
|
85
|
+
</usa-file-input-preview>
|
|
86
|
+
</div>
|
|
87
|
+
</label>
|
|
74
88
|
`,
|
|
75
89
|
],
|
|
76
90
|
})];
|
|
@@ -132,14 +146,14 @@ let USAFileInputElement = (() => {
|
|
|
132
146
|
const preview = __classPrivateFieldGet(this, _USAFileInputElement_preview, "f").call(this);
|
|
133
147
|
preview.files = input.files;
|
|
134
148
|
const formData = new FormData();
|
|
135
|
-
if (input.files) {
|
|
149
|
+
if (input.files && input.files.length) {
|
|
136
150
|
box.style.display = "none";
|
|
137
151
|
for (let file of input.files) {
|
|
138
152
|
formData.append(this.name, file);
|
|
139
153
|
}
|
|
140
154
|
}
|
|
141
155
|
else {
|
|
142
|
-
box.style.display = "
|
|
156
|
+
box.style.display = "flex";
|
|
143
157
|
}
|
|
144
158
|
__classPrivateFieldGet(this, _USAFileInputElement_internals, "f").setFormValue(formData);
|
|
145
159
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAC;AACzC,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,OAAO,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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.stories.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,SAAS,QAAQ,CAAC,CAAQ;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;YAEvD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,IAAI,CAAA;sBACO,QAAQ
|
|
1
|
+
{"version":3,"file":"file-input.stories.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,SAAS,QAAQ,CAAC,CAAQ;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;YAEvD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,IAAI,CAAA;sBACO,QAAQ;;;;;;;;;;;KAWzB,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
|
|
@@ -13,6 +13,7 @@ export declare class USATextInputElement extends HTMLElement implements Maskable
|
|
|
13
13
|
accessor value: string;
|
|
14
14
|
get selectionStart(): number | null;
|
|
15
15
|
setSelectionRange(start: number, end: number): void;
|
|
16
|
+
onReady(): void;
|
|
16
17
|
onChange(): void;
|
|
17
18
|
onInputChange(): void;
|
|
18
19
|
attributeChangedCallback(attr: string): void;
|