@justeattakeaway/pie-modal 0.31.0 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +59 -57
- package/dist/react.js +12 -11
- package/package.json +5 -4
- package/src/index.ts +2 -0
- package/src/modal.scss +6 -53
package/dist/index.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { LitElement as P, nothing as
|
|
2
|
-
import { html as
|
|
3
|
-
import { property as
|
|
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";
|
|
4
4
|
import "@justeattakeaway/pie-button";
|
|
5
5
|
import "@justeattakeaway/pie-icon-button";
|
|
6
6
|
import { RtlMixin as I, requiredProperty as R, validPropertyValues as z, defineCustomElement as j } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-icons-webc/IconClose";
|
|
8
8
|
import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/IconChevronRight";
|
|
10
|
+
import "@justeattakeaway/pie-spinner";
|
|
10
11
|
function W(a) {
|
|
11
12
|
if (Array.isArray(a)) {
|
|
12
13
|
for (var e = 0, o = Array(a.length); e < a.length; e++)
|
|
@@ -24,26 +25,26 @@ if (typeof window < "u") {
|
|
|
24
25
|
};
|
|
25
26
|
window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
|
|
26
27
|
}
|
|
27
|
-
var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], b = !1, S = -1,
|
|
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) {
|
|
28
29
|
return p.some(function(o) {
|
|
29
30
|
return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
|
|
30
31
|
});
|
|
31
|
-
},
|
|
32
|
+
}, k = function(e) {
|
|
32
33
|
var o = e || window.event;
|
|
33
34
|
return L(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
|
|
34
35
|
}, Y = function(e) {
|
|
35
|
-
if (
|
|
36
|
+
if (h === void 0) {
|
|
36
37
|
var o = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
|
|
37
|
-
o && i > 0 && (
|
|
38
|
+
o && i > 0 && (h = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
|
|
38
39
|
}
|
|
39
|
-
|
|
40
|
+
g === void 0 && (g = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
40
41
|
}, V = function() {
|
|
41
|
-
|
|
42
|
+
h !== void 0 && (document.body.style.paddingRight = h, h = void 0), g !== void 0 && (document.body.style.overflow = g, g = void 0);
|
|
42
43
|
}, q = function(e) {
|
|
43
44
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
44
45
|
}, H = function(e, o) {
|
|
45
46
|
var i = e.targetTouches[0].clientY - S;
|
|
46
|
-
return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ?
|
|
47
|
+
return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ? k(e) : (e.stopPropagation(), !0);
|
|
47
48
|
}, U = function(e, o) {
|
|
48
49
|
if (!e) {
|
|
49
50
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
@@ -60,7 +61,7 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
60
61
|
t.targetTouches.length === 1 && (S = t.targetTouches[0].clientY);
|
|
61
62
|
}, e.ontouchmove = function(t) {
|
|
62
63
|
t.targetTouches.length === 1 && H(t, e);
|
|
63
|
-
}, b || (document.addEventListener("touchmove",
|
|
64
|
+
}, b || (document.addEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !0)) : Y(o);
|
|
64
65
|
}
|
|
65
66
|
}, K = function(e) {
|
|
66
67
|
if (!e) {
|
|
@@ -69,13 +70,13 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
69
70
|
}
|
|
70
71
|
p = p.filter(function(o) {
|
|
71
72
|
return o.targetElement !== e;
|
|
72
|
-
}), B ? (e.ontouchstart = null, e.ontouchmove = null, b && p.length === 0 && (document.removeEventListener("touchmove",
|
|
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();
|
|
73
74
|
};
|
|
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}
|
|
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}}
|
|
75
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";
|
|
76
77
|
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,
|
|
78
|
-
(
|
|
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);
|
|
79
80
|
return i && t && oe(e, o, t), t;
|
|
80
81
|
};
|
|
81
82
|
const u = "pie-modal";
|
|
@@ -91,11 +92,11 @@ class n extends I(P) {
|
|
|
91
92
|
top: i = 0,
|
|
92
93
|
bottom: t = 0,
|
|
93
94
|
left: s = 0,
|
|
94
|
-
right:
|
|
95
|
+
right: m = 0
|
|
95
96
|
} = o || {};
|
|
96
|
-
if (i === 0 && t === 0 && s === 0 &&
|
|
97
|
+
if (i === 0 && t === 0 && s === 0 && m === 0)
|
|
97
98
|
return;
|
|
98
|
-
(e.clientY < i || e.clientY > t || e.clientX < s || e.clientX >
|
|
99
|
+
(e.clientY < i || e.clientY > t || e.clientX < s || e.clientX > m) && (this.isOpen = !1);
|
|
99
100
|
}, this._dispatchModalCustomEvent = (e) => {
|
|
100
101
|
const o = new CustomEvent(e, {
|
|
101
102
|
bubbles: !0,
|
|
@@ -164,14 +165,14 @@ class n extends I(P) {
|
|
|
164
165
|
*/
|
|
165
166
|
renderCloseButton() {
|
|
166
167
|
var e;
|
|
167
|
-
return
|
|
168
|
+
return c`
|
|
168
169
|
<pie-icon-button
|
|
169
170
|
@click="${() => {
|
|
170
171
|
this.isOpen = !1;
|
|
171
172
|
}}"
|
|
172
173
|
variant="ghost-secondary"
|
|
173
174
|
class="c-modal-closeBtn"
|
|
174
|
-
aria-label="${((e = this.aria) == null ? void 0 : e.close) ||
|
|
175
|
+
aria-label="${((e = this.aria) == null ? void 0 : e.close) || r}"
|
|
175
176
|
data-test-id="modal-close-button">
|
|
176
177
|
<icon-close></icon-close>
|
|
177
178
|
</pie-icon-button>`;
|
|
@@ -184,16 +185,16 @@ class n extends I(P) {
|
|
|
184
185
|
*/
|
|
185
186
|
renderBackButton() {
|
|
186
187
|
var e;
|
|
187
|
-
return
|
|
188
|
+
return c`
|
|
188
189
|
<pie-icon-button
|
|
189
190
|
@click="${() => {
|
|
190
191
|
this._backButtonClicked = !0, this.isOpen = !1;
|
|
191
192
|
}}"
|
|
192
193
|
variant="ghost-secondary"
|
|
193
194
|
class="c-modal-backBtn"
|
|
194
|
-
aria-label="${((e = this.aria) == null ? void 0 : e.back) ||
|
|
195
|
+
aria-label="${((e = this.aria) == null ? void 0 : e.back) || r}"
|
|
195
196
|
data-test-id="modal-back-button">
|
|
196
|
-
${this.isRTL ?
|
|
197
|
+
${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
|
|
197
198
|
</pie-icon-button>
|
|
198
199
|
`;
|
|
199
200
|
}
|
|
@@ -208,17 +209,17 @@ class n extends I(P) {
|
|
|
208
209
|
*/
|
|
209
210
|
renderLeadingAction() {
|
|
210
211
|
const { text: e, variant: o = "primary", ariaLabel: i } = this.leadingAction;
|
|
211
|
-
return e ?
|
|
212
|
+
return e ? c`
|
|
212
213
|
<pie-button
|
|
213
214
|
variant="${o}"
|
|
214
|
-
aria-label="${i ||
|
|
215
|
+
aria-label="${i || r}"
|
|
215
216
|
type="submit"
|
|
216
217
|
?isFullWidth="${this.hasStackedActions}"
|
|
217
218
|
@click="${() => this._handleActionClick("leading")}"
|
|
218
219
|
data-test-id="modal-leading-action">
|
|
219
220
|
${e}
|
|
220
221
|
</pie-button>
|
|
221
|
-
` :
|
|
222
|
+
` : r;
|
|
222
223
|
}
|
|
223
224
|
/**
|
|
224
225
|
* Render supportingAction button depending on prop availability.
|
|
@@ -233,32 +234,33 @@ class n extends I(P) {
|
|
|
233
234
|
*/
|
|
234
235
|
renderSupportingAction() {
|
|
235
236
|
const { text: e, variant: o = "ghost", ariaLabel: i } = this.supportingAction;
|
|
236
|
-
return e ? this.leadingAction ?
|
|
237
|
+
return e ? this.leadingAction ? c`
|
|
237
238
|
<pie-button
|
|
238
239
|
variant="${o}"
|
|
239
|
-
aria-label="${i ||
|
|
240
|
+
aria-label="${i || r}"
|
|
240
241
|
type="reset"
|
|
241
242
|
?isFullWidth="${this.hasStackedActions}"
|
|
242
243
|
@click="${() => this._handleActionClick("supporting")}"
|
|
243
244
|
data-test-id="modal-supporting-action">
|
|
244
245
|
${e}
|
|
245
246
|
</pie-button>
|
|
246
|
-
` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."),
|
|
247
|
+
` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), r) : r;
|
|
247
248
|
}
|
|
248
249
|
/**
|
|
249
250
|
* Renders the modal inner content and footer of the modal.
|
|
250
251
|
* @private
|
|
251
252
|
*/
|
|
252
253
|
renderModalContentAndFooter() {
|
|
253
|
-
return
|
|
254
|
+
return c`
|
|
254
255
|
<article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
|
|
255
256
|
<div class="c-modal-contentInner">
|
|
256
257
|
<slot></slot>
|
|
257
258
|
</div>
|
|
259
|
+
${this.isLoading ? c`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : r}
|
|
258
260
|
</article>
|
|
259
261
|
<footer class="c-modal-footer">
|
|
260
|
-
${this.leadingAction ? this.renderLeadingAction() :
|
|
261
|
-
${this.supportingAction ? this.renderSupportingAction() :
|
|
262
|
+
${this.leadingAction ? this.renderLeadingAction() : r}
|
|
263
|
+
${this.supportingAction ? this.renderSupportingAction() : r}
|
|
262
264
|
</footer>`;
|
|
263
265
|
}
|
|
264
266
|
render() {
|
|
@@ -268,16 +270,16 @@ class n extends I(P) {
|
|
|
268
270
|
hasStackedActions: i,
|
|
269
271
|
heading: t,
|
|
270
272
|
headingLevel: s = "h2",
|
|
271
|
-
isDismissible:
|
|
273
|
+
isDismissible: m,
|
|
272
274
|
isFooterPinned: w,
|
|
273
275
|
isFullWidthBelowMid: f,
|
|
274
|
-
isLoading:
|
|
276
|
+
isLoading: y,
|
|
275
277
|
leadingAction: M,
|
|
276
278
|
position: $,
|
|
277
279
|
size: E,
|
|
278
280
|
supportingAction: D
|
|
279
281
|
} = this, O = F(s);
|
|
280
|
-
return
|
|
282
|
+
return c`
|
|
281
283
|
<dialog
|
|
282
284
|
id="dialog"
|
|
283
285
|
class="c-modal"
|
|
@@ -286,22 +288,22 @@ class n extends I(P) {
|
|
|
286
288
|
?hasActions=${M || D}
|
|
287
289
|
?hasBackButton=${o}
|
|
288
290
|
?hasStackedActions=${i}
|
|
289
|
-
?isDismissible=${
|
|
291
|
+
?isDismissible=${m}
|
|
290
292
|
?isFooterPinned=${w}
|
|
291
293
|
?isFullWidthBelowMid=${f}
|
|
292
|
-
?isLoading=${
|
|
293
|
-
aria-busy="${
|
|
294
|
-
aria-label="${
|
|
294
|
+
?isLoading=${y}
|
|
295
|
+
aria-busy="${y ? "true" : "false"}"
|
|
296
|
+
aria-label="${y && (e == null ? void 0 : e.loading) || r}"
|
|
295
297
|
data-test-id="pie-modal">
|
|
296
298
|
<header class="c-modal-header">
|
|
297
|
-
${o ? this.renderBackButton() :
|
|
299
|
+
${o ? this.renderBackButton() : r}
|
|
298
300
|
<${O} class="c-modal-heading">
|
|
299
301
|
${t}
|
|
300
302
|
</${O}>
|
|
301
|
-
${
|
|
303
|
+
${m ? this.renderCloseButton() : r}
|
|
302
304
|
</header>
|
|
303
305
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
304
|
-
w ? this.renderModalContentAndFooter() :
|
|
306
|
+
w ? this.renderModalContentAndFooter() : c`
|
|
305
307
|
<div class="c-modal-scrollContainer">
|
|
306
308
|
${this.renderModalContentAndFooter()}
|
|
307
309
|
</div>
|
|
@@ -311,53 +313,53 @@ class n extends I(P) {
|
|
|
311
313
|
}
|
|
312
314
|
n.styles = T(G);
|
|
313
315
|
l([
|
|
314
|
-
|
|
316
|
+
d({ type: Object })
|
|
315
317
|
], n.prototype, "aria", 2);
|
|
316
318
|
l([
|
|
317
|
-
|
|
319
|
+
d({ type: String }),
|
|
318
320
|
R(u)
|
|
319
321
|
], n.prototype, "heading", 2);
|
|
320
322
|
l([
|
|
321
|
-
|
|
323
|
+
d(),
|
|
322
324
|
z(u, X, "h2")
|
|
323
325
|
], n.prototype, "headingLevel", 2);
|
|
324
326
|
l([
|
|
325
|
-
|
|
327
|
+
d({ type: Boolean })
|
|
326
328
|
], n.prototype, "hasBackButton", 2);
|
|
327
329
|
l([
|
|
328
|
-
|
|
330
|
+
d({ type: Boolean })
|
|
329
331
|
], n.prototype, "hasStackedActions", 2);
|
|
330
332
|
l([
|
|
331
|
-
|
|
333
|
+
d({ type: Boolean, reflect: !0 })
|
|
332
334
|
], n.prototype, "isDismissible", 2);
|
|
333
335
|
l([
|
|
334
|
-
|
|
336
|
+
d({ type: Boolean })
|
|
335
337
|
], n.prototype, "isFooterPinned", 2);
|
|
336
338
|
l([
|
|
337
|
-
|
|
339
|
+
d({ type: Boolean })
|
|
338
340
|
], n.prototype, "isFullWidthBelowMid", 2);
|
|
339
341
|
l([
|
|
340
|
-
|
|
342
|
+
d({ type: Boolean, reflect: !0 })
|
|
341
343
|
], n.prototype, "isLoading", 2);
|
|
342
344
|
l([
|
|
343
|
-
|
|
345
|
+
d({ type: Boolean })
|
|
344
346
|
], n.prototype, "isOpen", 2);
|
|
345
347
|
l([
|
|
346
|
-
|
|
348
|
+
d({ type: Object })
|
|
347
349
|
], n.prototype, "leadingAction", 2);
|
|
348
350
|
l([
|
|
349
|
-
|
|
351
|
+
d(),
|
|
350
352
|
z(u, Q, "center")
|
|
351
353
|
], n.prototype, "position", 2);
|
|
352
354
|
l([
|
|
353
|
-
|
|
355
|
+
d()
|
|
354
356
|
], n.prototype, "returnFocusAfterCloseSelector", 2);
|
|
355
357
|
l([
|
|
356
|
-
|
|
358
|
+
d(),
|
|
357
359
|
z(u, J, "medium")
|
|
358
360
|
], n.prototype, "size", 2);
|
|
359
361
|
l([
|
|
360
|
-
|
|
362
|
+
d({ type: Object })
|
|
361
363
|
], n.prototype, "supportingAction", 2);
|
|
362
364
|
l([
|
|
363
365
|
N("dialog")
|
package/dist/react.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as f from "react";
|
|
2
2
|
import { PieModal as E } from "./index.js";
|
|
3
|
-
import { ON_MODAL_BACK_EVENT as
|
|
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";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/static-html.js";
|
|
6
6
|
import "lit/decorators.js";
|
|
@@ -10,6 +10,7 @@ import "@justeattakeaway/pie-webc-core";
|
|
|
10
10
|
import "@justeattakeaway/pie-icons-webc/IconClose";
|
|
11
11
|
import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
|
|
12
12
|
import "@justeattakeaway/pie-icons-webc/IconChevronRight";
|
|
13
|
+
import "@justeattakeaway/pie-spinner";
|
|
13
14
|
/**
|
|
14
15
|
* @license
|
|
15
16
|
* Copyright 2018 Google LLC
|
|
@@ -65,7 +66,7 @@ function y(o = window.React, t, d, c, m) {
|
|
|
65
66
|
const M = s.forwardRef((p, e) => l(v, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
|
|
66
67
|
return M.displayName = v.displayName, M;
|
|
67
68
|
}
|
|
68
|
-
const
|
|
69
|
+
const x = y({
|
|
69
70
|
displayName: "PieModal",
|
|
70
71
|
elementClass: E,
|
|
71
72
|
react: f,
|
|
@@ -84,13 +85,13 @@ const R = y({
|
|
|
84
85
|
}
|
|
85
86
|
});
|
|
86
87
|
export {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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
|
|
96
97
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.32.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -28,9 +28,8 @@
|
|
|
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.
|
|
31
|
+
"@justeat/pie-design-tokens": "5.9.0",
|
|
32
32
|
"@justeattakeaway/pie-components-config": "0.4.0",
|
|
33
|
-
"@justeattakeaway/pie-webc-core": "0.11.0",
|
|
34
33
|
"@types/body-scroll-lock": "3.1.1"
|
|
35
34
|
},
|
|
36
35
|
"peerDependencies": {
|
|
@@ -40,9 +39,11 @@
|
|
|
40
39
|
"extends": "../../../package.json"
|
|
41
40
|
},
|
|
42
41
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-button": "0.
|
|
42
|
+
"@justeattakeaway/pie-button": "0.37.0",
|
|
44
43
|
"@justeattakeaway/pie-icon-button": "0.21.1",
|
|
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
|
-
|
|
346
|
-
|
|
347
|
-
|
|
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
|
-
|
|
304
|
+
display: none;
|
|
352
305
|
}
|
|
353
306
|
}
|
|
354
307
|
|