@justeattakeaway/pie-modal 0.4.0 → 0.6.0

package/.turbo/turbo-build.log

@@ -1,14 +1,19 @@
-[11:48:53] @custom-elements-manifest/analyzer: Created new manifest.
+[3:10:46 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
-vite v4.2.3 building for production...
+vite v4.3.9 building for production...
 transforming...
-✓ 27 modules transformed.
+✓ 28 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   5.93 kB │ gzip:  2.06 kB
-dist/react.js  59.15 kB │ gzip: 15.95 kB
+dist/index.js   7.43 kB │ gzip:  2.38 kB
+dist/react.js  59.04 kB │ gzip: 15.92 kB
+
+[vite:dts] Start generate declaration files...
+src/index.ts:27:9 - error TS2564: Property '_dialog' has no initializer and is not definitely assigned in the constructor.
 
-[vite:dts] Start generate declaration files...
-✓ built in 5.82s
-[vite:dts] Declaration files built in 5339ms.
+27         _dialog: HTMLDialogElement;
+           ~~~~~~~
 
+✓ built in 28.25s
+[vite:dts] Declaration files built in 26028ms.
+

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @justeattakeaway/pie-modal
 
+## 0.6.0
+
+### Minor Changes
+
+- [Changed] - Updated styles to use custom props ([#551](https://github.com/justeattakeaway/pie/pull/551)) by [@ashleynolan](https://github.com/ashleynolan)
+
+- [Added] - close button to modal ([#549](https://github.com/justeattakeaway/pie/pull/549)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+## 0.5.0
+
+### Minor Changes
+
+- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.js

@@ -1,14 +1,14 @@
-import { unsafeCSS as m, LitElement as u, html as f } from "lit";
-import { unsafeStatic as b, html as $ } from "lit/static-html.js";
-import { property as d } from "lit/decorators.js";
-import { property as y } from "lit/decorators/property.js";
-var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, O = (n, r, o, t) => {
-  for (var e = t > 1 ? void 0 : t ? P(r, o) : r, s = n.length - 1, i; s >= 0; s--)
-    (i = n[s]) && (e = (t ? i(r, o, e) : i(e)) || e);
-  return t && e && w(r, o, e), e;
+import { unsafeCSS as g, LitElement as v, html as m } from "lit";
+import { unsafeStatic as u, html as b } from "lit/static-html.js";
+import { property as s, query as _ } from "lit/decorators.js";
+import { property as w } from "lit/decorators/property.js";
+var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, P = (r, t, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? $(t, n) : t, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
+  return o && e && y(t, n, e), e;
 };
-const _ = (n) => {
-  class r extends n {
+const O = (r) => {
+  class t extends r {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -22,47 +22,47 @@ const _ = (n) => {
      * will not be reactive and is only computed once
      */
     get isRTL() {
-      var t;
-      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((t = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : t.direction) === "rtl";
+      var o;
+      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((o = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : o.direction) === "rtl";
     }
   }
-  return O([
-    y({ type: String })
-  ], r.prototype, "dir", 2), r;
-}, x = (n, r, o) => function(t, e) {
-  const s = `#${e}`;
-  Object.defineProperty(t, e, {
+  return P([
+    w({ type: String })
+  ], t.prototype, "dir", 2), t;
+}, C = (r, t, n) => function(o, e) {
+  const a = `#${e}`;
+  Object.defineProperty(o, e, {
     get() {
-      return this[s];
+      return this[a];
     },
     set(i) {
-      const h = this[s];
-      r.includes(i) ? this[s] = i : (console.error(
-        `<${n}> Invalid value "${i}" provided for property "${e}".`,
-        `Must be one of: ${r.join(" | ")}.`,
-        `Falling back to default value: "${o}"`
-      ), this[s] = o), this.requestUpdate(e, h);
+      const f = this[a];
+      t.includes(i) ? this[a] = i : (console.error(
+        `<${r}> Invalid value "${i}" provided for property "${e}".`,
+        `Must be one of: ${t.join(" | ")}.`,
+        `Falling back to default value: "${n}"`
+      ), this[a] = n), this.requestUpdate(e, f);
     }
   });
-}, C = (n) => function(r, o) {
-  const t = `#${o}`;
-  Object.defineProperty(r, o, {
+}, x = (r) => function(t, n) {
+  const o = `#${n}`;
+  Object.defineProperty(t, n, {
     get() {
-      return this[t];
+      return this[o];
     },
     set(e) {
-      const s = this[t];
-      (e == null || e === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[t] = e, this.requestUpdate(o, s);
+      const a = this[o];
+      (e == null || e === "") && console.error(`<${r}> Missing required attribute "${n}"`), this[o] = e, this.requestUpdate(n, a);
     }
   });
-}, j = `.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)}
+}, 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)}
 `;
-var T = Object.defineProperty, W = Object.getOwnPropertyDescriptor, z = (n, r, o, t) => {
-  for (var e = t > 1 ? void 0 : t ? W(r, o) : r, s = n.length - 1, i; s >= 0; s--)
-    (i = n[s]) && (e = (t ? i(r, o, e) : i(e)) || e);
-  return t && e && T(r, o, e), e;
+var D = Object.defineProperty, T = Object.getOwnPropertyDescriptor, E = (r, t, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? T(t, n) : t, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
+  return o && e && D(t, n, e), e;
 };
-class l extends u {
+class c extends v {
   constructor() {
     super(...arguments), this.propKeyValues = "";
   }
@@ -71,14 +71,14 @@ class l extends u {
   // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
   // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
   _renderPropKeyValues() {
-    return this.propKeyValues.split(",").map((r) => {
-      const [o, t] = r.split(":");
-      return f`<p class="c-webComponentTestWrapper-label"><b>${o}</b>: <code>${t}</code></p>`;
+    return this.propKeyValues.split(",").map((t) => {
+      const [n, o] = t.split(":");
+      return m`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${o}</code></p>`;
     });
   }
   // eslint-disable-next-line class-methods-use-this
   render() {
-    return f`
+    return m`
             <div class="c-webComponentTestWrapper">
                 ${this._renderPropKeyValues()}
                 <div class="c-webComponentTestWrapper-slot">
@@ -87,54 +87,70 @@ class l extends u {
             </div>`;
   }
 }
-l.styles = m(j);
-z([
-  d({ type: String })
-], l.prototype, "propKeyValues", 2);
-const v = "web-component-test-wrapper";
-customElements.get(v) || customElements.define(v, l);
-const q = `.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)}
-`;
-var p = /* @__PURE__ */ ((n) => (n.H1 = "h1", n.H2 = "h2", n.H3 = "h3", n.H4 = "h4", n.H5 = "h5", n.H6 = "h6", n))(p || {}), M = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (n, r, o, t) => {
-  for (var e = t > 1 ? void 0 : t ? S(r, o) : r, s = n.length - 1, i; s >= 0; s--)
-    (i = n[s]) && (e = (t ? i(r, o, e) : i(e)) || e);
-  return t && e && M(r, o, e), e;
+c.styles = g(z);
+E([
+  s({ type: String })
+], c.prototype, "propKeyValues", 2);
+const h = "web-component-test-wrapper";
+customElements.get(h) || customElements.define(h, c);
+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)}
+`, j = ["h1", "h2", "h3", "h4", "h5", "h6"], L = "pie-modal-close";
+var W = Object.defineProperty, V = Object.getOwnPropertyDescriptor, l = (r, t, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? V(t, n) : t, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
+  return o && e && W(t, n, e), e;
 };
-const g = "pie-modal";
-class a extends _(u) {
+const p = "pie-modal";
+class d extends O(v) {
   constructor() {
-    super(...arguments), this.isOpen = !1, this.headingLevel = p.H2;
+    super(...arguments), this.isOpen = !1, this.headingLevel = "h2", this._handleCloseDialog = () => {
+      this._dialog.close(), this._onDialogClose();
+    }, this._onDialogClose = () => {
+      const t = new CustomEvent(L);
+      this.dispatchEvent(t);
+    };
   }
   render() {
     const {
-      isOpen: r,
-      heading: o,
-      headingLevel: t
-    } = this, e = b(t);
-    return $`
-            <dialog class="c-modal" ?open="${r}">
-                <${e} class="c-modal-heading">${o}</${e}>
-                <div class="c-modal-contentWrapper">
-                    <slot></slot>
-                </div>
+      isOpen: t,
+      heading: n,
+      headingLevel: o = "h2"
+    } = this, e = u(o);
+    return b`
+            <dialog id="dialog" class="c-modal" ?open="${t}">
+                <header>
+                    <${e} class="c-modal-heading">${n}</${e}>
+                    <pie-icon-button
+                        @click="${this._handleCloseDialog}"
+                        variant="ghost-tertiary"
+                        class="c-modal-closeBtn"></pie-icon-button>
+                </header>
+                <article>
+                    <div class="c-modal-content">
+                        <slot></slot>
+                    </div>
+                </article>
             </dialog>
         `;
   }
 }
-a.styles = m(q);
-c([
-  d({ type: Boolean })
-], a.prototype, "isOpen", 2);
-c([
-  d({ type: String }),
-  C(g)
-], a.prototype, "heading", 2);
-c([
-  d(),
-  x(g, Object.values(p), p.H2)
-], a.prototype, "headingLevel", 2);
-customElements.define(g, a);
+d.styles = g(S);
+l([
+  s({ type: Boolean })
+], d.prototype, "isOpen", 2);
+l([
+  s({ type: String }),
+  x(p)
+], d.prototype, "heading", 2);
+l([
+  s(),
+  C(p, j, "h2")
+], d.prototype, "headingLevel", 2);
+l([
+  _("dialog")
+], d.prototype, "_dialog", 2);
+customElements.define(p, d);
 export {
-  p as HEADING_LEVELS,
-  a as PieModal
+  d as PieModal,
+  j as headingLevels
 };