@justeattakeaway/pie-modal 0.32.0 → 0.32.1

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 +409 -192
  2. package/dist/react.js +19 -23
  3. package/package.json +5 -5
package/dist/index.js CHANGED
@@ -1,115 +1,332 @@
1
- import { LitElement as P, nothing as r, unsafeCSS as T } from "lit";
2
- import { html as c, unsafeStatic as F } from "lit/static-html.js";
3
- import { property as d, query as N } from "lit/decorators.js";
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";
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";
7
- import "@justeattakeaway/pie-icons-webc/IconClose";
8
- import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
9
- import "@justeattakeaway/pie-icons-webc/IconChevronRight";
10
6
  import "@justeattakeaway/pie-spinner";
11
- function W(a) {
12
- if (Array.isArray(a)) {
13
- for (var e = 0, o = Array(a.length); e < a.length; e++)
14
- o[e] = a[e];
15
- return o;
7
+ function ie(n) {
8
+ 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;
16
12
  } else
17
- return Array.from(a);
13
+ return Array.from(n);
18
14
  }
19
- var C = !1;
15
+ var E = !1;
20
16
  if (typeof window < "u") {
21
- var A = {
17
+ var N = {
22
18
  get passive() {
23
- C = !0;
19
+ E = !0;
24
20
  }
25
21
  };
26
- window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
22
+ window.addEventListener("testPassive", null, N), window.removeEventListener("testPassive", null, N);
27
23
  }
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 = [], b = !1, S = -1, g = void 0, h = void 0, L = function(e) {
29
- return p.some(function(o) {
30
- return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
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));
31
27
  });
32
- }, k = 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) {
36
- if (h === void 0) {
37
- var o = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
38
- o && i > 0 && (h = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
39
- }
40
- g === void 0 && (g = document.body.style.overflow, document.body.style.overflow = "hidden");
41
- }, V = function() {
42
- h !== void 0 && (document.body.style.paddingRight = h, h = void 0), g !== void 0 && (document.body.style.overflow = g, g = void 0);
43
- }, q = function(e) {
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) {
32
+ 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");
35
+ }
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) {
44
40
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
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 ? k(e) : (e.stopPropagation(), !0);
48
- }, U = function(e, o) {
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) {
49
45
  if (!e) {
50
46
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
51
47
  return;
52
48
  }
53
- if (!p.some(function(t) {
54
- return t.targetElement === e;
49
+ if (!g.some(function(o) {
50
+ return o.targetElement === e;
55
51
  })) {
56
52
  var i = {
57
53
  targetElement: e,
58
- options: o || {}
54
+ options: t || {}
59
55
  };
60
- p = [].concat(W(p), [i]), B ? (e.ontouchstart = function(t) {
61
- t.targetTouches.length === 1 && (S = t.targetTouches[0].clientY);
62
- }, e.ontouchmove = function(t) {
63
- t.targetTouches.length === 1 && H(t, e);
64
- }, b || (document.addEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !0)) : Y(o);
56
+ g = [].concat(ie(g), [i]), W ? (e.ontouchstart = function(o) {
57
+ o.targetTouches.length === 1 && (q = o.targetTouches[0].clientY);
58
+ }, 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);
65
61
  }
66
- }, K = function(e) {
62
+ }, re = function(e) {
67
63
  if (!e) {
68
64
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
69
65
  return;
70
66
  }
71
- p = p.filter(function(o) {
72
- return o.targetElement !== e;
73
- }), B ? (e.ontouchstart = null, e.ontouchmove = null, b && p.length === 0 && (document.removeEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !1)) : p.length || V();
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
+ };
71
+ const de = (n) => {
72
+ class e extends n {
73
+ /**
74
+ * A getter to determine whether the text direction is right-to-left (RTL).
75
+ * If the `dir` property is present on the component, it will be used to determine the text direction.
76
+ * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
77
+ * from the document's root element. This inference is not available during SSR.
78
+ * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
79
+ *
80
+ * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
81
+ */
82
+ get isRTL() {
83
+ return this.dir ? this.dir === "rtl" : !K && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
84
+ }
85
+ }
86
+ return e;
87
+ }, P = (n, e, t) => function(o, a) {
88
+ const l = `#${a}`;
89
+ Object.defineProperty(o, a, {
90
+ get() {
91
+ return this[l];
92
+ },
93
+ set(p) {
94
+ const m = this[l];
95
+ e.includes(p) ? this[l] = p : (console.error(
96
+ `<${n}> Invalid value "${p}" provided for property "${a}".`,
97
+ `Must be one of: ${e.join(" | ")}.`,
98
+ `Falling back to default value: "${t}"`
99
+ ), this[l] = t), this.requestUpdate(a, m);
100
+ }
101
+ });
102
+ }, ce = (n) => function(t, i) {
103
+ const o = `#${i}`;
104
+ Object.defineProperty(t, i, {
105
+ get() {
106
+ return this[o];
107
+ },
108
+ 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);
111
+ }
112
+ });
113
+ };
114
+ function he(n, e) {
115
+ 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
+ }
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;
74
164
  };
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=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}}
76
- `, X = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], x = "pie-modal-close", v = "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 = (a, e, o, i) => {
78
- for (var t = i > 1 ? void 0 : i ? ie(e, o) : e, s = a.length - 1, m; s >= 0; s--)
79
- (m = a[s]) && (t = (i ? m(e, o, t) : m(t)) || t);
80
- return i && t && oe(e, o, t), t;
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;
81
298
  };
82
- const u = "pie-modal";
83
- class n extends I(P) {
299
+ const k = "pie-modal";
300
+ class r extends de($) {
84
301
  constructor() {
85
302
  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) => {
86
303
  this.isDismissible || e.preventDefault();
87
304
  }, this._handleDialogLightDismiss = (e) => {
88
- var f;
305
+ var m;
89
306
  if (!this.isDismissible)
90
307
  return;
91
- const o = (f = this._dialog) == null ? void 0 : f.getBoundingClientRect(), {
308
+ const t = (m = this._dialog) == null ? void 0 : m.getBoundingClientRect(), {
92
309
  top: i = 0,
93
- bottom: t = 0,
94
- left: s = 0,
95
- right: m = 0
96
- } = o || {};
97
- if (i === 0 && t === 0 && s === 0 && m === 0)
310
+ bottom: o = 0,
311
+ left: a = 0,
312
+ right: l = 0
313
+ } = t || {};
314
+ if (i === 0 && o === 0 && a === 0 && l === 0)
98
315
  return;
99
- (e.clientY < i || e.clientY > t || e.clientX < s || e.clientX > m) && (this.isOpen = !1);
316
+ (e.clientY < i || e.clientY > o || e.clientX < a || e.clientX > l) && (this.isOpen = !1);
100
317
  }, this._dispatchModalCustomEvent = (e) => {
101
- const o = new CustomEvent(e, {
318
+ const t = new CustomEvent(e, {
102
319
  bubbles: !0,
103
320
  composed: !0
104
321
  });
105
- this.dispatchEvent(o);
322
+ this.dispatchEvent(t);
106
323
  };
107
324
  }
108
325
  connectedCallback() {
109
- super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(v, this._handleModalOpened.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
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));
110
327
  }
111
328
  disconnectedCallback() {
112
- document.removeEventListener(v, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.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();
113
330
  }
114
331
  async firstUpdated(e) {
115
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", () => {
@@ -123,38 +340,38 @@ class n extends I(P) {
123
340
  * Opens the dialog element and disables page scrolling
124
341
  */
125
342
  _handleModalOpened() {
126
- var o, i, t, s;
127
- const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
128
- e && U(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((s = this._dialog) == null || s.showModal());
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());
129
346
  }
130
347
  /**
131
348
  * Closes the dialog element and re-enables page scrolling
132
349
  */
133
350
  _handleModalClosed() {
134
- var o, i;
135
- const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
136
- e && K(e), (i = this._dialog) == null || i.close(), this._returnFocus();
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();
137
354
  }
138
355
  // Handles the value of the isOpen property on first render of the component
139
356
  _handleModalOpenStateOnFirstRender(e) {
140
- e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(v);
357
+ e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(x);
141
358
  }
142
359
  // Handles changes to the modal isOpen property by dispatching any appropriate events
143
360
  _handleModalOpenStateChanged(e) {
144
- const o = e.get("isOpen");
145
- o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(v));
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));
146
363
  }
147
364
  _handleActionClick(e) {
148
- var o, i;
149
- e === "leading" ? ((o = this._dialog) == null || o.close("leading"), this._dispatchModalCustomEvent(Z)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(ee));
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));
150
367
  }
151
368
  /**
152
369
  * Return focus to the specified element, providing the selector is valid
153
370
  * and the chosen element can be found.
154
371
  */
155
372
  _returnFocus() {
156
- var o, i;
157
- const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
373
+ var t, i;
374
+ const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
158
375
  e && ((i = document.querySelector(e)) == null || i.focus());
159
376
  }
160
377
  /**
@@ -165,14 +382,14 @@ class n extends I(P) {
165
382
  */
166
383
  renderCloseButton() {
167
384
  var e;
168
- return c`
385
+ return h`
169
386
  <pie-icon-button
170
387
  @click="${() => {
171
388
  this.isOpen = !1;
172
389
  }}"
173
390
  variant="ghost-secondary"
174
391
  class="c-modal-closeBtn"
175
- aria-label="${((e = this.aria) == null ? void 0 : e.close) || r}"
392
+ aria-label="${((e = this.aria) == null ? void 0 : e.close) || c}"
176
393
  data-test-id="modal-close-button">
177
394
  <icon-close></icon-close>
178
395
  </pie-icon-button>`;
