@justeattakeaway/pie-modal 0.32.1 → 0.32.2

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 (3) hide show
  1. package/dist/index.js +178 -350
  2. package/dist/react.js +22 -19
  3. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,74 +1,77 @@
1
- import { isServer as K, css as I, LitElement as $, html as M, unsafeCSS as ee, nothing as c } from "lit";
2
- import { html as h, unsafeStatic as te } from "lit/static-html.js";
3
- import { property as s, query as O } from "lit/decorators.js";
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 s, query as N } from "lit/decorators.js";
4
4
  import "@justeattakeaway/pie-button";
5
5
  import "@justeattakeaway/pie-icon-button";
6
+ import "@justeattakeaway/pie-icons-webc/IconClose";
7
+ import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
8
+ import "@justeattakeaway/pie-icons-webc/IconChevronRight";
6
9
  import "@justeattakeaway/pie-spinner";
7
- function ie(n) {
10
+ function R(n) {
8
11
  if (Array.isArray(n)) {
9
- for (var e = 0, t = Array(n.length); e < n.length; e++)
10
- t[e] = n[e];
11
- return t;
12
+ for (var e = 0, i = Array(n.length); e < n.length; e++)
13
+ i[e] = n[e];
14
+ return i;
12
15
  } else
13
16
  return Array.from(n);
14
17
  }
15
- var E = !1;
18
+ var z = !1;
16
19
  if (typeof window < "u") {
17
- var N = {
20
+ var A = {
18
21
  get passive() {
19
- E = !0;
22
+ z = !0;
20
23
  }
21
24
  };
22
- window.addEventListener("testPassive", null, N), window.removeEventListener("testPassive", null, N);
25
+ window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
23
26
  }
24
- 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), g = [], _ = !1, q = -1, v = void 0, f = void 0, V = function(e) {
25
- return g.some(function(t) {
26
- return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
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), h = [], k = !1, $ = -1, u = void 0, f = void 0, L = function(e) {
28
+ return h.some(function(i) {
29
+ return !!(i.options.allowTouchMove && i.options.allowTouchMove(e));
27
30
  });
28
- }, z = function(e) {
29
- var t = e || window.event;
30
- return V(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
31
- }, oe = function(e) {
31
+ }, 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) {
32
35
  if (f === void 0) {
33
- var t = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
34
- t && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
36
+ var i = !!e && e.reserveScrollBarGap === !0, t = window.innerWidth - document.documentElement.clientWidth;
37
+ i && t > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
35
38
  }
36
- v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
37
- }, ne = function() {
38
- f !== void 0 && (document.body.style.paddingRight = f, f = void 0), v !== void 0 && (document.body.style.overflow = v, v = void 0);
39
- }, ae = function(e) {
39
+ u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
40
+ }, q = function() {
41
+ f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
42
+ }, W = function(e) {
40
43
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
41
- }, le = function(e, t) {
42
- var i = e.targetTouches[0].clientY - q;
43
- return V(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || ae(t) && i < 0 ? z(e) : (e.stopPropagation(), !0);
44
- }, se = function(e, t) {
44
+ }, V = function(e, i) {
45
+ var t = e.targetTouches[0].clientY - $;
46
+ return L(e.target) ? !1 : i && i.scrollTop === 0 && t > 0 || W(i) && t < 0 ? w(e) : (e.stopPropagation(), !0);
47
+ }, Y = function(e, i) {
45
48
  if (!e) {
46
49
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
47
50
  return;
48
51
  }
49
- if (!g.some(function(o) {
52
+ if (!h.some(function(o) {
50
53
  return o.targetElement === e;
51
54
  })) {
52
- var i = {
55
+ var t = {
53
56
  targetElement: e,
54
- options: t || {}
57
+ options: i || {}
55
58
  };
56
- g = [].concat(ie(g), [i]), W ? (e.ontouchstart = function(o) {
57
- o.targetTouches.length === 1 && (q = o.targetTouches[0].clientY);
59
+ h = [].concat(R(h), [t]), B ? (e.ontouchstart = function(o) {
60
+ o.targetTouches.length === 1 && ($ = o.targetTouches[0].clientY);
58
61
  }, e.ontouchmove = function(o) {
59
- o.targetTouches.length === 1 && le(o, e);
60
- }, _ || (document.addEventListener("touchmove", z, E ? { passive: !1 } : void 0), _ = !0)) : oe(t);
62
+ o.targetTouches.length === 1 && V(o, e);
63
+ }, k || (document.addEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !0)) : j(i);
61
64
  }
62
- }, re = function(e) {
65
+ }, U = function(e) {
63
66
  if (!e) {
64
67
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
65
68
  return;
66
69
  }
67
- g = g.filter(function(t) {
68
- return t.targetElement !== e;
69
- }), W ? (e.ontouchstart = null, e.ontouchmove = null, _ && g.length === 0 && (document.removeEventListener("touchmove", z, E ? { passive: !1 } : void 0), _ = !1)) : g.length || ne();
70
+ h = h.filter(function(i) {
71
+ return i.targetElement !== e;
72
+ }), B ? (e.ontouchstart = null, e.ontouchmove = null, k && h.length === 0 && (document.removeEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !1)) : h.length || q();
70
73
  };
71
- const de = (n) => {
74
+ const H = (n) => {
72
75
  class e extends n {
73
76
  /**
74
77
  * A getter to determine whether the text direction is right-to-left (RTL).
@@ -80,256 +83,81 @@ const de = (n) => {
80
83
  * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
81
84
  */
82
85
  get isRTL() {
83
- return this.dir ? this.dir === "rtl" : !K && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
86
+ return this.dir ? this.dir === "rtl" : !D && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
84
87
  }
85
88
  }
86
89
  return e;
87
- }, P = (n, e, t) => function(o, a) {
88
- const l = `#${a}`;
90
+ }, C = (n, e, i) => function(o, a) {
91
+ const d = `#${a}`;
89
92
  Object.defineProperty(o, a, {
90
93
  get() {
91
- return this[l];
94
+ return this[d];
92
95
  },
93
96
  set(p) {
94
- const m = this[l];
95
- e.includes(p) ? this[l] = p : (console.error(
97
+ const g = this[d];
98
+ e.includes(p) ? this[d] = p : (console.error(
96
99
  `<${n}> Invalid value "${p}" provided for property "${a}".`,
97
100
  `Must be one of: ${e.join(" | ")}.`,
98
- `Falling back to default value: "${t}"`
99
- ), this[l] = t), this.requestUpdate(a, m);
101
+ `Falling back to default value: "${i}"`
102
+ ), this[d] = i), this.requestUpdate(a, g);
100
103
  }
101
104
  });
102
- }, ce = (n) => function(t, i) {
103
- const o = `#${i}`;
104
- Object.defineProperty(t, i, {
105
+ }, G = (n) => function(i, t) {
106
+ const o = `#${t}`;
107
+ Object.defineProperty(i, t, {
105
108
  get() {
106
109
  return this[o];
107
110
  },
108
111
  set(a) {
109
- const l = this[o];
110
- (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${i}"`), this[o] = a, this.requestUpdate(i, l);
112
+ const d = this[o];
113
+ (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${t}"`), this[o] = a, this.requestUpdate(t, d);
111
114
  }
112
115
  });
113
116
  };
114
- function he(n, e) {
117
+ function X(n, e) {
115
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);
116
119
  }
117
- function D(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 C = {
121
- xs: 16,
122
- s: 20,
123
- m: 24,
124
- l: 28,
125
- xl: 32,
126
- xxl: 40
127
- }, Y = Object.keys(C), U = "xs", H = 8, A = 32;
128
- function pe(n, e, t) {
129
- const i = parseInt(n, 10), o = i % t === 0;
130
- return i >= e && o;
131
- }
132
- const Z = {
133
- large: (n) => pe(n, A, H),
134
- regular: (n) => Y.includes(n)
135
- };
136
- function ge(n) {
137
- const e = Z.large(n);
138
- return { isValid: e, size: e ? n : A };
139
- }
140
- function me(n) {
141
- const e = Z.regular(n), t = e ? C[n] : C[U];
142
- return { isValid: e, size: t };
143
- }
144
- const u = (n, e, t, i) => {
145
- const o = n.endsWith("Large") || n.endsWith("-large");
146
- let a, l;
147
- if (t) {
148
- if ({ isValid: a, size: l } = o ? ge(t) : me(t), !a) {
149
- const p = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${A} and multiple of ${H}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${Y.join(", ")}.`;
150
- console.error(p);
151
- }
152
- } else
153
- l = o ? A : C[U];
154
- return {
155
- class: [n, e].filter(Boolean).join(" "),
156
- width: l,
157
- height: l
158
- };
159
- };
160
- var ue = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, T = (n, e, t, i) => {
161
- for (var o = i > 1 ? void 0 : i ? ve(e, t) : e, a = n.length - 1, l; a >= 0; a--)
162
- (l = n[a]) && (o = (i ? l(e, t, o) : l(o)) || o);
163
- return i && o && ue(e, t, o), o;
164
- };
165
- const fe = "icon-close";
166
- class b extends $ {
167
- constructor() {
168
- super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--close";
169
- }
170
- connectedCallback() {
171
- var e, t, i;
172
- if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
173
- const o = u("c-pieIcon c-pieIcon--close", "", null, "IconClose");
174
- (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
175
- }
176
- }
177
- updated(e) {
178
- var t, i;
179
- let o;
180
- e.has("size") && (o = u("c-pieIcon c-pieIcon--close", "", this.size, "IconClose"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
181
- }
182
- render() {
183
- return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--close"><path d="M11.868 3.205 8 7.072 4.133 3.205l-.928.927L7.073 8l-3.868 3.867.928.928L8 8.927l3.868 3.868.927-.928L8.928 8l3.867-3.868-.927-.927Z"></path></svg>`;
184
- }
185
- }
186
- b.styles = I`
187
- :host-context(pie-icon-button) svg,
188
- :host-context(pie-button) svg {
189
- display: block;
190
- width: var(--btn-icon-size);
191
- height: var(--btn-icon-size);
192
- }
193
- `;
194
- T([
195
- s({ type: String, reflect: !0 })
196
- ], b.prototype, "size", 2);
197
- T([
198
- s({ type: String, reflect: !0 })
199
- ], b.prototype, "class", 2);
200
- T([
201
- O("svg")
202
- ], b.prototype, "_svg", 2);
203
- D(fe, b);
204
- var be = Object.defineProperty, we = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
205
- for (var o = i > 1 ? void 0 : i ? we(e, t) : e, a = n.length - 1, l; a >= 0; a--)
206
- (l = n[a]) && (o = (i ? l(e, t, o) : l(o)) || o);
207
- return i && o && be(e, t, o), o;
208
- };
209
- const ye = "icon-chevron-left";
210
- class w extends $ {
211
- constructor() {
212
- super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
213
- }
214
- connectedCallback() {
215
- var e, t, i;
216
- if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
217
- const o = u("c-pieIcon c-pieIcon--chevronLeft", "", null, "IconChevronLeft");
218
- (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
219
- }
220
- }
221
- updated(e) {
222
- var t, i;
223
- let o;
224
- e.has("size") && (o = u("c-pieIcon c-pieIcon--chevronLeft", "", this.size, "IconChevronLeft"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
225
- }
226
- render() {
227
- return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronLeft"><path d="M10.96 2.82 5.605 8l5.399 5.197-.875.963-5.565-5.364a1.164 1.164 0 0 1 0-1.671l5.495-5.25.901.945Z"></path></svg>`;
228
- }
229
- }
230
- w.styles = I`
231
- :host-context(pie-icon-button) svg,
232
- :host-context(pie-button) svg {
233
- display: block;
234
- width: var(--btn-icon-size);
235
- height: var(--btn-icon-size);
236
- }
237
- `;
238
- j([
239
- s({ type: String, reflect: !0 })
240
- ], w.prototype, "size", 2);
241
- j([
242
- s({ type: String, reflect: !0 })
243
- ], w.prototype, "class", 2);
244
- j([
245
- O("svg")
246
- ], w.prototype, "_svg", 2);
247
- D(ye, w);
248
- var ke = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, F = (n, e, t, i) => {
249
- for (var o = i > 1 ? void 0 : i ? xe(e, t) : e, a = n.length - 1, l; a >= 0; a--)
250
- (l = n[a]) && (o = (i ? l(e, t, o) : l(o)) || o);
251
- return i && o && ke(e, t, o), o;
252
- };
253
- const _e = "icon-chevron-right";
254
- class y extends $ {
255
- constructor() {
256
- super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronRight";
257
- }
258
- connectedCallback() {
259
- var e, t, i;
260
- if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
261
- const o = u("c-pieIcon c-pieIcon--chevronRight", "", null, "IconChevronRight");
262
- (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
263
- }
264
- }
265
- updated(e) {
266
- var t, i;
267
- let o;
268
- e.has("size") && (o = u("c-pieIcon c-pieIcon--chevronRight", "", this.size, "IconChevronRight"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
269
- }
270
- render() {
271
- return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronRight"><path d="M5.044 13.18 10.399 8 5 2.82l.875-.962 5.539 5.346a1.164 1.164 0 0 1 0 1.636l-5.469 5.285-.901-.945Z"></path></svg>`;
272
- }
273
- }
274
- y.styles = I`
275
- :host-context(pie-icon-button) svg,
276
- :host-context(pie-button) svg {
277
- display: block;
278
- width: var(--btn-icon-size);
279
- height: var(--btn-icon-size);
280
- }
281
- `;
282
- F([
283
- s({ type: String, reflect: !0 })
284
- ], y.prototype, "size", 2);
285
- F([
286
- s({ type: String, reflect: !0 })
287
- ], y.prototype, "class", 2);
288
- F([
289
- O("svg")
290
- ], y.prototype, "_svg", 2);
291
- D(_e, y);
292
- const ze = `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=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;height:100%;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}}
293
- `, Ce = ["h1", "h2", "h3", "h4", "h5", "h6"], Ae = ["small", "medium", "large"], $e = ["top", "center"], B = "pie-modal-close", x = "pie-modal-open", S = "pie-modal-back", Oe = "pie-modal-leading-action-click", Le = "pie-modal-supporting-action-click";
294
- var Be = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, d = (n, e, t, i) => {
295
- for (var o = i > 1 ? void 0 : i ? Se(e, t) : e, a = n.length - 1, l; a >= 0; a--)
296
- (l = n[a]) && (o = (i ? l(e, t, o) : l(o)) || o);
297
- return i && o && Be(e, t, o), o;
120
+ const J = `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=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;height:100%;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
+ `, Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], K = ["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 te = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, r = (n, e, i, t) => {
123
+ for (var o = t > 1 ? void 0 : t ? oe(e, i) : e, a = n.length - 1, d; a >= 0; a--)
124
+ (d = n[a]) && (o = (t ? d(e, i, o) : d(o)) || o);
125
+ return t && o && te(e, i, o), o;
298
126
  };
299
- const k = "pie-modal";
300
- class r extends de($) {
127
+ const v = "pie-modal";
128
+ class l extends H(F) {
301
129
  constructor() {
302
130
  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) => {
303
131
  this.isDismissible || e.preventDefault();
304
132
  }, this._handleDialogLightDismiss = (e) => {
305
- var m;
133
+ var g;
306
134
  if (!this.isDismissible)
307
135
  return;
308
- const t = (m = this._dialog) == null ? void 0 : m.getBoundingClientRect(), {
309
- top: i = 0,
136
+ const i = (g = this._dialog) == null ? void 0 : g.getBoundingClientRect(), {
137
+ top: t = 0,
310
138
  bottom: o = 0,
311
139
  left: a = 0,
312
- right: l = 0
313
- } = t || {};
314
- if (i === 0 && o === 0 && a === 0 && l === 0)
140
+ right: d = 0
141
+ } = i || {};
142
+ if (t === 0 && o === 0 && a === 0 && d === 0)
315
143
  return;
316
- (e.clientY < i || e.clientY > o || e.clientX < a || e.clientX > l) && (this.isOpen = !1);
144
+ (e.clientY < t || e.clientY > o || e.clientX < a || e.clientX > d) && (this.isOpen = !1);
317
145
  }, this._dispatchModalCustomEvent = (e) => {
318
- const t = new CustomEvent(e, {
146
+ const i = new CustomEvent(e, {
319
147
  bubbles: !0,
320
148
  composed: !0
321
149
  });
322
- this.dispatchEvent(t);
150
+ this.dispatchEvent(i);
323
151
  };
324
152
  }
325
153
  connectedCallback() {
326
- super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(x, this._handleModalOpened.bind(this)), document.addEventListener(B, this._handleModalClosed.bind(this)), document.addEventListener(S, this._handleModalClosed.bind(this));
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));
327
155
  }
328
156
  disconnectedCallback() {
329
- document.removeEventListener(x, this._handleModalOpened.bind(this)), document.removeEventListener(B, this._handleModalClosed.bind(this)), document.removeEventListener(S, this._handleModalClosed.bind(this)), super.disconnectedCallback();
157
+ document.removeEventListener(b, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
330
158
  }
331
159
  async firstUpdated(e) {
332
- 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", () => {
160
+ super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((t) => t.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (t) => this._handleDialogCancelEvent(t)), this._dialog.addEventListener("close", () => {
333
161
  this.isOpen = !1;
334
162
  })), this._handleModalOpenStateOnFirstRender(e);
335
163
  }
@@ -340,39 +168,39 @@ class r extends de($) {
340
168
  * Opens the dialog element and disables page scrolling
341
169
  */
342
170
  _handleModalOpened() {
343
- var t, i, o, a;
344
- const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
345
- e && se(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((a = this._dialog) == null || a.showModal());
171
+ var i, t, o, a;
172
+ const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
173
+ e && Y(e), !((t = this._dialog) != null && t.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((a = this._dialog) == null || a.showModal());
346
174
  }
347
175
  /**
348
176
  * Closes the dialog element and re-enables page scrolling
349
177
  */
350
178
  _handleModalClosed() {
351
- var t, i;
352
- const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
353
- e && re(e), (i = this._dialog) == null || i.close(), this._returnFocus();
179
+ var i, t;
180
+ const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
181
+ e && U(e), (t = this._dialog) == null || t.close(), this._returnFocus();
354
182
  }
355
183
  // Handles the value of the isOpen property on first render of the component
356
184
  _handleModalOpenStateOnFirstRender(e) {
357
- e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(x);
185
+ e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(b);
358
186
  }
359
187
  // Handles changes to the modal isOpen property by dispatching any appropriate events
360
188
  _handleModalOpenStateChanged(e) {
361
- const t = e.get("isOpen");
362
- t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(S)) : this._dispatchModalCustomEvent(B) : this._dispatchModalCustomEvent(x));
189
+ const i = e.get("isOpen");
190
+ i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(b));
363
191
  }
364
192
  _handleActionClick(e) {
365
- var t, i;
366
- e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(Oe)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(Le));
193
+ var i, t;
194
+ e === "leading" ? ((i = this._dialog) == null || i.close("leading"), this._dispatchModalCustomEvent(ee)) : e === "supporting" && ((t = this._dialog) == null || t.close("supporting"), this._dispatchModalCustomEvent(ie));
367
195
  }
368
196
  /**
369
197
  * Return focus to the specified element, providing the selector is valid
370
198
  * and the chosen element can be found.
371
199
  */
372
200
  _returnFocus() {
373
- var t, i;
374
- const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
375
- e && ((i = document.querySelector(e)) == null || i.focus());
201
+ var i, t;
202
+ const e = (i = this.returnFocusAfterCloseSelector) == null ? void 0 : i.trim();
203
+ e && ((t = document.querySelector(e)) == null || t.focus());
376
204
  }
377
205
  /**
378
206
  * Template for the close button element. Called within the
@@ -382,7 +210,7 @@ class r extends de($) {
382
210
  */
383
211
  renderCloseButton() {
384
212
  var e;
385
- return h`
213
+ return m`
386
214
  <pie-icon-button
387
215
  @click="${() => {
388
216
  this.isOpen = !1;
@@ -402,7 +230,7 @@ class r extends de($) {
402
230
  */
403
231
  renderBackButton() {
404
232
  var e;
405
- return h`
233
+ return m`
406
234
  <pie-icon-button
407
235
  @click="${() => {
408
236
  this._backButtonClicked = !0, this.isOpen = !1;
@@ -411,7 +239,7 @@ class r extends de($) {
411
239
  class="c-modal-backBtn"
412
240
  aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
413
241
  data-test-id="modal-back-button">
414
- ${this.isRTL ? h`<icon-chevron-right></icon-chevron-right>` : h`<icon-chevron-left></icon-chevron-left>`}
242
+ ${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
415
243
  </pie-icon-button>
416
244
  `;
417
245
  }
@@ -425,11 +253,11 @@ class r extends de($) {
425
253
  * @private
426
254
  */
427
255
  renderLeadingAction() {
428
- const { text: e, variant: t = "primary", ariaLabel: i } = this.leadingAction;
429
- return e ? h`
256
+ const { text: e, variant: i = "primary", ariaLabel: t } = this.leadingAction;
257
+ return e ? m`
430
258
  <pie-button
431
- variant="${t}"
432
- aria-label="${i || c}"
259
+ variant="${i}"
260
+ aria-label="${t || c}"
433
261
  type="submit"
434
262
  ?isFullWidth="${this.hasStackedActions}"
435
263
  @click="${() => this._handleActionClick("leading")}"
@@ -450,11 +278,11 @@ class r extends de($) {
450
278
  * @private
451
279
  */
452
280
  renderSupportingAction() {
453
- const { text: e, variant: t = "ghost", ariaLabel: i } = this.supportingAction;
454
- return e ? this.leadingAction ? h`
281
+ const { text: e, variant: i = "ghost", ariaLabel: t } = this.supportingAction;
282
+ return e ? this.leadingAction ? m`
455
283
  <pie-button
456
- variant="${t}"
457
- aria-label="${i || c}"
284
+ variant="${i}"
285
+ aria-label="${t || c}"
458
286
  type="reset"
459
287
  ?isFullWidth="${this.hasStackedActions}"
460
288
  @click="${() => this._handleActionClick("supporting")}"
@@ -468,12 +296,12 @@ class r extends de($) {
468
296
  * @private
469
297
  */
470
298
  renderModalContentAndFooter() {
471
- return h`
299
+ return m`
472
300
  <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
473
301
  <div class="c-modal-contentInner">
474
302
  <slot></slot>
475
303
  </div>
476
- ${this.isLoading ? h`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : c}
304
+ ${this.isLoading ? m`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : c}
477
305
  </article>
478
306
  <footer class="c-modal-footer">
479
307
  ${this.leadingAction ? this.renderLeadingAction() : c}
@@ -483,44 +311,44 @@ class r extends de($) {
483
311
  render() {
484
312
  const {
485
313
  aria: e,
486
- hasBackButton: t,
487
- hasStackedActions: i,
314
+ hasBackButton: i,
315
+ hasStackedActions: t,
488
316
  heading: o,
489
317
  headingLevel: a = "h2",
490
- isDismissible: l,
318
+ isDismissible: d,
491
319
  isFooterPinned: p,
492
- isFullWidthBelowMid: m,
493
- isLoading: L,
494
- leadingAction: G,
495
- position: X,
496
- size: J,
497
- supportingAction: Q
498
- } = this, R = te(a);
499
- return h`
320
+ isFullWidthBelowMid: g,
321
+ isLoading: y,
322
+ leadingAction: S,
323
+ position: M,
324
+ size: E,
325
+ supportingAction: P
326
+ } = this, O = I(a);
327
+ return m`
500
328
  <dialog
501
329
  id="dialog"
502
330
  class="c-modal"
503
- size="${J}"
504
- position="${X}"
505
- ?hasActions=${G || Q}
506
- ?hasBackButton=${t}
507
- ?hasStackedActions=${i}
508
- ?isDismissible=${l}
331
+ size="${E}"
332
+ position="${M}"
333
+ ?hasActions=${S || P}
334
+ ?hasBackButton=${i}
335
+ ?hasStackedActions=${t}
336
+ ?isDismissible=${d}
509
337
  ?isFooterPinned=${p}
510
- ?isFullWidthBelowMid=${m}
511
- ?isLoading=${L}
512
- aria-busy="${L ? "true" : "false"}"
513
- aria-label="${L && (e == null ? void 0 : e.loading) || c}"
338
+ ?isFullWidthBelowMid=${g}
339
+ ?isLoading=${y}
340
+ aria-busy="${y ? "true" : "false"}"
341
+ aria-label="${y && (e == null ? void 0 : e.loading) || c}"
514
342
  data-test-id="pie-modal">
515
343
  <header class="c-modal-header">
516
- ${t ? this.renderBackButton() : c}
517
- <${R} class="c-modal-heading">
344
+ ${i ? this.renderBackButton() : c}
345
+ <${O} class="c-modal-heading">
518
346
  ${o}
519
- </${R}>
520
- ${l ? this.renderCloseButton() : c}
347
+ </${O}>
348
+ ${d ? this.renderCloseButton() : c}
521
349
  </header>
522
350
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
523
- p ? this.renderModalContentAndFooter() : h`
351
+ p ? this.renderModalContentAndFooter() : m`
524
352
  <div class="c-modal-scrollContainer">
525
353
  ${this.renderModalContentAndFooter()}
526
354
  </div>
@@ -528,68 +356,68 @@ class r extends de($) {
528
356
  </dialog>`;
529
357
  }
530
358
  }
531
- r.styles = ee(ze);
532
- d([
359
+ l.styles = T(J);
360
+ r([
533
361
  s({ type: Object })
534
- ], r.prototype, "aria", 2);
535
- d([
362
+ ], l.prototype, "aria", 2);
363
+ r([
536
364
  s({ type: String }),
537
- ce(k)
538
- ], r.prototype, "heading", 2);
539
- d([
365
+ G(v)
366
+ ], l.prototype, "heading", 2);
367
+ r([
540
368
  s(),
541
- P(k, Ce, "h2")
542
- ], r.prototype, "headingLevel", 2);
543
- d([
369
+ C(v, Q, "h2")
370
+ ], l.prototype, "headingLevel", 2);
371
+ r([
544
372
  s({ type: Boolean })
545
- ], r.prototype, "hasBackButton", 2);
546
- d([
373
+ ], l.prototype, "hasBackButton", 2);
374
+ r([
547
375
  s({ type: Boolean })
548
- ], r.prototype, "hasStackedActions", 2);
549
- d([
376
+ ], l.prototype, "hasStackedActions", 2);
377
+ r([
550
378
  s({ type: Boolean, reflect: !0 })
551
- ], r.prototype, "isDismissible", 2);
552
- d([
379
+ ], l.prototype, "isDismissible", 2);
380
+ r([
553
381
  s({ type: Boolean })
554
- ], r.prototype, "isFooterPinned", 2);
555
- d([
382
+ ], l.prototype, "isFooterPinned", 2);
383
+ r([
556
384
  s({ type: Boolean })
557
- ], r.prototype, "isFullWidthBelowMid", 2);
558
- d([
385
+ ], l.prototype, "isFullWidthBelowMid", 2);
386
+ r([
559
387
  s({ type: Boolean, reflect: !0 })
560
- ], r.prototype, "isLoading", 2);
561
- d([
388
+ ], l.prototype, "isLoading", 2);
389
+ r([
562
390
  s({ type: Boolean })
563
- ], r.prototype, "isOpen", 2);
564
- d([
391
+ ], l.prototype, "isOpen", 2);
392
+ r([
565
393
  s({ type: Object })
566
- ], r.prototype, "leadingAction", 2);
567
- d([
394
+ ], l.prototype, "leadingAction", 2);
395
+ r([
568
396
  s(),
569
- P(k, $e, "center")
570
- ], r.prototype, "position", 2);
571
- d([
397
+ C(v, K, "center")
398
+ ], l.prototype, "position", 2);
399
+ r([
572
400
  s()
573
- ], r.prototype, "returnFocusAfterCloseSelector", 2);
574
- d([
401
+ ], l.prototype, "returnFocusAfterCloseSelector", 2);
402
+ r([
575
403
  s(),
576
- P(k, Ae, "medium")
577
- ], r.prototype, "size", 2);
578
- d([
404
+ C(v, Z, "medium")
405
+ ], l.prototype, "size", 2);
406
+ r([
579
407
  s({ type: Object })
580
- ], r.prototype, "supportingAction", 2);
581
- d([
582
- O("dialog")
583
- ], r.prototype, "_dialog", 2);
584
- he(k, r);
408
+ ], l.prototype, "supportingAction", 2);
409
+ r([
410
+ N("dialog")
411
+ ], l.prototype, "_dialog", 2);
412
+ X(v, l);
585
413
  export {
586
- S as ON_MODAL_BACK_EVENT,
587
- B as ON_MODAL_CLOSE_EVENT,
588
- Oe as ON_MODAL_LEADING_ACTION_CLICK,
589
- x as ON_MODAL_OPEN_EVENT,
590
- Le as ON_MODAL_SUPPORTING_ACTION_CLICK,
591
- r as PieModal,
592
- Ce as headingLevels,
593
- $e as positions,
594
- Ae as sizes
414
+ _ as ON_MODAL_BACK_EVENT,
415
+ x as ON_MODAL_CLOSE_EVENT,
416
+ ee as ON_MODAL_LEADING_ACTION_CLICK,
417
+ b as ON_MODAL_OPEN_EVENT,
418
+ ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
419
+ l as PieModal,
420
+ Q as headingLevels,
421
+ K as positions,
422
+ Z as sizes
595
423
  };
package/dist/react.js CHANGED
@@ -1,35 +1,38 @@
1
1
  import * as f from "react";
2
2
  import { PieModal as E } from "./index.js";
3
- import { ON_MODAL_BACK_EVENT as R, ON_MODAL_CLOSE_EVENT as x, ON_MODAL_LEADING_ACTION_CLICK as K, ON_MODAL_OPEN_EVENT as V, ON_MODAL_SUPPORTING_ACTION_CLICK as $, headingLevels as j, positions as B, sizes as H } from "./index.js";
3
+ import { ON_MODAL_BACK_EVENT as V, ON_MODAL_CLOSE_EVENT as $, ON_MODAL_LEADING_ACTION_CLICK as j, ON_MODAL_OPEN_EVENT as B, ON_MODAL_SUPPORTING_ACTION_CLICK as H, headingLevels as U, positions as W, sizes as z } from "./index.js";
4
4
  import "lit";
5
5
  import "lit/static-html.js";
6
6
  import "lit/decorators.js";
7
7
  import "@justeattakeaway/pie-button";
8
8
  import "@justeattakeaway/pie-icon-button";
9
+ import "@justeattakeaway/pie-icons-webc/IconClose";
10
+ import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
11
+ import "@justeattakeaway/pie-icons-webc/IconChevronRight";
9
12
  import "@justeattakeaway/pie-spinner";
10
13
  /**
11
14
  * @license
12
15
  * Copyright 2018 Google LLC
13
16
  * SPDX-License-Identifier: BSD-3-Clause
14
17
  */
15
- const C = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), O = /* @__PURE__ */ new WeakMap(), L = (o, t, p, c, m) => {
18
+ const C = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), O = /* @__PURE__ */ new WeakMap(), L = (o, t, d, c, m) => {
16
19
  const s = m == null ? void 0 : m[t];
17
- s === void 0 || p === c ? p == null && t in HTMLElement.prototype ? o.removeAttribute(t) : o[t] = p : ((a, i, h) => {
20
+ s === void 0 || d === c ? d == null && t in HTMLElement.prototype ? o.removeAttribute(t) : o[t] = d : ((a, i, h) => {
18
21
  let l = O.get(a);
19
22
  l === void 0 && O.set(a, l = /* @__PURE__ */ new Map());
20
23
  let r = l.get(i);
21
24
  h !== void 0 ? r === void 0 ? (l.set(i, r = { handleEvent: h }), a.addEventListener(i, r)) : r.handleEvent = h : r !== void 0 && (l.delete(i), a.removeEventListener(i, r));
22
- })(o, s, p);
25
+ })(o, s, d);
23
26
  }, A = (o, t) => {
24
27
  typeof o == "function" ? o(t) : o.current = t;
25
28
  };
26
- function y(o = window.React, t, p, c, m) {
29
+ function y(o = window.React, t, d, c, m) {
27
30
  let s, a, i;
28
31
  if (t === void 0) {
29
- const d = o;
30
- ({ tagName: a, elementClass: i, events: c, displayName: m } = d), s = d.react;
32
+ const p = o;
33
+ ({ tagName: a, elementClass: i, events: c, displayName: m } = p), s = p.react;
31
34
  } else
32
- s = o, i = p, a = t;
35
+ s = o, i = d, a = t;
33
36
  const h = s.Component, l = s.createElement, r = new Set(Object.keys(c ?? {}));
34
37
  class v extends h {
35
38
  constructor() {
@@ -59,10 +62,10 @@ function y(o = window.React, t, p, c, m) {
59
62
  }
60
63
  }
61
64
  v.displayName = m ?? i.name;
62
- const M = s.forwardRef((d, e) => l(v, { ...d, _$Gl: e }, d == null ? void 0 : d.children));
65
+ const M = s.forwardRef((p, e) => l(v, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
63
66
  return M.displayName = v.displayName, M;
64
67
  }
65
- const b = y({
68
+ const R = y({
66
69
  displayName: "PieModal",
67
70
  elementClass: E,
68
71
  react: f,
@@ -81,13 +84,13 @@ const b = y({
81
84
  }
82
85
  });
83
86
  export {
84
- R as ON_MODAL_BACK_EVENT,
85
- x as ON_MODAL_CLOSE_EVENT,
86
- K as ON_MODAL_LEADING_ACTION_CLICK,
87
- V as ON_MODAL_OPEN_EVENT,
88
- $ as ON_MODAL_SUPPORTING_ACTION_CLICK,
89
- b as PieModal,
90
- j as headingLevels,
91
- B as positions,
92
- H as sizes
87
+ V as ON_MODAL_BACK_EVENT,
88
+ $ as ON_MODAL_CLOSE_EVENT,
89
+ j as ON_MODAL_LEADING_ACTION_CLICK,
90
+ B as ON_MODAL_OPEN_EVENT,
91
+ H as ON_MODAL_SUPPORTING_ACTION_CLICK,
92
+ R as PieModal,
93
+ U as headingLevels,
94
+ W as positions,
95
+ z as sizes
93
96
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "0.32.1",
3
+ "version": "0.32.2",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -29,7 +29,7 @@
29
29
  "license": "Apache-2.0",
30
30
  "devDependencies": {
31
31
  "@justeat/pie-design-tokens": "5.9.0",
32
- "@justeattakeaway/pie-components-config": "0.5.0",
32
+ "@justeattakeaway/pie-components-config": "0.6.0",
33
33
  "@types/body-scroll-lock": "3.1.2"
34
34
  },
35
35
  "peerDependencies": {
@@ -39,7 +39,7 @@
39
39
  "extends": "../../../package.json"
40
40
  },
41
41
  "dependencies": {
42
- "@justeattakeaway/pie-button": "0.37.1",
42
+ "@justeattakeaway/pie-button": "0.38.0",
43
43
  "@justeattakeaway/pie-icon-button": "0.21.2",
44
44
  "@justeattakeaway/pie-icons-webc": "0.11.1",
45
45
  "@justeattakeaway/pie-spinner": "0.2.1",