@justeattakeaway/pie-modal 0.12.0 → 0.14.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 (18) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/CHANGELOG.md +33 -0
  3. package/README.md +12 -8
  4. package/dist/index.js +238 -155
  5. package/dist/react.js +127 -125
  6. package/dist/types/packages/components/pie-modal/src/defs.d.ts +37 -1
  7. package/dist/types/packages/components/pie-modal/src/defs.d.ts.map +1 -1
  8. package/dist/types/packages/components/pie-modal/src/index.d.ts +38 -11
  9. package/dist/types/packages/components/pie-modal/src/index.d.ts.map +1 -1
  10. package/dist/types/packages/components/pie-modal/src/react.d.ts +3 -2
  11. package/dist/types/packages/components/pie-modal/src/react.d.ts.map +1 -1
  12. package/package.json +2 -1
  13. package/src/defs.ts +48 -1
  14. package/src/index.ts +144 -41
  15. package/src/modal.scss +230 -20
  16. package/test/component/pie-modal.spec.ts +335 -57
  17. package/test/helpers/index.ts +2 -0
  18. package/test/visual/pie-modal.spec.ts +227 -60
package/dist/index.js CHANGED
@@ -1,16 +1,16 @@
1
- import { nothing as x, unsafeCSS as D, LitElement as B } from "lit";
2
- import { unsafeStatic as E, html as z } from "lit/static-html.js";
3
- import { property as u, query as L } from "lit/decorators.js";
4
- import { property as T } from "lit/decorators/property.js";
5
- var $ = Object.defineProperty, F = Object.getOwnPropertyDescriptor, A = (n, e, t, o) => {
6
- for (var i = o > 1 ? void 0 : o ? F(e, t) : e, d = n.length - 1, l; d >= 0; d--)
7
- (l = n[d]) && (i = (o ? l(e, t, i) : l(i)) || i);
8
- return o && i && $(e, t, i), i;
1
+ import { nothing as g, unsafeCSS as E, LitElement as D } from "lit";
2
+ import { html as h, unsafeStatic as T } from "lit/static-html.js";
3
+ import { property as s, query as A } from "lit/decorators.js";
4
+ import { property as F } from "lit/decorators/property.js";
5
+ var R = Object.defineProperty, j = Object.getOwnPropertyDescriptor, I = (n, e, t, i) => {
6
+ for (var o = i > 1 ? void 0 : i ? j(e, t) : e, a = n.length - 1, d; a >= 0; a--)
7
+ (d = n[a]) && (o = (i ? d(e, t, o) : d(o)) || o);
8
+ return i && o && R(e, t, o), o;
9
9
  };
10
- const k = (n) => {
10
+ const q = (n) => {
11
11
  class e extends n {
12
12
  constructor() {
13
- super(...arguments), this.dir = "";
13
+ super(...arguments), this.dir = "ltr";
14
14
  }
15
15
  /**
16
16
  * Returns true if the element is in Right to Left mode.
@@ -22,41 +22,41 @@ const k = (n) => {
22
22
  * will not be reactive and is only computed once
23
23
  */
24
24
  get isRTL() {
25
- var o;
26
- return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((o = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : o.direction) === "rtl";
25
+ var i;
26
+ return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((i = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : i.direction) === "rtl";
27
27
  }
28
28
  }
29
- return A([
30
- T({ type: String })
29
+ return I([
30
+ F({ type: String, reflect: !0 })
31
31
  ], e.prototype, "dir", 2), e;
32
- }, C = (n, e, t) => function(i, d) {
33
- const l = `#${d}`;
34
- Object.defineProperty(i, d, {
32
+ }, B = (n, e, t) => function(o, a) {
33
+ const d = `#${a}`;
34
+ Object.defineProperty(o, a, {
35
35
  get() {
36
- return this[l];
36
+ return this[d];
37
37
  },
38
- set(m) {
39
- const p = this[l];
40
- e.includes(m) ? this[l] = m : (console.error(
41
- `<${n}> Invalid value "${m}" provided for property "${d}".`,
38
+ set(p) {
39
+ const u = this[d];
40
+ e.includes(p) ? this[d] = p : (console.error(
41
+ `<${n}> Invalid value "${p}" provided for property "${a}".`,
42
42
  `Must be one of: ${e.join(" | ")}.`,
43
43
  `Falling back to default value: "${t}"`
44
- ), this[l] = t), this.requestUpdate(d, p);
44
+ ), this[d] = t), this.requestUpdate(a, u);
45
45
  }
46
46
  });
47
- }, R = (n) => function(t, o) {
48
- const i = `#${o}`;
49
- Object.defineProperty(t, o, {
47
+ }, V = (n) => function(t, i) {
48
+ const o = `#${i}`;
49
+ Object.defineProperty(t, i, {
50
50
  get() {
51
- return this[i];
51
+ return this[o];
52
52
  },
53
- set(d) {
54
- const l = this[i];
55
- (d == null || typeof d == "string" && d.trim() === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[i] = d, this.requestUpdate(o, l);
53
+ set(a) {
54
+ const d = this[o];
55
+ (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${i}"`), this[o] = a, this.requestUpdate(i, d);
56
56
  }
57
57
  });
58
58
  };
59
- function q(n) {
59
+ function N(n) {
60
60
  if (Array.isArray(n)) {
61
61
  for (var e = 0, t = Array(n.length); e < n.length; e++)
62
62
  t[e] = n[e];
@@ -73,103 +73,103 @@ if (typeof window < "u") {
73
73
  };
74
74
  window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
75
75
  }
76
- var g = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), c = [], y = !1, P = -1, h = void 0, r = void 0, f = void 0, M = function(e) {
77
- return c.some(function(t) {
76
+ var w = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), m = [], k = !1, M = -1, f = void 0, c = void 0, v = void 0, $ = function(e) {
77
+ return m.some(function(t) {
78
78
  return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
79
79
  });
80
- }, b = function(e) {
80
+ }, x = function(e) {
81
81
  var t = e || window.event;
82
- return M(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
83
- }, I = function(e) {
84
- if (f === void 0) {
85
- var t = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
86
- if (t && o > 0) {
87
- var i = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
88
- f = document.body.style.paddingRight, document.body.style.paddingRight = i + o + "px";
82
+ return $(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
83
+ }, H = function(e) {
84
+ if (v === void 0) {
85
+ var t = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
86
+ if (t && i > 0) {
87
+ var o = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
88
+ v = document.body.style.paddingRight, document.body.style.paddingRight = o + i + "px";
89
89
  }
90
90
  }
91
- h === void 0 && (h = document.body.style.overflow, document.body.style.overflow = "hidden");
92
- }, V = function() {
93
- f !== void 0 && (document.body.style.paddingRight = f, f = void 0), h !== void 0 && (document.body.style.overflow = h, h = void 0);
94
- }, j = function() {
91
+ f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
92
+ }, W = function() {
93
+ v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
94
+ }, Y = function() {
95
95
  return window.requestAnimationFrame(function() {
96
- if (r === void 0) {
97
- r = {
96
+ if (c === void 0) {
97
+ c = {
98
98
  position: document.body.style.position,
99
99
  top: document.body.style.top,
100
100
  left: document.body.style.left
101
101
  };
102
- var e = window, t = e.scrollY, o = e.scrollX, i = e.innerHeight;
103
- document.body.style.position = "fixed", document.body.style.top = -t, document.body.style.left = -o, setTimeout(function() {
102
+ var e = window, t = e.scrollY, i = e.scrollX, o = e.innerHeight;
103
+ document.body.style.position = "fixed", document.body.style.top = -t, document.body.style.left = -i, setTimeout(function() {
104
104
  return window.requestAnimationFrame(function() {
105
- var d = i - window.innerHeight;
106
- d && t >= i && (document.body.style.top = -(t + d));
105
+ var a = o - window.innerHeight;
106
+ a && t >= o && (document.body.style.top = -(t + a));
107
107
  });
108
108
  }, 300);
109
109
  }
110
110
  });
111
- }, H = function() {
112
- if (r !== void 0) {
111
+ }, U = function() {
112
+ if (c !== void 0) {
113
113
  var e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
114
- document.body.style.position = r.position, document.body.style.top = r.top, document.body.style.left = r.left, window.scrollTo(t, e), r = void 0;
114
+ document.body.style.position = c.position, document.body.style.top = c.top, document.body.style.left = c.left, window.scrollTo(t, e), c = void 0;
115
115
  }
116
- }, W = function(e) {
116
+ }, X = function(e) {
117
117
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
118
- }, N = function(e, t) {
119
- var o = e.targetTouches[0].clientY - P;
120
- return M(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || W(t) && o < 0 ? b(e) : (e.stopPropagation(), !0);
121
- }, Y = function(e, t) {
118
+ }, G = function(e, t) {
119
+ var i = e.targetTouches[0].clientY - M;
120
+ return $(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || X(t) && i < 0 ? x(e) : (e.stopPropagation(), !0);
121
+ }, J = function(e, t) {
122
122
  if (!e) {
123
123
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
124
124
  return;
125
125
  }
126
- if (!c.some(function(i) {
127
- return i.targetElement === e;
126
+ if (!m.some(function(o) {
127
+ return o.targetElement === e;
128
128
  })) {
129
- var o = {
129
+ var i = {
130
130
  targetElement: e,
131
131
  options: t || {}
132
132
  };
133
- c = [].concat(q(c), [o]), g ? j() : I(t), g && (e.ontouchstart = function(i) {
134
- i.targetTouches.length === 1 && (P = i.targetTouches[0].clientY);
135
- }, e.ontouchmove = function(i) {
136
- i.targetTouches.length === 1 && N(i, e);
137
- }, y || (document.addEventListener("touchmove", b, O ? { passive: !1 } : void 0), y = !0));
133
+ m = [].concat(N(m), [i]), w ? Y() : H(t), w && (e.ontouchstart = function(o) {
134
+ o.targetTouches.length === 1 && (M = o.targetTouches[0].clientY);
135
+ }, e.ontouchmove = function(o) {
136
+ o.targetTouches.length === 1 && G(o, e);
137
+ }, k || (document.addEventListener("touchmove", x, O ? { passive: !1 } : void 0), k = !0));
138
138
  }
139
- }, U = function(e) {
139
+ }, Q = function(e) {
140
140
  if (!e) {
141
141
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
142
142
  return;
143
143
  }
144
- c = c.filter(function(t) {
144
+ m = m.filter(function(t) {
145
145
  return t.targetElement !== e;
146
- }), g && (e.ontouchstart = null, e.ontouchmove = null, y && c.length === 0 && (document.removeEventListener("touchmove", b, O ? { passive: !1 } : void 0), y = !1)), g ? H() : V();
146
+ }), w && (e.ontouchstart = null, e.ontouchmove = null, k && m.length === 0 && (document.removeEventListener("touchmove", x, O ? { passive: !1 } : void 0), k = !1)), w ? U() : W();
147
147
  };
148
- const X = `.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-max-inline-size: var(--modal-size-m);--modal-inline-size: 75%;max-inline-size:var(--modal-max-inline-size);inline-size:var(--modal-inline-size)}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (max-width: 768px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-inline-size: 100%}}.c-modal[size=large]{--modal-max-inline-size: var(--modal-size-l);--modal-inline-size: 100%}@media (min-width: 768px){.c-modal[size=large]{--modal-inline-size: 75%}}.c-modal::backdrop{background:rgba(0,0,0,.5)}.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);--modal-header-font-weight: var(--dt-font-heading-m-weight);--modal-header-padding: var(--dt-spacing-e);--modal-header-padding-block-end: var(--dt-spacing-d);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;padding-block:var(--modal-header-padding) var(--modal-header-padding-block-end);padding-inline:var(--modal-header-padding)}.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: var(--dt-spacing-e);--modal-content-padding-block-start: var(--dt-spacing-a);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-block:var(--modal-content-padding-block-start) var(--modal-content-padding);padding-inline:var(--modal-content-padding);overflow-y:scroll;max-block-size:300px}.c-modal .c-modal-closeBtn{position:absolute;inset-inline-end:var(--dt-spacing-d);inset-block-start:var(--dt-spacing-d)}
149
- `, G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], _ = "pie-modal-close", v = "pie-modal-open";
150
- var Q = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, s = (n, e, t, o) => {
151
- for (var i = o > 1 ? void 0 : o ? Z(e, t) : e, d = n.length - 1, l; d >= 0; d--)
152
- (l = n[d]) && (i = (o ? l(e, t, i) : l(i)) || i);
153
- return o && i && Q(e, t, i), i;
148
+ const Z = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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: 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)}}@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=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)}@media (max-width: 767px){.c-modal[position=top][isfullwidthbelowmid]{margin-block-start:var(--dt-spacing-none)}}.c-modal::backdrop{background:rgba(0,0,0,.5)}.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)}}.c-modal .c-modal-header{padding-inline:var(--dt-spacing-d);padding-block:14px;display:grid;grid-template-areas:"back heading close" ". heading .";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:center}@media (min-width: 768px){.c-modal .c-modal-header{padding-inline:var(--dt-spacing-e);padding-block:20px}}.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-b);padding-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-c);padding-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-header{padding-block:var(--dt-spacing-b);padding-inline-end:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-header{padding-block:var(--dt-spacing-c);padding-inline-end:var(--dt-spacing-c)}}.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);--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}.c-modal[hasbackbutton] .c-modal-heading{padding-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{padding-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{padding-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{padding-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back}.c-modal .c-modal-closeBtn{grid-area:close}.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: var(--dt-spacing-e);--modal-content-padding-block: var(--dt-spacing-a);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;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);padding-block:var(--modal-content-padding-block);overflow-y:auto}.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-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal[isLoading] .c-modal-content:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}
149
+ `, K = ["h1", "h2", "h3", "h4", "h5", "h6"], ee = ["small", "medium", "large"], te = ["top", "center"], _ = "pie-modal-close", y = "pie-modal-open", z = "pie-modal-back";
150
+ var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (n, e, t, i) => {
151
+ for (var o = i > 1 ? void 0 : i ? ie(e, t) : e, a = n.length - 1, d; a >= 0; a--)
152
+ (d = n[a]) && (o = (i ? d(e, t, o) : d(o)) || o);
153
+ return i && o && oe(e, t, o), o;
154
154
  };
155
- const w = "pie-modal";
156
- class a extends k(B) {
155
+ const b = "pie-modal";
156
+ class r extends q(D) {
157
157
  constructor() {
158
- super(), this.headingLevel = "h2", this.isDismissible = !1, this.isFullWidthBelowMid = !1, this.isOpen = !1, this.size = "medium", this._handleDialogCancelEvent = (e) => {
158
+ super(), this.headingLevel = "h2", this.isDismissible = !1, this.hasBackButton = !1, this.isFullWidthBelowMid = !1, this.isOpen = !1, this.isLoading = !1, this.size = "medium", this.position = "center", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
159
159
  this.isDismissible || e.preventDefault();
160
160
  }, this._handleDialogLightDismiss = (e) => {
161
- var p;
161
+ var u;
162
162
  if (!this.isDismissible)
163
163
  return;
164
- const t = (p = this._dialog) == null ? void 0 : p.getBoundingClientRect(), {
165
- top: o = 0,
166
- bottom: i = 0,
167
- left: d = 0,
168
- right: l = 0
164
+ const t = (u = this._dialog) == null ? void 0 : u.getBoundingClientRect(), {
165
+ top: i = 0,
166
+ bottom: o = 0,
167
+ left: a = 0,
168
+ right: d = 0
169
169
  } = t || {};
170
- if (o === 0 && i === 0 && d === 0 && l === 0)
170
+ if (i === 0 && o === 0 && a === 0 && d === 0)
171
171
  return;
172
- (e.clientY < o || e.clientY > i || e.clientX < d || e.clientX > l) && (this.isOpen = !1);
172
+ (e.clientY < i || e.clientY > o || e.clientX < a || e.clientX > d) && (this.isOpen = !1);
173
173
  }, this._dispatchModalCustomEvent = (e) => {
174
174
  const t = new CustomEvent(e, {
175
175
  bubbles: !0,
@@ -179,14 +179,14 @@ class a extends k(B) {
179
179
  }, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
180
180
  }
181
181
  connectedCallback() {
182
- super.connectedCallback(), document.addEventListener(v, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
182
+ super.connectedCallback(), document.addEventListener(y, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this)), document.addEventListener(z, this._handleModalClosed.bind(this));
183
183
  }
184
184
  disconnectedCallback() {
185
- document.removeEventListener(v, this._handleModalOpened.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
185
+ document.removeEventListener(y, this._handleModalOpened.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), document.removeEventListener(z, this._handleModalClosed.bind(this)), super.disconnectedCallback();
186
186
  }
187
187
  firstUpdated(e) {
188
- var t, o;
189
- (t = this._dialog) == null || t.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._handleModalOpenStateOnFirstRender(e), (o = this._dialog) == null || o.addEventListener("close", () => {
188
+ var t, i;
189
+ (t = this._dialog) == null || t.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._handleModalOpenStateOnFirstRender(e), (i = this._dialog) == null || i.addEventListener("close", () => {
190
190
  this.isOpen = !1;
191
191
  });
192
192
  }
@@ -197,57 +197,33 @@ class a extends k(B) {
197
197
  * Opens the dialog element and disables page scrolling
198
198
  */
199
199
  _handleModalOpened() {
200
- var e, t, o;
201
- Y(this), !((e = this._dialog) != null && e.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((o = this._dialog) == null || o.showModal());
200
+ var e, t, i;
201
+ J(this), !((e = this._dialog) != null && e.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((i = this._dialog) == null || i.showModal());
202
202
  }
203
203
  /**
204
204
  * Closes the dialog element and re-enables page scrolling
205
205
  */
206
206
  _handleModalClosed() {
207
207
  var e;
208
- U(this), (e = this._dialog) == null || e.close(), this._returnFocus();
208
+ Q(this), (e = this._dialog) == null || e.close(), this._returnFocus();
209
209
  }
210
210
  // Handles the value of the isOpen property on first render of the component
211
211
  _handleModalOpenStateOnFirstRender(e) {
212
- e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(v);
212
+ e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(y);
213
213
  }
214
214
  // Handles changes to the modal isOpen property by dispatching any appropriate events
215
215
  _handleModalOpenStateChanged(e) {
216
216
  const t = e.get("isOpen");
217
- t !== void 0 && (t ? this._dispatchModalCustomEvent(_) : this._dispatchModalCustomEvent(v));
217
+ t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(z)) : this._dispatchModalCustomEvent(_) : this._dispatchModalCustomEvent(y));
218
218
  }
219
219
  /**
220
220
  * Return focus to the specified element, providing the selector is valid
221
221
  * and the chosen element can be found.
222
- * Fails silently.
223
222
  */
224
223
  _returnFocus() {
225
- var t, o;
224
+ var t, i;
226
225
  const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
227
- e && ((o = document.querySelector(e)) == null || o.focus());
228
- }
229
- render() {
230
- const {
231
- heading: e,
232
- headingLevel: t = "h2",
233
- size: o,
234
- isFullWidthBelowMid: i
235
- } = this, d = E(t);
236
- return z`
237
- <dialog
238
- id="dialog"
239
- class="c-modal"
240
- size="${o}"
241
- ?isFullWidthBelowMid=${i}>
242
- <header>
243
- <${d} class="c-modal-heading">${e}</${d}>
244
- ${this.isDismissible ? this.renderCloseButton() : x}
245
- </header>
246
- <article class="c-modal-content">
247
- <slot></slot>
248
- </article>
249
- </dialog>
250
- `;
226
+ e && ((i = document.querySelector(e)) == null || i.focus());
251
227
  }
252
228
  /**
253
229
  * Template for the close button element. Called within the
@@ -256,7 +232,7 @@ class a extends k(B) {
256
232
  * @private
257
233
  */
258
234
  renderCloseButton() {
259
- return z`
235
+ return h`
260
236
  <pie-icon-button
261
237
  @click="${() => {
262
238
  this.isOpen = !1;
@@ -266,38 +242,145 @@ class a extends k(B) {
266
242
  data-test-id="modal-close-button"><icon-close /></pie-icon-button>
267
243
  `;
268
244
  }
245
+ /**
246
+ * Template for the back button element. Called within the
247
+ * main render function.
248
+ *
249
+ * @private
250
+ */
251
+ renderBackButton() {
252
+ return h`
253
+ <pie-icon-button
254
+ @click="${() => {
255
+ this._backButtonClicked = !0, this.isOpen = !1;
256
+ }}"
257
+ variant="ghost-secondary"
258
+ class="c-modal-backBtn"
259
+ data-test-id="modal-back-button">
260
+ ${this.isRTL ? h`<icon-chevron-right />` : h`<icon-chevron-left />`}
261
+ </pie-icon-button>
262
+ `;
263
+ }
264
+ /**
265
+ * Render leadingAction button depending on prop availability.
266
+ *
267
+ * 1. If the prop `leadingAction` is not provided, the button is not rendered.
268
+ * 2. If the prop `leadingAction` is provided but any of the optional properties
269
+ * are not provided, they fall back to their default values.
270
+ *
271
+ * @private
272
+ */
273
+ renderLeadingAction() {
274
+ const { text: e = "Confirm", variant: t = "primary", ariaLabel: i } = this.leadingAction;
275
+ return e ? h`
276
+ <pie-button
277
+ variant="${t}"
278
+ aria-label="${i || g}"
279
+ type="submit"
280
+ @click="${() => {
281
+ var o;
282
+ return (o = this._dialog) == null ? void 0 : o.close("leading");
283
+ }}"
284
+ data-test-id="modal-leading-action">
285
+ ${e}
286
+ </pie-button>
287
+ ` : g;
288
+ }
289
+ render() {
290
+ const {
291
+ hasBackButton: e,
292
+ heading: t,
293
+ headingLevel: i = "h2",
294
+ isDismissible: o,
295
+ isFullWidthBelowMid: a,
296
+ isLoading: d,
297
+ size: p,
298
+ leadingAction: u,
299
+ position: P
300
+ } = this, C = T(i);
301
+ return h`
302
+ <dialog
303
+ id="dialog"
304
+ class="c-modal"
305
+ data-test-id="pie-modal"
306
+ size="${p}"
307
+ position="${P}"
308
+ ?hasBackButton=${e}
309
+ ?isDismissible=${o}
310
+ ?isFullWidthBelowMid=${a}
311
+ ?isLoading=${d}
312
+ data-test-id="pie-modal">
313
+ <header class="c-modal-header">
314
+ ${e ? this.renderBackButton() : g}
315
+ <${C} class="c-modal-heading">
316
+ ${t}
317
+ </${C}>
318
+ ${o ? this.renderCloseButton() : g}
319
+ </header>
320
+ <article class="c-modal-content c-modal-content--scrollable">
321
+ <div class="c-modal-contentInner">
322
+ <slot></slot>
323
+ </div>
324
+ </article>
325
+ <footer class="c-modal-footer">
326
+ ${u ? this.renderLeadingAction() : g}
327
+ <pie-button
328
+ variant="ghost"
329
+ type="reset"
330
+ @click="${() => {
331
+ var L;
332
+ return (L = this._dialog) == null ? void 0 : L.close("supporting");
333
+ }}"
334
+ data-test-id="modal-supporting-action">
335
+ Cancel
336
+ </pie-button>
337
+ </footer>
338
+ </dialog>`;
339
+ }
269
340
  }
270
- a.styles = D(X);
271
- s([
272
- u({ type: String }),
273
- R(w)
274
- ], a.prototype, "heading", 2);
275
- s([
276
- u(),
277
- C(w, G, "h2")
278
- ], a.prototype, "headingLevel", 2);
279
- s([
280
- u({ type: Boolean, reflect: !0 })
281
- ], a.prototype, "isDismissible", 2);
282
- s([
283
- u({ type: Boolean })
284
- ], a.prototype, "isFullWidthBelowMid", 2);
285
- s([
286
- u({ type: Boolean })
287
- ], a.prototype, "isOpen", 2);
288
- s([
289
- u()
290
- ], a.prototype, "returnFocusAfterCloseSelector", 2);
291
- s([
292
- u(),
293
- C(w, J, "medium")
294
- ], a.prototype, "size", 2);
295
- s([
296
- L("dialog")
297
- ], a.prototype, "_dialog", 2);
298
- customElements.define(w, a);
341
+ r.styles = E(Z);
342
+ l([
343
+ s({ type: String }),
344
+ V(b)
345
+ ], r.prototype, "heading", 2);
346
+ l([
347
+ s(),
348
+ B(b, K, "h2")
349
+ ], r.prototype, "headingLevel", 2);
350
+ l([
351
+ s({ type: Boolean, reflect: !0 })
352
+ ], r.prototype, "isDismissible", 2);
353
+ l([
354
+ s({ type: Boolean })
355
+ ], r.prototype, "hasBackButton", 2);
356
+ l([
357
+ s({ type: Boolean })
358
+ ], r.prototype, "isFullWidthBelowMid", 2);
359
+ l([
360
+ s({ type: Boolean })
361
+ ], r.prototype, "isOpen", 2);
362
+ l([
363
+ s({ type: Boolean, reflect: !0 })
364
+ ], r.prototype, "isLoading", 2);
365
+ l([
366
+ s()
367
+ ], r.prototype, "returnFocusAfterCloseSelector", 2);
368
+ l([
369
+ s(),
370
+ B(b, ee, "medium")
371
+ ], r.prototype, "size", 2);
372
+ l([
373
+ s()
374
+ ], r.prototype, "leadingAction", 2);
375
+ l([
376
+ B(b, te, "center")
377
+ ], r.prototype, "position", 2);
378
+ l([
379
+ A("dialog")
380
+ ], r.prototype, "_dialog", 2);
381
+ customElements.define(b, r);
299
382
  export {
300
- a as PieModal,
301
- G as headingLevels,
302
- J as sizes
383
+ r as PieModal,
384
+ K as headingLevels,
385
+ ee as sizes
303
386
  };