@@ -185,16 +402,16 @@ class n extends I(P) {
185
402
  */
186
403
  renderBackButton() {
187
404
  var e;
188
- return c`
405
+ return h`
189
406
  <pie-icon-button
190
407
  @click="${() => {
191
408
  this._backButtonClicked = !0, this.isOpen = !1;
192
409
  }}"
193
410
  variant="ghost-secondary"
194
411
  class="c-modal-backBtn"
195
- aria-label="${((e = this.aria) == null ? void 0 : e.back) || r}"
412
+ aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
196
413
  data-test-id="modal-back-button">
197
- ${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
414
+ ${this.isRTL ? h`<icon-chevron-right></icon-chevron-right>` : h`<icon-chevron-left></icon-chevron-left>`}
198
415
  </pie-icon-button>
199
416
  `;
200
417
  }
@@ -208,18 +425,18 @@ class n extends I(P) {
208
425
  * @private
209
426
  */
210
427
  renderLeadingAction() {
211
- const { text: e, variant: o = "primary", ariaLabel: i } = this.leadingAction;
212
- return e ? c`
428
+ const { text: e, variant: t = "primary", ariaLabel: i } = this.leadingAction;
429
+ return e ? h`
213
430
  <pie-button
214
- variant="${o}"
215
- aria-label="${i || r}"
431
+ variant="${t}"
432
+ aria-label="${i || c}"
216
433
  type="submit"
217
434
  ?isFullWidth="${this.hasStackedActions}"
218
435
  @click="${() => this._handleActionClick("leading")}"
219
436
  data-test-id="modal-leading-action">
220
437
  ${e}
221
438
  </pie-button>
222
- ` : r;
439
+ ` : c;
223
440
  }
224
441
  /**
225
442
  * Render supportingAction button depending on prop availability.
@@ -233,77 +450,77 @@ class n extends I(P) {
233
450
  * @private
234
451
  */
235
452
  renderSupportingAction() {
236
- const { text: e, variant: o = "ghost", ariaLabel: i } = this.supportingAction;
237
- return e ? this.leadingAction ? c`
453
+ const { text: e, variant: t = "ghost", ariaLabel: i } = this.supportingAction;
454
+ return e ? this.leadingAction ? h`
238
455
  <pie-button
239
- variant="${o}"
240
- aria-label="${i || r}"
456
+ variant="${t}"
457
+ aria-label="${i || c}"
241
458
  type="reset"
242
459
  ?isFullWidth="${this.hasStackedActions}"
243
460
  @click="${() => this._handleActionClick("supporting")}"
244
461
  data-test-id="modal-supporting-action">
245
462
  ${e}
246
463
  </pie-button>
247
- ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), r) : r;
464
+ ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), c) : c;
248
465
  }
249
466
  /**
250
467
  * Renders the modal inner content and footer of the modal.
251
468
  * @private
252
469
  */
253
470
  renderModalContentAndFooter() {
254
- return c`
471
+ return h`
255
472
  <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
256
473
  <div class="c-modal-contentInner">
257
474
  <slot></slot>
258
475
  </div>
259
- ${this.isLoading ? c`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : r}
476
+ ${this.isLoading ? h`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : c}
260
477
  </article>
261
478
  <footer class="c-modal-footer">
262
- ${this.leadingAction ? this.renderLeadingAction() : r}
263
- ${this.supportingAction ? this.renderSupportingAction() : r}
479
+ ${this.leadingAction ? this.renderLeadingAction() : c}
480
+ ${this.supportingAction ? this.renderSupportingAction() : c}
264
481
  </footer>`;
265
482
  }
