@justeattakeaway/pie-modal 0.31.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 (5) hide show
  1. package/dist/index.js +410 -191
  2. package/dist/react.js +20 -23
  3. package/package.json +8 -7
  4. package/src/index.ts +2 -0
  5. package/src/modal.scss +6 -53
package/dist/index.js CHANGED
@@ -1,114 +1,332 @@
1
- import { LitElement as P, nothing as d, unsafeCSS as T } from "lit";
2
- import { html as m, unsafeStatic as F } from "lit/static-html.js";
3
- import { property as r, 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
- function W(a) {
11
- if (Array.isArray(a)) {
12
- for (var e = 0, o = Array(a.length); e < a.length; e++)
13
- o[e] = a[e];
14
- return o;
6
+ import "@justeattakeaway/pie-spinner";
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;
15
12
  } else
16
- return Array.from(a);
13
+ return Array.from(n);
17
14
  }
18
- var C = !1;
15
+ var E = !1;
19
16
  if (typeof window < "u") {
20
- var A = {
17
+ var N = {
21
18
  get passive() {
22
- C = !0;
19
+ E = !0;
23
20
  }
24
21
  };
25
- window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
22
+ window.addEventListener("testPassive", null, N), window.removeEventListener("testPassive", null, N);
26
23
  }
27
- var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], b = !1, S = -1, h = void 0, g = void 0, L = function(e) {
28
- return p.some(function(o) {
29
- 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));
30
27
  });
