@justeattakeaway/pie-modal 0.42.7 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +2 -4
  2. package/dist/index.js +94 -90
  3. package/package.json +4 -4
  4. package/src/index.ts +15 -11
  5. package/src/modal.scss +5 -1
package/README.md CHANGED
@@ -21,11 +21,9 @@ This component can be easily integrated into various frontend frameworks and cus
21
21
  To install `pie-modal` in your application, run the following on your command line:
22
22
 
23
23
  ```bash
24
- # npm
25
- $ npm i @justeattakeaway/pie-modal
24
+ npm i @justeattakeaway/pie-modal
26
25
 
27
- # yarn
28
- $ yarn add @justeattakeaway/pie-modal
26
+ yarn add @justeattakeaway/pie-modal
29
27
  ```
30
28
 
31
29
  ## Documentation
package/dist/index.js CHANGED
@@ -8,19 +8,19 @@ import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
8
8
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
9
9
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
10
10
  import "@justeattakeaway/pie-spinner";
11
- function V(a) {
12
- if (Array.isArray(a)) {
13
- for (var e = 0, i = Array(a.length); e < a.length; e++)
14
- i[e] = a[e];
11
+ function V(n) {
12
+ if (Array.isArray(n)) {
13
+ for (var e = 0, i = Array(n.length); e < n.length; e++)
14
+ i[e] = n[e];
15
15
  return i;
16
16
  } else
17
- return Array.from(a);
17
+ return Array.from(n);
18
18
  }
19
- var O = !1;
19
+ var A = !1;
20
20
  if (typeof window < "u") {
21
21
  var L = {
22
22
  get passive() {
23
- O = !0;
23
+ A = !0;
24
24
  }
25
25
  };
26
26
  window.addEventListener("testPassive", null, L), window.removeEventListener("testPassive", null, L);
@@ -34,8 +34,8 @@ var S = typeof window < "u" && window.navigator && window.navigator.platform &&
34
34
  return $(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
35
35
  }, q = function(e) {
36
36
  if (v === void 0) {
37
- var i = !!e && e.reserveScrollBarGap === !0, t = window.innerWidth - document.documentElement.clientWidth;
38
- i && t > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
37
+ var i = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
38
+ i && o > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
39
39
  }
40
40
  f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
41
41
  }, H = function() {
@@ -43,25 +43,25 @@ var S = typeof window < "u" && window.navigator && window.navigator.platform &&
43
43
  }, U = function(e) {
44
44
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
45
45
  }, K = function(e, i) {
46
- var t = e.targetTouches[0].clientY - M;
47
- return $(e.target) ? !1 : i && i.scrollTop === 0 && t > 0 || U(i) && t < 0 ? x(e) : (e.stopPropagation(), !0);
46
+ var o = e.targetTouches[0].clientY - M;
47
+ return $(e.target) ? !1 : i && i.scrollTop === 0 && o > 0 || U(i) && o < 0 ? x(e) : (e.stopPropagation(), !0);
48
48
  }, G = function(e, i) {
49
49
  if (!e) {
50
50
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
51
51
  return;
52
52
  }
53
- if (!p.some(function(o) {
54
- return o.targetElement === e;
53
+ if (!p.some(function(t) {
54
+ return t.targetElement === e;
55
55
  })) {
56
- var t = {
56
+ var o = {
57
57
  targetElement: e,
58
58
  options: i || {}
59
59
  };
60
- p = [].concat(V(p), [t]), S ? (e.ontouchstart = function(o) {
61
- o.targetTouches.length === 1 && (M = o.targetTouches[0].clientY);
62
- }, e.ontouchmove = function(o) {
63
- o.targetTouches.length === 1 && K(o, e);
64
- }, y || (document.addEventListener("touchmove", x, O ? { passive: !1 } : void 0), y = !0)) : q(i);
60
+ p = [].concat(V(p), [o]), S ? (e.ontouchstart = function(t) {
61
+ t.targetTouches.length === 1 && (M = t.targetTouches[0].clientY);
62
+ }, e.ontouchmove = function(t) {
63
+ t.targetTouches.length === 1 && K(t, e);
64
+ }, y || (document.addEventListener("touchmove", x, A ? { passive: !1 } : void 0), y = !0)) : q(i);
65
65
  }
66
66
  }, X = function(e) {
67
67
  if (!e) {
@@ -70,10 +70,10 @@ var S = typeof window < "u" && window.navigator && window.navigator.platform &&
70
70
  }
71
71
  p = p.filter(function(i) {
72
72
  return i.targetElement !== e;
73
- }), 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();
73
+ }), S ? (e.ontouchstart = null, e.ontouchmove = null, y && p.length === 0 && (document.removeEventListener("touchmove", x, A ? { passive: !1 } : void 0), y = !1)) : p.length || H();
74
74
  };
75
- 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}}
76
- `, 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 = {
75
+ 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-end);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.c-modal-hasFooterActions{padding-block-end:var(--modal-content-padding-block)}.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}}
76
+ `, 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", oe = "pie-modal-supporting-action-click", d = {
77
77
  headingLevel: "h2",
78
78
  hasBackButton: !1,
79
79
  hasStackedActions: !1,
@@ -85,13 +85,13 @@ const J = `*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
85
85
  position: "center",
86
86
  size: "medium"
87
87
  };
88
- var oe = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, l = (a, e, i, t) => {
89
- for (var o = t > 1 ? void 0 : t ? ne(e, i) : e, s = a.length - 1, m; s >= 0; s--)
90
- (m = a[s]) && (o = (t ? m(e, i, o) : m(o)) || o);
91
- return t && o && oe(e, i, o), o;
88
+ var te = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, l = (n, e, i, o) => {
89
+ for (var t = o > 1 ? void 0 : o ? ae(e, i) : e, s = n.length - 1, m; s >= 0; s--)
90
+ (m = n[s]) && (t = (o ? m(e, i, t) : m(t)) || t);
91
+ return o && t && te(e, i, t), t;
92
92
  };
93
93
  const b = "pie-modal";
94
- class n extends W(T) {
94
+ class a extends W(T) {
95
95
  constructor() {
96
96
  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) => {
97
97
  this.isDismissible || e.preventDefault();
@@ -100,14 +100,14 @@ class n extends W(T) {
100
100
  if (!this.isDismissible)
101
101
  return;
102
102
  const i = (k = this._dialog) == null ? void 0 : k.getBoundingClientRect(), {
103
- top: t = 0,
104
- bottom: o = 0,
103
+ top: o = 0,
104
+ bottom: t = 0,
105
105
  left: s = 0,
106
106
  right: m = 0
107
107
  } = i || {};
108
- if (t === 0 && o === 0 && s === 0 && m === 0)
108
+ if (o === 0 && t === 0 && s === 0 && m === 0)
109
109
  return;
110
- (e.clientY < t || e.clientY > o || e.clientX < s || e.clientX > m) && (this.isOpen = !1);
110
+ (e.clientY < o || e.clientY > t || e.clientX < s || e.clientX > m) && (this.isOpen = !1);
111
111
  };
112
112
  }
113
113
  connectedCallback() {
@@ -117,7 +117,7 @@ class n extends W(T) {
117
117
  document.removeEventListener(w, (e) => this._handleModalOpened(e)), document.removeEventListener(_, (e) => this._handleModalClosed(e)), document.removeEventListener(C, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
118
118
  }
119
119
  async firstUpdated(e) {
120
- 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", () => {
120
+ super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-209f54f8.js").then((o) => o.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._dialog.addEventListener("close", () => {
121
121
  this.isOpen = !1;
122
122
  })), this._handleModalOpenStateOnFirstRender(e);
123
123
  }
@@ -128,11 +128,11 @@ class n extends W(T) {
128
128
  * Opens the dialog element and disables page scrolling
129
129
  */
130
130
  _handleModalOpened(e) {
131
- var t, o, s, m;
131
+ var o, t, s, m;
132
132
  const { targetModal: i } = e.detail;
133
133
  if (i === this) {
134
- const h = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
135
- if (h && ("scrollTo" in window && window.scrollTo(0, 0), G(h)), (o = this._dialog) != null && o.hasAttribute("open") || !((s = this._dialog) != null && s.isConnected))
134
+ const h = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
135
+ if (h && ("scrollTo" in window && window.scrollTo(0, 0), G(h)), (t = this._dialog) != null && t.hasAttribute("open") || !((s = this._dialog) != null && s.isConnected))
136
136
  return;
137
137
  (m = this._dialog) == null || m.showModal();
138
138
  }
@@ -141,11 +141,11 @@ class n extends W(T) {
141
141
  * Closes the dialog element and re-enables page scrolling
142
142
  */
143
143
  _handleModalClosed(e) {
144
- var t, o;
144
+ var o, t;
145
145
  const { targetModal: i } = e.detail;
146
146
  if (i === this) {
147
- const s = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
148
- s && X(s), (o = this._dialog) == null || o.close(), this._returnFocus();
147
+ const s = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
148
+ s && X(s), (t = this._dialog) == null || t.close(), this._returnFocus();
149
149
  }
150
150
  }
151
151
  // Handles the value of the isOpen property on first render of the component
@@ -158,17 +158,17 @@ class n extends W(T) {
158
158
  i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, C, { targetModal: this })) : u(this, _, { targetModal: this }) : u(this, w, { targetModal: this }));
159
159
  }
160
160
  _handleActionClick(e) {
161
- var i, t;
162
- 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 }));
161
+ var i, o;
162
+ e === "leading" ? ((i = this._dialog) == null || i.close("leading"), u(this, ie, { targetModal: this })) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), u(this, oe, { targetModal: this }));
163
163
  }
164
164
  /**
165
165
  * Return focus to the specified element, providing the selector is valid
166
166
  * and the chosen element can be found.
167
167
  */
168
168
  _returnFocus() {
169
- var i, t;
169
+ var i, o;
170
170
  const e = (i = this.returnFocusAfterCloseSelector) == null ? void 0 : i.trim();
171
- e && ((t = document.querySelector(e)) == null || t.focus());
171
+ e && ((o = document.querySelector(e)) == null || o.focus());
172
172
  }
173
173
  /**
174
174
  * Template for the close button element. Called within the
@@ -221,11 +221,11 @@ class n extends W(T) {
221
221
  * @private
222
222
  */
223
223
  renderLeadingAction() {
224
- const { text: e, variant: i = "primary", ariaLabel: t } = this.leadingAction;
224
+ const { text: e, variant: i = "primary", ariaLabel: o } = this.leadingAction;
225
225
  return e ? g`
226
226
  <pie-button
227
227
  variant="${i}"
228
- aria-label="${t || c}"
228
+ aria-label="${o || c}"
229
229
  type="submit"
230
230
  ?isFullWidth="${this.hasStackedActions}"
231
231
  @click="${() => this._handleActionClick("leading")}"
@@ -246,11 +246,11 @@ class n extends W(T) {
246
246
  * @private
247
247
  */
248
248
  renderSupportingAction() {
249
- const { text: e, variant: i = "ghost", ariaLabel: t } = this.supportingAction;
249
+ const { text: e, variant: i = "ghost", ariaLabel: o } = this.supportingAction;
250
250
  return e ? this.leadingAction ? g`
251
251
  <pie-button
252
252
  variant="${i}"
253
- aria-label="${t || c}"
253
+ aria-label="${o || c}"
254
254
  type="reset"
255
255
  ?isFullWidth="${this.hasStackedActions}"
256
256
  @click="${() => this._handleActionClick("supporting")}"
@@ -264,44 +264,48 @@ class n extends W(T) {
264
264
  * @private
265
265
  */
266
266
  renderModalContentAndFooter() {
267
+ var i, o;
268
+ const e = (i = this.leadingAction) == null ? void 0 : i.text;
267
269
  return g`
268
- <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
269
- <div class="c-modal-contentInner"
270
- data-test-id="modal-content-inner">
271
- <slot></slot>
272
- </div>
273
- ${this.isLoading ? g`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : c}
274
- </article>
275
- <footer class="c-modal-footer">
276
- ${this.leadingAction ? this.renderLeadingAction() : c}
277
- ${this.supportingAction ? this.renderSupportingAction() : c}
278
- </footer>`;
270
+ <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable ${e ? "c-modal-hasFooterActions" : ""}">
271
+ <div class="c-modal-contentInner"
272
+ data-test-id="modal-content-inner">
273
+ <slot></slot>
274
+ </div>
275
+ ${this.isLoading ? g`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : c}
276
+ </article>
277
+ ${e ? g`
278
+ <footer class="c-modal-footer"
279
+ data-test-id="pie-modal-footer">
280
+ ${this.renderLeadingAction()}
281
+ ${(o = this.supportingAction) != null && o.text ? this.renderSupportingAction() : c}
282
+ </footer>` : c}`;
279
283
  }
280
284
  render() {
281
285
  const {
282
286
  aria: e,
283
287
  hasBackButton: i,
284
- hasStackedActions: t,
285
- heading: o,
288
+ hasStackedActions: o,
289
+ heading: t,
286
290
  headingLevel: s = "h2",
287
291
  isDismissible: m,
288
292
  isFooterPinned: h,
289
293
  isFullWidthBelowMid: k,
290
294
  isLoading: z,
291
295
  leadingAction: D,
292
- position: P,
293
- size: E,
294
- supportingAction: F
295
- } = this, A = I(s);
296
+ position: F,
297
+ size: P,
298
+ supportingAction: E
299
+ } = this, O = I(s);
296
300
  return g`
297
301
  <dialog
298
302
  id="dialog"
299
303
  class="c-modal"
300
- size="${E || d.size}"
301
- position="${P || d.position}"
302
- ?hasActions=${D || F}
304
+ size="${P || d.size}"
305
+ position="${F || d.position}"
306
+ ?hasActions=${D || E}
303
307
  ?hasBackButton=${i}
304
- ?hasStackedActions=${t}
308
+ ?hasStackedActions=${o}
305
309
  ?isDismissible=${m}
306
310
  ?isFooterPinned=${h}
307
311
  ?isFullWidthBelowMid=${k}
@@ -312,9 +316,9 @@ class n extends W(T) {
312
316
  <header class="c-modal-header"
313
317
  data-test-id="modal-header">
314
318
  ${i ? this.renderBackButton() : c}
315
- <${A} class="c-modal-heading">
316
- ${o}
317
- </${A}>
319
+ <${O} class="c-modal-heading">
320
+ ${t}
321
+ </${O}>
318
322
  ${m ? this.renderCloseButton() : c}
319
323
  </header>
320
324
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
@@ -326,67 +330,67 @@ class n extends W(T) {
326
330
  </dialog>`;
327
331
  }
328
332
  }
329
- n.styles = N(J);
333
+ a.styles = N(J);
330
334
  l([
331
335
  r({ type: Object })
332
- ], n.prototype, "aria", 2);
336
+ ], a.prototype, "aria", 2);
333
337
  l([
334
338
  r({ type: String }),
335
339
  j(b)
336
- ], n.prototype, "heading", 2);
340
+ ], a.prototype, "heading", 2);
337
341
  l([
338
342
  r(),
339
343
  B(b, Q, d.headingLevel)
340
- ], n.prototype, "headingLevel", 2);
344
+ ], a.prototype, "headingLevel", 2);
341
345
  l([
342
346
  r({ type: Boolean })
343
- ], n.prototype, "hasBackButton", 2);
347
+ ], a.prototype, "hasBackButton", 2);
344
348
  l([
345
349
  r({ type: Boolean })
346
- ], n.prototype, "hasStackedActions", 2);
350
+ ], a.prototype, "hasStackedActions", 2);
347
351
  l([
348
352
  r({ type: Boolean, reflect: !0 })
349
- ], n.prototype, "isDismissible", 2);
353
+ ], a.prototype, "isDismissible", 2);
350
354
  l([
351
355
  r({ type: Boolean })
352
- ], n.prototype, "isFooterPinned", 2);
356
+ ], a.prototype, "isFooterPinned", 2);
353
357
  l([
354
358
  r({ type: Boolean })
355
- ], n.prototype, "isFullWidthBelowMid", 2);
359
+ ], a.prototype, "isFullWidthBelowMid", 2);
356
360
  l([
357
361
  r({ type: Boolean, reflect: !0 })
358
- ], n.prototype, "isLoading", 2);
362
+ ], a.prototype, "isLoading", 2);
359
363
  l([
360
364
  r({ type: Boolean })
361
- ], n.prototype, "isOpen", 2);
365
+ ], a.prototype, "isOpen", 2);
362
366
  l([
363
367
  r({ type: Object })
364
- ], n.prototype, "leadingAction", 2);
368
+ ], a.prototype, "leadingAction", 2);
365
369
  l([
366
370
  r(),
367
371
  B(b, ee, d.position)
368
- ], n.prototype, "position", 2);
372
+ ], a.prototype, "position", 2);
369
373
  l([
370
374
  r()
371
- ], n.prototype, "returnFocusAfterCloseSelector", 2);
375
+ ], a.prototype, "returnFocusAfterCloseSelector", 2);
372
376
  l([
373
377
  r(),
374
378
  B(b, Z, d.size)
375
- ], n.prototype, "size", 2);
379
+ ], a.prototype, "size", 2);
376
380
  l([
377
381
  r({ type: Object })
378
- ], n.prototype, "supportingAction", 2);
382
+ ], a.prototype, "supportingAction", 2);
379
383
  l([
380
384
  R("dialog")
381
- ], n.prototype, "_dialog", 2);
382
- Y(b, n);
385
+ ], a.prototype, "_dialog", 2);
386
+ Y(b, a);
383
387
  export {
384
388
  C as ON_MODAL_BACK_EVENT,
385
389
  _ as ON_MODAL_CLOSE_EVENT,
386
390
  ie as ON_MODAL_LEADING_ACTION_CLICK,
387
391
  w as ON_MODAL_OPEN_EVENT,
388
- te as ON_MODAL_SUPPORTING_ACTION_CLICK,
389
- n as PieModal,
392
+ oe as ON_MODAL_SUPPORTING_ACTION_CLICK,
393
+ a as PieModal,
390
394
  d as defaultProps,
391
395
  Q as headingLevels,
392
396
  ee as positions,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "0.42.7",
3
+ "version": "0.43.0",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -38,7 +38,7 @@
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
39
  "@justeat/pie-design-tokens": "6.0.0",
40
40
  "@justeattakeaway/pie-components-config": "0.16.0",
41
- "@justeattakeaway/pie-wrapper-react": "0.14.0",
41
+ "@justeattakeaway/pie-wrapper-react": "0.14.1",
42
42
  "@types/body-scroll-lock": "3.1.2",
43
43
  "cem-plugin-module-file-extensions": "0.0.5"
44
44
  },
