@justeattakeaway/pie-modal 1.18.1 → 1.19.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 +82 -82
- package/package.json +10 -10
- package/src/modal.scss +5 -5
package/dist/index.js
CHANGED
|
@@ -14,15 +14,15 @@ const k = class k extends F {
|
|
|
14
14
|
this.getAttribute("v") || this.setAttribute("v", k.v);
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
|
-
k.v = "1.
|
|
17
|
+
k.v = "1.19.0";
|
|
18
18
|
let x = k;
|
|
19
|
-
function W(
|
|
20
|
-
if (Array.isArray(
|
|
21
|
-
for (var e = 0,
|
|
22
|
-
|
|
23
|
-
return
|
|
19
|
+
function W(o) {
|
|
20
|
+
if (Array.isArray(o)) {
|
|
21
|
+
for (var e = 0, t = Array(o.length); e < o.length; e++)
|
|
22
|
+
t[e] = o[e];
|
|
23
|
+
return t;
|
|
24
24
|
} else
|
|
25
|
-
return Array.from(
|
|
25
|
+
return Array.from(o);
|
|
26
26
|
}
|
|
27
27
|
var B = !1;
|
|
28
28
|
if (typeof window < "u") {
|
|
@@ -34,26 +34,26 @@ if (typeof window < "u") {
|
|
|
34
34
|
window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
|
|
35
35
|
}
|
|
36
36
|
var M = 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 = [], v = !1, D = -1, f = void 0, b = void 0, $ = function(e) {
|
|
37
|
-
return g.some(function(
|
|
38
|
-
return !!(
|
|
37
|
+
return g.some(function(t) {
|
|
38
|
+
return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
|
|
39
39
|
});
|
|
40
40
|
}, y = function(e) {
|
|
41
|
-
var
|
|
42
|
-
return $(
|
|
41
|
+
var t = e || window.event;
|
|
42
|
+
return $(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
|
|
43
43
|
}, j = function(e) {
|
|
44
44
|
if (b === void 0) {
|
|
45
|
-
var
|
|
46
|
-
|
|
45
|
+
var t = !1, i = window.innerWidth - document.documentElement.clientWidth;
|
|
46
|
+
t && i > 0 && (b = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
|
|
47
47
|
}
|
|
48
48
|
f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
49
49
|
}, R = function() {
|
|
50
50
|
b !== void 0 && (document.body.style.paddingRight = b, b = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
|
|
51
51
|
}, V = function(e) {
|
|
52
52
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
53
|
-
}, Y = function(e,
|
|
53
|
+
}, Y = function(e, t) {
|
|
54
54
|
var i = e.targetTouches[0].clientY - D;
|
|
55
|
-
return $(e.target) ? !1 :
|
|
56
|
-
}, H = function(e,
|
|
55
|
+
return $(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || V(t) && i < 0 ? y(e) : (e.stopPropagation(), !0);
|
|
56
|
+
}, H = function(e, t) {
|
|
57
57
|
if (!e) {
|
|
58
58
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
59
59
|
return;
|
|
@@ -76,11 +76,11 @@ var M = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
76
76
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
77
77
|
return;
|
|
78
78
|
}
|
|
79
|
-
g = g.filter(function(
|
|
80
|
-
return
|
|
79
|
+
g = g.filter(function(t) {
|
|
80
|
+
return t.targetElement !== e;
|
|
81
81
|
}), M ? (e.ontouchstart = null, e.ontouchmove = null, v && g.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : g.length || R();
|
|
82
82
|
};
|
|
83
|
-
const U = '*,*: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-below-20);position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--dt-color-content-default);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 ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";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:
|
|
83
|
+
const U = '*,*: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-below-20);position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--dt-color-content-default);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 ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";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:16px}@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:22px}}.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-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-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:has(+slot>footer){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}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}', X = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], J = ["top", "center"], L = "pie-modal-close", _ = "pie-modal-open", O = "pie-modal-back", Q = "pie-modal-leading-action-click", Z = "pie-modal-supporting-action-click", r = {
|
|
84
84
|
hasBackButton: !1,
|
|
85
85
|
hasStackedActions: !1,
|
|
86
86
|
headingLevel: "h2",
|
|
@@ -92,61 +92,61 @@ const U = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
|
|
|
92
92
|
position: "center",
|
|
93
93
|
size: "medium"
|
|
94
94
|
};
|
|
95
|
-
var ee = Object.defineProperty,
|
|
96
|
-
for (var a = i > 1 ? void 0 : i ?
|
|
97
|
-
(p =
|
|
98
|
-
return i && a && ee(e,
|
|
95
|
+
var ee = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, l = (o, e, t, i) => {
|
|
96
|
+
for (var a = i > 1 ? void 0 : i ? oe(e, t) : e, c = o.length - 1, p; c >= 0; c--)
|
|
97
|
+
(p = o[c]) && (a = (i ? p(e, t, a) : p(a)) || a);
|
|
98
|
+
return i && a && ee(e, t, a), a;
|
|
99
99
|
};
|
|
100
100
|
const w = "pie-modal";
|
|
101
101
|
let n = class extends x {
|
|
102
102
|
constructor() {
|
|
103
|
-
super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (
|
|
104
|
-
|
|
105
|
-
}, this._handleDialogLightDismiss = (
|
|
106
|
-
if (!this.isDismissible ||
|
|
103
|
+
super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (o) => {
|
|
104
|
+
o.key === "Escape" && o.preventDefault();
|
|
105
|
+
}, this._handleDialogLightDismiss = (o) => {
|
|
106
|
+
if (!this.isDismissible || o.target !== o.currentTarget)
|
|
107
107
|
return;
|
|
108
108
|
const e = this._dialog.getBoundingClientRect(), {
|
|
109
|
-
top:
|
|
109
|
+
top: t = 0,
|
|
110
110
|
bottom: i = 0,
|
|
111
111
|
left: a = 0,
|
|
112
112
|
right: c = 0
|
|
113
113
|
} = e || {};
|
|
114
|
-
if (
|
|
114
|
+
if (t === 0 && i === 0 && a === 0 && c === 0)
|
|
115
115
|
return;
|
|
116
|
-
(
|
|
116
|
+
(o.clientY < t || o.clientY > i || o.clientX < a || o.clientX > c) && (this.isOpen = !1);
|
|
117
117
|
};
|
|
118
118
|
}
|
|
119
119
|
get _modalScrollContainer() {
|
|
120
|
-
var
|
|
121
|
-
return this._scrollableContainer || (this._scrollableContainer = (
|
|
120
|
+
var o;
|
|
121
|
+
return this._scrollableContainer || (this._scrollableContainer = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
|
|
122
122
|
}
|
|
123
123
|
connectedCallback() {
|
|
124
124
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
125
|
-
const { signal:
|
|
126
|
-
this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), this._setupEscKeyListener(), document.addEventListener(_, (e) => this._handleModalOpened(e), { signal:
|
|
125
|
+
const { signal: o } = this._abortController;
|
|
126
|
+
this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), this._setupEscKeyListener(), document.addEventListener(_, (e) => this._handleModalOpened(e), { signal: o }), document.addEventListener(L, (e) => this._handleModalClosed(e), { signal: o }), document.addEventListener(O, (e) => this._handleModalClosed(e), { signal: o });
|
|
127
127
|
}
|
|
128
128
|
disconnectedCallback() {
|
|
129
129
|
super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
|
|
130
130
|
}
|
|
131
|
-
async firstUpdated(
|
|
131
|
+
async firstUpdated(o) {
|
|
132
132
|
(await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
|
|
133
|
-
const { signal:
|
|
133
|
+
const { signal: t } = this._abortController;
|
|
134
134
|
this._dialog.addEventListener("close", () => {
|
|
135
135
|
this.isOpen = !1;
|
|
136
|
-
}, { signal:
|
|
136
|
+
}, { signal: t }), this._handleModalOpenStateOnFirstRender(o);
|
|
137
137
|
}
|
|
138
|
-
updated(
|
|
139
|
-
this._handleModalOpenStateChanged(
|
|
138
|
+
updated(o) {
|
|
139
|
+
this._handleModalOpenStateChanged(o), this._handleIsDismissibleChanged(o);
|
|
140
140
|
}
|
|
141
|
-
_handleIsDismissibleChanged(
|
|
142
|
-
const e =
|
|
143
|
-
!e &&
|
|
141
|
+
_handleIsDismissibleChanged(o) {
|
|
142
|
+
const e = o.get("isDismissible"), t = this.isDismissible;
|
|
143
|
+
!e && t && this._removeEscKeyEventListener(), e && !t && this._setupEscKeyListener();
|
|
144
144
|
}
|
|
145
145
|
/**
|
|
146
146
|
* Opens the dialog element and disables page scrolling
|
|
147
147
|
*/
|
|
148
|
-
_handleModalOpened(
|
|
149
|
-
const { targetModal: e } =
|
|
148
|
+
_handleModalOpened(o) {
|
|
149
|
+
const { targetModal: e } = o.detail;
|
|
150
150
|
if (e === this) {
|
|
151
151
|
if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
|
|
152
152
|
return;
|
|
@@ -158,8 +158,8 @@ let n = class extends x {
|
|
|
158
158
|
/**
|
|
159
159
|
* Closes the dialog element and re-enables page scrolling
|
|
160
160
|
*/
|
|
161
|
-
_handleModalClosed(
|
|
162
|
-
const { targetModal: e } =
|
|
161
|
+
_handleModalClosed(o) {
|
|
162
|
+
const { targetModal: e } = o.detail;
|
|
163
163
|
e === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
|
|
164
164
|
}
|
|
165
165
|
/**
|
|
@@ -168,37 +168,37 @@ let n = class extends x {
|
|
|
168
168
|
_setupEscKeyListener() {
|
|
169
169
|
if (!this._escKeyAbortController && !this.isDismissible) {
|
|
170
170
|
this._escKeyAbortController = new AbortController();
|
|
171
|
-
const { signal:
|
|
172
|
-
document.addEventListener("keydown", (e) => this._preventModalKeyboardDismissal(e), { signal:
|
|
171
|
+
const { signal: o } = this._escKeyAbortController;
|
|
172
|
+
document.addEventListener("keydown", (e) => this._preventModalKeyboardDismissal(e), { signal: o });
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
/**
|
|
176
176
|
* Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
|
|
177
177
|
*/
|
|
178
178
|
_removeEscKeyEventListener() {
|
|
179
|
-
var
|
|
180
|
-
(
|
|
179
|
+
var o;
|
|
180
|
+
(o = this._escKeyAbortController) == null || o.abort(), this._escKeyAbortController = null;
|
|
181
181
|
}
|
|
182
182
|
// Handles the value of the isOpen property on first render of the component
|
|
183
|
-
_handleModalOpenStateOnFirstRender(
|
|
184
|
-
|
|
183
|
+
_handleModalOpenStateOnFirstRender(o) {
|
|
184
|
+
o.get("isOpen") === void 0 && this.isOpen && u(this, _, { targetModal: this });
|
|
185
185
|
}
|
|
186
186
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
187
|
-
_handleModalOpenStateChanged(
|
|
188
|
-
const e =
|
|
187
|
+
_handleModalOpenStateChanged(o) {
|
|
188
|
+
const e = o.get("isOpen");
|
|
189
189
|
e !== void 0 && (e ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, O, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, _, { targetModal: this }));
|
|
190
190
|
}
|
|
191
|
-
_handleActionClick(
|
|
192
|
-
|
|
191
|
+
_handleActionClick(o) {
|
|
192
|
+
o === "leading" ? (this._dialog.close("leading"), u(this, Q, { targetModal: this })) : o === "supporting" && (this._dialog.close("supporting"), u(this, Z, { targetModal: this }));
|
|
193
193
|
}
|
|
194
194
|
/**
|
|
195
195
|
* Return focus to the specified element, providing the selector is valid
|
|
196
196
|
* and the chosen element can be found.
|
|
197
197
|
*/
|
|
198
198
|
_returnFocus() {
|
|
199
|
-
var e,
|
|
200
|
-
const
|
|
201
|
-
|
|
199
|
+
var e, t;
|
|
200
|
+
const o = (e = this.returnFocusAfterCloseSelector) == null ? void 0 : e.trim();
|
|
201
|
+
o && ((t = document.querySelector(o)) == null || t.focus());
|
|
202
202
|
}
|
|
203
203
|
/**
|
|
204
204
|
* Enables body scroll by unlocking the scroll container.
|
|
@@ -219,7 +219,7 @@ let n = class extends x {
|
|
|
219
219
|
* @private
|
|
220
220
|
*/
|
|
221
221
|
renderCloseButton() {
|
|
222
|
-
var
|
|
222
|
+
var o, e;
|
|
223
223
|
return this.isDismissible ? s`
|
|
224
224
|
<pie-icon-button
|
|
225
225
|
@click="${() => {
|
|
@@ -227,7 +227,7 @@ let n = class extends x {
|
|
|
227
227
|
}}"
|
|
228
228
|
variant="ghost-secondary"
|
|
229
229
|
class="c-modal-closeBtn"
|
|
230
|
-
.aria=${h((
|
|
230
|
+
.aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (e = this.aria) == null ? void 0 : e.close } : m}
|
|
231
231
|
data-test-id="modal-close-button">
|
|
232
232
|
<icon-close></icon-close>
|
|
233
233
|
</pie-icon-button>` : m;
|
|
@@ -239,7 +239,7 @@ let n = class extends x {
|
|
|
239
239
|
* @private
|
|
240
240
|
*/
|
|
241
241
|
renderBackButton() {
|
|
242
|
-
var
|
|
242
|
+
var o, e;
|
|
243
243
|
return this.hasBackButton ? s`
|
|
244
244
|
<pie-icon-button
|
|
245
245
|
@click="${() => {
|
|
@@ -247,7 +247,7 @@ let n = class extends x {
|
|
|
247
247
|
}}"
|
|
248
248
|
variant="ghost-secondary"
|
|
249
249
|
class="c-modal-backBtn"
|
|
250
|
-
.aria=${h((
|
|
250
|
+
.aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (e = this.aria) == null ? void 0 : e.back } : m}
|
|
251
251
|
data-test-id="modal-back-button">
|
|
252
252
|
<icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
|
|
253
253
|
</pie-icon-button>
|
|
@@ -263,11 +263,11 @@ let n = class extends x {
|
|
|
263
263
|
* @private
|
|
264
264
|
*/
|
|
265
265
|
renderLeadingAction() {
|
|
266
|
-
const { ariaLabel:
|
|
266
|
+
const { ariaLabel: o, text: e, variant: t = "primary" } = this.leadingAction || {};
|
|
267
267
|
return e ? s`
|
|
268
268
|
<pie-button
|
|
269
|
-
variant="${
|
|
270
|
-
aria-label="${h(
|
|
269
|
+
variant="${t}"
|
|
270
|
+
aria-label="${h(o)}"
|
|
271
271
|
type="submit"
|
|
272
272
|
?isFullWidth="${this.hasStackedActions}"
|
|
273
273
|
@click="${() => this._handleActionClick("leading")}"
|
|
@@ -288,11 +288,11 @@ let n = class extends x {
|
|
|
288
288
|
*/
|
|
289
289
|
renderSupportingAction() {
|
|
290
290
|
var i;
|
|
291
|
-
const { ariaLabel:
|
|
291
|
+
const { ariaLabel: o, text: e, variant: t = "ghost" } = this.supportingAction || {};
|
|
292
292
|
return !e || !((i = this.leadingAction) != null && i.text) ? m : s`
|
|
293
293
|
<pie-button
|
|
294
|
-
variant="${
|
|
295
|
-
aria-label="${h(
|
|
294
|
+
variant="${t}"
|
|
295
|
+
aria-label="${h(o)}"
|
|
296
296
|
type="reset"
|
|
297
297
|
?isFullWidth="${this.hasStackedActions}"
|
|
298
298
|
@click="${() => this._handleActionClick("supporting")}"
|
|
@@ -309,19 +309,19 @@ let n = class extends x {
|
|
|
309
309
|
*/
|
|
310
310
|
renderModalFooter() {
|
|
311
311
|
var i, a;
|
|
312
|
-
const
|
|
313
|
-
|
|
312
|
+
const o = (i = this.leadingAction) == null ? void 0 : i.text;
|
|
313
|
+
o || (a = this.supportingAction) != null && a.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.");
|
|
314
314
|
const e = {
|
|
315
315
|
"c-modal-footer": !0,
|
|
316
316
|
"c-modal-footer--stackedActions": this.hasStackedActions
|
|
317
|
-
},
|
|
317
|
+
}, t = o ? s`
|
|
318
318
|
<footer class="${A(e)}" data-test-id="pie-modal-footer">
|
|
319
319
|
${this.renderLeadingAction()}
|
|
320
320
|
${this.renderSupportingAction()}
|
|
321
321
|
</footer>` : m;
|
|
322
322
|
return s`
|
|
323
323
|
<slot name="footer">
|
|
324
|
-
${
|
|
324
|
+
${t}
|
|
325
325
|
</slot>`;
|
|
326
326
|
}
|
|
327
327
|
/**
|
|
@@ -350,18 +350,18 @@ let n = class extends x {
|
|
|
350
350
|
* @private
|
|
351
351
|
*/
|
|
352
352
|
renderHeading() {
|
|
353
|
-
const { heading:
|
|
353
|
+
const { heading: o, headingLevel: e } = this, t = T(e);
|
|
354
354
|
return s`
|
|
355
|
-
<${
|
|
356
|
-
${
|
|
357
|
-
</${
|
|
355
|
+
<${t} id="modal-heading" class="c-modal-heading">
|
|
356
|
+
${o}
|
|
357
|
+
</${t}>
|
|
358
358
|
`;
|
|
359
359
|
}
|
|
360
360
|
render() {
|
|
361
361
|
const {
|
|
362
|
-
aria:
|
|
362
|
+
aria: o,
|
|
363
363
|
isDismissible: e,
|
|
364
|
-
isFooterPinned:
|
|
364
|
+
isFooterPinned: t,
|
|
365
365
|
isFullWidthBelowMid: i,
|
|
366
366
|
isLoading: a,
|
|
367
367
|
position: c,
|
|
@@ -372,9 +372,9 @@ let n = class extends x {
|
|
|
372
372
|
"c-modal--top": c === "top",
|
|
373
373
|
"c-modal--dismissible": e,
|
|
374
374
|
"c-modal--loading": a,
|
|
375
|
-
"c-modal--pinnedFooter":
|
|
375
|
+
"c-modal--pinnedFooter": t,
|
|
376
376
|
"c-modal--fullWidthBelowMid": i
|
|
377
|
-
}, z = a && (
|
|
377
|
+
}, z = a && (o == null ? void 0 : o.loading) || void 0;
|
|
378
378
|
return s`
|
|
379
379
|
<dialog
|
|
380
380
|
id="dialog"
|
|
@@ -391,7 +391,7 @@ let n = class extends x {
|
|
|
391
391
|
<slot name="headerContent"></slot>
|
|
392
392
|
</header>
|
|
393
393
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
394
|
-
|
|
394
|
+
t ? this.renderModalContentAndFooter() : s`
|
|
395
395
|
<div class="c-modal-scrollContainer">
|
|
396
396
|
${this.renderModalContentAndFooter()}
|
|
397
397
|
</div>`}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.19.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -44,12 +44,12 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
47
|
-
"@justeat/pie-design-tokens": "7.
|
|
48
|
-
"@justeattakeaway/pie-button": "1.
|
|
47
|
+
"@justeat/pie-design-tokens": "7.10.0",
|
|
48
|
+
"@justeattakeaway/pie-button": "1.10.0",
|
|
49
49
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
50
|
-
"@justeattakeaway/pie-css": "0.
|
|
50
|
+
"@justeattakeaway/pie-css": "0.25.0",
|
|
51
51
|
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
52
|
-
"@justeattakeaway/pie-text-input": "0.29.
|
|
52
|
+
"@justeattakeaway/pie-text-input": "0.29.8",
|
|
53
53
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
54
54
|
"@types/body-scroll-lock": "3.1.2",
|
|
55
55
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
@@ -58,11 +58,11 @@
|
|
|
58
58
|
"extends": "../../../package.json"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@justeattakeaway/pie-button": "1.
|
|
62
|
-
"@justeattakeaway/pie-icon-button": "2.3.
|
|
63
|
-
"@justeattakeaway/pie-icons-webc": "1.17.
|
|
64
|
-
"@justeattakeaway/pie-spinner": "1.3.
|
|
65
|
-
"@justeattakeaway/pie-webc-core": "
|
|
61
|
+
"@justeattakeaway/pie-button": "1.10.0",
|
|
62
|
+
"@justeattakeaway/pie-icon-button": "2.3.3",
|
|
63
|
+
"@justeattakeaway/pie-icons-webc": "1.17.1",
|
|
64
|
+
"@justeattakeaway/pie-spinner": "1.3.5",
|
|
65
|
+
"@justeattakeaway/pie-webc-core": "5.0.0",
|
|
66
66
|
"body-scroll-lock": "3.1.5",
|
|
67
67
|
"dialog-polyfill": "0.5.6"
|
|
68
68
|
},
|
package/src/modal.scss
CHANGED
|
@@ -189,14 +189,14 @@
|
|
|
189
189
|
|
|
190
190
|
margin-inline-start: var(--dt-spacing-d);
|
|
191
191
|
margin-inline-end: var(--dt-spacing-d);
|
|
192
|
-
margin-block:
|
|
192
|
+
margin-block: 16px; // This is deliberately not a custom property
|
|
193
193
|
|
|
194
194
|
@include media('>md') {
|
|
195
195
|
--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
|
|
196
196
|
--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
|
|
197
197
|
margin-inline-start: var(--dt-spacing-e);
|
|
198
198
|
margin-inline-end: var(--dt-spacing-e);
|
|
199
|
-
margin-block:
|
|
199
|
+
margin-block: 22px; // This is deliberately not a custom property
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
|
|
@@ -249,9 +249,9 @@
|
|
|
249
249
|
|
|
250
250
|
& .c-modal-content {
|
|
251
251
|
// Modal content Custom Props
|
|
252
|
-
--modal-content-font-size: calc(var(--dt-font-size
|
|
253
|
-
--modal-content-font-weight: var(--dt-font-weight
|
|
254
|
-
--modal-content-line-height: calc(var(--dt-font-
|
|
252
|
+
--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);
|
|
253
|
+
--modal-content-font-weight: var(--dt-font-body-l-weight);
|
|
254
|
+
--modal-content-line-height: calc(var(--dt-font-body-l-line-height) * 1px);
|
|
255
255
|
--modal-content-padding-block: var(--dt-spacing-a);
|
|
256
256
|
--modal-content-padding-inline: var(--dt-spacing-d);
|
|
257
257
|
--modal-content-padding-block-end: var(--dt-spacing-e);
|