@justeattakeaway/pie-modal 0.42.5 → 0.42.7

package/custom-elements.json

@@ -80,6 +80,14 @@
           },
           "default": "'pie-modal-supporting-action-click'",
           "description": "Event name for when the modal supporting action is clicked."
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    headingLevel: 'h2',\n    hasBackButton: false,\n    hasStackedActions: false,\n    isDismissible: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    isOpen: false,\n    position: 'center',\n    size: 'medium',\n}"
         }
       ],
       "exports": [
@@ -146,6 +154,14 @@
             "name": "ON_MODAL_SUPPORTING_ACTION_CLICK",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -183,79 +199,50 @@
                 "text": "ModalProps['headingLevel']"
               },
               "privacy": "public",
-              "default": "'h2'",
               "attribute": "headingLevel"
             },
             {
               "kind": "field",
               "name": "hasBackButton",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hasBackButton"
             },
             {
               "kind": "field",
               "name": "hasStackedActions",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hasStackedActions"
             },
             {
               "kind": "field",
               "name": "isDismissible",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isDismissible",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "isFooterPinned",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "true",
               "attribute": "isFooterPinned"
             },
             {
               "kind": "field",
               "name": "isFullWidthBelowMid",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isFullWidthBelowMid"
             },
             {
               "kind": "field",
               "name": "isLoading",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isLoading",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isOpen"
             },
             {
@@ -274,7 +261,6 @@
                 "text": "ModalProps['position']"
               },
               "privacy": "public",
-              "default": "'center'",
               "attribute": "position"
             },
             {
@@ -293,7 +279,6 @@
                 "text": "ModalProps['size']"
               },
               "privacy": "public",