@@ -47,8 +47,8 @@
47
47
  },
48
48
  "dependencies": {
49
49
  "@justeattakeaway/pie-button": "0.47.6",
50
- "@justeattakeaway/pie-icon-button": "0.28.6",
51
- "@justeattakeaway/pie-icons-webc": "0.24.0",
50
+ "@justeattakeaway/pie-icon-button": "0.28.7",
51
+ "@justeattakeaway/pie-icons-webc": "0.24.1",
52
52
  "@justeattakeaway/pie-spinner": "0.6.5",
53
53
  "@justeattakeaway/pie-webc-core": "0.23.0",
54
54
  "body-scroll-lock": "3.1.5",
package/src/index.ts CHANGED
@@ -360,18 +360,22 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
360
360
  * @private
361
361
  */
362
362
  private renderModalContentAndFooter (): TemplateResult {
363
+ const hasFooterLeadingAction = this.leadingAction?.text;
364
+
363
365
  return html`
364
- <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
365
- <div class="c-modal-contentInner"
366
- data-test-id="modal-content-inner">
367
- <slot></slot>
368
- </div>
369
- ${this.isLoading ? html`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : nothing}
370
- </article>
371
- <footer class="c-modal-footer">
372
- ${this.leadingAction ? this.renderLeadingAction() : nothing}
373
- ${this.supportingAction ? this.renderSupportingAction() : nothing}
374
- </footer>`;
366
+ <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable ${hasFooterLeadingAction ? 'c-modal-hasFooterActions' : ''}">
367
+ <div class="c-modal-contentInner"
368
+ data-test-id="modal-content-inner">
369
+ <slot></slot>
370
+ </div>
371
+ ${this.isLoading ? html`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : nothing}
372
+ </article>
373
+ ${hasFooterLeadingAction ? html`
374
+ <footer class="c-modal-footer"
375
+ data-test-id="pie-modal-footer">
376
+ ${this.renderLeadingAction()}
377
+ ${this.supportingAction?.text ? this.renderSupportingAction() : nothing}
378
+ </footer>` : nothing}`;
375
379
  }
376
380
 
377
381
  public render () {
package/src/modal.scss CHANGED
@@ -250,9 +250,13 @@
250
250
  padding-inline-start: var(--modal-content-padding-inline);
251
251
  padding-inline-end: var(--modal-content-padding-inline);
252
252
  padding-block-start: var(--modal-content-padding-block);
253
- padding-block-end: var(--modal-content-padding-block);
253
+ padding-block-end: var(--modal-content-padding-block-end); // We require a larger bottom padding when there's no footer
254
254
  flex-grow: 1;
255
255
 
256
+ &.c-modal-hasFooterActions {
257
+ padding-block-end: var(--modal-content-padding-block);
258
+ }
259
+
256
260
  &--scrollable {
257
261
  background:
258
262
  // Scroll shadow cover