@justeattakeaway/pie-modal 0.34.0 → 0.35.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/dist/index.d.ts +4 -0
  2. package/dist/index.js +180 -204
  3. package/dist/react.js +12 -11
  4. package/package.json +7 -7
  5. package/src/index.ts +39 -25
package/dist/index.d.ts CHANGED
@@ -29,6 +29,10 @@ export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"
29
29
 
30
30
  export declare type ModalActionType = 'leading' | 'supporting';
31
31
 
32
+ export declare interface ModalEventDetail {
33
+ targetModal: PieModal;
34
+ }
35
+
32
36
  export declare type ModalProps = {
33
37
  /**
34
38
  * The ARIA labels used for the modal close and back buttons, as well as loading state.
package/dist/index.js CHANGED
@@ -1,50 +1,51 @@
1
- import { isServer as D, unsafeCSS as T, nothing as c, LitElement as F } from "lit";
2
- import { html as m, unsafeStatic as I } from "lit/static-html.js";
3
- import { property as r, query as N } from "lit/decorators.js";
1
+ import { LitElement as P, nothing as s, unsafeCSS as T } from "lit";
2
+ import { html as m, unsafeStatic as F } from "lit/static-html.js";
3
+ import { property as d, query as N } from "lit/decorators.js";
4
4
  import "@justeattakeaway/pie-button";
5
5
  import "@justeattakeaway/pie-icon-button";
6
+ import { RtlMixin as I, requiredProperty as R, validPropertyValues as z, defineCustomElement as j } from "@justeattakeaway/pie-webc-core";
6
7
  import "@justeattakeaway/pie-icons-webc/IconClose";
7
8
  import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
8
9
  import "@justeattakeaway/pie-icons-webc/IconChevronRight";
9
10
  import "@justeattakeaway/pie-spinner";
10
- function R(n) {
11
+ function W(n) {
11
12
  if (Array.isArray(n)) {
12
- for (var e = 0, i = Array(n.length); e < n.length; e++)
13
- i[e] = n[e];
14
- return i;
13
+ for (var e = 0, o = Array(n.length); e < n.length; e++)
14
+ o[e] = n[e];
15
+ return o;
15
16
  } else
16
17
  return Array.from(n);
17
18
  }
18
- var z = !1;
19
+ var C = !1;
19
20
  if (typeof window < "u") {
20
21
  var A = {
21
22
  get passive() {
22
- z = !0;
23
+ C = !0;
23
24
  }
24
25
  };
25
26
  window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
26
27
  }
27
- var B = 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 = [], k = !1, $ = -1, h = void 0, u = void 0, L = function(e) {
28
- return p.some(function(i) {
29
- return !!(i.options.allowTouchMove && i.options.allowTouchMove(e));
28
+ var B = 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 = [], k = !1, S = -1, h = void 0, u = void 0, L = function(e) {
29
+ return p.some(function(o) {
30
+ return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
30
31
  });
31
32
  }, w = function(e) {
32
- var i = e || window.event;
33
- return L(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
34
- }, j = function(e) {
33
+ var o = e || window.event;
34
+ return L(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
35
+ }, Y = function(e) {
35
36
  if (u === void 0) {
36
- var i = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
37
- i && o > 0 && (u = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
37
+ var o = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
38
+ o && i > 0 && (u = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
38
39
  }
39
40
  h === void 0 && (h = document.body.style.overflow, document.body.style.overflow = "hidden");
40
- }, W = function() {
41
+ }, V = function() {
41
42
  u !== void 0 && (document.body.style.paddingRight = u, u = void 0), h !== void 0 && (document.body.style.overflow = h, h = void 0);
42
43
  }, q = function(e) {
43
44
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
44
- }, Y = function(e, i) {
45
- var o = e.targetTouches[0].clientY - $;
46
- return L(e.target) ? !1 : i && i.scrollTop === 0 && o > 0 || q(i) && o < 0 ? w(e) : (e.stopPropagation(), !0);
47
- }, V = function(e, i) {
45
+ }, H = function(e, o) {
46
+ var i = e.targetTouches[0].clientY - S;
47
+ return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ? w(e) : (e.stopPropagation(), !0);
48
+ }, U = function(e, o) {
48
49
  if (!e) {
49
50
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
50
51
  return;
@@ -52,80 +53,34 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
52
53
  if (!p.some(function(t) {
53
54
  return t.targetElement === e;
54
55
  })) {
55
- var o = {
56
+ var i = {
56
57
  targetElement: e,
57
- options: i || {}
58
+ options: o || {}
58
59
  };
59
- p = [].concat(R(p), [o]), B ? (e.ontouchstart = function(t) {
60
- t.targetTouches.length === 1 && ($ = t.targetTouches[0].clientY);
60
+ p = [].concat(W(p), [i]), B ? (e.ontouchstart = function(t) {
61
+ t.targetTouches.length === 1 && (S = t.targetTouches[0].clientY);
61
62
  }, e.ontouchmove = function(t) {
62
- t.targetTouches.length === 1 && Y(t, e);
63
- }, k || (document.addEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !0)) : j(i);
63
+ t.targetTouches.length === 1 && H(t, e);
64
+ }, k || (document.addEventListener("touchmove", w, C ? { passive: !1 } : void 0), k = !0)) : Y(o);
64
65
  }
65
- }, H = function(e) {
66
+ }, K = function(e) {
66
67
  if (!e) {
67
68
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
68
69
  return;
69
70
  }
70
- p = p.filter(function(i) {
71
- return i.targetElement !== e;
72
- }), B ? (e.ontouchstart = null, e.ontouchmove = null, k && p.length === 0 && (document.removeEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !1)) : p.length || W();
71
+ p = p.filter(function(o) {
72
+ return o.targetElement !== e;
73
+ }), B ? (e.ontouchstart = null, e.ontouchmove = null, k && p.length === 0 && (document.removeEventListener("touchmove", w, C ? { passive: !1 } : void 0), k = !1)) : p.length || V();
73
74
  };
74
- const U = (n) => {
75
- class e extends n {
76
- /**
77
- * A getter to determine whether the text direction is right-to-left (RTL).
78
- * If the `dir` property is present on the component, it will be used to determine the text direction.
79
- * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
80
- * from the document's root element. This inference is not available during SSR.
81
- * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
82
- *
83
- * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
84
- */
85
- get isRTL() {
86
- return this.dir ? this.dir === "rtl" : !D && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
87
- }
88
- }
89
- return e;
90
- }, C = (n, e, i) => function(t, a) {
91
- const s = `#${a}`;
92
- Object.defineProperty(t, a, {
93
- get() {
94
- return this[s];
95
- },
96
- set(g) {
97
- e.includes(g) ? this[s] = g : (console.error(
98
- `<${n}> Invalid value "${g}" provided for property "${a}".`,
99
- `Must be one of: ${e.join(" | ")}.`,
100
- `Falling back to default value: "${i}"`
101
- ), this[s] = i);
102
- },
103
- configurable: !0
104
- });
105
- }, G = (n) => function(i, o) {
106
- const t = `#${o}`;
107
- Object.defineProperty(i, o, {
108
- get() {
109
- return this[t];
110
- },
111
- set(a) {
112
- (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[t] = a;
113
- },
114
- configurable: !0
115
- });
116
- };
117
- function X(n, e) {
118
- customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
119
- }
120
- const K = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.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=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline: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: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:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) 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:var(--modal-content-padding-inline);padding-block: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;block-size:auto;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}}
121
- `, J = ["h1", "h2", "h3", "h4", "h5", "h6"], Q = ["small", "medium", "large"], Z = ["top", "center"], x = "pie-modal-close", b = "pie-modal-open", _ = "pie-modal-back", ee = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click";
122
- var oe = Object.defineProperty, te = Object.getOwnPropertyDescriptor, d = (n, e, i, o) => {
123
- for (var t = o > 1 ? void 0 : o ? te(e, i) : e, a = n.length - 1, s; a >= 0; a--)
124
- (s = n[a]) && (t = (o ? s(e, i, t) : s(t)) || t);
125
- return o && t && oe(e, i, t), t;
75
+ const G = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.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=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline: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: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:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) 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:var(--modal-content-padding-inline);padding-block: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;block-size:auto;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
+ `, X = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], x = "pie-modal-close", b = "pie-modal-open", _ = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click";
77
+ var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (n, e, o, i) => {
78
+ for (var t = i > 1 ? void 0 : i ? ie(e, o) : e, r = n.length - 1, c; r >= 0; r--)
79
+ (c = n[r]) && (t = (i ? c(e, o, t) : c(t)) || t);
80
+ return i && t && oe(e, o, t), t;
126
81
  };
