@noctuatech/uswds 0.0.19 → 0.0.21
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/assets/img/built-to-grow--alt.jpg +0 -0
- package/assets/uswds.min.js +1 -1
- package/package.json +5 -5
- package/src/lib/card/card-body/card-body.element.ts +23 -0
- package/src/lib/card/card-footer/card-footer.element.ts +21 -0
- package/src/lib/card/card-group/card-group.element.ts +30 -0
- package/src/lib/card/card-header/card-header.element.ts +31 -0
- package/src/lib/card/card-media/card-media.element.ts +50 -0
- package/src/lib/card/card.element.ts +53 -0
- package/src/lib/card/card.stories.ts +135 -0
- package/src/lib/card/card.test.ts +37 -0
- package/src/lib/config/config.element.ts +20 -7
- package/src/lib/define.ts +6 -0
- package/src/lib/icon/icon.element.ts +14 -28
- package/src/lib/services/http.service.ts +8 -0
- package/src/lib/services/icon.service.test.ts +55 -0
- package/src/lib/services/icon.service.ts +47 -0
- package/src/lib.ts +10 -0
- package/target/lib/accordion/accordion.element.js +26 -32
- package/target/lib/accordion/accordion.element.js.map +1 -1
- package/target/lib/alert/alert.element.js +16 -22
- package/target/lib/alert/alert.element.js.map +1 -1
- package/target/lib/button/button.element.js +60 -73
- package/target/lib/button/button.element.js.map +1 -1
- package/target/lib/card/card-body/card-body.element.d.ts +7 -0
- package/target/lib/card/card-body/card-body.element.js +35 -0
- package/target/lib/card/card-body/card-body.element.js.map +1 -0
- package/target/lib/card/card-footer/card-footer.element.d.ts +7 -0
- package/target/lib/card/card-footer/card-footer.element.js +33 -0
- package/target/lib/card/card-footer/card-footer.element.js.map +1 -0
- package/target/lib/card/card-group/card-group.element.d.ts +8 -0
- package/target/lib/card/card-group/card-group.element.js +51 -0
- package/target/lib/card/card-group/card-group.element.js.map +1 -0
- package/target/lib/card/card-header/card-header.element.d.ts +7 -0
- package/target/lib/card/card-header/card-header.element.js +43 -0
- package/target/lib/card/card-header/card-header.element.js.map +1 -0
- package/target/lib/card/card-media/card-media.element.d.ts +8 -0
- package/target/lib/card/card-media/card-media.element.js +71 -0
- package/target/lib/card/card-media/card-media.element.js.map +1 -0
- package/target/lib/card/card.element.d.ts +9 -0
- package/target/lib/card/card.element.js +79 -0
- package/target/lib/card/card.element.js.map +1 -0
- package/target/lib/card/card.stories.d.ts +12 -0
- package/target/lib/card/card.stories.js +126 -0
- package/target/lib/card/card.stories.js.map +1 -0
- package/target/lib/card/card.test.d.ts +6 -0
- package/target/lib/card/card.test.js +33 -0
- package/target/lib/card/card.test.js.map +1 -0
- package/target/lib/checkbox/checkbox.element.js +44 -54
- package/target/lib/checkbox/checkbox.element.js.map +1 -1
- package/target/lib/config/config.element.d.ts +2 -2
- package/target/lib/config/config.element.js +39 -32
- package/target/lib/config/config.element.js.map +1 -1
- package/target/lib/define.d.ts +6 -0
- package/target/lib/define.js +6 -0
- package/target/lib/define.js.map +1 -1
- package/target/lib/description/description.element.js +10 -10
- package/target/lib/description/description.element.js.map +1 -1
- package/target/lib/file-input/file-input-preview/file-input-preview.element.js +23 -30
- package/target/lib/file-input/file-input-preview/file-input-preview.element.js.map +1 -1
- package/target/lib/file-input/file-input.element.js +46 -58
- package/target/lib/file-input/file-input.element.js.map +1 -1
- package/target/lib/icon/icon.element.d.ts +1 -3
- package/target/lib/icon/icon.element.js +34 -48
- package/target/lib/icon/icon.element.js.map +1 -1
- package/target/lib/input/input.element.js +50 -60
- package/target/lib/input/input.element.js.map +1 -1
- package/target/lib/input-mask/input-mask.element.js +25 -29
- package/target/lib/input-mask/input-mask.element.js.map +1 -1
- package/target/lib/link/link.element.js +33 -42
- package/target/lib/link/link.element.js.map +1 -1
- package/target/lib/modal/modal-close/modal-close.element.js +17 -19
- package/target/lib/modal/modal-close/modal-close.element.js.map +1 -1
- package/target/lib/modal/modal-heading/modal-heading.element.js +10 -10
- package/target/lib/modal/modal-heading/modal-heading.element.js.map +1 -1
- package/target/lib/modal/modal.element.js +17 -22
- package/target/lib/modal/modal.element.js.map +1 -1
- package/target/lib/radio/radio-option/radio-option.element.js +34 -40
- package/target/lib/radio/radio-option/radio-option.element.js.map +1 -1
- package/target/lib/radio/radio.element.js +36 -44
- package/target/lib/radio/radio.element.js.map +1 -1
- package/target/lib/select/select-option/select-option.element.js +17 -22
- package/target/lib/select/select-option/select-option.element.js.map +1 -1
- package/target/lib/select/select.element.js +33 -41
- package/target/lib/select/select.element.js.map +1 -1
- package/target/lib/services/http.service.d.ts +3 -0
- package/target/lib/services/http.service.js +24 -0
- package/target/lib/services/http.service.js.map +1 -0
- package/target/lib/services/icon.service.d.ts +4 -0
- package/target/lib/services/icon.service.js +54 -0
- package/target/lib/services/icon.service.js.map +1 -0
- package/target/lib/services/icon.service.test.js +44 -0
- package/target/lib/services/icon.service.test.js.map +1 -0
- package/target/lib/side-nav/side-nav-item/side-nav-item.element.js +17 -19
- package/target/lib/side-nav/side-nav-item/side-nav-item.element.js.map +1 -1
- package/target/lib/side-nav/side-nav.element.js +15 -17
- package/target/lib/side-nav/side-nav.element.js.map +1 -1
- package/target/lib/step-indicator/step/step.element.d.ts +1 -1
- package/target/lib/step-indicator/step/step.element.js +28 -22
- package/target/lib/step-indicator/step/step.element.js.map +1 -1
- package/target/lib/step-indicator/step-indicator.element.d.ts +1 -1
- package/target/lib/step-indicator/step-indicator.element.js +20 -12
- package/target/lib/step-indicator/step-indicator.element.js.map +1 -1
- package/target/lib/summary-box/summary-box.element.js +10 -10
- package/target/lib/summary-box/summary-box.element.js.map +1 -1
- package/target/lib/tag/tag.element.js +15 -17
- package/target/lib/tag/tag.element.js.map +1 -1
- package/target/lib.d.ts +10 -0
- package/target/lib.js +10 -0
- package/target/lib.js.map +1 -1
- package/src/lib/icon/icon-element.test.ts +0 -0
- package/target/lib/icon/icon-element.test.js +0 -2
- package/target/lib/icon/icon-element.test.js.map +0 -1
- /package/target/lib/{icon/icon-element.test.d.ts → services/icon.service.test.d.ts} +0 -0
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/web-components";
|
|
2
|
+
import { html } from "lit";
|
|
3
|
+
|
|
4
|
+
import type { USACardElement } from "./card.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-card",
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
|
|
11
|
+
argTypes: {},
|
|
12
|
+
args: {},
|
|
13
|
+
} satisfies Meta<USACardElement>;
|
|
14
|
+
|
|
15
|
+
export default meta;
|
|
16
|
+
|
|
17
|
+
type Story = StoryObj<USACardElement>;
|
|
18
|
+
|
|
19
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
20
|
+
export const Primary: Story = {
|
|
21
|
+
render() {
|
|
22
|
+
return html`
|
|
23
|
+
<usa-card-group>
|
|
24
|
+
<usa-card>
|
|
25
|
+
<usa-card-header>Card</usa-card-header>
|
|
26
|
+
|
|
27
|
+
<usa-card-body>
|
|
28
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
|
|
29
|
+
earum tenetur quo cupiditate, eaque qui officia recusandae.
|
|
30
|
+
</usa-card-body>
|
|
31
|
+
|
|
32
|
+
<usa-card-footer>
|
|
33
|
+
<usa-button>Visit Florida Keys</usa-button>
|
|
34
|
+
</usa-card-footer>
|
|
35
|
+
</usa-card>
|
|
36
|
+
|
|
37
|
+
<usa-card>
|
|
38
|
+
<usa-card-media>
|
|
39
|
+
<img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
|
|
40
|
+
</usa-card-media>
|
|
41
|
+
|
|
42
|
+
<usa-card-header>Card with media</usa-card-header>
|
|
43
|
+
|
|
44
|
+
<usa-card-body>
|
|
45
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
|
|
46
|
+
earum tenetur quo cupiditate, eaque qui officia recusandae.
|
|
47
|
+
</usa-card-body>
|
|
48
|
+
|
|
49
|
+
<usa-card-footer>
|
|
50
|
+
<usa-button>Visit Florida Keys</usa-button>
|
|
51
|
+
</usa-card-footer>
|
|
52
|
+
</usa-card>
|
|
53
|
+
|
|
54
|
+
<usa-card>
|
|
55
|
+
<usa-card-header>Media with heaer first</usa-card-header>
|
|
56
|
+
|
|
57
|
+
<usa-card-media>
|
|
58
|
+
<img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
|
|
59
|
+
</usa-card-media>
|
|
60
|
+
|
|
61
|
+
<usa-card-body>
|
|
62
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
|
|
63
|
+
possimus similique nemo odit doloremque laudantium?
|
|
64
|
+
</usa-card-body>
|
|
65
|
+
|
|
66
|
+
<usa-card-footer>
|
|
67
|
+
<usa-button>Visit Florida Keys</usa-button>
|
|
68
|
+
</usa-card-footer>
|
|
69
|
+
</usa-card>
|
|
70
|
+
|
|
71
|
+
<usa-card>
|
|
72
|
+
<usa-card-media variant="inset">
|
|
73
|
+
<img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
|
|
74
|
+
</usa-card-media>
|
|
75
|
+
|
|
76
|
+
<usa-card-header>Inset media</usa-card-header>
|
|
77
|
+
|
|
78
|
+
<usa-card-body>
|
|
79
|
+
Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus
|
|
80
|
+
eget, tempus odio. Donec lectus ante, auctor eget cursus sed,
|
|
81
|
+
convallis quis magna. Orci varius natoque penatibus et magnis dis
|
|
82
|
+
parturient montes, nascetur ridiculus mus. Mauris mattis tellus
|
|
83
|
+
bibendum aliquet malesuada.
|
|
84
|
+
</usa-card-body>
|
|
85
|
+
|
|
86
|
+
<usa-card-footer>
|
|
87
|
+
<usa-button>Visit Florida Keys</usa-button>
|
|
88
|
+
</usa-card-footer>
|
|
89
|
+
</usa-card>
|
|
90
|
+
</usa-card-group>
|
|
91
|
+
`;
|
|
92
|
+
},
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export const Flag: Story = {
|
|
96
|
+
render() {
|
|
97
|
+
return html`
|
|
98
|
+
<usa-card-group variant="flag">
|
|
99
|
+
<usa-card variant="flag">
|
|
100
|
+
<usa-card-media>
|
|
101
|
+
<img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
|
|
102
|
+
</usa-card-media>
|
|
103
|
+
|
|
104
|
+
<usa-card-header>Card with media</usa-card-header>
|
|
105
|
+
|
|
106
|
+
<usa-card-body>
|
|
107
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
|
|
108
|
+
earum tenetur quo cupiditate, eaque qui officia recusandae.
|
|
109
|
+
</usa-card-body>
|
|
110
|
+
|
|
111
|
+
<usa-card-footer>
|
|
112
|
+
<usa-button>Visit Florida Keys</usa-button>
|
|
113
|
+
</usa-card-footer>
|
|
114
|
+
</usa-card>
|
|
115
|
+
|
|
116
|
+
<usa-card variant="flag">
|
|
117
|
+
<usa-card-media variant="inset">
|
|
118
|
+
<img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
|
|
119
|
+
</usa-card-media>
|
|
120
|
+
|
|
121
|
+
<usa-card-header>Card with media</usa-card-header>
|
|
122
|
+
|
|
123
|
+
<usa-card-body>
|
|
124
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
|
|
125
|
+
earum tenetur quo cupiditate, eaque qui officia recusandae.
|
|
126
|
+
</usa-card-body>
|
|
127
|
+
|
|
128
|
+
<usa-card-footer>
|
|
129
|
+
<usa-button>Visit Florida Keys</usa-button>
|
|
130
|
+
</usa-card-footer>
|
|
131
|
+
</usa-card>
|
|
132
|
+
</usa-card-group>
|
|
133
|
+
`;
|
|
134
|
+
},
|
|
135
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import "./card.element.js";
|
|
2
|
+
import "./card-body/card-body.element.js";
|
|
3
|
+
import "./card-footer/card-footer.element.js";
|
|
4
|
+
import "./card-group/card-group.element.js";
|
|
5
|
+
import "./card-header/card-header.element.js";
|
|
6
|
+
import "./card-media/card-media.element.js";
|
|
7
|
+
|
|
8
|
+
import { fixture, html, assert } from "@open-wc/testing";
|
|
9
|
+
|
|
10
|
+
import { USACardElement } from "./card.element.js";
|
|
11
|
+
|
|
12
|
+
describe("usa-card", () => {
|
|
13
|
+
it("should be accessible", async () => {
|
|
14
|
+
const card = await fixture<USACardElement>(html`
|
|
15
|
+
<usa-card-group>
|
|
16
|
+
<usa-card>
|
|
17
|
+
<usa-card-media>
|
|
18
|
+
<img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
|
|
19
|
+
</usa-card-media>
|
|
20
|
+
|
|
21
|
+
<usa-card-header>Card with media</usa-card-header>
|
|
22
|
+
|
|
23
|
+
<usa-card-body>
|
|
24
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
|
|
25
|
+
earum tenetur quo cupiditate, eaque qui officia recusandae.
|
|
26
|
+
</usa-card-body>
|
|
27
|
+
|
|
28
|
+
<usa-card-footer>
|
|
29
|
+
<usa-button>Visit Florida Keys</usa-button>
|
|
30
|
+
</usa-card-footer>
|
|
31
|
+
</usa-card>
|
|
32
|
+
</usa-card-group>
|
|
33
|
+
`);
|
|
34
|
+
|
|
35
|
+
return assert.isAccessible(card);
|
|
36
|
+
});
|
|
37
|
+
});
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { inject, injectable, Injector } from "@joist/di";
|
|
2
|
-
import { attr, css, element, html } from "@joist/element";
|
|
1
|
+
import { inject, injectable, injected, Injector, Provider } from "@joist/di";
|
|
2
|
+
import { attr, css, element, html, ready } from "@joist/element";
|
|
3
3
|
|
|
4
4
|
export class USAConfig {
|
|
5
|
-
iconPath = "";
|
|
5
|
+
iconPath: string = "";
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
@injectable()
|
|
8
9
|
@element({
|
|
9
10
|
tagName: "usa-config",
|
|
10
11
|
shadowDom: [
|
|
@@ -16,8 +17,7 @@ export class USAConfig {
|
|
|
16
17
|
html`<slot></slot>`,
|
|
17
18
|
],
|
|
18
19
|
})
|
|
19
|
-
|
|
20
|
-
export class USAConfigElement extends HTMLElement implements USAConfig {
|
|
20
|
+
export class USAConfigElement extends HTMLElement {
|
|
21
21
|
@attr({
|
|
22
22
|
name: "icon-path",
|
|
23
23
|
})
|
|
@@ -25,9 +25,22 @@ export class USAConfigElement extends HTMLElement implements USAConfig {
|
|
|
25
25
|
|
|
26
26
|
#injector = inject(Injector);
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
@injected()
|
|
29
|
+
onInjected() {
|
|
29
30
|
const { providers } = this.#injector();
|
|
31
|
+
const config = this;
|
|
32
|
+
|
|
33
|
+
const usaConfig: Provider<USAConfig> = {
|
|
34
|
+
provide: USAConfig,
|
|
35
|
+
factory() {
|
|
36
|
+
return {
|
|
37
|
+
get iconPath() {
|
|
38
|
+
return config.iconPath;
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
};
|
|
30
43
|
|
|
31
|
-
providers.push(
|
|
44
|
+
providers.push(usaConfig);
|
|
32
45
|
}
|
|
33
46
|
}
|
package/src/lib/define.ts
CHANGED
|
@@ -23,3 +23,9 @@ import "./step-indicator/step/step.element.js";
|
|
|
23
23
|
import "./modal/modal.element.js";
|
|
24
24
|
import "./modal/modal-close/modal-close.element.js";
|
|
25
25
|
import "./modal/modal-heading/modal-heading.element.js";
|
|
26
|
+
import "./card/card.element.js";
|
|
27
|
+
import "./card/card-header/card-header.element.js";
|
|
28
|
+
import "./card/card-body/card-body.element.js";
|
|
29
|
+
import "./card/card-footer/card-footer.element.js";
|
|
30
|
+
import "./card/card-media/card-media.element.js";
|
|
31
|
+
import "./card/card-group/card-group.element.js";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { attr, css, element } from "@joist/element";
|
|
2
|
-
import { inject, injectable } from "@joist/di";
|
|
2
|
+
import { inject, injectable, injected } from "@joist/di";
|
|
3
3
|
|
|
4
4
|
import { USAIcon } from "./icon-types.js";
|
|
5
|
-
import {
|
|
5
|
+
import { IconService } from "../services/icon.service.js";
|
|
6
6
|
|
|
7
7
|
declare global {
|
|
8
8
|
interface HTMLElementTagNameMap {
|
|
@@ -10,8 +10,6 @@ declare global {
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
export const ICON_CACHE: Map<string, Promise<string>> = new Map();
|
|
14
|
-
|
|
15
13
|
@element({
|
|
16
14
|
tagName: "usa-icon",
|
|
17
15
|
shadowDom: [
|
|
@@ -38,40 +36,28 @@ export class USAIconElement extends HTMLElement {
|
|
|
38
36
|
|
|
39
37
|
ariaHidden: string | null = "true";
|
|
40
38
|
|
|
41
|
-
#
|
|
42
|
-
#
|
|
43
|
-
|
|
39
|
+
#icon = inject(IconService);
|
|
40
|
+
#injected = false;
|
|
41
|
+
|
|
42
|
+
get #shadow() {
|
|
43
|
+
return this.shadowRoot!;
|
|
44
|
+
}
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
@injected()
|
|
47
|
+
onInjected() {
|
|
48
|
+
this.#injected = true;
|
|
47
49
|
this.#updateIcon();
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
attributeChangedCallback() {
|
|
51
|
-
if (this.#
|
|
53
|
+
if (this.#injected) {
|
|
52
54
|
this.#updateIcon();
|
|
53
55
|
}
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
async #updateIcon() {
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
async fetchIcon() {
|
|
61
|
-
const cached = ICON_CACHE.get(this.icon);
|
|
62
|
-
|
|
63
|
-
if (cached) {
|
|
64
|
-
return cached;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
const config = this.#config();
|
|
68
|
-
|
|
69
|
-
const svg = fetch(`${config.iconPath}/${this.icon}.svg`).then((res) =>
|
|
70
|
-
res.text()
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
ICON_CACHE.set(this.icon, svg);
|
|
59
|
+
const icon = this.#icon();
|
|
74
60
|
|
|
75
|
-
|
|
61
|
+
this.#shadow.append(await icon.getIcon(this.icon));
|
|
76
62
|
}
|
|
77
63
|
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Injector } from "@joist/di";
|
|
2
|
+
import { assert } from "@open-wc/testing";
|
|
3
|
+
|
|
4
|
+
import { HttpService } from "./http.service.js";
|
|
5
|
+
import { IconService } from "./icon.service.js";
|
|
6
|
+
|
|
7
|
+
describe("IconService", () => {
|
|
8
|
+
it("should fetch icon if not in cache", async () => {
|
|
9
|
+
let callCount = 0;
|
|
10
|
+
|
|
11
|
+
const app = new Injector([
|
|
12
|
+
{
|
|
13
|
+
provide: HttpService,
|
|
14
|
+
use: class extends HttpService {
|
|
15
|
+
async fetch(): Promise<Response> {
|
|
16
|
+
callCount++;
|
|
17
|
+
return new Response("<svg></svg>");
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
]);
|
|
22
|
+
|
|
23
|
+
const icon = app.inject(IconService);
|
|
24
|
+
|
|
25
|
+
const res = await icon.getIcon("test");
|
|
26
|
+
|
|
27
|
+
assert.equal(res.nodeName, "svg");
|
|
28
|
+
assert.equal(callCount, 1);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it("should not fetch new icon if the icon is found in the cache", async () => {
|
|
32
|
+
let callCount = 0;
|
|
33
|
+
|
|
34
|
+
const app = new Injector([
|
|
35
|
+
{
|
|
36
|
+
provide: HttpService,
|
|
37
|
+
use: class extends HttpService {
|
|
38
|
+
async fetch(): Promise<Response> {
|
|
39
|
+
callCount++;
|
|
40
|
+
return new Response("<svg></svg>");
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
]);
|
|
45
|
+
|
|
46
|
+
const icon = app.inject(IconService);
|
|
47
|
+
|
|
48
|
+
await icon.getIcon("test");
|
|
49
|
+
|
|
50
|
+
const res = await icon.getIcon("test");
|
|
51
|
+
|
|
52
|
+
assert.equal(res.nodeName, "svg");
|
|
53
|
+
assert.equal(callCount, 1);
|
|
54
|
+
});
|
|
55
|
+
});
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { inject, injectable } from "@joist/di";
|
|
2
|
+
|
|
3
|
+
import { HttpService } from "./http.service.js";
|
|
4
|
+
import { USAConfig } from "../config/config.element.js";
|
|
5
|
+
|
|
6
|
+
@injectable()
|
|
7
|
+
export class IconService {
|
|
8
|
+
#config = inject(USAConfig);
|
|
9
|
+
#http = inject(HttpService);
|
|
10
|
+
#iconCache: Map<string, Promise<HTMLTemplateElement>> = new Map();
|
|
11
|
+
|
|
12
|
+
async getIcon(icon: string): Promise<Node> {
|
|
13
|
+
const config = this.#config();
|
|
14
|
+
const http = this.#http();
|
|
15
|
+
|
|
16
|
+
const cached = this.#iconCache.get(icon);
|
|
17
|
+
|
|
18
|
+
if (cached) {
|
|
19
|
+
return cached.then((res) => {
|
|
20
|
+
return res.content.firstElementChild!.cloneNode(true);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const svg = http
|
|
25
|
+
.fetch(`${config.iconPath}${icon}.svg`)
|
|
26
|
+
.then((res) => {
|
|
27
|
+
switch (res.status) {
|
|
28
|
+
case 200:
|
|
29
|
+
return res.text();
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return "";
|
|
33
|
+
})
|
|
34
|
+
.then((res) => {
|
|
35
|
+
const template = document.createElement("template");
|
|
36
|
+
template.innerHTML = res;
|
|
37
|
+
|
|
38
|
+
return template;
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
this.#iconCache.set(icon, svg);
|
|
42
|
+
|
|
43
|
+
return svg.then((res) => {
|
|
44
|
+
return res.content.firstElementChild!.cloneNode(true);
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
}
|
package/src/lib.ts
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
export { USAConfigElement, USAConfig } from "./lib/config/config.element.js";
|
|
1
2
|
export { USAAlertElement } from "./lib/alert/alert.element.js";
|
|
2
3
|
export { USAButtonElement } from "./lib/button/button.element.js";
|
|
3
4
|
export { USACheckboxElement } from "./lib/checkbox/checkbox.element.js";
|
|
4
5
|
export { USADescriptionElement } from "./lib/description/description.element.js";
|
|
6
|
+
export { USAFileInputElement } from "./lib/file-input/file-input.element.js";
|
|
7
|
+
export { USAFileInputPreviewElement } from "./lib/file-input/file-input-preview/file-input-preview.element.js";
|
|
5
8
|
export { USAIconElement } from "./lib/icon/icon.element.js";
|
|
6
9
|
export { USATextInputElement } from "./lib/input/input.element.js";
|
|
7
10
|
export { USAInputMaskElement } from "./lib/input-mask/input-mask.element.js";
|
|
@@ -13,9 +16,16 @@ export { USASelecOptionElement } from "./lib/select/select-option/select-option.
|
|
|
13
16
|
export { USATagElement } from "./lib/tag/tag.element.js";
|
|
14
17
|
export { USAAccordionElement } from "./lib/accordion/accordion.element.js";
|
|
15
18
|
export { USASideNavElement } from "./lib/side-nav/side-nav.element.js";
|
|
19
|
+
export { USASideNavItemElement } from "./lib/side-nav/side-nav-item/side-nav-item.element.js";
|
|
16
20
|
export { USASummaryBoxElement } from "./lib/summary-box/summary-box.element.js";
|
|
17
21
|
export { USAStepIndicatorElement } from "./lib/step-indicator/step-indicator.element.js";
|
|
18
22
|
export { USAStepIndicatorStepElement } from "./lib/step-indicator/step/step.element.js";
|
|
19
23
|
export { USAModalElement } from "./lib/modal/modal.element.js";
|
|
20
24
|
export { USAModalCloseElement } from "./lib/modal/modal-close/modal-close.element.js";
|
|
21
25
|
export { USAModalHeadingElement } from "./lib/modal/modal-heading/modal-heading.element.js";
|
|
26
|
+
export { USACardElement } from "./lib/card/card.element.js";
|
|
27
|
+
export { USACardHeaderElement } from "./lib/card/card-header/card-header.element.js";
|
|
28
|
+
export { USACardBodyElement } from "./lib/card/card-body/card-body.element.js";
|
|
29
|
+
export { USACardFooterElement } from "./lib/card/card-footer/card-footer.element.js";
|
|
30
|
+
export { USACardImgElement } from "./lib/card/card-media/card-media.element.js";
|
|
31
|
+
export { USACardGroupElement } from "./lib/card/card-group/card-group.element.js";
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
2
|
import { attr, css, element, html, listen, query } from "@joist/element";
|
|
3
3
|
let USAAccordionElement = (() => {
|
|
4
|
-
var _USAAccordionElement_details, _USAAccordionElement_name_accessor_storage, _USAAccordionElement_open_accessor_storage;
|
|
5
4
|
let _classDecorators = [element({
|
|
6
5
|
tagName: "usa-accordion",
|
|
7
6
|
shadowDomOpts: {
|
|
@@ -110,19 +109,32 @@ let USAAccordionElement = (() => {
|
|
|
110
109
|
let _open_extraInitializers = [];
|
|
111
110
|
let _onClick_decorators;
|
|
112
111
|
let _onAccordionToggle_decorators;
|
|
113
|
-
var USAAccordionElement =
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
112
|
+
var USAAccordionElement = class extends _classSuper {
|
|
113
|
+
static { _classThis = this; }
|
|
114
|
+
static {
|
|
115
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
116
|
+
_name_decorators = [attr()];
|
|
117
|
+
_open_decorators = [attr()];
|
|
118
|
+
_onClick_decorators = [listen("click", "summary")];
|
|
119
|
+
_onAccordionToggle_decorators = [listen("usa::accordion::toggle", () => document.body)];
|
|
120
|
+
__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);
|
|
121
|
+
__esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
|
|
122
|
+
__esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
123
|
+
__esDecorate(this, null, _onAccordionToggle_decorators, { kind: "method", name: "onAccordionToggle", static: false, private: false, access: { has: obj => "onAccordionToggle" in obj, get: obj => obj.onAccordionToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
124
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
125
|
+
USAAccordionElement = _classThis = _classDescriptor.value;
|
|
126
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
127
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
119
128
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
129
|
+
#name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
|
|
130
|
+
get name() { return this.#name_accessor_storage; }
|
|
131
|
+
set name(value) { this.#name_accessor_storage = value; }
|
|
132
|
+
#open_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _open_initializers, false));
|
|
133
|
+
get open() { return this.#open_accessor_storage; }
|
|
134
|
+
set open(value) { this.#open_accessor_storage = value; }
|
|
135
|
+
#details = (__runInitializers(this, _open_extraInitializers), query("details"));
|
|
124
136
|
attributeChangedCallback() {
|
|
125
|
-
const details =
|
|
137
|
+
const details = this.#details();
|
|
126
138
|
details.open = this.open;
|
|
127
139
|
}
|
|
128
140
|
onClick(e) {
|
|
@@ -138,29 +150,11 @@ let USAAccordionElement = (() => {
|
|
|
138
150
|
}
|
|
139
151
|
}
|
|
140
152
|
};
|
|
141
|
-
_USAAccordionElement_details = new WeakMap();
|
|
142
|
-
_USAAccordionElement_name_accessor_storage = new WeakMap();
|
|
143
|
-
_USAAccordionElement_open_accessor_storage = new WeakMap();
|
|
144
|
-
__setFunctionName(_classThis, "USAAccordionElement");
|
|
145
|
-
(() => {
|
|
146
|
-
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
147
|
-
_name_decorators = [attr()];
|
|
148
|
-
_open_decorators = [attr()];
|
|
149
|
-
_onClick_decorators = [listen("click", "summary")];
|
|
150
|
-
_onAccordionToggle_decorators = [listen("usa::accordion::toggle", () => document.body)];
|
|
151
|
-
__esDecorate(_classThis, 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);
|
|
152
|
-
__esDecorate(_classThis, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
|
|
153
|
-
__esDecorate(_classThis, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
154
|
-
__esDecorate(_classThis, null, _onAccordionToggle_decorators, { kind: "method", name: "onAccordionToggle", static: false, private: false, access: { has: obj => "onAccordionToggle" in obj, get: obj => obj.onAccordionToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
155
|
-
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
156
|
-
USAAccordionElement = _classThis = _classDescriptor.value;
|
|
157
|
-
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
158
|
-
__runInitializers(_classThis, _classExtraInitializers);
|
|
159
|
-
})();
|
|
160
153
|
return USAAccordionElement = _classThis;
|
|
161
154
|
})();
|
|
162
155
|
export { USAAccordionElement };
|
|
163
156
|
class USAAccordionToggleEvent extends Event {
|
|
157
|
+
open;
|
|
164
158
|
get target() {
|
|
165
159
|
return super.target;
|
|
166
160
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.element.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAuG5D,mBAAmB
|
|
1
|
+
{"version":3,"file":"accordion.element.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAuG5D,mBAAmB;4BA/F/B,OAAO,CAAC;YACP,OAAO,EAAE,eAAe;YACxB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;gBACD,IAAI,CAAA;;;;;;;;;;;;;KAaH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCACjD,IAAI,EAAE;gCAGN,IAAI,EAAE;mCAUN,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;6CAO1B,MAAM,CAAC,wBAAwB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;YAnBtD,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,iKAAS,IAAI,6BAAJ,IAAI,mFAAS;YAUtB,wKAAA,OAAO,6DAIN;YAGD,sMAAA,iBAAiB,6DAMhB;YA5BH,6KA6BC;;;YA7BY,uDAAmB;;QAE9B,0BAFW,mDAAmB,8CAEd,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,wHAAgB,KAAK,GAAC;QAAtB,IAAS,IAAI,0CAAS;QAAtB,IAAS,IAAI,gDAAS;QAEtB,QAAQ,sDAAG,KAAK,CAAC,SAAS,CAAC,EAAC;QAE5B,wBAAwB;YACtB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,CAAC;QAGD,OAAO,CAAC,CAAQ;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,aAAa,CAAC,IAAI,uBAAuB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,CAAC;QAGD,iBAAiB,CAAC,CAA0B;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;YAC1C,CAAC;iBAAM,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;;;;SA5BU,mBAAmB;AA+BhC,MAAM,uBAAwB,SAAQ,KAAK;IACzC,IAAI,CAAC;IAEL,IAAI,MAAM;QACR,OAAO,KAAK,CAAC,MAA6B,CAAC;IAC7C,CAAC;IAED,YAAY,IAAa;QACvB,KAAK,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEnD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;CACF"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
2
|
import { attr, css, element, html, query } from "@joist/element";
|
|
3
3
|
import { USA_ALERT_CONFIG } from "./alert-types.js";
|
|
4
4
|
let USAAlertElement = (() => {
|
|
5
|
-
var _USAAlertElement_icon, _USAAlertElement_type_accessor_storage;
|
|
6
5
|
let _classDecorators = [element({
|
|
7
6
|
tagName: "usa-alert",
|
|
8
7
|
shadowDom: [
|
|
@@ -93,31 +92,26 @@ let USAAlertElement = (() => {
|
|
|
93
92
|
let _type_decorators;
|
|
94
93
|
let _type_initializers = [];
|
|
95
94
|
let _type_extraInitializers = [];
|
|
96
|
-
var USAAlertElement =
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
95
|
+
var USAAlertElement = class extends _classSuper {
|
|
96
|
+
static { _classThis = this; }
|
|
97
|
+
static {
|
|
98
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
99
|
+
_type_decorators = [attr()];
|
|
100
|
+
__esDecorate(this, 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);
|
|
101
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
102
|
+
USAAlertElement = _classThis = _classDescriptor.value;
|
|
103
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
104
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
101
105
|
}
|
|
102
|
-
|
|
103
|
-
|
|
106
|
+
#type_accessor_storage = __runInitializers(this, _type_initializers, "info");
|
|
107
|
+
get type() { return this.#type_accessor_storage; }
|
|
108
|
+
set type(value) { this.#type_accessor_storage = value; }
|
|
109
|
+
#icon = (__runInitializers(this, _type_extraInitializers), query("usa-icon"));
|
|
104
110
|
attributeChangedCallback() {
|
|
105
|
-
const icon =
|
|
111
|
+
const icon = this.#icon();
|
|
106
112
|
icon.icon = USA_ALERT_CONFIG[this.type].icon;
|
|
107
113
|
}
|
|
108
114
|
};
|
|
109
|
-
_USAAlertElement_icon = new WeakMap();
|
|
110
|
-
_USAAlertElement_type_accessor_storage = new WeakMap();
|
|
111
|
-
__setFunctionName(_classThis, "USAAlertElement");
|
|
112
|
-
(() => {
|
|
113
|
-
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
114
|
-
_type_decorators = [attr()];
|
|
115
|
-
__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);
|
|
116
|
-
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
117
|
-
USAAlertElement = _classThis = _classDescriptor.value;
|
|
118
|
-
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
119
|
-
__runInitializers(_classThis, _classExtraInitializers);
|
|
120
|
-
})();
|
|
121
115
|
return USAAlertElement = _classThis;
|
|
122
116
|
})();
|
|
123
117
|
export { USAAlertElement };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAgB,MAAM,kBAAkB,CAAC;IA2FrD,eAAe
|
|
1
|
+
{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAgB,MAAM,kBAAkB,CAAC;IA2FrD,eAAe;4BAnF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;KAcH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAFvC,6KAWC;;;YAXY,uDAAe;;QAE1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAErC,KAAK,sDAAG,KAAK,CAAC,UAAU,CAAC,EAAC;QAE1B,wBAAwB;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC/C,CAAC;;;;SAVU,eAAe"}
|