31
- }, y = function(e) {
32
- var o = e || window.event;
33
- return L(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
34
- }, Y = function(e) {
35
- if (g === void 0) {
36
- var o = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
37
- o && i > 0 && (g = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
38
- }
39
- h === void 0 && (h = document.body.style.overflow, document.body.style.overflow = "hidden");
40
- }, V = function() {
41
- g !== void 0 && (document.body.style.paddingRight = g, g = void 0), h !== void 0 && (document.body.style.overflow = h, h = void 0);
42
- }, 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) {
43
40
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
44
- }, H = function(e, o) {
45
- var i = e.targetTouches[0].clientY - S;
46
- return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ? y(e) : (e.stopPropagation(), !0);
47
- }, 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) {
48
45
  if (!e) {
49
46
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
50
47
  return;
51
48
  }
52
- if (!p.some(function(t) {
53
- return t.targetElement === e;
49
+ if (!g.some(function(o) {
50
+ return o.targetElement === e;
54
51
  })) {
55
52
  var i = {
56
53
  targetElement: e,
57
- options: o || {}
54
+ options: t || {}
58
55
  };
59
- p = [].concat(W(p), [i]), B ? (e.ontouchstart = function(t) {
60
- t.targetTouches.length === 1 && (S = t.targetTouches[0].clientY);
61
- }, e.ontouchmove = function(t) {
62
- t.targetTouches.length === 1 && H(t, e);
63
- }, b || (document.addEventListener("touchmove", y, 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);
64
61
  }
65
- }, K = function(e) {
62
+ }, re = function(e) {
66
63
  if (!e) {
67
64
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
68
65
  return;
69
66
  }
70
- p = p.filter(function(o) {
71
- return o.targetElement !== e;
72
- }), B ? (e.ontouchstart = null, e.ontouchmove = null, b && p.length === 0 && (document.removeEventListener("touchmove", y, 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;
73
164
  };
74
- 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}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 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);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-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-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal>.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:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
75
- `, 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";
76
- var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (a, e, o, i) => {
77
- for (var t = i > 1 ? void 0 : i ? ie(e, o) : e, s = a.length - 1, c; s >= 0; s--)
78
- (c = a[s]) && (t = (i ? c(e, o, t) : c(t)) || t);
79
- 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;
80
298
  };
81
- const u = "pie-modal";
82
- class n extends I(P) {
299
+ const k = "pie-modal";
300
+ class r extends de($) {
83
301
  constructor() {
84
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) => {
85
303
  this.isDismissible || e.preventDefault();
86
304
  }, this._handleDialogLightDismiss = (e) => {
87
- var f;
305
+ var m;
88
306
  if (!this.isDismissible)
89
307
  return;
90
- const o = (f = this._dialog) == null ? void 0 : f.getBoundingClientRect(), {
308
+ const t = (m = this._dialog) == null ? void 0 : m.getBoundingClientRect(), {
91
309
  top: i = 0,
92
- bottom: t = 0,
93
- left: s = 0,
94
- right: c = 0
95
- } = o || {};
96
- if (i === 0 && t === 0 && s === 0 && c === 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)
97
315
  return;
98
- (e.clientY < i || e.clientY > t || e.clientX < s || e.clientX > c) && (this.isOpen = !1);
316
+ (e.clientY < i || e.clientY > o || e.clientX < a || e.clientX > l) && (this.isOpen = !1);
99
317
  }, this._dispatchModalCustomEvent = (e) => {
100
- const o = new CustomEvent(e, {
318
+ const t = new CustomEvent(e, {
101
319
  bubbles: !0,
102
320
  composed: !0
103
321
  });
104
- this.dispatchEvent(o);
322
+ this.dispatchEvent(t);
105
323
  };
106
324
  }
107
325
  connectedCallback() {
108
- 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));
109
327
  }
110
328
  disconnectedCallback() {
111
- 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();
112
330
  }
113
331
  async firstUpdated(e) {
114
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", () => {
@@ -122,38 +340,38 @@ class n extends I(P) {
122
340
  * Opens the dialog element and disables page scrolling
123
341
  */
124
342
  _handleModalOpened() {
125
- var o, i, t, s;
126
- const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
127
- 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());
128
346
  }
129
347
  /**
130
348
  * Closes the dialog element and re-enables page scrolling
131
349
  */
132
350
  _handleModalClosed() {
133
- var o, i;
134
- const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
135
- 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();
136
354
  }
137
355
  // Handles the value of the isOpen property on first render of the component
138
356
  _handleModalOpenStateOnFirstRender(e) {
139
- e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(v);
357
+ e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(x);
140
358
  }
141
359
  // Handles changes to the modal isOpen property by dispatching any appropriate events
142
360
  _handleModalOpenStateChanged(e) {
143
- const o = e.get("isOpen");
144
- 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));
145
363
  }
146
364
  _handleActionClick(e) {
147
- var o, i;
148
- 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));
149
367
  }
150
368
  /**
151
369
  * Return focus to the specified element, providing the selector is valid
152
370
  * and the chosen element can be found.
153
371
  */
154
372
  _returnFocus() {
155
- var o, i;
156
- 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();
157
375
  e && ((i = document.querySelector(e)) == null || i.focus());
158
376
  }
159
377
  /**
@@ -164,14 +382,14 @@ class n extends I(P) {
164
382
  */
165
383
  renderCloseButton() {
166
384
  var e;
167
- return m`
385
+ return h`
168
386
  <pie-icon-button
169
387
  @click="${() => {
170
388
  this.isOpen = !1;
171
389
  }}"
172
390
  variant="ghost-secondary"
173
391
  class="c-modal-closeBtn"
174
- aria-label="${((e = this.aria) == null ? void 0 : e.close) || d}"
392
+ aria-label="${((e = this.aria) == null ? void 0 : e.close) || c}"
175
393
  data-test-id="modal-close-button">
176
394
  <icon-close></icon-close>
177
395
  </pie-icon-button>`;
@@ -184,16 +402,16 @@ class n extends I(P) {
184
402
  */
185
403
  renderBackButton() {
186
404
  var e;
187
- return m`
405
+ return h`
188
406
  <pie-icon-button
189
407
  @click="${() => {
190
408
  this._backButtonClicked = !0, this.isOpen = !1;
191
409
  }}"
192
410
  variant="ghost-secondary"
193
411
  class="c-modal-backBtn"
194
- aria-label="${((e = this.aria) == null ? void 0 : e.back) || d}"
412
+ aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
195
413
  data-test-id="modal-back-button">
196
- ${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
414
+ ${this.isRTL ? h`<icon-chevron-right></icon-chevron-right>` : h`<icon-chevron-left></icon-chevron-left>`}
197
415
  </pie-icon-button>
198
416
  `;
199
417
  }
@@ -207,18 +425,18 @@ class n extends I(P) {
207
425
  * @private
208
426
  */
209
427
  renderLeadingAction() {
210
- const { text: e, variant: o = "primary", ariaLabel: i } = this.leadingAction;
211
- return e ? m`
428
+ const { text: e, variant: t = "primary", ariaLabel: i } = this.leadingAction;
429
+ return e ? h`
212
430
  <pie-button
213
- variant="${o}"
214
- aria-label="${i || d}"
431
+ variant="${t}"
432
+ aria-label="${i || c}"
215
433
  type="submit"
216
434
  ?isFullWidth="${this.hasStackedActions}"
217
435
  @click="${() => this._handleActionClick("leading")}"
218
436
  data-test-id="modal-leading-action">
219
437
  ${e}
220
438
  </pie-button>
221
- ` : d;
439
+ ` : c;
222
440
  }
223
441
  /**
224
442
  * Render supportingAction button depending on prop availability.
@@ -232,76 +450,77 @@ class n extends I(P) {
232
450
  * @private
233
451
  */
234
452
  renderSupportingAction() {
235
- const { text: e, variant: o = "ghost", ariaLabel: i } = this.supportingAction;
236
- return e ? this.leadingAction ? m`
453
+ const { text: e, variant: t = "ghost", ariaLabel: i } = this.supportingAction;
454
+ return e ? this.leadingAction ? h`
237
455
  <pie-button
238
- variant="${o}"
239
- aria-label="${i || d}"
456
+ variant="${t}"
457
+ aria-label="${i || c}"
240
458
  type="reset"
241
459
  ?isFullWidth="${this.hasStackedActions}"
242
460
  @click="${() => this._handleActionClick("supporting")}"
243
461
  data-test-id="modal-supporting-action">
244
462
  ${e}
245
463
  </pie-button>
246
- ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), d) : d;
464
+ ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), c) : c;
247
465
  }
248
466
  /**
249
467
  * Renders the modal inner content and footer of the modal.
250
468
  * @private
251
469
  */
252
470
  renderModalContentAndFooter() {
253
- return m`
471
+ return h`
254
472
  <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
255
473
  <div class="c-modal-contentInner">
256
474
  <slot></slot>
257
475
  </div>
476
+ ${this.isLoading ? h`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : c}
258
477
  </article>
259
478
  <footer class="c-modal-footer">
260
- ${this.leadingAction ? this.renderLeadingAction() : d}
261
- ${this.supportingAction ? this.renderSupportingAction() : d}
479
+ ${this.leadingAction ? this.renderLeadingAction() : c}
480
+ ${this.supportingAction ? this.renderSupportingAction() : c}
262
481
  </footer>`;
263
482
  }
264
483
  render() {
265
484
  const {
266
485
  aria: e,
267
- hasBackButton: o,
486
+ hasBackButton: t,
268
487
  hasStackedActions: i,
269
- heading: t,
270
- headingLevel: s = "h2",
271
- isDismissible: c,
272
- isFooterPinned: w,
273
- isFullWidthBelowMid: f,
274
- isLoading: k,
275
- leadingAction: M,
276
- position: $,
277
- size: E,
278
- supportingAction: D
279
- } = this, O = F(s);
280
- return m`
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`
281
500
  <dialog
282
501
  id="dialog"
283
502
  class="c-modal"
284
- size="${E}"
285
- position="${$}"
286
- ?hasActions=${M || D}
287
- ?hasBackButton=${o}
503
+ size="${J}"
504
+ position="${X}"
505
+ ?hasActions=${G || Q}
506
+ ?hasBackButton=${t}
288
507
  ?hasStackedActions=${i}
289
- ?isDismissible=${c}
290
- ?isFooterPinned=${w}
291
- ?isFullWidthBelowMid=${f}
292
- ?isLoading=${k}
293
- aria-busy="${k ? "true" : "false"}"
294
- aria-label="${k && (e == null ? void 0 : e.loading) || d}"
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}"
295
514
  data-test-id="pie-modal">
296
515
  <header class="c-modal-header">
297
- ${o ? this.renderBackButton() : d}
298
- <${O} class="c-modal-heading">
299
- ${t}
300
- </${O}>
301
- ${c ? this.renderCloseButton() : d}
516
+ ${t ? this.renderBackButton() : c}
517
+ <${R} class="c-modal-heading">
518
+ ${o}
519
+ </${R}>
520
+ ${l ? this.renderCloseButton() : c}
302
521
  </header>
303
522
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
304
- w ? this.renderModalContentAndFooter() : m`
523
+ p ? this.renderModalContentAndFooter() : h`
305
524
  <div class="c-modal-scrollContainer">
306
525
  ${this.renderModalContentAndFooter()}
307
526
  </div>
@@ -309,68 +528,68 @@ class n extends I(P) {
309
528
  </dialog>`;
310
529
  }
311
530
  }
312
- n.styles = T(G);
313
- l([
314
- r({ type: Object })
315
- ], n.prototype, "aria", 2);
316
- l([
317
- r({ type: String }),
318
- R(u)
319
- ], n.prototype, "heading", 2);
320
- l([
321
- r(),
322
- z(u, X, "h2")
323
- ], n.prototype, "headingLevel", 2);
324
- l([
325
- r({ type: Boolean })
326
- ], n.prototype, "hasBackButton", 2);
327
- l([
328
- r({ type: Boolean })
329
- ], n.prototype, "hasStackedActions", 2);
330
- l([
331
- r({ type: Boolean, reflect: !0 })
332
- ], n.prototype, "isDismissible", 2);
333
- l([
334
- r({ type: Boolean })
335
- ], n.prototype, "isFooterPinned", 2);
336
- l([
337
- r({ type: Boolean })
338
- ], n.prototype, "isFullWidthBelowMid", 2);
339
- l([
340
- r({ type: Boolean, reflect: !0 })
341
- ], n.prototype, "isLoading", 2);
342
- l([
343
- r({ type: Boolean })
344
- ], n.prototype, "isOpen", 2);
345
- l([
346
- r({ type: Object })
347
- ], n.prototype, "leadingAction", 2);
348
- l([
349
- r(),
350
- z(u, Q, "center")
351
- ], n.prototype, "position", 2);
352
- l([
353
- r()
354
- ], n.prototype, "returnFocusAfterCloseSelector", 2);
355
- l([
356
- r(),
357
- z(u, J, "medium")
358
- ], n.prototype, "size", 2);
359
- l([
360
- r({ type: Object })
361
- ], n.prototype, "supportingAction", 2);
362
- l([
363
- N("dialog")
364
- ], n.prototype, "_dialog", 2);
365
- 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);
366
585
  export {
367
- _ as ON_MODAL_BACK_EVENT,
368
- x as ON_MODAL_CLOSE_EVENT,
369
- Z as ON_MODAL_LEADING_ACTION_CLICK,
370
- v as ON_MODAL_OPEN_EVENT,
371
- ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
372
- n as PieModal,
373
- X as headingLevels,
374
- Q as positions,
375
- 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
376
595
  };
package/dist/react.js CHANGED
@@ -1,38 +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 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";
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";
9
+ import "@justeattakeaway/pie-spinner";
13
10
  /**
14
11
  * @license
15
12
  * Copyright 2018 Google LLC
16
13
  * SPDX-License-Identifier: BSD-3-Clause
17
14
  */
18
- 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) => {
19
16
  const s = m == null ? void 0 : m[t];
20
- 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) => {
21
18
  let l = O.get(a);
22
19
  l === void 0 && O.set(a, l = /* @__PURE__ */ new Map());
23
20
  let r = l.get(i);
24
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));
25
- })(o, s, d);
22
+ })(o, s, p);
26
23
  }, A = (o, t) => {
27
24
  typeof o == "function" ? o(t) : o.current = t;
28
25
  };
