@justeattakeaway/pie-modal 0.39.0 → 0.40.0

package/dist/index.js

@@ -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 Y(a) {
-  if (Array.isArray(a)) {
-    for (var e = 0, i = Array(a.length); e < a.length; e++)
-      i[e] = a[e];
+function Y(n) {
+  if (Array.isArray(n)) {
+    for (var e = 0, i = Array(n.length); e < n.length; e++)
+      i[e] = n[e];
     return i;
   } else
-    return Array.from(a);
+    return Array.from(n);
 }
 var O = !1;
 if (typeof window < "u") {
@@ -74,13 +74,13 @@ var S = typeof window < "u" && window.navigator && window.navigator.platform &&
 };
 const X = `*,*:after,*:before{box-sizing:inherit}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%)}.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 (width < 768px){.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 (width < 768px){.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 (width < 768px){.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 (width < 768px){.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: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: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}}
 `, J = ["h1", "h2", "h3", "h4", "h5", "h6"], Q = ["small", "medium", "large"], Z = ["top", "center"], _ = "pie-modal-close", k = "pie-modal-open", z = "pie-modal-back", ee = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click";
-var te = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, l = (a, e, i, t) => {
-  for (var o = t > 1 ? void 0 : t ? oe(e, i) : e, r = a.length - 1, c; r >= 0; r--)
-    (c = a[r]) && (o = (t ? c(e, i, o) : c(o)) || o);
+var te = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, l = (n, e, i, t) => {
+  for (var o = t > 1 ? void 0 : t ? oe(e, i) : e, r = n.length - 1, c; r >= 0; r--)
+    (c = n[r]) && (o = (t ? c(e, i, o) : c(o)) || o);
   return t && o && te(e, i, o), o;
 };
 const v = "pie-modal";
-class n extends R(P) {
+class a extends R(P) {
   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();
@@ -255,7 +255,8 @@ class n extends R(P) {
   renderModalContentAndFooter() {
     return m`
         <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
-            <div class="c-modal-contentInner">
+            <div class="c-modal-contentInner"
+            data-test-id="modal-content-inner">
                 <slot></slot>
             </div>
             ${this.isLoading ? m`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : s}
@@ -297,7 +298,8 @@ class n extends R(P) {
             aria-busy="${x ? "true" : "false"}"
             aria-label="${x && (e == null ? void 0 : e.loading) || s}"
             data-test-id="pie-modal">
-            <header class="c-modal-header">
+            <header class="c-modal-header"
+            data-test-id="modal-header">
                 ${i ? this.renderBackButton() : s}
                 <${A} class="c-modal-heading">
                     ${o}
@@ -313,67 +315,67 @@ class n extends R(P) {
         </dialog>`;
   }
 }
-n.styles = F(X);
+a.styles = F(X);
 l([
   d({ type: Object })
-], n.prototype, "aria", 2);
+], a.prototype, "aria", 2);
 l([
   d({ type: String }),
   j(v)
-], n.prototype, "heading", 2);
+], a.prototype, "heading", 2);
 l([
   d(),
   C(v, J, "h2")
-], n.prototype, "headingLevel", 2);
+], a.prototype, "headingLevel", 2);
 l([
   d({ type: Boolean })
-], n.prototype, "hasBackButton", 2);
+], a.prototype, "hasBackButton", 2);
 l([
   d({ type: Boolean })
-], n.prototype, "hasStackedActions", 2);
+], a.prototype, "hasStackedActions", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], n.prototype, "isDismissible", 2);
+], a.prototype, "isDismissible", 2);
 l([
   d({ type: Boolean })
-], n.prototype, "isFooterPinned", 2);
+], a.prototype, "isFooterPinned", 2);
 l([
   d({ type: Boolean })
-], n.prototype, "isFullWidthBelowMid", 2);
+], a.prototype, "isFullWidthBelowMid", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], n.prototype, "isLoading", 2);
+], a.prototype, "isLoading", 2);
 l([
   d({ type: Boolean })
-], n.prototype, "isOpen", 2);
+], a.prototype, "isOpen", 2);
 l([
   d({ type: Object })
-], n.prototype, "leadingAction", 2);
+], a.prototype, "leadingAction", 2);
 l([
   d(),
   C(v, Z, "center")
-], n.prototype, "position", 2);
+], a.prototype, "position", 2);
 l([
   d()
-], n.prototype, "returnFocusAfterCloseSelector", 2);
+], a.prototype, "returnFocusAfterCloseSelector", 2);
 l([
   d(),
   C(v, Q, "medium")
-], n.prototype, "size", 2);
+], a.prototype, "size", 2);
 l([
   d({ type: Object })
-], n.prototype, "supportingAction", 2);
+], a.prototype, "supportingAction", 2);
 l([
   I("dialog")
-], n.prototype, "_dialog", 2);
-W(v, n);
+], a.prototype, "_dialog", 2);
+W(v, a);
 export {
   z as ON_MODAL_BACK_EVENT,
   _ as ON_MODAL_CLOSE_EVENT,
   ee as ON_MODAL_LEADING_ACTION_CLICK,
   k as ON_MODAL_OPEN_EVENT,
   ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  n as PieModal,
+  a as PieModal,
   J as headingLevels,
   Z as positions,
   Q as sizes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "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.11.0",
+    "@justeattakeaway/pie-components-config": "0.12.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

@@ -361,7 +361,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     private renderModalContentAndFooter (): TemplateResult {
         return html`
         <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
-            <div class="c-modal-contentInner">
+            <div class="c-modal-contentInner"
+            data-test-id="modal-content-inner">
                 <slot></slot>
             </div>
             ${this.isLoading ? html`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : nothing}
@@ -407,7 +408,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             aria-busy="${isLoading ? 'true' : 'false'}"
             aria-label="${(isLoading && aria?.loading) || nothing}"
             data-test-id="pie-modal">
-            <header class="c-modal-header">
+            <header class="c-modal-header"
+            data-test-id="modal-header">
                 ${hasBackButton ? this.renderBackButton() : nothing}
                 <${headingTag} class="c-modal-heading">
                     ${heading}