@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.
Files changed (114) hide show
  1. package/assets/img/built-to-grow--alt.jpg +0 -0
  2. package/assets/uswds.min.js +1 -1
  3. package/package.json +5 -5
  4. package/src/lib/card/card-body/card-body.element.ts +23 -0
  5. package/src/lib/card/card-footer/card-footer.element.ts +21 -0
  6. package/src/lib/card/card-group/card-group.element.ts +30 -0
  7. package/src/lib/card/card-header/card-header.element.ts +31 -0
  8. package/src/lib/card/card-media/card-media.element.ts +50 -0
  9. package/src/lib/card/card.element.ts +53 -0
  10. package/src/lib/card/card.stories.ts +135 -0
  11. package/src/lib/card/card.test.ts +37 -0
  12. package/src/lib/config/config.element.ts +20 -7
  13. package/src/lib/define.ts +6 -0
  14. package/src/lib/icon/icon.element.ts +14 -28
  15. package/src/lib/services/http.service.ts +8 -0
  16. package/src/lib/services/icon.service.test.ts +55 -0
  17. package/src/lib/services/icon.service.ts +47 -0
  18. package/src/lib.ts +10 -0
  19. package/target/lib/accordion/accordion.element.js +26 -32
  20. package/target/lib/accordion/accordion.element.js.map +1 -1
  21. package/target/lib/alert/alert.element.js +16 -22
  22. package/target/lib/alert/alert.element.js.map +1 -1
  23. package/target/lib/button/button.element.js +60 -73
  24. package/target/lib/button/button.element.js.map +1 -1
  25. package/target/lib/card/card-body/card-body.element.d.ts +7 -0
  26. package/target/lib/card/card-body/card-body.element.js +35 -0
  27. package/target/lib/card/card-body/card-body.element.js.map +1 -0
  28. package/target/lib/card/card-footer/card-footer.element.d.ts +7 -0
  29. package/target/lib/card/card-footer/card-footer.element.js +33 -0
  30. package/target/lib/card/card-footer/card-footer.element.js.map +1 -0
  31. package/target/lib/card/card-group/card-group.element.d.ts +8 -0
  32. package/target/lib/card/card-group/card-group.element.js +51 -0
  33. package/target/lib/card/card-group/card-group.element.js.map +1 -0
  34. package/target/lib/card/card-header/card-header.element.d.ts +7 -0
  35. package/target/lib/card/card-header/card-header.element.js +43 -0
  36. package/target/lib/card/card-header/card-header.element.js.map +1 -0
  37. package/target/lib/card/card-media/card-media.element.d.ts +8 -0
  38. package/target/lib/card/card-media/card-media.element.js +71 -0
  39. package/target/lib/card/card-media/card-media.element.js.map +1 -0
  40. package/target/lib/card/card.element.d.ts +9 -0
  41. package/target/lib/card/card.element.js +79 -0
  42. package/target/lib/card/card.element.js.map +1 -0
  43. package/target/lib/card/card.stories.d.ts +12 -0
  44. package/target/lib/card/card.stories.js +126 -0
  45. package/target/lib/card/card.stories.js.map +1 -0
  46. package/target/lib/card/card.test.d.ts +6 -0
  47. package/target/lib/card/card.test.js +33 -0
  48. package/target/lib/card/card.test.js.map +1 -0
  49. package/target/lib/checkbox/checkbox.element.js +44 -54
  50. package/target/lib/checkbox/checkbox.element.js.map +1 -1
  51. package/target/lib/config/config.element.d.ts +2 -2
  52. package/target/lib/config/config.element.js +39 -32
  53. package/target/lib/config/config.element.js.map +1 -1
  54. package/target/lib/define.d.ts +6 -0
  55. package/target/lib/define.js +6 -0
  56. package/target/lib/define.js.map +1 -1
  57. package/target/lib/description/description.element.js +10 -10
  58. package/target/lib/description/description.element.js.map +1 -1
  59. package/target/lib/file-input/file-input-preview/file-input-preview.element.js +23 -30
  60. package/target/lib/file-input/file-input-preview/file-input-preview.element.js.map +1 -1
  61. package/target/lib/file-input/file-input.element.js +46 -58
  62. package/target/lib/file-input/file-input.element.js.map +1 -1
  63. package/target/lib/icon/icon.element.d.ts +1 -3
  64. package/target/lib/icon/icon.element.js +34 -48
  65. package/target/lib/icon/icon.element.js.map +1 -1
  66. package/target/lib/input/input.element.js +50 -60
  67. package/target/lib/input/input.element.js.map +1 -1
  68. package/target/lib/input-mask/input-mask.element.js +25 -29
  69. package/target/lib/input-mask/input-mask.element.js.map +1 -1
  70. package/target/lib/link/link.element.js +33 -42
  71. package/target/lib/link/link.element.js.map +1 -1
  72. package/target/lib/modal/modal-close/modal-close.element.js +17 -19
  73. package/target/lib/modal/modal-close/modal-close.element.js.map +1 -1
  74. package/target/lib/modal/modal-heading/modal-heading.element.js +10 -10
  75. package/target/lib/modal/modal-heading/modal-heading.element.js.map +1 -1
  76. package/target/lib/modal/modal.element.js +17 -22
  77. package/target/lib/modal/modal.element.js.map +1 -1
  78. package/target/lib/radio/radio-option/radio-option.element.js +34 -40
  79. package/target/lib/radio/radio-option/radio-option.element.js.map +1 -1
  80. package/target/lib/radio/radio.element.js +36 -44
  81. package/target/lib/radio/radio.element.js.map +1 -1
  82. package/target/lib/select/select-option/select-option.element.js +17 -22
  83. package/target/lib/select/select-option/select-option.element.js.map +1 -1
  84. package/target/lib/select/select.element.js +33 -41
  85. package/target/lib/select/select.element.js.map +1 -1
  86. package/target/lib/services/http.service.d.ts +3 -0
  87. package/target/lib/services/http.service.js +24 -0
  88. package/target/lib/services/http.service.js.map +1 -0
  89. package/target/lib/services/icon.service.d.ts +4 -0
  90. package/target/lib/services/icon.service.js +54 -0
  91. package/target/lib/services/icon.service.js.map +1 -0
  92. package/target/lib/services/icon.service.test.js +44 -0
  93. package/target/lib/services/icon.service.test.js.map +1 -0
  94. package/target/lib/side-nav/side-nav-item/side-nav-item.element.js +17 -19
  95. package/target/lib/side-nav/side-nav-item/side-nav-item.element.js.map +1 -1
  96. package/target/lib/side-nav/side-nav.element.js +15 -17
  97. package/target/lib/side-nav/side-nav.element.js.map +1 -1
  98. package/target/lib/step-indicator/step/step.element.d.ts +1 -1
  99. package/target/lib/step-indicator/step/step.element.js +28 -22
  100. package/target/lib/step-indicator/step/step.element.js.map +1 -1
  101. package/target/lib/step-indicator/step-indicator.element.d.ts +1 -1
  102. package/target/lib/step-indicator/step-indicator.element.js +20 -12
  103. package/target/lib/step-indicator/step-indicator.element.js.map +1 -1
  104. package/target/lib/summary-box/summary-box.element.js +10 -10
  105. package/target/lib/summary-box/summary-box.element.js.map +1 -1
  106. package/target/lib/tag/tag.element.js +15 -17
  107. package/target/lib/tag/tag.element.js.map +1 -1
  108. package/target/lib.d.ts +10 -0
  109. package/target/lib.js +10 -0
  110. package/target/lib.js.map +1 -1
  111. package/src/lib/icon/icon-element.test.ts +0 -0
  112. package/target/lib/icon/icon-element.test.js +0 -2
  113. package/target/lib/icon/icon-element.test.js.map +0 -1
  114. /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