29
- function y(o = window.React, t, d, c, m) {
26
+ function y(o = window.React, t, p, c, m) {
30
27
  let s, a, i;
31
28
  if (t === void 0) {
32
- const p = o;
33
- ({ 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;
34
31
  } else
35
- s = o, i = d, a = t;
32
+ s = o, i = p, a = t;
36
33
  const h = s.Component, l = s.createElement, r = new Set(Object.keys(c ?? {}));
37
34
  class v extends h {
38
35
  constructor() {
@@ -62,10 +59,10 @@ function y(o = window.React, t, d, c, m) {
62
59
  }
63
60
  }
64
61
  v.displayName = m ?? i.name;
65
- 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));
66
63
  return M.displayName = v.displayName, M;
67
64
  }
68
- const R = y({
65
+ const b = y({
69
66
  displayName: "PieModal",
70
67
  elementClass: E,
71
68
  react: f,
@@ -84,13 +81,13 @@ const R = y({
84
81
  }
85
82
  });
86
83
  export {
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
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
96
93
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "0.31.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",
@@ -28,10 +28,9 @@
28
28
  "author": "Just Eat Takeaway.com - Design System Team",
29
29
  "license": "Apache-2.0",
30
30
  "devDependencies": {
31
- "@justeat/pie-design-tokens": "5.8.2",
32
- "@justeattakeaway/pie-components-config": "0.4.0",
33
- "@justeattakeaway/pie-webc-core": "0.11.0",
34
- "@types/body-scroll-lock": "3.1.1"
31
+ "@justeat/pie-design-tokens": "5.9.0",
32
+ "@justeattakeaway/pie-components-config": "0.5.0",
33
+ "@types/body-scroll-lock": "3.1.2"
35
34
  },
36
35
  "peerDependencies": {
37
36
  "body-scroll-lock": "3.1.5"
@@ -40,9 +39,11 @@
40
39
  "extends": "../../../package.json"
41
40
  },
42
41
  "dependencies": {
43
- "@justeattakeaway/pie-button": "0.36.1",
44
- "@justeattakeaway/pie-icon-button": "0.21.1",
42
+ "@justeattakeaway/pie-button": "0.37.1",
43
+ "@justeattakeaway/pie-icon-button": "0.21.2",
45
44
  "@justeattakeaway/pie-icons-webc": "0.11.1",
45
+ "@justeattakeaway/pie-spinner": "0.2.1",
46
+ "@justeattakeaway/pie-webc-core": "0.11.0",
46
47
  "dialog-polyfill": "0.5.6"
47
48
  },
48
49
  "sideEffects": [
package/src/index.ts CHANGED
@@ -13,6 +13,7 @@ import {
13
13
  import '@justeattakeaway/pie-icons-webc/IconClose';
14
14
  import '@justeattakeaway/pie-icons-webc/IconChevronLeft';
15
15
  import '@justeattakeaway/pie-icons-webc/IconChevronRight';
16
+ import '@justeattakeaway/pie-spinner';
16
17
 
17
18
  import styles from './modal.scss?inline';
18
19
  import {
@@ -342,6 +343,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
342
343
  <div class="c-modal-contentInner">
343
344
  <slot></slot>
344
345
  </div>
346
+ ${this.isLoading ? html`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : nothing}
345
347
  </article>
346
348
  <footer class="c-modal-footer">
347
349
  ${this.leadingAction ? this.renderLeadingAction() : nothing}
package/src/modal.scss CHANGED
@@ -8,17 +8,6 @@
8
8
  box-sizing: border-box;
9
9
  }
10
10
 
11
- // Spin animation for loading state
12
- @keyframes rotate360 {
13
- from {
14
- transform: rotate(0deg);
15
- }
16
-
17
- to {
18
- transform: rotate(360deg);
19
- }
20
- }
21
-
22
11
  .c-modal {
23
12
  // Custom Property Declarations
24
13
  // These are defined here instead of :host to encapsulate them inside Shadow DOM
@@ -245,23 +234,6 @@
245
234
  --modal-content-padding-inline: var(--dt-spacing-e);
246
235
  }
247
236
 
248
- // Spinner sizes defaults
249
- --spinner-size: 48px;
250
- --spinner-border-width: 6px;
251
-
252
- // Spinner colors - currently set for the primary button styles
253
- --spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);
254
- --spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);
255
- --spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);
256
- --spinner-left-color-opacity: 0.35;
257
- --spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));
258
- --spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);
259
-
260
- // Spinner animations
261
- --spinner-animation-duration: 1.15s;
262
- --spinner-animation-timing-function: linear;
263
- --spinner-animation-iteration-count: infinite;
264
-
265
237
  position: relative;
266
238
  min-block-size: var(--dt-spacing-j);
267
239
 
@@ -289,27 +261,6 @@
289
261
  // The shadow itself does not move as you scroll.
290
262
  background-attachment: local, scroll;
291
263
  }
292
-
293
- &:before {
294
- content: '';
295
-
296
- // Centre the spinner over the top of the button text
297
- position: absolute;
298
- left: 50%;
299
- top: 50%;
300
- translate: -50% -50%;
301
-
302
- height: var(--spinner-size);
303
- width: var(--spinner-size);
304
- display: block;
305
- background-color: transparent;
306
- border-radius: 50%;
307
- border-color: var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);
308
- border-width: var(--spinner-border-width);
309
- border-style: solid;
310
- will-change: transform;
311
- opacity: 0;
312
- }
313
264
  }
314
265
 
315
266
  & > .c-modal-scrollContainer {
@@ -342,13 +293,15 @@
342
293
  }
343
294
 
344
295
  &[isLoading] .c-modal-content {
345
- &:before {
346
- animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
347
- opacity: 1;
296
+ pie-spinner {
297
+ position: absolute;
298
+ left: 50%;
299
+ top: 50%;
300
+ transform: translate(-50%, -50%);
348
301
  }
349
302
 
350
303
  & .c-modal-contentInner {
351
- opacity: 0;
304
+ display: none;
352
305
  }
353
306
  }
354
307