@justeattakeaway/pie-modal 1.1.0 → 1.2.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 +65 -63
- package/package.json +5 -5
- package/src/index.ts +19 -8
- package/src/modal.scss +2 -0
package/dist/index.js
CHANGED
|
@@ -12,9 +12,9 @@ import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
|
12
12
|
import "@justeattakeaway/pie-spinner";
|
|
13
13
|
function R(a) {
|
|
14
14
|
if (Array.isArray(a)) {
|
|
15
|
-
for (var e = 0,
|
|
16
|
-
|
|
17
|
-
return
|
|
15
|
+
for (var e = 0, t = Array(a.length); e < a.length; e++)
|
|
16
|
+
t[e] = a[e];
|
|
17
|
+
return t;
|
|
18
18
|
} else
|
|
19
19
|
return Array.from(a);
|
|
20
20
|
}
|
|
@@ -28,26 +28,26 @@ if (typeof window < "u") {
|
|
|
28
28
|
window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
|
|
29
29
|
}
|
|
30
30
|
var O = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), m = [], k = !1, M = -1, u = void 0, f = void 0, D = function(e) {
|
|
31
|
-
return m.some(function(
|
|
32
|
-
return !!(
|
|
31
|
+
return m.some(function(t) {
|
|
32
|
+
return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
|
|
33
33
|
});
|
|
34
34
|
}, y = function(e) {
|
|
35
|
-
var
|
|
36
|
-
return D(
|
|
35
|
+
var t = e || window.event;
|
|
36
|
+
return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
|
|
37
37
|
}, j = function(e) {
|
|
38
38
|
if (f === void 0) {
|
|
39
|
-
var
|
|
40
|
-
|
|
39
|
+
var t = !1, o = window.innerWidth - document.documentElement.clientWidth;
|
|
40
|
+
t && o > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
|
|
41
41
|
}
|
|
42
42
|
u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
43
43
|
}, V = function() {
|
|
44
44
|
f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
|
|
45
45
|
}, Y = function(e) {
|
|
46
46
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
47
|
-
}, H = function(e,
|
|
48
|
-
var
|
|
49
|
-
return D(e.target) ? !1 :
|
|
50
|
-
}, q = function(e,
|
|
47
|
+
}, H = function(e, t) {
|
|
48
|
+
var o = e.targetTouches[0].clientY - M;
|
|
49
|
+
return D(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || Y(t) && o < 0 ? y(e) : (e.stopPropagation(), !0);
|
|
50
|
+
}, q = function(e, t) {
|
|
51
51
|
if (!e) {
|
|
52
52
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
53
53
|
return;
|
|
@@ -55,11 +55,11 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
55
55
|
if (!m.some(function(i) {
|
|
56
56
|
return i.targetElement === e;
|
|
57
57
|
})) {
|
|
58
|
-
var
|
|
58
|
+
var o = {
|
|
59
59
|
targetElement: e,
|
|
60
60
|
options: {}
|
|
61
61
|
};
|
|
62
|
-
m = [].concat(R(m), [
|
|
62
|
+
m = [].concat(R(m), [o]), O ? (e.ontouchstart = function(i) {
|
|
63
63
|
i.targetTouches.length === 1 && (M = i.targetTouches[0].clientY);
|
|
64
64
|
}, e.ontouchmove = function(i) {
|
|
65
65
|
i.targetTouches.length === 1 && H(i, e);
|
|
@@ -70,11 +70,11 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
70
70
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
71
71
|
return;
|
|
72
72
|
}
|
|
73
|
-
m = m.filter(function(
|
|
74
|
-
return
|
|
73
|
+
m = m.filter(function(t) {
|
|
74
|
+
return t.targetElement !== e;
|
|
75
75
|
}), O ? (e.ontouchstart = null, e.ontouchmove = null, k && m.length === 0 && (document.removeEventListener("touchmove", y, x ? { passive: !1 } : void 0), k = !1)) : m.length || V();
|
|
76
76
|
};
|
|
77
|
-
const X = '*,*:after,*:before{box-sizing:inherit}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:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.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-l-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: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--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.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--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.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.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: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{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-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 769px){.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-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end: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);--modal-content-padding-block-end: var(--dt-spacing-e);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:not(:last-child){padding-block-end:var(--modal-content-padding-block);min-block-size:var(--modal-content-min-block-size)}.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;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.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}', G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], A = "pie-modal-close", w = "pie-modal-open", L = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click", r = {
|
|
77
|
+
const X = '*,*:after,*:before{box-sizing:inherit}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:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.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-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);position:fixed;top:0;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: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--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.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--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.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.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: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{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-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 769px){.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-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end: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);--modal-content-padding-block-end: var(--dt-spacing-e);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:not(:last-child){padding-block-end:var(--modal-content-padding-block);min-block-size:var(--modal-content-min-block-size)}.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;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.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}', G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], A = "pie-modal-close", w = "pie-modal-open", L = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click", r = {
|
|
78
78
|
hasBackButton: !1,
|
|
79
79
|
hasStackedActions: !1,
|
|
80
80
|
headingLevel: "h2",
|
|
@@ -86,10 +86,10 @@ const X = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
|
|
|
86
86
|
position: "center",
|
|
87
87
|
size: "medium"
|
|
88
88
|
};
|
|
89
|
-
var
|
|
89
|
+
var te = Object.defineProperty, l = (a, e, t, o) => {
|
|
90
90
|
for (var i = void 0, c = a.length - 1, g; c >= 0; c--)
|
|
91
|
-
(g = a[c]) && (i = g(e,
|
|
92
|
-
return i &&
|
|
91
|
+
(g = a[c]) && (i = g(e, t, i) || i);
|
|
92
|
+
return i && te(e, t, i), i;
|
|
93
93
|
};
|
|
94
94
|
const b = "pie-modal", C = class C extends I(F) {
|
|
95
95
|
constructor() {
|
|
@@ -98,15 +98,15 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
98
98
|
}, this._handleDialogLightDismiss = (e) => {
|
|
99
99
|
if (!this.isDismissible || e.target !== e.currentTarget)
|
|
100
100
|
return;
|
|
101
|
-
const
|
|
102
|
-
top:
|
|
101
|
+
const t = this._dialog.getBoundingClientRect(), {
|
|
102
|
+
top: o = 0,
|
|
103
103
|
bottom: i = 0,
|
|
104
104
|
left: c = 0,
|
|
105
105
|
right: g = 0
|
|
106
|
-
} =
|
|
107
|
-
if (
|
|
106
|
+
} = t || {};
|
|
107
|
+
if (o === 0 && i === 0 && c === 0 && g === 0)
|
|
108
108
|
return;
|
|
109
|
-
(e.clientY <
|
|
109
|
+
(e.clientY < o || e.clientY > i || e.clientX < c || e.clientX > g) && (this.isOpen = !1);
|
|
110
110
|
};
|
|
111
111
|
}
|
|
112
112
|
get _modalScrollContainer() {
|
|
@@ -115,42 +115,44 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
115
115
|
connectedCallback() {
|
|
116
116
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
117
117
|
const { signal: e } = this._abortController;
|
|
118
|
-
this.addEventListener("click", (
|
|
118
|
+
this.addEventListener("click", (t) => this._handleDialogLightDismiss(t)), this._setupEscKeyListener(), document.addEventListener(w, (t) => this._handleModalOpened(t), { signal: e }), document.addEventListener(A, (t) => this._handleModalClosed(t), { signal: e }), document.addEventListener(L, (t) => this._handleModalClosed(t), { signal: e });
|
|
119
119
|
}
|
|
120
120
|
disconnectedCallback() {
|
|
121
121
|
super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
|
|
122
122
|
}
|
|
123
123
|
async firstUpdated(e) {
|
|
124
124
|
(await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
|
|
125
|
-
const { signal:
|
|
125
|
+
const { signal: o } = this._abortController;
|
|
126
126
|
this._dialog.addEventListener("close", () => {
|
|
127
127
|
this.isOpen = !1;
|
|
128
|
-
}, { signal:
|
|
128
|
+
}, { signal: o }), this._handleModalOpenStateOnFirstRender(e);
|
|
129
129
|
}
|
|
130
130
|
updated(e) {
|
|
131
131
|
this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
|
|
132
132
|
}
|
|
133
133
|
_handleIsDismissibleChanged(e) {
|
|
134
|
-
const
|
|
135
|
-
!
|
|
134
|
+
const t = e.get("isDismissible"), o = this.isDismissible;
|
|
135
|
+
!t && o && this._removeEscKeyEventListener(), t && !o && this._setupEscKeyListener();
|
|
136
136
|
}
|
|
137
137
|
/**
|
|
138
138
|
* Opens the dialog element and disables page scrolling
|
|
139
139
|
*/
|
|
140
140
|
_handleModalOpened(e) {
|
|
141
|
-
const { targetModal:
|
|
142
|
-
if (
|
|
143
|
-
if (this.
|
|
141
|
+
const { targetModal: t } = e.detail;
|
|
142
|
+
if (t === this) {
|
|
143
|
+
if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
|
|
144
144
|
return;
|
|
145
|
-
this.
|
|
145
|
+
this._dialog.showModal(), requestAnimationFrame(() => {
|
|
146
|
+
this._dialog.hasAttribute("open") && (this._disableBodyScroll(), this._setupEscKeyListener());
|
|
147
|
+
});
|
|
146
148
|
}
|
|
147
149
|
}
|
|
148
150
|
/**
|
|
149
151
|
* Closes the dialog element and re-enables page scrolling
|
|
150
152
|
*/
|
|
151
153
|
_handleModalClosed(e) {
|
|
152
|
-
const { targetModal:
|
|
153
|
-
|
|
154
|
+
const { targetModal: t } = e.detail;
|
|
155
|
+
t === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
|
|
154
156
|
}
|
|
155
157
|
/**
|
|
156
158
|
* Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
|
|
@@ -159,7 +161,7 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
159
161
|
if (!this._escKeyAbortController && !this.isDismissible) {
|
|
160
162
|
this._escKeyAbortController = new AbortController();
|
|
161
163
|
const { signal: e } = this._escKeyAbortController;
|
|
162
|
-
document.addEventListener("keydown", (
|
|
164
|
+
document.addEventListener("keydown", (t) => this._preventModalKeyboardDismissal(t), { signal: e });
|
|
163
165
|
}
|
|
164
166
|
}
|
|
165
167
|
/**
|
|
@@ -175,8 +177,8 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
175
177
|
}
|
|
176
178
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
177
179
|
_handleModalOpenStateChanged(e) {
|
|
178
|
-
const
|
|
179
|
-
|
|
180
|
+
const t = e.get("isOpen");
|
|
181
|
+
t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, w, { targetModal: this }));
|
|
180
182
|
}
|
|
181
183
|
_handleActionClick(e) {
|
|
182
184
|
e === "leading" ? (this._dialog.close("leading"), h(this, Z, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, ee, { targetModal: this }));
|
|
@@ -186,9 +188,9 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
186
188
|
* and the chosen element can be found.
|
|
187
189
|
*/
|
|
188
190
|
_returnFocus() {
|
|
189
|
-
var
|
|
190
|
-
const e = (
|
|
191
|
-
e && ((
|
|
191
|
+
var t, o;
|
|
192
|
+
const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
|
|
193
|
+
e && ((o = document.querySelector(e)) == null || o.focus());
|
|
192
194
|
}
|
|
193
195
|
/**
|
|
194
196
|
* Enables body scroll by unlocking the scroll container.
|
|
@@ -200,7 +202,7 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
200
202
|
* Disables body scroll by locking the scroll container.
|
|
201
203
|
*/
|
|
202
204
|
_disableBodyScroll() {
|
|
203
|
-
this._modalScrollContainer &&
|
|
205
|
+
this._modalScrollContainer && q(this._modalScrollContainer);
|
|
204
206
|
}
|
|
205
207
|
/**
|
|
206
208
|
* Template for the close button element. Called within the
|
|
@@ -253,16 +255,16 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
253
255
|
* @private
|
|
254
256
|
*/
|
|
255
257
|
renderLeadingAction() {
|
|
256
|
-
const { ariaLabel: e, text:
|
|
257
|
-
return
|
|
258
|
+
const { ariaLabel: e, text: t, variant: o = "primary" } = this.leadingAction || {};
|
|
259
|
+
return t ? s`
|
|
258
260
|
<pie-button
|
|
259
|
-
variant="${
|
|
261
|
+
variant="${o}"
|
|
260
262
|
aria-label="${v(e)}"
|
|
261
263
|
type="submit"
|
|
262
264
|
?isFullWidth="${this.hasStackedActions}"
|
|
263
265
|
@click="${() => this._handleActionClick("leading")}"
|
|
264
266
|
data-test-id="modal-leading-action">
|
|
265
|
-
${
|
|
267
|
+
${t}
|
|
266
268
|
</pie-button>
|
|
267
269
|
` : p;
|
|
268
270
|
}
|
|
@@ -278,16 +280,16 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
278
280
|
*/
|
|
279
281
|
renderSupportingAction() {
|
|
280
282
|
var i;
|
|
281
|
-
const { ariaLabel: e, text:
|
|
282
|
-
return !
|
|
283
|
+
const { ariaLabel: e, text: t, variant: o = "ghost" } = this.supportingAction || {};
|
|
284
|
+
return !t || !((i = this.leadingAction) != null && i.text) ? p : s`
|
|
283
285
|
<pie-button
|
|
284
|
-
variant="${
|
|
286
|
+
variant="${o}"
|
|
285
287
|
aria-label="${v(e)}"
|
|
286
288
|
type="reset"
|
|
287
289
|
?isFullWidth="${this.hasStackedActions}"
|
|
288
290
|
@click="${() => this._handleActionClick("supporting")}"
|
|
289
291
|
data-test-id="modal-supporting-action">
|
|
290
|
-
${
|
|
292
|
+
${t}
|
|
291
293
|
</pie-button>
|
|
292
294
|
`;
|
|
293
295
|
}
|
|
@@ -298,9 +300,9 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
298
300
|
* @private
|
|
299
301
|
*/
|
|
300
302
|
renderModalFooter() {
|
|
301
|
-
var
|
|
302
|
-
if (!((
|
|
303
|
-
return (
|
|
303
|
+
var t, o;
|
|
304
|
+
if (!((t = this.leadingAction) != null && t.text))
|
|
305
|
+
return (o = this.supportingAction) != null && o.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead."), p;
|
|
304
306
|
const e = {
|
|
305
307
|
"c-modal-footer": !0,
|
|
306
308
|
"c-modal-footer--stackedActions": this.hasStackedActions
|
|
@@ -337,18 +339,18 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
337
339
|
* @private
|
|
338
340
|
*/
|
|
339
341
|
renderHeading() {
|
|
340
|
-
const { heading: e, headingLevel:
|
|
342
|
+
const { heading: e, headingLevel: t } = this, o = P(t);
|
|
341
343
|
return s`
|
|
342
|
-
<${
|
|
344
|
+
<${o} class="c-modal-heading">
|
|
343
345
|
${e}
|
|
344
|
-
</${
|
|
346
|
+
</${o}>
|
|
345
347
|
`;
|
|
346
348
|
}
|
|
347
349
|
render() {
|
|
348
350
|
const {
|
|
349
351
|
aria: e,
|
|
350
|
-
isDismissible:
|
|
351
|
-
isFooterPinned:
|
|
352
|
+
isDismissible: t,
|
|
353
|
+
isFooterPinned: o,
|
|
352
354
|
isFullWidthBelowMid: i,
|
|
353
355
|
isLoading: c,
|
|
354
356
|
position: g,
|
|
@@ -357,9 +359,9 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
357
359
|
"c-modal": !0,
|
|
358
360
|
[`c-modal--${z}`]: !0,
|
|
359
361
|
"c-modal--top": g === "top",
|
|
360
|
-
"c-modal--dismissible":
|
|
362
|
+
"c-modal--dismissible": t,
|
|
361
363
|
"c-modal--loading": c,
|
|
362
|
-
"c-modal--pinnedFooter":
|
|
364
|
+
"c-modal--pinnedFooter": o,
|
|
363
365
|
"c-modal--fullWidthBelowMid": i
|
|
364
366
|
};
|
|
365
367
|
return s`
|
|
@@ -375,7 +377,7 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
375
377
|
${this.renderCloseButton()}
|
|
376
378
|
</header>
|
|
377
379
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
378
|
-
|
|
380
|
+
o ? this.renderModalContentAndFooter() : s`
|
|
379
381
|
<div class="c-modal-scrollContainer">
|
|
380
382
|
${this.renderModalContentAndFooter()}
|
|
381
383
|
</div>`}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@justeat/pie-design-tokens": "6.8.1",
|
|
40
40
|
"@justeattakeaway/pie-button": "1.1.0",
|
|
41
41
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
42
|
-
"@justeattakeaway/pie-css": "0.14.
|
|
43
|
-
"@justeattakeaway/pie-text-input": "0.25.
|
|
42
|
+
"@justeattakeaway/pie-css": "0.14.1",
|
|
43
|
+
"@justeattakeaway/pie-text-input": "0.25.1",
|
|
44
44
|
"@justeattakeaway/pie-wrapper-react": "0.14.2",
|
|
45
45
|
"@types/body-scroll-lock": "3.1.2",
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@justeattakeaway/pie-button": "1.1.0",
|
|
53
|
-
"@justeattakeaway/pie-icon-button": "1.1.
|
|
54
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
53
|
+
"@justeattakeaway/pie-icon-button": "1.1.1",
|
|
54
|
+
"@justeattakeaway/pie-icons-webc": "1.3.0",
|
|
55
55
|
"@justeattakeaway/pie-spinner": "1.0.0",
|
|
56
56
|
"@justeattakeaway/pie-webc-core": "0.24.2",
|
|
57
57
|
"body-scroll-lock": "3.1.5",
|
package/src/index.ts
CHANGED
|
@@ -182,16 +182,31 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
|
|
|
182
182
|
const { targetModal } = event.detail;
|
|
183
183
|
|
|
184
184
|
if (targetModal === this) {
|
|
185
|
-
this._disableBodyScroll();
|
|
186
|
-
|
|
187
185
|
if (this._dialog.hasAttribute('open') || !this._dialog.isConnected) {
|
|
188
186
|
return;
|
|
189
187
|
}
|
|
190
188
|
|
|
191
|
-
this._setupEscKeyListener();
|
|
192
|
-
|
|
193
189
|
// The ::backdrop pseudoelement is only shown if the modal is opened via JS
|
|
194
190
|
this._dialog.showModal();
|
|
191
|
+
|
|
192
|
+
/*
|
|
193
|
+
Performance:
|
|
194
|
+
This has been optimised with the following to help with performance:
|
|
195
|
+
|
|
196
|
+
1. Use requestAnimationFrame to defer non-blocking operations.
|
|
197
|
+
2. Batch non-blocking updates inside requestAnimationFrame
|
|
198
|
+
3. Call `showModal()` first and defer `_disableBodyScroll` & `_setupEscKeyListener`
|
|
199
|
+
to the next `task`.
|
|
200
|
+
*/
|
|
201
|
+
requestAnimationFrame(() => {
|
|
202
|
+
// Read styles before writing them to avoid forced layout recalculations (layout trashing).
|
|
203
|
+
const isOpen = this._dialog.hasAttribute('open');
|
|
204
|
+
|
|
205
|
+
if (isOpen) {
|
|
206
|
+
this._disableBodyScroll();
|
|
207
|
+
this._setupEscKeyListener();
|
|
208
|
+
}
|
|
209
|
+
});
|
|
195
210
|
}
|
|
196
211
|
}
|
|
197
212
|
|
|
@@ -310,10 +325,6 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
|
|
|
310
325
|
*/
|
|
311
326
|
private _disableBodyScroll (): void {
|
|
312
327
|
if (this._modalScrollContainer) {
|
|
313
|
-
// Hack to prevent Safari rendering the modal outside the viewport
|
|
314
|
-
// when the body scroll lock is active
|
|
315
|
-
if ('scrollTo' in window) window.scrollTo(0, 0);
|
|
316
|
-
|
|
317
328
|
disableBodyScroll(this._modalScrollContainer);
|
|
318
329
|
}
|
|
319
330
|
}
|