- @injectable()
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
- connectedCallback() {
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({ provide: USAConfig, factory: () => this });
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 { USAConfig } from "../config/config.element.js";
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
- #shadow = this.attachShadow({ mode: "open" });
42
- #config = inject(USAConfig);
43
- #connected = false;
39
+ #icon = inject(IconService);
40
+ #injected = false;
41
+
42
+ get #shadow() {
43
+ return this.shadowRoot!;
44
+ }
44
45
 
45
- connectedCallback() {
46
- this.#connected = true;
46
+ @injected()
47
+ onInjected() {
48
+ this.#injected = true;
47
49
  this.#updateIcon();
48
50
  }
49
51
 
50
52
  attributeChangedCallback() {
51
- if (this.#connected) {
53
+ if (this.#injected) {
52
54
  this.#updateIcon();
53
55
  }
54
56
  }
55
57
 
56
58
  async #updateIcon() {
57
- this.#shadow.innerHTML = await this.fetchIcon();
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
- return svg;
61
+ this.#shadow.append(await icon.getIcon(this.icon));
76
62
  }
77
63
  }
@@ -0,0 +1,8 @@
1
+ import { injectable } from "@joist/di";
2
+
3
+ @injectable()
4
+ export class HttpService {
5
+ fetch(input: RequestInfo | URL, init?: RequestInit) {
6
+ return fetch(input, init);
7
+ }
8
+ }
@@ -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 { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
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 = _classThis = class extends _classSuper {
114
- constructor() {
115
- super(...arguments);
116
- _USAAccordionElement_name_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, "")));
117
- _USAAccordionElement_open_accessor_storage.set(this, (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _open_initializers, false)));
118
- _USAAccordionElement_details.set(this, (__runInitializers(this, _open_extraInitializers), query("details")));
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
- get name() { return __classPrivateFieldGet(this, _USAAccordionElement_name_accessor_storage, "f"); }
121
- set name(value) { __classPrivateFieldSet(this, _USAAccordionElement_name_accessor_storage, value, "f"); }
122
- get open() { return __classPrivateFieldGet(this, _USAAccordionElement_open_accessor_storage, "f"); }
123
- set open(value) { __classPrivateFieldSet(this, _USAAccordionElement_open_accessor_storage, value, "f"); }
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 = __classPrivateFieldGet(this, _USAAccordionElement_details, "f").call(this);
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;;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;;;;;;;;;;gDAAnB,SAAQ,WAAW;;;YAEzC,sDAFE,mDAAmB,8CAEd,EAAE,IAAC;YAGV,oJAAO,KAAK,IAAC;YAEtB,0FAAW,KAAK,CAAC,SAAS,CAAC,GAAC;QAsB9B,CAAC;QA3BC,IAAS,IAAI,4FAAM;QAAnB,IAAS,IAAI,iGAAM;QAGnB,IAAS,IAAI,4FAAS;QAAtB,IAAS,IAAI,iGAAS;QAItB,wBAAwB;YACtB,MAAM,OAAO,GAAG,uBAAA,IAAI,oCAAS,MAAb,IAAI,CAAW,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;;;;;;;;4BA3BA,IAAI,EAAE;4BAGN,IAAI,EAAE;+BAUN,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;yCAO1B,MAAM,CAAC,wBAAwB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;QAnBtD,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAGnB,uKAAS,IAAI,6BAAJ,IAAI,mFAAS;QAUtB,8KAAA,OAAO,6DAIN;QAGD,4MAAA,iBAAiB,6DAMhB;QA5BH,6KA6BC;;;QA7BY,uDAAmB;;;;SAAnB,mBAAmB;AA+BhC,MAAM,uBAAwB,SAAQ,KAAK;IAGzC,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
+ {"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 { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
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 = _classThis = class extends _classSuper {
97
- constructor() {
98
- super(...arguments);
99
- _USAAlertElement_type_accessor_storage.set(this, __runInitializers(this, _type_initializers, "info"));
100
- _USAAlertElement_icon.set(this, (__runInitializers(this, _type_extraInitializers), query("usa-icon")));
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
- get type() { return __classPrivateFieldGet(this, _USAAlertElement_type_accessor_storage, "f"); }
103
- set type(value) { __classPrivateFieldSet(this, _USAAlertElement_type_accessor_storage, value, "f"); }
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 = __classPrivateFieldGet(this, _USAAlertElement_icon, "f").call(this);
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;;4BAnF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;KAcH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;4CAAnB,SAAQ,WAAW;;;YAErC,6FAAqB,MAAM,GAAC;YAErC,mFAAQ,KAAK,CAAC,UAAU,CAAC,GAAC;QAO5B,CAAC;QATC,IAAS,IAAI,wFAAwB;QAArC,IAAS,IAAI,6FAAwB;QAIrC,wBAAwB;YACtB,MAAM,IAAI,GAAG,uBAAA,IAAI,6BAAM,MAAV,IAAI,CAAQ,CAAC;YAE1B,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC/C,CAAC;;;;;;;4BATA,IAAI,EAAE;QACP,uKAAS,IAAI,6BAAJ,IAAI,mFAAwB;QAFvC,6KAWC;;;QAXY,uDAAe;;;;SAAf,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"}