@justeattakeaway/pie-modal 0.5.0 → 0.6.0

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 (14) hide show
  1. package/.turbo/turbo-build.log +11 -6
  2. package/CHANGELOG.md +8 -0
  3. package/dist/index.js +89 -73
  4. package/dist/react.js +209 -223
  5. package/dist/types/packages/components/pie-modal/src/defs.d.ts +19 -0
  6. package/dist/types/packages/components/pie-modal/src/defs.d.ts.map +1 -1
  7. package/dist/types/packages/components/pie-modal/src/index.d.ts +10 -1
  8. package/dist/types/packages/components/pie-modal/src/index.d.ts.map +1 -1
  9. package/package.json +3 -1
  10. package/src/defs.ts +20 -0
  11. package/src/index.ts +36 -9
  12. package/src/modal.scss +60 -49
  13. package/test/component/pie-modal.spec.ts +26 -0
  14. package/vite.config.js +1 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,14 +1,19 @@
1
- [3:48:32 PM] @custom-elements-manifest/analyzer: Created new manifest.
1
+ [3:10:46 PM] @custom-elements-manifest/analyzer: Created new manifest.
2
2
  react wrapper has been added!
3
- vite v4.2.3 building for production...
3
+ vite v4.3.9 building for production...
4
4
  transforming...
5
5
  ✓ 28 modules transformed.
6
6
  rendering chunks...
7
7
  computing gzip size...
8
- dist/index.js  5.83 kB │ gzip: 2.00 kB
9
- dist/react.js 59.15 kB │ gzip: 15.94 kB
8
+ dist/index.js  7.43 kB │ gzip: 2.38 kB
9
+ dist/react.js 59.04 kB │ gzip: 15.92 kB
10
10
  
11
11
  [vite:dts] Start generate declaration files...
12
- ✓ built in 30.45s
13
- [vite:dts] Declaration files built in 28192ms.
12
+ src/index.ts:27:9 - error TS2564: Property '_dialog' has no initializer and is not definitely assigned in the constructor.
13
+
14
+ 27 _dialog: HTMLDialogElement;
15
+    ~~~~~~~
16
+
17
+ ✓ built in 28.25s
18
+ [vite:dts] Declaration files built in 26028ms.
14
19
  
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @justeattakeaway/pie-modal
2
2
 