127
82
  const f = "pie-modal";
128
- class l extends U(F) {
83
+ class a extends I(P) {
129
84
  constructor() {
130
85
  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) => {
131
86
  this.isDismissible || e.preventDefault();
@@ -133,31 +88,25 @@ class l extends U(F) {
133
88
  var v;
134
89
  if (!this.isDismissible)
135
90
  return;
136
- const i = (v = this._dialog) == null ? void 0 : v.getBoundingClientRect(), {
137
- top: o = 0,
91
+ const o = (v = this._dialog) == null ? void 0 : v.getBoundingClientRect(), {
92
+ top: i = 0,
138
93
  bottom: t = 0,
139
- left: a = 0,
140
- right: s = 0
141
- } = i || {};
142
- if (o === 0 && t === 0 && a === 0 && s === 0)
94
+ left: r = 0,
95
+ right: c = 0
96
+ } = o || {};
97
+ if (i === 0 && t === 0 && r === 0 && c === 0)
143
98
  return;
144
- (e.clientY < o || e.clientY > t || e.clientX < a || e.clientX > s) && (this.isOpen = !1);
145
- }, this._dispatchModalCustomEvent = (e) => {
146
- const i = new CustomEvent(e, {
147
- bubbles: !0,
148
- composed: !0
149
- });
150
- this.dispatchEvent(i);
99
+ (e.clientY < i || e.clientY > t || e.clientX < r || e.clientX > c) && (this.isOpen = !1);
151
100
  };
152
101
  }
153
102
  connectedCallback() {
154
- super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(b, this._handleModalOpened.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
103
+ super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(b, (e) => this._handleModalOpened(e)), document.addEventListener(x, (e) => this._handleModalClosed(e)), document.addEventListener(_, (e) => this._handleModalClosed(e));
155
104
  }
156
105
  disconnectedCallback() {
157
- document.removeEventListener(b, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
106
+ document.removeEventListener(b, (e) => this._handleModalOpened(e)), document.removeEventListener(x, (e) => this._handleModalClosed(e)), document.removeEventListener(_, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
158
107
  }
159
108
  async firstUpdated(e) {
160
- super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((o) => o.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._dialog.addEventListener("close", () => {
109
+ super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((i) => i.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._dialog.addEventListener("close", () => {
161
110
  this.isOpen = !1;
162
111
  })), this._handleModalOpenStateOnFirstRender(e);
163
112
  }
@@ -167,18 +116,26 @@ class l extends U(F) {
167
116
  /**
168
117
  * Opens the dialog element and disables page scrolling
169
118
  */
170
- _handleModalOpened() {
171
- var i, o, t, a;
172
- const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
173
- e && V(e), !((o = this._dialog) != null && o.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((a = this._dialog) == null || a.showModal());
119
+ _handleModalOpened(e) {
120
+ var i, t, r, c;
121
+ const { targetModal: o } = e.detail;
122
+ if (o === this) {
123
+ const g = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
124
+ if (g && U(g), (t = this._dialog) != null && t.hasAttribute("open") || !((r = this._dialog) != null && r.isConnected))
125
+ return;
126
+ (c = this._dialog) == null || c.showModal();
127
+ }
174
128
  }
175
129
  /**
176
130
  * Closes the dialog element and re-enables page scrolling
177
131
  */
178
- _handleModalClosed() {
179
- var i, o;
180
- const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
181
- e && H(e), (o = this._dialog) == null || o.close(), this._returnFocus();
132
+ _handleModalClosed(e) {
133
+ var i, t;
134
+ const { targetModal: o } = e.detail;
135
+ if (o === this) {
136
+ const r = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
137
+ r && K(r), (t = this._dialog) == null || t.close(), this._returnFocus();
138
+ }
182
139
  }
183
140
  // Handles the value of the isOpen property on first render of the component
184
141
  _handleModalOpenStateOnFirstRender(e) {
@@ -186,21 +143,21 @@ class l extends U(F) {
186
143
  }
187
144
  // Handles changes to the modal isOpen property by dispatching any appropriate events
188
145
  _handleModalOpenStateChanged(e) {
189
- const i = e.get("isOpen");
190
- i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(b));
146
+ const o = e.get("isOpen");
147
+ o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(b));
191
148
  }
192
149
  _handleActionClick(e) {
193
- var i, o;
194
- e === "leading" ? ((i = this._dialog) == null || i.close("leading"), this._dispatchModalCustomEvent(ee)) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), this._dispatchModalCustomEvent(ie));
150
+ var o, i;
151
+ e === "leading" ? ((o = this._dialog) == null || o.close("leading"), this._dispatchModalCustomEvent(Z)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(ee));
195
152
  }
196
153
  /**
197
154
  * Return focus to the specified element, providing the selector is valid
198
155
  * and the chosen element can be found.
199
156
  */
200
157
  _returnFocus() {
201
- var i, o;
202
- const e = (i = this.returnFocusAfterCloseSelector) == null ? void 0 : i.trim();
203
- e && ((o = document.querySelector(e)) == null || o.focus());
158
+ var o, i;
159
+ const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
160
+ e && ((i = document.querySelector(e)) == null || i.focus());
204
161
  }
205
162
  /**
206
163
  * Template for the close button element. Called within the
@@ -217,7 +174,7 @@ class l extends U(F) {
217
174
  }}"
218
175
  variant="ghost-secondary"
219
176
  class="c-modal-closeBtn"
220
- aria-label="${((e = this.aria) == null ? void 0 : e.close) || c}"
177
+ aria-label="${((e = this.aria) == null ? void 0 : e.close) || s}"
221
178
  data-test-id="modal-close-button">
222
179
  <icon-close></icon-close>
223
180
  </pie-icon-button>`;
@@ -237,7 +194,7 @@ class l extends U(F) {
237
194
  }}"
238
195
  variant="ghost-secondary"
239
196
  class="c-modal-backBtn"
240
- aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
197
+ aria-label="${((e = this.aria) == null ? void 0 : e.back) || s}"
241
198
  data-test-id="modal-back-button">
242
199
  ${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
243
200
  </pie-icon-button>
@@ -253,18 +210,18 @@ class l extends U(F) {
253
210
  * @private
254
211
  */
255
212
  renderLeadingAction() {
256
- const { text: e, variant: i = "primary", ariaLabel: o } = this.leadingAction;
213
+ const { text: e, variant: o = "primary", ariaLabel: i } = this.leadingAction;
257
214
  return e ? m`
258
215
  <pie-button
259
- variant="${i}"
260
- aria-label="${o || c}"
216
+ variant="${o}"
217
+ aria-label="${i || s}"
261
218
  type="submit"
262
219
  ?isFullWidth="${this.hasStackedActions}"
263
220
  @click="${() => this._handleActionClick("leading")}"
264
221
  data-test-id="modal-leading-action">
265
222
  ${e}
266
223
  </pie-button>
267
- ` : c;
224
+ ` : s;
268
225
  }
269
226
  /**
270
227
  * Render supportingAction button depending on prop availability.
@@ -278,18 +235,18 @@ class l extends U(F) {
278
235
  * @private
279
236
  */
280
237
  renderSupportingAction() {
281
- const { text: e, variant: i = "ghost", ariaLabel: o } = this.supportingAction;
238
+ const { text: e, variant: o = "ghost", ariaLabel: i } = this.supportingAction;
282
239
  return e ? this.leadingAction ? m`
283
240
  <pie-button
284
- variant="${i}"
285
- aria-label="${o || c}"
241
+ variant="${o}"
242
+ aria-label="${i || s}"
286
243
  type="reset"
287
244
  ?isFullWidth="${this.hasStackedActions}"
288
245
  @click="${() => this._handleActionClick("supporting")}"
289
246
  data-test-id="modal-supporting-action">
290
247
  ${e}
291
248
  </pie-button>
292
- ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), c) : c;
249
+ ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), s) : s;
293
250
  }
294
251
  /**
295
252
  * Renders the modal inner content and footer of the modal.
@@ -301,51 +258,51 @@ class l extends U(F) {
301
258
  <div class="c-modal-contentInner">
302
259
  <slot></slot>
303
260
  </div>
304
- ${this.isLoading ? m`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : c}
261
+ ${this.isLoading ? m`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : s}
305
262
  </article>
306
263
  <footer class="c-modal-footer">
307
- ${this.leadingAction ? this.renderLeadingAction() : c}
308
- ${this.supportingAction ? this.renderSupportingAction() : c}
264
+ ${this.leadingAction ? this.renderLeadingAction() : s}
265
+ ${this.supportingAction ? this.renderSupportingAction() : s}
309
266
  </footer>`;
310
267
  }
311
268
  render() {
312
269
  const {
313
270
  aria: e,
314
- hasBackButton: i,
315
- hasStackedActions: o,
271
+ hasBackButton: o,
272
+ hasStackedActions: i,
316
273
  heading: t,
317
- headingLevel: a = "h2",
318
- isDismissible: s,
274
+ headingLevel: r = "h2",
275
+ isDismissible: c,
319
276
  isFooterPinned: g,
320
277
  isFullWidthBelowMid: v,
321
278
  isLoading: y,
322
- leadingAction: S,
323
- position: M,
279
+ leadingAction: M,
280
+ position: $,
324
281
  size: E,
325
- supportingAction: P
326
- } = this, O = I(a);
282
+ supportingAction: D
283
+ } = this, O = F(r);
327
284
  return m`
328
285
  <dialog
329
286
  id="dialog"
330
287
  class="c-modal"
331
288
  size="${E}"
332
- position="${M}"
333
- ?hasActions=${S || P}
334
- ?hasBackButton=${i}
335
- ?hasStackedActions=${o}
336
- ?isDismissible=${s}
289
+ position="${$}"
290
+ ?hasActions=${M || D}
291
+ ?hasBackButton=${o}
292
+ ?hasStackedActions=${i}
293
+ ?isDismissible=${c}
337
294
  ?isFooterPinned=${g}
338
295
  ?isFullWidthBelowMid=${v}
339
296
  ?isLoading=${y}
340
297
  aria-busy="${y ? "true" : "false"}"
341
- aria-label="${y && (e == null ? void 0 : e.loading) || c}"
298
+ aria-label="${y && (e == null ? void 0 : e.loading) || s}"
342
299
  data-test-id="pie-modal">
343
300
  <header class="c-modal-header">
344
- ${i ? this.renderBackButton() : c}
301
+ ${o ? this.renderBackButton() : s}
345
302
  <${O} class="c-modal-heading">
346
303
  ${t}
347
304
  </${O}>
348
- ${s ? this.renderCloseButton() : c}
305
+ ${c ? this.renderCloseButton() : s}
349
306
  </header>
350
307
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
351
308
  g ? this.renderModalContentAndFooter() : m`
@@ -355,69 +312,88 @@ class l extends U(F) {
355
312
  `}
356
313
  </dialog>`;
357
314
  }
315
+ /**
316
+ * Note: We should aim to have a shareable event helper system to allow
317
+ * us to share this across components in-future.
318
+ *
319
+ * Dispatch a custom event.
320
+ *
321
+ * To be used whenever we have behavioural events we want to
322
+ * bubble up through the modal.
323
+ *
324
+ * @param {string} eventType
325
+ */
326
+ _dispatchModalCustomEvent(e) {
327
+ const o = new CustomEvent(e, {
328
+ bubbles: !0,
329
+ composed: !0,
330
+ detail: { targetModal: this }
331
+ });
332
+ this.dispatchEvent(o);
333
+ }
358
334
  }
359
- l.styles = T(K);
360
- d([
361
- r({ type: Object })
362
- ], l.prototype, "aria", 2);
363
- d([
364
- r({ type: String }),
365
- G(f)
366
- ], l.prototype, "heading", 2);
367
- d([
368
- r(),
369
- C(f, J, "h2")
370
- ], l.prototype, "headingLevel", 2);
371
- d([
372
- r({ type: Boolean })
373
- ], l.prototype, "hasBackButton", 2);
374
- d([
375
- r({ type: Boolean })
376
- ], l.prototype, "hasStackedActions", 2);
377
- d([
378
- r({ type: Boolean, reflect: !0 })
379
- ], l.prototype, "isDismissible", 2);
380
- d([
381
- r({ type: Boolean })
382
- ], l.prototype, "isFooterPinned", 2);
383
- d([
384
- r({ type: Boolean })
385
- ], l.prototype, "isFullWidthBelowMid", 2);
386
- d([
387
- r({ type: Boolean, reflect: !0 })
388
- ], l.prototype, "isLoading", 2);
389
- d([
390
- r({ type: Boolean })
391
- ], l.prototype, "isOpen", 2);
392
- d([
393
- r({ type: Object })
394
- ], l.prototype, "leadingAction", 2);
395
- d([
396
- r(),
397
- C(f, Z, "center")
398
- ], l.prototype, "position", 2);
399
- d([
400
- r()
401
- ], l.prototype, "returnFocusAfterCloseSelector", 2);
402
- d([
403
- r(),
404
- C(f, Q, "medium")
405
- ], l.prototype, "size", 2);
406
- d([
407
- r({ type: Object })
408
- ], l.prototype, "supportingAction", 2);
409
- d([
335
+ a.styles = T(G);
336
+ l([
337
+ d({ type: Object })
338
+ ], a.prototype, "aria", 2);
339
+ l([
340
+ d({ type: String }),
341
+ R(f)
342
+ ], a.prototype, "heading", 2);
343
+ l([
344
+ d(),
345
+ z(f, X, "h2")
346
+ ], a.prototype, "headingLevel", 2);
347
+ l([
348
+ d({ type: Boolean })
349
+ ], a.prototype, "hasBackButton", 2);
350
+ l([
351
+ d({ type: Boolean })
352
+ ], a.prototype, "hasStackedActions", 2);
353
+ l([
354
+ d({ type: Boolean, reflect: !0 })
355
+ ], a.prototype, "isDismissible", 2);
356
+ l([
357
+ d({ type: Boolean })
358
+ ], a.prototype, "isFooterPinned", 2);
359
+ l([
360
+ d({ type: Boolean })
361
+ ], a.prototype, "isFullWidthBelowMid", 2);
362
+ l([
363
+ d({ type: Boolean, reflect: !0 })
364
+ ], a.prototype, "isLoading", 2);
365
+ l([
366
+ d({ type: Boolean })
367
+ ], a.prototype, "isOpen", 2);
368
+ l([
369
+ d({ type: Object })
370
+ ], a.prototype, "leadingAction", 2);
371
+ l([
372
+ d(),
373
+ z(f, Q, "center")
374
+ ], a.prototype, "position", 2);
375
+ l([
376
+ d()
377
+ ], a.prototype, "returnFocusAfterCloseSelector", 2);
378
+ l([
379
+ d(),
380
+ z(f, J, "medium")
381
+ ], a.prototype, "size", 2);
382
+ l([
383
+ d({ type: Object })
384
+ ], a.prototype, "supportingAction", 2);
385
+ l([
410
386
  N("dialog")
411
- ], l.prototype, "_dialog", 2);
412
- X(f, l);
387
+ ], a.prototype, "_dialog", 2);
388
+ j(f, a);
413
389
  export {
414
390
  _ as ON_MODAL_BACK_EVENT,
415
391
  x as ON_MODAL_CLOSE_EVENT,
416
- ee as ON_MODAL_LEADING_ACTION_CLICK,
392
+ Z as ON_MODAL_LEADING_ACTION_CLICK,
417
393
  b as ON_MODAL_OPEN_EVENT,
418
- ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
419
- l as PieModal,
420
- J as headingLevels,
421
- Z as positions,
422
- Q as sizes
394
+ ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
395
+ a as PieModal,
396
+ X as headingLevels,
397
+ Q as positions,
398
+ J as sizes
423
399
  };
package/dist/react.js CHANGED
@@ -1,17 +1,18 @@
1
1
  import * as o from "react";
2
2
  import { createComponent as i } from "@lit/react";
3
3
  import { PieModal as e } from "./index.js";
4
- import { ON_MODAL_BACK_EVENT as C, ON_MODAL_CLOSE_EVENT as P, ON_MODAL_LEADING_ACTION_CLICK as A, ON_MODAL_OPEN_EVENT as L, ON_MODAL_SUPPORTING_ACTION_CLICK as E, headingLevels as g, positions as k, sizes as D } from "./index.js";
4
+ import { ON_MODAL_BACK_EVENT as P, ON_MODAL_CLOSE_EVENT as A, ON_MODAL_LEADING_ACTION_CLICK as L, ON_MODAL_OPEN_EVENT as E, ON_MODAL_SUPPORTING_ACTION_CLICK as g, headingLevels as k, positions as D, sizes as I } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/static-html.js";
7
7
  import "lit/decorators.js";
8
8
  import "@justeattakeaway/pie-button";
9
9
  import "@justeattakeaway/pie-icon-button";
10
+ import "@justeattakeaway/pie-webc-core";
10
11
  import "@justeattakeaway/pie-icons-webc/IconClose";
11
12
  import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
12
13
  import "@justeattakeaway/pie-icons-webc/IconChevronRight";
13
14
  import "@justeattakeaway/pie-spinner";
14
- const s = i({
15
+ const N = i({
15
16
  displayName: "PieModal",
16
17
  elementClass: e,
17
18
  react: o,
@@ -30,13 +31,13 @@ const s = i({
30
31
  }
31
32
  });
32
33
  export {
33
- C as ON_MODAL_BACK_EVENT,
34
- P as ON_MODAL_CLOSE_EVENT,
35
- A as ON_MODAL_LEADING_ACTION_CLICK,
36
- L as ON_MODAL_OPEN_EVENT,
37
- E as ON_MODAL_SUPPORTING_ACTION_CLICK,
38
- s as PieModal,
39
- g as headingLevels,
40
- k as positions,
41
- D as sizes
34
+ P as ON_MODAL_BACK_EVENT,
35
+ A as ON_MODAL_CLOSE_EVENT,
36
+ L as ON_MODAL_LEADING_ACTION_CLICK,
37
+ E as ON_MODAL_OPEN_EVENT,
38
+ g as ON_MODAL_SUPPORTING_ACTION_CLICK,
39
+ N as PieModal,
40
+ k as headingLevels,
41
+ D as positions,
42
+ I as sizes
42
43
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "0.34.0",
3
+ "version": "0.35.0",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -29,18 +29,18 @@
29
29
  "license": "Apache-2.0",
30
30
  "devDependencies": {
31
31
  "@justeat/pie-design-tokens": "5.9.0",
32
- "@justeattakeaway/pie-components-config": "0.6.0",
32
+ "@justeattakeaway/pie-components-config": "0.6.1",
33
33
  "@types/body-scroll-lock": "3.1.2"
34
34
  },
35
35
  "volta": {
36
36
  "extends": "../../../package.json"
37
37
  },
38
38
  "dependencies": {
39
- "@justeattakeaway/pie-button": "0.40.0",
40
- "@justeattakeaway/pie-icon-button": "0.22.0",
41
- "@justeattakeaway/pie-icons-webc": "0.11.1",
42
- "@justeattakeaway/pie-spinner": "0.3.0",
43
- "@justeattakeaway/pie-webc-core": "0.12.0",
39
+ "@justeattakeaway/pie-button": "0.40.1",
40
+ "@justeattakeaway/pie-icon-button": "0.24.0",
41
+ "@justeattakeaway/pie-icons-webc": "0.12.0",
42
+ "@justeattakeaway/pie-spinner": "0.3.1",
43
+ "@justeattakeaway/pie-webc-core": "0.13.0",
44
44
  "body-scroll-lock": "3.1.5",
45
45
  "dialog-polyfill": "0.5.6"
46
46
  },
package/src/index.ts CHANGED
@@ -36,6 +36,10 @@ export * from './defs';
36
36
 
37
37
  const componentSelector = 'pie-modal';
38
38
 
39
+ export interface ModalEventDetail {
40
+ targetModal: PieModal;
41
+ }
42
+
39
43
  /**
40
44
  * @tagname pie-modal
41
45
  * @event {CustomEvent} pie-modal-open - when the modal is opened.
@@ -105,15 +109,15 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
105
109
  connectedCallback () : void {
106
110
  super.connectedCallback();
107
111
  this.addEventListener('click', (event) => this._handleDialogLightDismiss(event));
108
- document.addEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
109
- document.addEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
110
- document.addEventListener(ON_MODAL_BACK_EVENT, this._handleModalClosed.bind(this));
112
+ document.addEventListener(ON_MODAL_OPEN_EVENT, (event) => this._handleModalOpened(<CustomEvent>event));
113
+ document.addEventListener(ON_MODAL_CLOSE_EVENT, (event) => this._handleModalClosed(<CustomEvent>event));
114
+ document.addEventListener(ON_MODAL_BACK_EVENT, (event) => this._handleModalClosed(<CustomEvent>event));
111
115
  }
112
116
 
113
117
  disconnectedCallback () : void {
114
- document.removeEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
115
- document.removeEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
116
- document.removeEventListener(ON_MODAL_BACK_EVENT, this._handleModalClosed.bind(this));
118
+ document.removeEventListener(ON_MODAL_OPEN_EVENT, (event) => this._handleModalOpened(<CustomEvent>event));
119
+ document.removeEventListener(ON_MODAL_CLOSE_EVENT, (event) => this._handleModalClosed(<CustomEvent>event));
120
+ document.removeEventListener(ON_MODAL_BACK_EVENT, (event) => this._handleModalClosed(<CustomEvent>event));
117
121
  super.disconnectedCallback();
118
122
  }
119
123
 
@@ -140,32 +144,41 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
140
144
  /**
141
145
  * Opens the dialog element and disables page scrolling
142
146
  */
143
- private _handleModalOpened () : void {
144
- const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
147
+ private _handleModalOpened (event: CustomEvent): void {
148
+ const { targetModal } = event.detail;
145
149
 
146
- if (modalScrollContainer) {
147
- disableBodyScroll(modalScrollContainer);
148
- }
150
+ if (targetModal === this) {
151
+ const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
149
152
 
150
- if (this._dialog?.hasAttribute('open') || !this._dialog?.isConnected) {
151
- return;
153
+ if (modalScrollContainer) {
154
+ disableBodyScroll(modalScrollContainer);
155
+ }
156
+
157
+ if (this._dialog?.hasAttribute('open') || !this._dialog?.isConnected) {
158
+ return;
159
+ }
160
+
161
+ // The ::backdrop pseudoelement is only shown if the modal is opened via JS
162
+ this._dialog?.showModal();
152
163
  }
153
- // The ::backdrop pseudoelement is only shown if the modal is opened via JS
154
- this._dialog?.showModal();
155
164
  }
156
165
 
157
166
  /**
158
167
  * Closes the dialog element and re-enables page scrolling
159
168
  */
160
- private _handleModalClosed () : void {
161
- const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
169
+ private _handleModalClosed (event: CustomEvent): void {
170
+ const { targetModal } = event.detail;
162
171
 
163
- if (modalScrollContainer) {
164
- enableBodyScroll(modalScrollContainer);
165
- }
172
+ if (targetModal === this) {
173
+ const modalScrollContainer = this._dialog?.querySelector('.c-modal-scrollContainer');
174
+
175
+ if (modalScrollContainer) {
176
+ enableBodyScroll(modalScrollContainer);
177
+ }
166
178
 
167
- this._dialog?.close();
168
- this._returnFocus();
179
+ this._dialog?.close();
180
+ this._returnFocus();
181
+ }
169
182
  }
170
183
 
171
184
  /**
@@ -448,14 +461,15 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
448
461
  *
449
462
  * @param {string} eventType
450
463
  */
451
- private _dispatchModalCustomEvent = (eventType: string) : void => {
452
- const event = new CustomEvent(eventType, {
464
+ private _dispatchModalCustomEvent (eventType: string): void {
465
+ const event = new CustomEvent<ModalEventDetail>(eventType, {
453
466
  bubbles: true,
454
467
  composed: true,
468
+ detail: { targetModal: this },
455
469
  });
456
470
 
457
471
  this.dispatchEvent(event);
458
- };
472
+ }
459
473
  }
460
474
 
461
475
  defineCustomElement(componentSelector, PieModal);