266
483
  render() {
267
484
  const {
268
485
  aria: e,
269
- hasBackButton: o,
486
+ hasBackButton: t,
270
487
  hasStackedActions: i,
271
- heading: t,
272
- headingLevel: s = "h2",
273
- isDismissible: m,
274
- isFooterPinned: w,
275
- isFullWidthBelowMid: f,
276
- isLoading: y,
277
- leadingAction: M,
278
- position: $,
279
- size: E,
280
- supportingAction: D
281
- } = this, O = F(s);
282
- return c`
488
+ heading: o,
489
+ headingLevel: a = "h2",
490
+ isDismissible: l,
491
+ 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`
283
500
  <dialog
284
501
  id="dialog"
285
502
  class="c-modal"
286
- size="${E}"
287
- position="${$}"
288
- ?hasActions=${M || D}
289
- ?hasBackButton=${o}
503
+ size="${J}"
504
+ position="${X}"
505
+ ?hasActions=${G || Q}
506
+ ?hasBackButton=${t}
290
507
  ?hasStackedActions=${i}
291
- ?isDismissible=${m}
292
- ?isFooterPinned=${w}
293
- ?isFullWidthBelowMid=${f}
294
- ?isLoading=${y}
295
- aria-busy="${y ? "true" : "false"}"
296
- aria-label="${y && (e == null ? void 0 : e.loading) || r}"
508
+ ?isDismissible=${l}
509
+ ?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}"
297
514
  data-test-id="pie-modal">