3
+ ## 0.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [Changed] - Updated styles to use custom props ([#551](https://github.com/justeattakeaway/pie/pull/551)) by [@ashleynolan](https://github.com/ashleynolan)
8
+
9
+ - [Added] - close button to modal ([#549](https://github.com/justeattakeaway/pie/pull/549)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
10
+
3
11
  ## 0.5.0
4
12
 
5
13
  ### Minor Changes
package/dist/index.js CHANGED
@@ -1,14 +1,14 @@
1
- import { unsafeCSS as h, LitElement as v, html as g } from "lit";
1
+ import { unsafeCSS as g, LitElement as v, html as m } from "lit";
2
2
  import { unsafeStatic as u, html as b } from "lit/static-html.js";
3
- import { property as d } from "lit/decorators.js";
4
- import { property as $ } from "lit/decorators/property.js";
5
- var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, P = (s, r, n, t) => {
6
- for (var e = t > 1 ? void 0 : t ? w(r, n) : r, o = s.length - 1, i; o >= 0; o--)
7
- (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
8
- return t && e && y(r, n, e), e;
3
+ import { property as s, query as _ } from "lit/decorators.js";
4
+ import { property as w } from "lit/decorators/property.js";
5
+ var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, P = (r, t, n, o) => {
6
+ for (var e = o > 1 ? void 0 : o ? $(t, n) : t, a = r.length - 1, i; a >= 0; a--)
7
+ (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
8
+ return o && e && y(t, n, e), e;
9
9
  };
10
- const _ = (s) => {
11
- class r extends s {
10
+ const O = (r) => {
11
+ class t extends r {
12
12
  constructor() {
13
13
  super(...arguments), this.dir = "";
14
14
  }
@@ -22,47 +22,47 @@ const _ = (s) => {
22
22
  * will not be reactive and is only computed once
23
23
  */
24
24
  get isRTL() {
25
- var t;
26
- return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((t = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : t.direction) === "rtl";
25
+ var o;
26
+ return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((o = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : o.direction) === "rtl";
27
27
  }
28
28
  }
29
29
  return P([
30
- $({ type: String })
31
- ], r.prototype, "dir", 2), r;
32
- }, O = (s, r, n) => function(t, e) {
33
- const o = `#${e}`;
34
- Object.defineProperty(t, e, {
30
+ w({ type: String })
31
+ ], t.prototype, "dir", 2), t;
32
+ }, C = (r, t, n) => function(o, e) {
33
+ const a = `#${e}`;
34
+ Object.defineProperty(o, e, {
35
35
  get() {
36
- return this[o];
36
+ return this[a];
37
37
  },
38
38
  set(i) {
39
- const m = this[o];
40
- r.includes(i) ? this[o] = i : (console.error(
41
- `<${s}> Invalid value "${i}" provided for property "${e}".`,
42
- `Must be one of: ${r.join(" | ")}.`,
39
+ const f = this[a];
40
+ t.includes(i) ? this[a] = i : (console.error(
41
+ `<${r}> Invalid value "${i}" provided for property "${e}".`,
42
+ `Must be one of: ${t.join(" | ")}.`,
43
43
  `Falling back to default value: "${n}"`
44
- ), this[o] = n), this.requestUpdate(e, m);
44
+ ), this[a] = n), this.requestUpdate(e, f);
45
45
  }
46
46
  });
47
- }, x = (s) => function(r, n) {
48
- const t = `#${n}`;
49
- Object.defineProperty(r, n, {
47
+ }, x = (r) => function(t, n) {
48
+ const o = `#${n}`;
49
+ Object.defineProperty(t, n, {
50
50
  get() {
51
- return this[t];
51
+ return this[o];
52
52
  },
53
53
  set(e) {
54
- const o = this[t];
55
- (e == null || e === "") && console.error(`<${s}> Missing required attribute "${n}"`), this[t] = e, this.requestUpdate(n, o);
54
+ const a = this[o];
55
+ (e == null || e === "") && console.error(`<${r}> Missing required attribute "${n}"`), this[o] = e, this.requestUpdate(n, a);
56
56
  }
57
57
  });
58
- }, C = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
58
+ }, z = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
59
59
  `;
60
- var T = Object.defineProperty, W = Object.getOwnPropertyDescriptor, j = (s, r, n, t) => {
61
- for (var e = t > 1 ? void 0 : t ? W(r, n) : r, o = s.length - 1, i; o >= 0; o--)
62
- (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
63
- return t && e && T(r, n, e), e;
60
+ var D = Object.defineProperty, T = Object.getOwnPropertyDescriptor, E = (r, t, n, o) => {
61
+ for (var e = o > 1 ? void 0 : o ? T(t, n) : t, a = r.length - 1, i; a >= 0; a--)
62
+ (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
63
+ return o && e && D(t, n, e), e;
64
64
  };
65
- class p extends v {
65
+ class c extends v {
66
66
  constructor() {
67
67
  super(...arguments), this.propKeyValues = "";
68
68
  }
@@ -71,14 +71,14 @@ class p extends v {
71
71
  // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
72
72
  // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
73
73
  _renderPropKeyValues() {
74
- return this.propKeyValues.split(",").map((r) => {
75
- const [n, t] = r.split(":");
76
- return g`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${t}</code></p>`;
74
+ return this.propKeyValues.split(",").map((t) => {
75
+ const [n, o] = t.split(":");
76
+ return m`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${o}</code></p>`;
77
77
  });
78
78
  }
79
79
  // eslint-disable-next-line class-methods-use-this
80
80
  render() {
81
- return g`
81
+ return m`
82
82
  <div class="c-webComponentTestWrapper">
83
83
  ${this._renderPropKeyValues()}
84
84
  <div class="c-webComponentTestWrapper-slot">
@@ -87,54 +87,70 @@ class p extends v {
87
87
  </div>`;
88
88
  }
89
89
  }
90
- p.styles = h(C);
91
- j([
92
- d({ type: String })
93
- ], p.prototype, "propKeyValues", 2);
94
- const f = "web-component-test-wrapper";
95
- customElements.get(f) || customElements.define(f, p);
96
- const S = `.c-modal{border-radius:var(--dt-radius-rounded-d);border:none;font-family:var(--dt-font-interactive-m-family);background-color:var(--dt-color-container-default);padding:0;inline-size:600px;box-shadow:var(--dt-elevation-04)}.c-modal .c-modal-heading{font-size:calc(var(--dt-font-heading-m-size--wide) * 1px);line-height:calc(var(--dt-font-heading-m-line-height--wide) * 1px);font-weight:var(--dt-font-heading-m-weight);margin:0;padding-block:var(--dt-spacing-e) var(--dt-spacing-d);padding-inline:var(--dt-spacing-e)}.c-modal .c-modal-contentWrapper{font-size:calc(var(--dt-font-size-16) * 1px);line-height:calc(var(--dt-font-size-16-line-height) * 1px);font-weight:var(--dt-font-weight-regular);padding-block:var(--dt-spacing-a) var(--dt-spacing-e);padding-inline:var(--dt-spacing-e)}
97
- `, z = ["h1", "h2", "h3", "h4", "h5", "h6"];
98
- var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (s, r, n, t) => {
99
- for (var e = t > 1 ? void 0 : t ? D(r, n) : r, o = s.length - 1, i; o >= 0; o--)
100
- (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
101
- return t && e && L(r, n, e), e;
90
+ c.styles = g(z);
91
+ E([
92
+ s({ type: String })
93
+ ], c.prototype, "propKeyValues", 2);
94
+ const h = "web-component-test-wrapper";
95
+ customElements.get(h) || customElements.define(h, c);
96
+ const S = `.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;inline-size:var(--modal-size-m);box-shadow:var(--modal-elevation)}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);--modal-header-padding: var(--dt-spacing-e);--modal-header-padding-block-end: var(--dt-spacing-d);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;padding-block:var(--modal-header-padding) var(--modal-header-padding-block-end);padding-inline:var(--modal-header-padding)}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding: var(--dt-spacing-e);--modal-content-padding-block-start: var(--dt-spacing-a);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-block:var(--modal-content-padding-block-start) var(--modal-content-padding);padding-inline:var(--modal-content-padding)}.c-modal .c-modal-closeBtn{position:absolute;right:var(--dt-spacing-d);top:var(--dt-spacing-d)}
97
+ `, j = ["h1", "h2", "h3", "h4", "h5", "h6"], L = "pie-modal-close";
98
+ var W = Object.defineProperty, V = Object.getOwnPropertyDescriptor, l = (r, t, n, o) => {
99
+ for (var e = o > 1 ? void 0 : o ? V(t, n) : t, a = r.length - 1, i; a >= 0; a--)
100
+ (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
101
+ return o && e && W(t, n, e), e;
102
102
  };
103
- const c = "pie-modal";
104
- class a extends _(v) {
103
+ const p = "pie-modal";
104
+ class d extends O(v) {
105
105
  constructor() {
106
- super(...arguments), this.isOpen = !1, this.headingLevel = "h2";
106
+ super(...arguments), this.isOpen = !1, this.headingLevel = "h2", this._handleCloseDialog = () => {
107
+ this._dialog.close(), this._onDialogClose();
108
+ }, this._onDialogClose = () => {
109
+ const t = new CustomEvent(L);
110
+ this.dispatchEvent(t);
111
+ };
107
112
  }
108
113
  render() {
109
114
  const {
110
- isOpen: r,
115
+ isOpen: t,
111
116
  heading: n,
112
- headingLevel: t
113
- } = this, e = u(t);
117
+ headingLevel: o = "h2"
118
+ } = this, e = u(o);
114
119
  return b`
115
- <dialog class="c-modal" ?open="${r}">
116
- <${e} class="c-modal-heading">${n}</${e}>
117
- <div class="c-modal-contentWrapper">
118
- <slot></slot>
119
- </div>
120
+ <dialog id="dialog" class="c-modal" ?open="${t}">
121
+ <header>
122
+ <${e} class="c-modal-heading">${n}</${e}>
123
+ <pie-icon-button
124
+ @click="${this._handleCloseDialog}"
125
+ variant="ghost-tertiary"
126
+ class="c-modal-closeBtn"></pie-icon-button>
127
+ </header>
128
+ <article>
129
+ <div class="c-modal-content">
130
+ <slot></slot>
131
+ </div>
132
+ </article>
120
133
  </dialog>
121
134
  `;
122
135
  }
123
136
  }
124
- a.styles = h(S);
137
+ d.styles = g(S);
138
+ l([
139
+ s({ type: Boolean })
140
+ ], d.prototype, "isOpen", 2);
125
141
  l([
126
- d({ type: Boolean })
127
- ], a.prototype, "isOpen", 2);
142
+ s({ type: String }),
143
+ x(p)
144
+ ], d.prototype, "heading", 2);
128
145
  l([
129
- d({ type: String }),
130
- x(c)
131
- ], a.prototype, "heading", 2);
146
+ s(),
147
+ C(p, j, "h2")
148
+ ], d.prototype, "headingLevel", 2);
132
149
  l([
133
- d(),
134
- O(c, z, "h2")
135
- ], a.prototype, "headingLevel", 2);
136
- customElements.define(c, a);
150
+ _("dialog")
151
+ ], d.prototype, "_dialog", 2);
152
+ customElements.define(p, d);
137
153
  export {
138
- a as PieModal,
139
- z as headingLevels
154
+ d as PieModal,
155
+ j as headingLevels
140
156
  };