@noctuatech/uswds 1.3.15 → 1.3.16

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/lib/modal/modal.element.ts +14 -11
  3. package/src/lib/modal/modal.stories.ts +8 -12
  4. package/target/lib/modal/modal.element.d.ts +2 -1
  5. package/target/lib/modal/modal.element.js +14 -9
  6. package/target/lib/modal/modal.element.js.map +1 -1
  7. package/target/lib/modal/modal.stories.d.ts +2 -2
  8. package/target/lib/modal/modal.stories.js +4 -4
  9. package/target/lib/modal/modal.stories.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noctuatech/uswds",
3
- "version": "1.3.15",
3
+ "version": "1.3.16",
4
4
  "type": "module",
5
5
  "workspaces": [
6
6
  "packages/**"
package/src/lib/modal/modal.element.ts CHANGED
@@ -1,13 +1,13 @@
1
- import { css, element, html, listen, query } from "@joist/element";
1
+ import { css, element, html, listen, query } from '@joist/element';
2
2
 
3
3
  declare global {
4
4
  interface HTMLElementTagNameMap {
5
- "usa-modal": USAModalElement;
5
+ 'usa-modal': USAModalElement;
6
6
  }
7
7
  }
8
8
 
9
9
  @element({
10
- tagName: "usa-modal",
10
+ tagName: 'usa-modal',
11
11
  shadowDom: [
12
12
  css`
13
13
  * {
@@ -45,7 +45,7 @@ declare global {
45
45
  ],
46
46
  })
47
47
  export class USAModalElement extends HTMLElement {
48
- #dialog = query("dialog");
48
+ #dialog = query('dialog');
49
49
 
50
50
  openModal() {
51
51
  const dialog = this.#dialog();
@@ -59,10 +59,15 @@ export class USAModalElement extends HTMLElement {
59
59
  dialog.close();
60
60
  }
61
61
 
62
- @listen("click", () => document.body)
62
+ @listen('close', 'dialog')
63
+ onModalClose() {
64
+ this.dispatchEvent(new Event('close'));
65
+ }
66
+
67
+ @listen('click', () => document.body)
63
68
  onGlobalModalAction(e: Event) {
64
69
  if (e.target instanceof Element) {
65
- const modalTarget = e.target.getAttribute("modal-target");
70
+ const modalTarget = e.target.getAttribute('modal-target');
66
71
 
67
72
  if (modalTarget === this.id) {
68
73
  this.openModal();
@@ -70,15 +75,13 @@ export class USAModalElement extends HTMLElement {
70
75
  }
71
76
  }
72
77
 
73
- @listen("click", (host) => host)
78
+ @listen('click', (host) => host)
74
79
  onModalAction(e: Event) {
75
80
  if (e.target instanceof Element) {
76
- const modalAction = e.target.getAttribute("modal-action");
81
+ const modalAction = e.target.getAttribute('modal-action');
77
82
 
78
- if (modalAction === "close") {
83
+ if (modalAction === 'close') {
79
84
  this.closeModal();
80
-
81
- this.dispatchEvent(new Event("usa::modal::close"));
82
85
  }
83
86
  }
84
87
  }
package/src/lib/modal/modal.stories.ts CHANGED
@@ -1,12 +1,12 @@
1
- import type { Meta, StoryObj } from "@storybook/web-components";
2
- import { html } from "lit";
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import { html } from 'lit';
3
3
 
4
- import type { USAModalElement } from "./modal.element.js";
4
+ import type { USAModalElement } from './modal.element.js';
5
5
 
6
6
  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
7
  const meta = {
8
- title: "usa-modal",
9
- tags: ["autodocs"],
8
+ title: 'usa-modal',
9
+ tags: ['autodocs'],
10
10
  render() {
11
11
  return html`
12
12
  <usa-button modal-target="mymodal">Open Modal</usa-button>
@@ -14,16 +14,12 @@ const meta = {
14
14
  <usa-modal id="mymodal">
15
15
  <usa-modal-close></usa-modal-close>
16
16
 
17
- <usa-modal-heading>
18
- Are you sure you want to continue?
19
- </usa-modal-heading>
17
+ <usa-modal-heading> Are you sure you want to continue? </usa-modal-heading>
20
18
 
21
- <usa-input placeholder="foo@email.com" autofocus>
22
- Enter your email to continue
23
- </usa-input>
19
+ <usa-input placeholder="foo@email.com" autofocus> Enter your email to continue </usa-input>
24
20
 
25
21
  <usa-button modal-action="confirm">Yes I am sure</usa-button>
26
- <usa-button modal-action="cancel" variant="outline">Cancel</usa-button>
22
+ <usa-button modal-action="close" variant="outline">Cancel</usa-button>
27
23
  </usa-modal>
28
24
  `;
29
25
  },
package/target/lib/modal/modal.element.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  declare global {
2
2
  interface HTMLElementTagNameMap {
3
- "usa-modal": USAModalElement;
3
+ 'usa-modal': USAModalElement;
4
4
  }
5
5
  }
6
6
  export declare class USAModalElement extends HTMLElement {
7
7
  #private;
8
8
  openModal(): void;
9
9
  closeModal(): void;
10
+ onModalClose(): void;
10
11
  onGlobalModalAction(e: Event): void;
11
12
  onModalAction(e: Event): void;
12
13
  }
package/target/lib/modal/modal.element.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { __esDecorate, __runInitializers } from "tslib";
2
- import { css, element, html, listen, query } from "@joist/element";
2
+ import { css, element, html, listen, query } from '@joist/element';
3
3
  let USAModalElement = (() => {
4
4
  let _classDecorators = [element({
5
- tagName: "usa-modal",
5
+ tagName: 'usa-modal',
6
6
  shadowDom: [
7
7
  css `*{box-sizing:border-box}:host{display:contents}dialog{border:none;font-size:1.06rem;line-height:1.5;border-radius:.5rem;background:#fff;color:#1b1b1b;max-width:30rem;padding-top:4rem;padding-left:4rem;padding-right:4rem;padding-bottom:2rem;width:100%}::backdrop{background:rgba(0,0,0,.7)}`,
8
8
  html `<dialog part="dialog"><slot></slot></dialog>`,
@@ -13,14 +13,17 @@ let USAModalElement = (() => {
13
13
  let _classThis;
14
14
  let _classSuper = HTMLElement;
15
15
  let _instanceExtraInitializers = [];
16
+ let _onModalClose_decorators;
16
17
  let _onGlobalModalAction_decorators;
17
18
  let _onModalAction_decorators;
18
19
  var USAModalElement = class extends _classSuper {
19
20
  static { _classThis = this; }
20
21
  static {
21
22
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
22
- _onGlobalModalAction_decorators = [listen("click", () => document.body)];
23
- _onModalAction_decorators = [listen("click", (host) => host)];
23
+ _onModalClose_decorators = [listen('close', 'dialog')];
24
+ _onGlobalModalAction_decorators = [listen('click', () => document.body)];
25
+ _onModalAction_decorators = [listen('click', (host) => host)];
26
+ __esDecorate(this, null, _onModalClose_decorators, { kind: "method", name: "onModalClose", static: false, private: false, access: { has: obj => "onModalClose" in obj, get: obj => obj.onModalClose }, metadata: _metadata }, null, _instanceExtraInitializers);
24
27
  __esDecorate(this, null, _onGlobalModalAction_decorators, { kind: "method", name: "onGlobalModalAction", static: false, private: false, access: { has: obj => "onGlobalModalAction" in obj, get: obj => obj.onGlobalModalAction }, metadata: _metadata }, null, _instanceExtraInitializers);
25
28
  __esDecorate(this, null, _onModalAction_decorators, { kind: "method", name: "onModalAction", static: false, private: false, access: { has: obj => "onModalAction" in obj, get: obj => obj.onModalAction }, metadata: _metadata }, null, _instanceExtraInitializers);
26
29
  __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
@@ -28,7 +31,7 @@ let USAModalElement = (() => {
28
31
  if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
29
32
  __runInitializers(_classThis, _classExtraInitializers);
30
33
  }
31
- #dialog = (__runInitializers(this, _instanceExtraInitializers), query("dialog"));
34
+ #dialog = (__runInitializers(this, _instanceExtraInitializers), query('dialog'));
32
35
  openModal() {
33
36
  const dialog = this.#dialog();
34
37
  dialog.showModal();
@@ -37,9 +40,12 @@ let USAModalElement = (() => {
37
40
  const dialog = this.#dialog();
38
41
  dialog.close();
39
42
  }
43
+ onModalClose() {
44
+ this.dispatchEvent(new Event('close'));
45
+ }
40
46
  onGlobalModalAction(e) {
41
47
  if (e.target instanceof Element) {
42
- const modalTarget = e.target.getAttribute("modal-target");
48
+ const modalTarget = e.target.getAttribute('modal-target');
43
49
  if (modalTarget === this.id) {
44
50
  this.openModal();
45
51
  }
@@ -47,10 +53,9 @@ let USAModalElement = (() => {
47
53
  }
48
54
  onModalAction(e) {
49
55
  if (e.target instanceof Element) {
50
- const modalAction = e.target.getAttribute("modal-action");
51
- if (modalAction === "close") {
56
+ const modalAction = e.target.getAttribute('modal-action');
57
+ if (modalAction === 'close') {
52
58
  this.closeModal();
53
- this.dispatchEvent(new Event("usa::modal::close"));
54
59
  }
55
60
  }
56
61
  }
package/target/lib/modal/modal.element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.element.js","sourceRoot":"","sources":["../../../src/lib/modal/modal.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IA8CtD,eAAe;4BAtC3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;+BAAnB,SAAQ,WAAW;;;;+CAe7C,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;yCAWpC,MAAM,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC;YAVhC,4MAAA,mBAAmB,6DAQlB;YAGD,0LAAA,aAAa,6DAUZ;YArCH,6KAsCC;;;YAtCY,uDAAe;;QAC1B,OAAO,IADI,mDAAe,EAChB,KAAK,CAAC,QAAQ,CAAC,EAAC;QAE1B,SAAS;YACP,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,MAAM,CAAC,SAAS,EAAE,CAAC;QACrB,CAAC;QAED,UAAU;YACR,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;QAGD,mBAAmB,CAAC,CAAQ;YAC1B,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,EAAE,CAAC;gBAChC,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;gBAE1D,IAAI,WAAW,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;oBAC5B,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,CAAC;YACH,CAAC;QACH,CAAC;QAGD,aAAa,CAAC,CAAQ;YACpB,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,EAAE,CAAC;gBAChC,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;gBAE1D,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;oBAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;oBAElB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;gBACrD,CAAC;YACH,CAAC;QACH,CAAC;;;;SArCU,eAAe"}
1
+ {"version":3,"file":"modal.element.js","sourceRoot":"","sources":["../../../src/lib/modal/modal.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IA8CtD,eAAe;4BAtC3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;;+BAAnB,SAAQ,WAAW;;;;wCAe7C,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC;+CAKzB,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;yCAWpC,MAAM,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC;YAfhC,uLAAA,YAAY,6DAEX;YAGD,4MAAA,mBAAmB,6DAQlB;YAGD,0LAAA,aAAa,6DAQZ;YAxCH,6KAyCC;;;YAzCY,uDAAe;;QAC1B,OAAO,IADI,mDAAe,EAChB,KAAK,CAAC,QAAQ,CAAC,EAAC;QAE1B,SAAS;YACP,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,MAAM,CAAC,SAAS,EAAE,CAAC;QACrB,CAAC;QAED,UAAU;YACR,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;QAGD,YAAY;YACV,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACzC,CAAC;QAGD,mBAAmB,CAAC,CAAQ;YAC1B,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,EAAE,CAAC;gBAChC,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;gBAE1D,IAAI,WAAW,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;oBAC5B,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,CAAC;YACH,CAAC;QACH,CAAC;QAGD,aAAa,CAAC,CAAQ;YACpB,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,EAAE,CAAC;gBAChC,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;gBAE1D,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;oBAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,CAAC;YACH,CAAC;QACH,CAAC;;;;SAxCU,eAAe"}
package/target/lib/modal/modal.stories.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { StoryObj } from "@storybook/web-components";
2
- import type { USAModalElement } from "./modal.element.js";
1
+ import type { StoryObj } from '@storybook/web-components';
2
+ import type { USAModalElement } from './modal.element.js';
3
3
  declare const meta: {
4
4
  title: string;
5
5
  tags: string[];
package/target/lib/modal/modal.stories.js CHANGED
@@ -1,10 +1,10 @@
1
- import { html } from "lit";
1
+ import { html } from 'lit';
2
2
  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
3
3
  const meta = {
4
- title: "usa-modal",
5
- tags: ["autodocs"],
4
+ title: 'usa-modal',
5
+ tags: ['autodocs'],
6
6
  render() {
7
- return html `<usa-button modal-target="mymodal">Open Modal</usa-button><usa-modal id="mymodal"><usa-modal-close></usa-modal-close><usa-modal-heading>Are you sure you want to continue?</usa-modal-heading><usa-input placeholder="foo@email.com" autofocus>Enter your email to continue</usa-input><usa-button modal-action="confirm">Yes I am sure</usa-button><usa-button modal-action="cancel" variant="outline">Cancel</usa-button></usa-modal>`;
7
+ return html `<usa-button modal-target="mymodal">Open Modal</usa-button><usa-modal id="mymodal"><usa-modal-close></usa-modal-close><usa-modal-heading>Are you sure you want to continue?</usa-modal-heading><usa-input placeholder="foo@email.com" autofocus>Enter your email to continue</usa-input><usa-button modal-action="confirm">Yes I am sure</usa-button><usa-button modal-action="close" variant="outline">Cancel</usa-button></usa-modal>`;
8
8
  },
9
9
  argTypes: {},
10
10
  args: {},
package/target/lib/modal/modal.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/lib/modal/modal.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;KAiBV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
1
+ {"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/lib/modal/modal.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;KAaV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}