298
515
  <header class="c-modal-header">
299
- ${o ? this.renderBackButton() : r}
300
- <${O} class="c-modal-heading">
301
- ${t}
302
- </${O}>
303
- ${m ? this.renderCloseButton() : r}
516
+ ${t ? this.renderBackButton() : c}
517
+ <${R} class="c-modal-heading">
518
+ ${o}
519
+ </${R}>
520
+ ${l ? this.renderCloseButton() : c}
304
521
  </header>
305
522
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
306
- w ? this.renderModalContentAndFooter() : c`
523
+ p ? this.renderModalContentAndFooter() : h`
307
524
  <div class="c-modal-scrollContainer">
308
525
  ${this.renderModalContentAndFooter()}
309
526
  </div>
@@ -311,68 +528,68 @@ class n extends I(P) {
311
528
  </dialog>`;
312
529
  }
313
530
  }
314
- n.styles = T(G);
315
- l([
316
- d({ type: Object })
317
- ], n.prototype, "aria", 2);
318
- l([
319
- d({ type: String }),
320
- R(u)
321
- ], n.prototype, "heading", 2);
322
- l([
323
- d(),
324
- z(u, X, "h2")
325
- ], n.prototype, "headingLevel", 2);
326
- l([
327
- d({ type: Boolean })
328
- ], n.prototype, "hasBackButton", 2);
329
- l([
330
- d({ type: Boolean })
331
- ], n.prototype, "hasStackedActions", 2);
332
- l([
333
- d({ type: Boolean, reflect: !0 })
334
- ], n.prototype, "isDismissible", 2);
335
- l([
336
- d({ type: Boolean })
337
- ], n.prototype, "isFooterPinned", 2);
338
- l([
339
- d({ type: Boolean })
340
- ], n.prototype, "isFullWidthBelowMid", 2);
341
- l([
342
- d({ type: Boolean, reflect: !0 })
343
- ], n.prototype, "isLoading", 2);
344
- l([
345
- d({ type: Boolean })
346
- ], n.prototype, "isOpen", 2);
347
- l([
348
- d({ type: Object })
349
- ], n.prototype, "leadingAction", 2);
350
- l([
351
- d(),
352
- z(u, Q, "center")
353
- ], n.prototype, "position", 2);
354
- l([
355
- d()
356
- ], n.prototype, "returnFocusAfterCloseSelector", 2);
357
- l([
358
- d(),
359
- z(u, J, "medium")
360
- ], n.prototype, "size", 2);
361
- l([
362
- d({ type: Object })
363
- ], n.prototype, "supportingAction", 2);
364
- l([
365
- N("dialog")
366
- ], n.prototype, "_dialog", 2);
367
- j(u, n);
531
+ r.styles = ee(ze);
532
+ d([
533
+ s({ type: Object })
534
+ ], r.prototype, "aria", 2);
535
+ d([
536
+ s({ type: String }),
537
+ ce(k)
538
+ ], r.prototype, "heading", 2);
539
+ d([
540
+ s(),
541
+ P(k, Ce, "h2")
542
+ ], r.prototype, "headingLevel", 2);
543
+ d([
544
+ s({ type: Boolean })
545
+ ], r.prototype, "hasBackButton", 2);
546
+ d([
547
+ s({ type: Boolean })
548
+ ], r.prototype, "hasStackedActions", 2);
549
+ d([
550
+ s({ type: Boolean, reflect: !0 })
551
+ ], r.prototype, "isDismissible", 2);
552
+ d([
553
+ s({ type: Boolean })
554
+ ], r.prototype, "isFooterPinned", 2);
555
+ d([
556
+ s({ type: Boolean })
557
+ ], r.prototype, "isFullWidthBelowMid", 2);
558
+ d([
559
+ s({ type: Boolean, reflect: !0 })
560
+ ], r.prototype, "isLoading", 2);
561
+ d([
562
+ s({ type: Boolean })
563
+ ], r.prototype, "isOpen", 2);
564
+ d([
565
+ s({ type: Object })
566
+ ], r.prototype, "leadingAction", 2);
567
+ d([
568
+ s(),
569
+ P(k, $e, "center")
570
+ ], r.prototype, "position", 2);
571
+ d([
572
+ s()
573
+ ], r.prototype, "returnFocusAfterCloseSelector", 2);
574
+ d([
575
+ s(),
576
+ P(k, Ae, "medium")
577
+ ], r.prototype, "size", 2);
578
+ d([
579
+ s({ type: Object })
580
+ ], r.prototype, "supportingAction", 2);
581
+ d([
582
+ O("dialog")
583
+ ], r.prototype, "_dialog", 2);
584
+ he(k, r);
368
585
  export {
369
- _ as ON_MODAL_BACK_EVENT,
370
- x as ON_MODAL_CLOSE_EVENT,
371
- Z as ON_MODAL_LEADING_ACTION_CLICK,
372
- v as ON_MODAL_OPEN_EVENT,
373
- ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
374
- n as PieModal,
375
- X as headingLevels,
376
- Q as positions,
377
- J as sizes
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
378
595
  };
package/dist/react.js CHANGED
@@ -1,39 +1,35 @@
1
1
  import * as f from "react";
2
2
  import { PieModal as E } from "./index.js";
3
- import { ON_MODAL_BACK_EVENT as $, ON_MODAL_CLOSE_EVENT as j, ON_MODAL_LEADING_ACTION_CLICK as B, ON_MODAL_OPEN_EVENT as H, ON_MODAL_SUPPORTING_ACTION_CLICK as U, headingLevels as W, positions as z, sizes as q } 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";
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-webc-core";
10
- import "@justeattakeaway/pie-icons-webc/IconClose";
11
- import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
12
- import "@justeattakeaway/pie-icons-webc/IconChevronRight";
13
9
  import "@justeattakeaway/pie-spinner";
14
10
  /**
15
11
  * @license
16
12
  * Copyright 2018 Google LLC
17
13
  * SPDX-License-Identifier: BSD-3-Clause
18
14
  */
19
- const C = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), O = /* @__PURE__ */ new WeakMap(), L = (o, t, d, c, m) => {
15
+ const C = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), O = /* @__PURE__ */ new WeakMap(), L = (o, t, p, c, m) => {
20
16
  const s = m == null ? void 0 : m[t];
21
- s === void 0 || d === c ? d == null && t in HTMLElement.prototype ? o.removeAttribute(t) : o[t] = d : ((a, i, h) => {
17
+ s === void 0 || p === c ? p == null && t in HTMLElement.prototype ? o.removeAttribute(t) : o[t] = p : ((a, i, h) => {
22
18
  let l = O.get(a);
23
19
  l === void 0 && O.set(a, l = /* @__PURE__ */ new Map());
24
20
  let r = l.get(i);
25
21
  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));
26
- })(o, s, d);
22
+ })(o, s, p);
27
23
  }, A = (o, t) => {
28
24
  typeof o == "function" ? o(t) : o.current = t;
29
25
  };
30
- function y(o = window.React, t, d, c, m) {
26
+ function y(o = window.React, t, p, c, m) {
31
27
  let s, a, i;
32
28
  if (t === void 0) {
33
- const p = o;
34
- ({ tagName: a, elementClass: i, events: c, displayName: m } = p), s = p.react;
29
+ const d = o;
30
+ ({ tagName: a, elementClass: i, events: c, displayName: m } = d), s = d.react;
35
31
  } else
36
- s = o, i = d, a = t;
32
+ s = o, i = p, a = t;
37
33
  const h = s.Component, l = s.createElement, r = new Set(Object.keys(c ?? {}));
38
34
  class v extends h {
39
35
  constructor() {
@@ -63,10 +59,10 @@ function y(o = window.React, t, d, c, m) {
63
59
  }
64
60
  }
65
61
  v.displayName = m ?? i.name;
66
- const M = s.forwardRef((p, e) => l(v, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
62
+ const M = s.forwardRef((d, e) => l(v, { ...d, _$Gl: e }, d == null ? void 0 : d.children));
67
63
  return M.displayName = v.displayName, M;
68
64
  }
69
- const x = y({
65
+ const b = y({
70
66
  displayName: "PieModal",
71
67
  elementClass: E,
72
68
  react: f,
@@ -85,13 +81,13 @@ const x = y({
85
81
  }
86
82
  });
87
83
  export {
88
- $ as ON_MODAL_BACK_EVENT,
89
- j as ON_MODAL_CLOSE_EVENT,
90
- B as ON_MODAL_LEADING_ACTION_CLICK,
91
- H as ON_MODAL_OPEN_EVENT,
92
- U as ON_MODAL_SUPPORTING_ACTION_CLICK,
93
- x as PieModal,
94
- W as headingLevels,
95
- z as positions,
96
- q as sizes
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
97
93
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "0.32.0",
3
+ "version": "0.32.1",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -29,8 +29,8 @@
29
29
  "license": "Apache-2.0",
30
30
  "devDependencies": {
31
31
  "@justeat/pie-design-tokens": "5.9.0",
32
- "@justeattakeaway/pie-components-config": "0.4.0",
33
- "@types/body-scroll-lock": "3.1.1"
32
+ "@justeattakeaway/pie-components-config": "0.5.0",
33
+ "@types/body-scroll-lock": "3.1.2"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "body-scroll-lock": "3.1.5"
@@ -39,8 +39,8 @@
39
39
  "extends": "../../../package.json"
40
40
  },
41
41
  "dependencies": {
42
- "@justeattakeaway/pie-button": "0.37.0",
43
- "@justeattakeaway/pie-icon-button": "0.21.1",
42
+ "@justeattakeaway/pie-button": "0.37.1",
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",
46
46
  "@justeattakeaway/pie-webc-core": "0.11.0",