-              "default": "'medium'",
               "attribute": "size"
             },
             {
@@ -568,63 +553,34 @@
               "type": {
                 "text": "ModalProps['headingLevel']"
               },
-              "default": "'h2'",
               "fieldName": "headingLevel"
             },
             {
               "name": "hasBackButton",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hasBackButton"
             },
             {
               "name": "hasStackedActions",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hasStackedActions"
             },
             {
               "name": "isDismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isDismissible"
             },
             {
               "name": "isFooterPinned",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
               "fieldName": "isFooterPinned"
             },
             {
               "name": "isFullWidthBelowMid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isFullWidthBelowMid"
             },
             {
               "name": "isLoading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isLoading"
             },
             {
               "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isOpen"
             },
             {
@@ -639,7 +595,6 @@
               "type": {
                 "text": "ModalProps['position']"
               },
-              "default": "'center'",
               "fieldName": "position"
             },
             {
@@ -654,7 +609,6 @@
               "type": {
                 "text": "ModalProps['size']"
               },
-              "default": "'medium'",
               "fieldName": "size"
             },
             {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -27,6 +28,10 @@ export declare type AriaProps = {
     loading?: string;
 };
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<ModalProps, 'headingLevel' | 'hasBackButton' | 'hasStackedActions' | 'isDismissible' | 'isFooterPinned' | 'isFullWidthBelowMid' | 'isLoading' | 'isOpen' | 'position' | 'size'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 
 export declare type ModalActionType = 'leading' | 'supporting';

package/dist/index.js

@@ -1,109 +1,120 @@
-import { LitElement as P, nothing as s, unsafeCSS as F } from "lit";
-import { html as m, unsafeStatic as N } from "lit/static-html.js";
-import { property as d, query as I } from "lit/decorators.js";
+import { LitElement as T, nothing as c, unsafeCSS as N } from "lit";
+import { html as g, unsafeStatic as I } from "lit/static-html.js";
+import { property as r, query as R } from "lit/decorators.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
-import { RtlMixin as R, dispatchCustomEvent as h, requiredProperty as j, validPropertyValues as C, defineCustomElement as W } from "@justeattakeaway/pie-webc-core";
+import { RtlMixin as W, dispatchCustomEvent as u, requiredProperty as j, validPropertyValues as B, defineCustomElement as Y } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
 import "@justeattakeaway/pie-spinner";
-function Y(n) {
-  if (Array.isArray(n)) {
-    for (var e = 0, i = Array(n.length); e < n.length; e++)
-      i[e] = n[e];
+function V(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 O = !1;
 if (typeof window < "u") {
-  var B = {
+  var L = {
     get passive() {
       O = !0;
     }
   };
-  window.addEventListener("testPassive", null, B), window.removeEventListener("testPassive", null, B);
+  window.addEventListener("testPassive", null, L), window.removeEventListener("testPassive", null, L);
 }
-var S = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], w = !1, L = -1, u = void 0, f = void 0, M = function(e) {
-  return g.some(function(i) {
+var S = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], y = !1, M = -1, f = void 0, v = void 0, $ = function(e) {
+  return p.some(function(i) {
     return !!(i.options.allowTouchMove && i.options.allowTouchMove(e));
   });
-}, y = function(e) {
+}, x = function(e) {
   var i = e || window.event;
-  return M(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
-}, V = function(e) {
-  if (f === void 0) {
+  return $(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
+}, q = function(e) {
+  if (v === void 0) {
     var i = !!e && e.reserveScrollBarGap === !0, t = window.innerWidth - document.documentElement.clientWidth;
-    i && t > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
+    i && t > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
   }
-  u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, q = function() {
-  f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
-}, H = function(e) {
+  f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
+}, H = function() {
+  v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
+}, U = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, U = function(e, i) {
-  var t = e.targetTouches[0].clientY - L;
-  return M(e.target) ? !1 : i && i.scrollTop === 0 && t > 0 || H(i) && t < 0 ? y(e) : (e.stopPropagation(), !0);
 }, K = function(e, i) {
+  var t = e.targetTouches[0].clientY - M;
+  return $(e.target) ? !1 : i && i.scrollTop === 0 && t > 0 || U(i) && t < 0 ? x(e) : (e.stopPropagation(), !0);
+}, G = function(e, i) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!g.some(function(o) {
+  if (!p.some(function(o) {
     return o.targetElement === e;
   })) {
     var t = {
       targetElement: e,
       options: i || {}
     };
-    g = [].concat(Y(g), [t]), S ? (e.ontouchstart = function(o) {
-      o.targetTouches.length === 1 && (L = o.targetTouches[0].clientY);
+    p = [].concat(V(p), [t]), S ? (e.ontouchstart = function(o) {
+      o.targetTouches.length === 1 && (M = o.targetTouches[0].clientY);
     }, e.ontouchmove = function(o) {
-      o.targetTouches.length === 1 && U(o, e);
-    }, w || (document.addEventListener("touchmove", y, O ? { passive: !1 } : void 0), w = !0)) : V(i);
+      o.targetTouches.length === 1 && K(o, e);
+    }, y || (document.addEventListener("touchmove", x, O ? { passive: !1 } : void 0), y = !0)) : q(i);
   }
-}, G = function(e) {
+}, X = function(e) {
   if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  g = g.filter(function(i) {
+  p = p.filter(function(i) {
     return i.targetElement !== e;
-  }), S ? (e.ontouchstart = null, e.ontouchmove = null, w && g.length === 0 && (document.removeEventListener("touchmove", y, O ? { passive: !1 } : void 0), w = !1)) : g.length || q();
+  }), S ? (e.ontouchstart = null, e.ontouchmove = null, y && p.length === 0 && (document.removeEventListener("touchmove", x, O ? { passive: !1 } : void 0), y = !1)) : p.length || H();
 };
-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-l-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 = (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 J = `*,*: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-l-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}}
+`, Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], ee = ["top", "center"], _ = "pie-modal-close", w = "pie-modal-open", C = "pie-modal-back", ie = "pie-modal-leading-action-click", te = "pie-modal-supporting-action-click", d = {
+  headingLevel: "h2",
+  hasBackButton: !1,
+  hasStackedActions: !1,
+  isDismissible: !1,
+  isFooterPinned: !0,
+  isFullWidthBelowMid: !1,
+  isLoading: !1,
+  isOpen: !1,
+  position: "center",
+  size: "medium"
 };
-const v = "pie-modal";
-class a extends R(P) {
+var oe = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, l = (a, e, i, t) => {
+  for (var o = t > 1 ? void 0 : t ? ne(e, i) : e, s = a.length - 1, m; s >= 0; s--)
+    (m = a[s]) && (o = (t ? m(e, i, o) : m(o)) || o);
+  return t && o && oe(e, i, o), o;
+};
+const b = "pie-modal";
+class n extends W(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) => {
+    super(...arguments), this.headingLevel = d.headingLevel, this.hasBackButton = d.hasBackButton, this.hasStackedActions = d.hasStackedActions, this.isDismissible = d.isDismissible, this.isFooterPinned = d.isFooterPinned, this.isFullWidthBelowMid = d.isFullWidthBelowMid, this.isLoading = d.isLoading, this.isOpen = d.isOpen, this.position = d.position, this.size = d.size, this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
       this.isDismissible || e.preventDefault();
     }, this._handleDialogLightDismiss = (e) => {
-      var b;
+      var k;
       if (!this.isDismissible)
         return;
-      const i = (b = this._dialog) == null ? void 0 : b.getBoundingClientRect(), {
+      const i = (k = this._dialog) == null ? void 0 : k.getBoundingClientRect(), {
         top: t = 0,
         bottom: o = 0,
-        left: r = 0,
-        right: c = 0
+        left: s = 0,
+        right: m = 0
       } = i || {};
-      if (t === 0 && o === 0 && r === 0 && c === 0)
+      if (t === 0 && o === 0 && s === 0 && m === 0)
         return;
-      (e.clientY < t || e.clientY > o || e.clientX < r || e.clientX > c) && (this.isOpen = !1);
+      (e.clientY < t || e.clientY > o || e.clientX < s || e.clientX > m) && (this.isOpen = !1);
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(k, (e) => this._handleModalOpened(e)), document.addEventListener(_, (e) => this._handleModalClosed(e)), document.addEventListener(z, (e) => this._handleModalClosed(e));
+    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(w, (e) => this._handleModalOpened(e)), document.addEventListener(_, (e) => this._handleModalClosed(e)), document.addEventListener(C, (e) => this._handleModalClosed(e));
   }
   disconnectedCallback() {
-    document.removeEventListener(k, (e) => this._handleModalOpened(e)), document.removeEventListener(_, (e) => this._handleModalClosed(e)), document.removeEventListener(z, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
+    document.removeEventListener(w, (e) => this._handleModalOpened(e)), document.removeEventListener(_, (e) => this._handleModalClosed(e)), document.removeEventListener(C, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
   }
   async firstUpdated(e) {
     super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-209f54f8.js").then((t) => t.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (t) => this._handleDialogCancelEvent(t)), this._dialog.addEventListener("close", () => {
@@ -117,13 +128,13 @@ class a extends R(P) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened(e) {
-    var t, o, r, c;
+    var t, o, s, m;
     const { targetModal: i } = e.detail;
     if (i === this) {
-      const p = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-      if (p && ("scrollTo" in window && window.scrollTo(0, 0), K(p)), (o = this._dialog) != null && o.hasAttribute("open") || !((r = this._dialog) != null && r.isConnected))
+      const h = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
+      if (h && ("scrollTo" in window && window.scrollTo(0, 0), G(h)), (o = this._dialog) != null && o.hasAttribute("open") || !((s = this._dialog) != null && s.isConnected))
         return;
-      (c = this._dialog) == null || c.showModal();
+      (m = this._dialog) == null || m.showModal();
     }
   }
   /**
@@ -133,22 +144,22 @@ class a extends R(P) {
     var t, o;
     const { targetModal: i } = e.detail;
     if (i === this) {
-      const r = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-      r && G(r), (o = this._dialog) == null || o.close(), this._returnFocus();
+      const s = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
+      s && X(s), (o = this._dialog) == null || o.close(), this._returnFocus();
     }
   }
   // Handles the value of the isOpen property on first render of the component
   _handleModalOpenStateOnFirstRender(e) {
-    e.get("isOpen") === void 0 && this.isOpen && h(this, k, { targetModal: this });
+    e.get("isOpen") === void 0 && this.isOpen && u(this, w, { targetModal: this });
   }
   // Handles changes to the modal isOpen property by dispatching any appropriate events
   _handleModalOpenStateChanged(e) {
     const i = e.get("isOpen");
-    i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, z, { targetModal: this })) : h(this, _, { targetModal: this }) : h(this, k, { targetModal: this }));
+    i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, C, { targetModal: this })) : u(this, _, { targetModal: this }) : u(this, w, { targetModal: this }));
   }
   _handleActionClick(e) {
     var i, t;
-    e === "leading" ? ((i = this._dialog) == null || i.close("leading"), h(this, ee, { targetModal: this })) : e === "supporting" && ((t = this._dialog) == null || t.close("supporting"), h(this, ie, { targetModal: this }));
+    e === "leading" ? ((i = this._dialog) == null || i.close("leading"), u(this, ie, { targetModal: this })) : e === "supporting" && ((t = this._dialog) == null || t.close("supporting"), u(this, te, { targetModal: this }));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
@@ -167,14 +178,14 @@ class a extends R(P) {
    */
   renderCloseButton() {
     var e;
-    return m`
+    return g`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.close) || s}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.close) || c}"
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -187,16 +198,16 @@ class a extends R(P) {
    */
   renderBackButton() {
     var e;
-    return m`
+    return g`
             <pie-icon-button
                 @click="${() => {
       this._backButtonClicked = !0, this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.back) || s}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
                 data-test-id="modal-back-button">
-                ${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
+                ${this.isRTL ? g`<icon-chevron-right></icon-chevron-right>` : g`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
         `;
   }
@@ -211,17 +222,17 @@ class a extends R(P) {
    */
   renderLeadingAction() {
     const { text: e, variant: i = "primary", ariaLabel: t } = this.leadingAction;
-    return e ? m`
+    return e ? g`
             <pie-button
                 variant="${i}"
-                aria-label="${t || s}"
+                aria-label="${t || c}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
                 ${e}
             </pie-button>
-        ` : s;
+        ` : c;
   }
   /**
    * Render supportingAction button depending on prop availability.
@@ -236,34 +247,34 @@ class a extends R(P) {
    */
   renderSupportingAction() {
     const { text: e, variant: i = "ghost", ariaLabel: t } = this.supportingAction;
-    return e ? this.leadingAction ? m`
+    return e ? this.leadingAction ? g`
             <pie-button
                 variant="${i}"
-                aria-label="${t || s}"
+                aria-label="${t || c}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
                 ${e}
             </pie-button>
-        ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), s) : s;
+        ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), c) : c;
   }
   /**
    * Renders the modal inner content and footer of the modal.
    * @private
    */
   renderModalContentAndFooter() {
-    return m`
+    return g`
         <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
             <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}
+            ${this.isLoading ? g`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : c}
         </article>
         <footer class="c-modal-footer">
-            ${this.leadingAction ? this.renderLeadingAction() : s}
-            ${this.supportingAction ? this.renderSupportingAction() : s}
+            ${this.leadingAction ? this.renderLeadingAction() : c}
+            ${this.supportingAction ? this.renderSupportingAction() : c}
         </footer>`;
   }
   render() {
@@ -272,42 +283,42 @@ class a extends R(P) {
       hasBackButton: i,
       hasStackedActions: t,
       heading: o,
-      headingLevel: r = "h2",
-      isDismissible: c,
-      isFooterPinned: p,
-      isFullWidthBelowMid: b,
-      isLoading: x,
-      leadingAction: $,
-      position: D,
+      headingLevel: s = "h2",
+      isDismissible: m,
+      isFooterPinned: h,
+      isFullWidthBelowMid: k,
+      isLoading: z,
+      leadingAction: D,
+      position: P,
       size: E,
-      supportingAction: T
-    } = this, A = N(r);
-    return m`
+      supportingAction: F
+    } = this, A = I(s);
+    return g`
         <dialog
             id="dialog"
             class="c-modal"
-            size="${E || "medium"}"
-            position="${D || "center"}"
-            ?hasActions=${$ || T}
+            size="${E || d.size}"
+            position="${P || d.position}"
+            ?hasActions=${D || F}
             ?hasBackButton=${i}
             ?hasStackedActions=${t}
-            ?isDismissible=${c}
-            ?isFooterPinned=${p}
-            ?isFullWidthBelowMid=${b}
-            ?isLoading=${x}
-            aria-busy="${x ? "true" : "false"}"
-            aria-label="${x && (e == null ? void 0 : e.loading) || s}"
+            ?isDismissible=${m}
+            ?isFooterPinned=${h}
+            ?isFullWidthBelowMid=${k}
+            ?isLoading=${z}
+            aria-busy="${z ? "true" : "false"}"
+            aria-label="${z && (e == null ? void 0 : e.loading) || c}"
             data-test-id="pie-modal">
             <header class="c-modal-header"
             data-test-id="modal-header">
-                ${i ? this.renderBackButton() : s}
+                ${i ? this.renderBackButton() : c}
                 <${A} class="c-modal-heading">
                     ${o}
                 </${A}>
-                ${c ? this.renderCloseButton() : s}
+                ${m ? this.renderCloseButton() : c}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
-    p ? this.renderModalContentAndFooter() : m`
+    h ? this.renderModalContentAndFooter() : g`
                         <div class="c-modal-scrollContainer">
                             ${this.renderModalContentAndFooter()}
                         </div>
@@ -315,68 +326,69 @@ class a extends R(P) {
         </dialog>`;
   }
 }
-a.styles = F(X);
+n.styles = N(J);
 l([
-  d({ type: Object })
-], a.prototype, "aria", 2);
+  r({ type: Object })
+], n.prototype, "aria", 2);
 l([
-  d({ type: String }),
-  j(v)
-], a.prototype, "heading", 2);
+  r({ type: String }),
+  j(b)
+], n.prototype, "heading", 2);
 l([
-  d(),
-  C(v, J, "h2")
-], a.prototype, "headingLevel", 2);
+  r(),
+  B(b, Q, d.headingLevel)
+], n.prototype, "headingLevel", 2);
 l([
-  d({ type: Boolean })
-], a.prototype, "hasBackButton", 2);
+  r({ type: Boolean })
+], n.prototype, "hasBackButton", 2);
 l([
-  d({ type: Boolean })
-], a.prototype, "hasStackedActions", 2);
+  r({ type: Boolean })
+], n.prototype, "hasStackedActions", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
-], a.prototype, "isDismissible", 2);
+  r({ type: Boolean, reflect: !0 })
+], n.prototype, "isDismissible", 2);
 l([
-  d({ type: Boolean })
-], a.prototype, "isFooterPinned", 2);
+  r({ type: Boolean })
+], n.prototype, "isFooterPinned", 2);
 l([
-  d({ type: Boolean })
-], a.prototype, "isFullWidthBelowMid", 2);
+  r({ type: Boolean })
+], n.prototype, "isFullWidthBelowMid", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
-], a.prototype, "isLoading", 2);
+  r({ type: Boolean, reflect: !0 })
+], n.prototype, "isLoading", 2);
 l([
-  d({ type: Boolean })
-], a.prototype, "isOpen", 2);
+  r({ type: Boolean })
+], n.prototype, "isOpen", 2);
 l([
-  d({ type: Object })
-], a.prototype, "leadingAction", 2);
+  r({ type: Object })
+], n.prototype, "leadingAction", 2);
 l([
-  d(),
-  C(v, Z, "center")
-], a.prototype, "position", 2);
+  r(),
+  B(b, ee, d.position)
+], n.prototype, "position", 2);
 l([
-  d()
-], a.prototype, "returnFocusAfterCloseSelector", 2);
+  r()
+], n.prototype, "returnFocusAfterCloseSelector", 2);
 l([
-  d(),
-  C(v, Q, "medium")
-], a.prototype, "size", 2);
+  r(),
+  B(b, Z, d.size)
+], n.prototype, "size", 2);
 l([
-  d({ type: Object })
-], a.prototype, "supportingAction", 2);
+  r({ type: Object })
+], n.prototype, "supportingAction", 2);
 l([
-  I("dialog")
-], a.prototype, "_dialog", 2);
-W(v, a);
+  R("dialog")
+], n.prototype, "_dialog", 2);
+Y(b, n);
 export {
-  z as ON_MODAL_BACK_EVENT,
+  C 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,
-  a as PieModal,
-  J as headingLevels,
-  Z as positions,
-  Q as sizes
+  ie as ON_MODAL_LEADING_ACTION_CLICK,
+  w as ON_MODAL_OPEN_EVENT,
+  te as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  n as PieModal,
+  d as defaultProps,
+  Q as headingLevels,
+  ee as positions,
+  Z as sizes
 };

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -28,6 +29,10 @@ export declare type AriaProps = {
     loading?: string;
 };
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<ModalProps, 'headingLevel' | 'hasBackButton' | 'hasStackedActions' | 'isDismissible' | 'isFooterPinned' | 'isFullWidthBelowMid' | 'isLoading' | 'isOpen' | 'position' | 'size'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 
 export declare type ModalActionType = 'leading' | 'supporting';

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as o from "react";
 import { createComponent as i } from "@lit/react";
 import { PieModal as e } from "./index.js";
-import { ON_MODAL_BACK_EVENT as A, ON_MODAL_CLOSE_EVENT as L, ON_MODAL_LEADING_ACTION_CLICK as E, ON_MODAL_OPEN_EVENT as g, ON_MODAL_SUPPORTING_ACTION_CLICK as k, headingLevels as D, positions as I, sizes as T } from "./index.js";
+import { ON_MODAL_BACK_EVENT as A, ON_MODAL_CLOSE_EVENT as L, ON_MODAL_LEADING_ACTION_CLICK as E, ON_MODAL_OPEN_EVENT as g, ON_MODAL_SUPPORTING_ACTION_CLICK as k, defaultProps as D, headingLevels as I, positions as T, sizes as f } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "lit/decorators.js";
@@ -37,7 +37,8 @@ export {
   g as ON_MODAL_OPEN_EVENT,
   k as ON_MODAL_SUPPORTING_ACTION_CLICK,
   N as PieModal,
-  D as headingLevels,
-  I as positions,
-  T as sizes
+  D as defaultProps,
+  I as headingLevels,
+  T as positions,
+  f as sizes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.42.5",
+  "version": "0.42.7",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -46,11 +46,11 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.47.4",
-    "@justeattakeaway/pie-icon-button": "0.28.5",
-    "@justeattakeaway/pie-icons-webc": "0.23.1",
-    "@justeattakeaway/pie-spinner": "0.6.4",
-    "@justeattakeaway/pie-webc-core": "0.22.0",
+    "@justeattakeaway/pie-button": "0.47.6",
+    "@justeattakeaway/pie-icon-button": "0.28.6",
+    "@justeattakeaway/pie-icons-webc": "0.24.0",
+    "@justeattakeaway/pie-spinner": "0.6.5",
+    "@justeattakeaway/pie-webc-core": "0.23.0",
     "body-scroll-lock": "3.1.5",
     "dialog-polyfill": "0.5.6"
   },

package/src/defs.ts

@@ -1,3 +1,5 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
 export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
@@ -148,3 +150,18 @@ export const ON_MODAL_LEADING_ACTION_CLICK = 'pie-modal-leading-action-click';
 export const ON_MODAL_SUPPORTING_ACTION_CLICK = 'pie-modal-supporting-action-click';
 
 export type ModalActionType = 'leading' | 'supporting';
+
+export type DefaultProps = ComponentDefaultPropsGeneric<ModalProps, 'headingLevel'|'hasBackButton'|'hasStackedActions'|'isDismissible'|'isFooterPinned'|'isFullWidthBelowMid'|'isLoading'|'isOpen'|'position'|'size'>;
+
+export const defaultProps: DefaultProps = {
+    headingLevel: 'h2',
+    hasBackButton: false,
+    hasStackedActions: false,
+    isDismissible: false,
+    isFooterPinned: true,
+    isFullWidthBelowMid: false,
+    isLoading: false,
+    isOpen: false,
+    position: 'center',
+    size: 'medium',
+};

package/src/index.ts

@@ -28,6 +28,7 @@ import {
     headingLevels,
     positions,
     sizes,
+    defaultProps,
     ON_MODAL_BACK_EVENT,
     ON_MODAL_CLOSE_EVENT,
     ON_MODAL_OPEN_EVENT,
@@ -61,43 +62,43 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     public heading!: string;
 
     @property()
-    @validPropertyValues(componentSelector, headingLevels, 'h2')
-    public headingLevel: ModalProps['headingLevel'] = 'h2';
+    @validPropertyValues(componentSelector, headingLevels, defaultProps.headingLevel)
+    public headingLevel: ModalProps['headingLevel'] = defaultProps.headingLevel;
 
     @property({ type: Boolean })
-    public hasBackButton = false;
+    public hasBackButton = defaultProps.hasBackButton;
 
     @property({ type: Boolean })
-    public hasStackedActions = false;
+    public hasStackedActions = defaultProps.hasStackedActions;
 
     @property({ type: Boolean, reflect: true })
-    public isDismissible = false;
+    public isDismissible = defaultProps.isDismissible;
 
     @property({ type: Boolean })
-    public isFooterPinned = true;
+    public isFooterPinned = defaultProps.isFooterPinned;
 
     @property({ type: Boolean })
-    public isFullWidthBelowMid = false;
+    public isFullWidthBelowMid = defaultProps.isFullWidthBelowMid;
 
     @property({ type: Boolean, reflect: true })
-    public isLoading = false;
+    public isLoading = defaultProps.isLoading;
 
     @property({ type: Boolean })
-    public isOpen = false;
+    public isOpen = defaultProps.isOpen;
 
     @property({ type: Object })
     public leadingAction!: ActionProps;
 
     @property()
-    @validPropertyValues(componentSelector, positions, 'center')
-    public position: ModalProps['position'] = 'center';
+    @validPropertyValues(componentSelector, positions, defaultProps.position)
+    public position: ModalProps['position'] = defaultProps.position;
 
     @property()
     public returnFocusAfterCloseSelector?: string;
 
     @property()
-    @validPropertyValues(componentSelector, sizes, 'medium')
-    public size: ModalProps['size'] = 'medium';
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size: ModalProps['size'] = defaultProps.size;
 
     @property({ type: Object })
     public supportingAction!: ActionProps;
@@ -396,8 +397,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         <dialog
             id="dialog"
             class="c-modal"
-            size="${size || 'medium'}"
-            position="${position || 'center'}"
+            size="${size || defaultProps.size}"
+            position="${position || defaultProps.position}"
             ?hasActions=${leadingAction || supportingAction}
             ?hasBackButton=${hasBackButton}
             ?hasStackedActions=${hasStackedActions}