@justeattakeaway/pie-modal 0.38.3 → 0.38.4

package/dist/index.js

@@ -1,4 +1,4 @@
-import { LitElement as P, nothing as s, unsafeCSS as T } from "lit";
+import { LitElement as T, nothing as s, unsafeCSS as P } from "lit";
 import { html as m, unsafeStatic as F } from "lit/static-html.js";
 import { property as d, query as N } from "lit/decorators.js";
 import "@justeattakeaway/pie-button";
@@ -8,13 +8,13 @@ import "@justeattakeaway/pie-icons-webc/IconClose";
 import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
 import "@justeattakeaway/pie-icons-webc/IconChevronRight";
 import "@justeattakeaway/pie-spinner";
-function W(n) {
-  if (Array.isArray(n)) {
-    for (var e = 0, i = Array(n.length); e < n.length; e++)
-      i[e] = n[e];
+function W(a) {
+  if (Array.isArray(a)) {
+    for (var e = 0, i = Array(a.length); e < a.length; e++)
+      i[e] = a[e];
     return i;
   } else
-    return Array.from(n);
+    return Array.from(a);
 }
 var C = !1;
 if (typeof window < "u") {
@@ -74,13 +74,13 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
 };
 const G = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.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;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large],.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal[size=large]>.c-modal-scrollContainer,.c-modal[size=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block-start:14px;margin-block-end:14px}@media (min-width: 768px){.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);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block-start:20px;margin-block-end:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.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-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
 `, X = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], x = "pie-modal-close", b = "pie-modal-open", _ = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click";
-var ie = Object.defineProperty, te = Object.getOwnPropertyDescriptor, l = (n, e, i, t) => {
-  for (var o = t > 1 ? void 0 : t ? te(e, i) : e, r = n.length - 1, c; r >= 0; r--)
-    (c = n[r]) && (o = (t ? c(e, i, o) : c(o)) || o);
+var ie = Object.defineProperty, te = Object.getOwnPropertyDescriptor, l = (a, e, i, t) => {
+  for (var o = t > 1 ? void 0 : t ? te(e, i) : e, r = a.length - 1, c; r >= 0; r--)
+    (c = a[r]) && (o = (t ? c(e, i, o) : c(o)) || o);
   return t && o && ie(e, i, o), o;
 };
 const f = "pie-modal";
-class a extends I(P) {
+class n extends I(T) {
   constructor() {
     super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
       this.isDismissible || e.preventDefault();
@@ -121,7 +121,7 @@ class a extends I(P) {
     const { targetModal: i } = e.detail;
     if (i === this) {
       const p = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-      if (p && U(p), (o = this._dialog) != null && o.hasAttribute("open") || !((r = this._dialog) != null && r.isConnected))
+      if (p && ("scrollTo" in window && window.scrollTo(0, 0), U(p)), (o = this._dialog) != null && o.hasAttribute("open") || !((r = this._dialog) != null && r.isConnected))
         return;
       (c = this._dialog) == null || c.showModal();
     }
@@ -332,67 +332,67 @@ class a extends I(P) {
     this.dispatchEvent(i);
   }
 }
-a.styles = T(G);
+n.styles = P(G);
 l([
   d({ type: Object })
-], a.prototype, "aria", 2);
+], n.prototype, "aria", 2);
 l([
   d({ type: String }),
   R(f)
-], a.prototype, "heading", 2);
+], n.prototype, "heading", 2);
 l([
   d(),
   z(f, X, "h2")
-], a.prototype, "headingLevel", 2);
+], n.prototype, "headingLevel", 2);
 l([
   d({ type: Boolean })
-], a.prototype, "hasBackButton", 2);
+], n.prototype, "hasBackButton", 2);
 l([
   d({ type: Boolean })
-], a.prototype, "hasStackedActions", 2);
+], n.prototype, "hasStackedActions", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], a.prototype, "isDismissible", 2);
+], n.prototype, "isDismissible", 2);
 l([
   d({ type: Boolean })
-], a.prototype, "isFooterPinned", 2);
+], n.prototype, "isFooterPinned", 2);
 l([
   d({ type: Boolean })
-], a.prototype, "isFullWidthBelowMid", 2);
+], n.prototype, "isFullWidthBelowMid", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], a.prototype, "isLoading", 2);
+], n.prototype, "isLoading", 2);
 l([
   d({ type: Boolean })
-], a.prototype, "isOpen", 2);
+], n.prototype, "isOpen", 2);
 l([
   d({ type: Object })
-], a.prototype, "leadingAction", 2);
+], n.prototype, "leadingAction", 2);
 l([
   d(),
   z(f, Q, "center")
-], a.prototype, "position", 2);
+], n.prototype, "position", 2);
 l([
   d()
-], a.prototype, "returnFocusAfterCloseSelector", 2);
+], n.prototype, "returnFocusAfterCloseSelector", 2);
 l([
   d(),
   z(f, J, "medium")
-], a.prototype, "size", 2);
+], n.prototype, "size", 2);
 l([
   d({ type: Object })
-], a.prototype, "supportingAction", 2);
+], n.prototype, "supportingAction", 2);
 l([
   N("dialog")
-], a.prototype, "_dialog", 2);
-j(f, a);
+], n.prototype, "_dialog", 2);
+j(f, n);
 export {
   _ as ON_MODAL_BACK_EVENT,
   x as ON_MODAL_CLOSE_EVENT,
   Z as ON_MODAL_LEADING_ACTION_CLICK,
   b as ON_MODAL_OPEN_EVENT,
   ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  a as PieModal,
+  n as PieModal,
   X as headingLevels,
   Q as positions,
   J as sizes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.38.3",
+  "version": "0.38.4",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeat/pie-design-tokens": "5.9.0",
-    "@justeattakeaway/pie-components-config": "0.9.0",
+    "@justeattakeaway/pie-components-config": "0.10.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "@types/body-scroll-lock": "3.1.2",
     "cem-plugin-module-file-extensions": "0.0.5"

package/src/index.ts

@@ -151,6 +151,10 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
 
             if (modalScrollContainer) {
+                // Hack to prevent Safari rendering the modal outside the viewport
+                // when the body scroll lock is active
+                if ('scrollTo' in window) window.scrollTo(0, 0);
+
                 disableBodyScroll(modalScrollContainer);
             }