@justeattakeaway/pie-modal 1.6.2 → 1.7.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 +203 -207
- package/package.json +8 -8
- package/src/index.ts +2 -3
package/dist/index.js
CHANGED
|
@@ -1,93 +1,87 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as F, nothing as g, unsafeCSS as P } from "lit";
|
|
2
|
+
import { html as r, unsafeStatic as T } from "lit/static-html.js";
|
|
2
3
|
import { property as d, query as K } from "lit/decorators.js";
|
|
3
|
-
import { html as s, unsafeStatic as I } from "lit/static-html.js";
|
|
4
4
|
import { classMap as B } from "lit/directives/class-map.js";
|
|
5
|
-
import { ifDefined as
|
|
5
|
+
import { ifDefined as v } from "lit/directives/if-defined.js";
|
|
6
6
|
import "@justeattakeaway/pie-button";
|
|
7
7
|
import "@justeattakeaway/pie-icon-button";
|
|
8
|
-
import { RtlMixin as
|
|
8
|
+
import { RtlMixin as I, dispatchCustomEvent as h, requiredProperty as N, validPropertyValues as C, safeCustomElement as W } from "@justeattakeaway/pie-webc-core";
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
10
10
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
|
|
11
11
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
12
12
|
import "@justeattakeaway/pie-spinner";
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
(
|
|
16
|
-
return t && j(e, o, t), t;
|
|
17
|
-
};
|
|
18
|
-
class O extends P {
|
|
19
|
-
constructor() {
|
|
20
|
-
super(...arguments), this.v = "1.6.2";
|
|
13
|
+
const k = class k extends F {
|
|
14
|
+
willUpdate() {
|
|
15
|
+
this.getAttribute("v") || this.setAttribute("v", k.v);
|
|
21
16
|
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
return o;
|
|
17
|
+
};
|
|
18
|
+
k.v = "1.7.0";
|
|
19
|
+
let x = k;
|
|
20
|
+
function R(o) {
|
|
21
|
+
if (Array.isArray(o)) {
|
|
22
|
+
for (var e = 0, t = Array(o.length); e < o.length; e++)
|
|
23
|
+
t[e] = o[e];
|
|
24
|
+
return t;
|
|
31
25
|
} else
|
|
32
|
-
return Array.from(
|
|
26
|
+
return Array.from(o);
|
|
33
27
|
}
|
|
34
|
-
var
|
|
28
|
+
var z = !1;
|
|
35
29
|
if (typeof window < "u") {
|
|
36
|
-
var
|
|
30
|
+
var A = {
|
|
37
31
|
get passive() {
|
|
38
|
-
|
|
32
|
+
z = !0;
|
|
39
33
|
}
|
|
40
34
|
};
|
|
41
|
-
window.addEventListener("testPassive", null,
|
|
35
|
+
window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
|
|
42
36
|
}
|
|
43
|
-
var
|
|
44
|
-
return
|
|
45
|
-
return !!(
|
|
37
|
+
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 = [], b = !1, M = -1, u = void 0, f = void 0, D = function(e) {
|
|
38
|
+
return m.some(function(t) {
|
|
39
|
+
return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
|
|
46
40
|
});
|
|
47
|
-
},
|
|
48
|
-
var
|
|
49
|
-
return D(
|
|
50
|
-
},
|
|
41
|
+
}, y = function(e) {
|
|
42
|
+
var t = e || window.event;
|
|
43
|
+
return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
|
|
44
|
+
}, j = function(e) {
|
|
51
45
|
if (f === void 0) {
|
|
52
|
-
var
|
|
53
|
-
|
|
46
|
+
var t = !1, i = window.innerWidth - document.documentElement.clientWidth;
|
|
47
|
+
t && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
|
|
54
48
|
}
|
|
55
49
|
u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
56
|
-
},
|
|
50
|
+
}, V = function() {
|
|
57
51
|
f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
|
|
58
|
-
},
|
|
52
|
+
}, Y = function(e) {
|
|
59
53
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
60
|
-
},
|
|
61
|
-
var i = e.targetTouches[0].clientY -
|
|
62
|
-
return D(e.target) ? !1 :
|
|
63
|
-
},
|
|
54
|
+
}, H = function(e, t) {
|
|
55
|
+
var i = e.targetTouches[0].clientY - M;
|
|
56
|
+
return D(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || Y(t) && i < 0 ? y(e) : (e.stopPropagation(), !0);
|
|
57
|
+
}, q = function(e, t) {
|
|
64
58
|
if (!e) {
|
|
65
59
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
66
60
|
return;
|
|
67
61
|
}
|
|
68
|
-
if (!
|
|
69
|
-
return
|
|
62
|
+
if (!m.some(function(a) {
|
|
63
|
+
return a.targetElement === e;
|
|
70
64
|
})) {
|
|
71
65
|
var i = {
|
|
72
66
|
targetElement: e,
|
|
73
67
|
options: {}
|
|
74
68
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}, e.ontouchmove = function(
|
|
78
|
-
|
|
79
|
-
},
|
|
69
|
+
m = [].concat(R(m), [i]), O ? (e.ontouchstart = function(a) {
|
|
70
|
+
a.targetTouches.length === 1 && (M = a.targetTouches[0].clientY);
|
|
71
|
+
}, e.ontouchmove = function(a) {
|
|
72
|
+
a.targetTouches.length === 1 && H(a, e);
|
|
73
|
+
}, b || (document.addEventListener("touchmove", y, z ? { passive: !1 } : void 0), b = !0)) : j();
|
|
80
74
|
}
|
|
81
|
-
},
|
|
75
|
+
}, U = function(e) {
|
|
82
76
|
if (!e) {
|
|
83
77
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
84
78
|
return;
|
|
85
79
|
}
|
|
86
|
-
|
|
87
|
-
return
|
|
88
|
-
}),
|
|
80
|
+
m = m.filter(function(t) {
|
|
81
|
+
return t.targetElement !== e;
|
|
82
|
+
}), O ? (e.ontouchstart = null, e.ontouchmove = null, b && m.length === 0 && (document.removeEventListener("touchmove", y, z ? { passive: !1 } : void 0), b = !1)) : m.length || V();
|
|
89
83
|
};
|
|
90
|
-
const
|
|
84
|
+
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);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 .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: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}}', G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], S = "pie-modal-close", _ = "pie-modal-open", L = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click", s = {
|
|
91
85
|
hasBackButton: !1,
|
|
92
86
|
hasStackedActions: !1,
|
|
93
87
|
headingLevel: "h2",
|
|
@@ -99,27 +93,28 @@ const Q = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
|
|
|
99
93
|
position: "center",
|
|
100
94
|
size: "medium"
|
|
101
95
|
};
|
|
102
|
-
var
|
|
103
|
-
for (var
|
|
104
|
-
(
|
|
105
|
-
return
|
|
96
|
+
var oe = Object.defineProperty, te = Object.getOwnPropertyDescriptor, l = (o, e, t, i) => {
|
|
97
|
+
for (var a = i > 1 ? void 0 : i ? te(e, t) : e, c = o.length - 1, p; c >= 0; c--)
|
|
98
|
+
(p = o[c]) && (a = (i ? p(e, t, a) : p(a)) || a);
|
|
99
|
+
return i && a && oe(e, t, a), a;
|
|
106
100
|
};
|
|
107
|
-
const
|
|
101
|
+
const w = "pie-modal";
|
|
102
|
+
let n = class extends I(x) {
|
|
108
103
|
constructor() {
|
|
109
|
-
super(...arguments), this.headingLevel =
|
|
110
|
-
|
|
111
|
-
}, this._handleDialogLightDismiss = (
|
|
112
|
-
if (!this.isDismissible ||
|
|
104
|
+
super(...arguments), this.headingLevel = s.headingLevel, this.hasBackButton = s.hasBackButton, this.hasStackedActions = s.hasStackedActions, this.isDismissible = s.isDismissible, this.isFooterPinned = s.isFooterPinned, this.isFullWidthBelowMid = s.isFullWidthBelowMid, this.isLoading = s.isLoading, this.isOpen = s.isOpen, this.position = s.position, this.size = s.size, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (o) => {
|
|
105
|
+
o.key === "Escape" && o.preventDefault();
|
|
106
|
+
}, this._handleDialogLightDismiss = (o) => {
|
|
107
|
+
if (!this.isDismissible || o.target !== o.currentTarget)
|
|
113
108
|
return;
|
|
114
|
-
const
|
|
115
|
-
top:
|
|
116
|
-
bottom:
|
|
117
|
-
left:
|
|
118
|
-
right:
|
|
119
|
-
} =
|
|
120
|
-
if (
|
|
109
|
+
const e = this._dialog.getBoundingClientRect(), {
|
|
110
|
+
top: t = 0,
|
|
111
|
+
bottom: i = 0,
|
|
112
|
+
left: a = 0,
|
|
113
|
+
right: c = 0
|
|
114
|
+
} = e || {};
|
|
115
|
+
if (t === 0 && i === 0 && a === 0 && c === 0)
|
|
121
116
|
return;
|
|
122
|
-
(
|
|
117
|
+
(o.clientY < t || o.clientY > i || o.clientX < a || o.clientX > c) && (this.isOpen = !1);
|
|
123
118
|
};
|
|
124
119
|
}
|
|
125
120
|
get _modalScrollContainer() {
|
|
@@ -127,32 +122,32 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
127
122
|
}
|
|
128
123
|
connectedCallback() {
|
|
129
124
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
130
|
-
const { signal:
|
|
131
|
-
this.addEventListener("click", (
|
|
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(S, (e) => this._handleModalClosed(e), { signal: o }), document.addEventListener(L, (e) => this._handleModalClosed(e), { signal: o });
|
|
132
127
|
}
|
|
133
128
|
disconnectedCallback() {
|
|
134
129
|
super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
|
|
135
130
|
}
|
|
136
|
-
async firstUpdated(
|
|
137
|
-
(await import("./dialog-polyfill.esm-CbjBMXAG.js").then((
|
|
138
|
-
const { signal:
|
|
131
|
+
async firstUpdated(o) {
|
|
132
|
+
(await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
|
|
133
|
+
const { signal: t } = this._abortController;
|
|
139
134
|
this._dialog.addEventListener("close", () => {
|
|
140
135
|
this.isOpen = !1;
|
|
141
|
-
}, { signal:
|
|
136
|
+
}, { signal: t }), this._handleModalOpenStateOnFirstRender(o);
|
|
142
137
|
}
|
|
143
|
-
updated(
|
|
144
|
-
this._handleModalOpenStateChanged(
|
|
138
|
+
updated(o) {
|
|
139
|
+
this._handleModalOpenStateChanged(o), this._handleIsDismissibleChanged(o);
|
|
145
140
|
}
|
|
146
|
-
_handleIsDismissibleChanged(
|
|
147
|
-
const
|
|
148
|
-
!
|
|
141
|
+
_handleIsDismissibleChanged(o) {
|
|
142
|
+
const e = o.get("isDismissible"), t = this.isDismissible;
|
|
143
|
+
!e && t && this._removeEscKeyEventListener(), e && !t && this._setupEscKeyListener();
|
|
149
144
|
}
|
|
150
145
|
/**
|
|
151
146
|
* Opens the dialog element and disables page scrolling
|
|
152
147
|
*/
|
|
153
|
-
_handleModalOpened(
|
|
154
|
-
const { targetModal:
|
|
155
|
-
if (
|
|
148
|
+
_handleModalOpened(o) {
|
|
149
|
+
const { targetModal: e } = o.detail;
|
|
150
|
+
if (e === this) {
|
|
156
151
|
if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
|
|
157
152
|
return;
|
|
158
153
|
this._dialog.showModal(), requestAnimationFrame(() => {
|
|
@@ -163,9 +158,9 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
163
158
|
/**
|
|
164
159
|
* Closes the dialog element and re-enables page scrolling
|
|
165
160
|
*/
|
|
166
|
-
_handleModalClosed(
|
|
167
|
-
const { targetModal:
|
|
168
|
-
|
|
161
|
+
_handleModalClosed(o) {
|
|
162
|
+
const { targetModal: e } = o.detail;
|
|
163
|
+
e === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
|
|
169
164
|
}
|
|
170
165
|
/**
|
|
171
166
|
* Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
|
|
@@ -173,49 +168,49 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
173
168
|
_setupEscKeyListener() {
|
|
174
169
|
if (!this._escKeyAbortController && !this.isDismissible) {
|
|
175
170
|
this._escKeyAbortController = new AbortController();
|
|
176
|
-
const { signal:
|
|
177
|
-
document.addEventListener("keydown", (
|
|
171
|
+
const { signal: o } = this._escKeyAbortController;
|
|
172
|
+
document.addEventListener("keydown", (e) => this._preventModalKeyboardDismissal(e), { signal: o });
|
|
178
173
|
}
|
|
179
174
|
}
|
|
180
175
|
/**
|
|
181
176
|
* Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
|
|
182
177
|
*/
|
|
183
178
|
_removeEscKeyEventListener() {
|
|
184
|
-
var
|
|
185
|
-
(
|
|
179
|
+
var o;
|
|
180
|
+
(o = this._escKeyAbortController) == null || o.abort(), this._escKeyAbortController = null;
|
|
186
181
|
}
|
|
187
182
|
// Handles the value of the isOpen property on first render of the component
|
|
188
|
-
_handleModalOpenStateOnFirstRender(
|
|
189
|
-
|
|
183
|
+
_handleModalOpenStateOnFirstRender(o) {
|
|
184
|
+
o.get("isOpen") === void 0 && this.isOpen && h(this, _, { targetModal: this });
|
|
190
185
|
}
|
|
191
186
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
192
|
-
_handleModalOpenStateChanged(
|
|
193
|
-
const
|
|
194
|
-
|
|
187
|
+
_handleModalOpenStateChanged(o) {
|
|
188
|
+
const e = o.get("isOpen");
|
|
189
|
+
e !== void 0 && (e ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, S, { targetModal: this }) : h(this, _, { targetModal: this }));
|
|
195
190
|
}
|
|
196
|
-
_handleActionClick(
|
|
197
|
-
|
|
191
|
+
_handleActionClick(o) {
|
|
192
|
+
o === "leading" ? (this._dialog.close("leading"), h(this, Z, { targetModal: this })) : o === "supporting" && (this._dialog.close("supporting"), h(this, ee, { targetModal: this }));
|
|
198
193
|
}
|
|
199
194
|
/**
|
|
200
195
|
* Return focus to the specified element, providing the selector is valid
|
|
201
196
|
* and the chosen element can be found.
|
|
202
197
|
*/
|
|
203
198
|
_returnFocus() {
|
|
204
|
-
var
|
|
205
|
-
const
|
|
206
|
-
|
|
199
|
+
var e, t;
|
|
200
|
+
const o = (e = this.returnFocusAfterCloseSelector) == null ? void 0 : e.trim();
|
|
201
|
+
o && ((t = document.querySelector(o)) == null || t.focus());
|
|
207
202
|
}
|
|
208
203
|
/**
|
|
209
204
|
* Enables body scroll by unlocking the scroll container.
|
|
210
205
|
*/
|
|
211
206
|
_enableBodyScroll() {
|
|
212
|
-
this._modalScrollContainer &&
|
|
207
|
+
this._modalScrollContainer && U(this._modalScrollContainer);
|
|
213
208
|
}
|
|
214
209
|
/**
|
|
215
210
|
* Disables body scroll by locking the scroll container.
|
|
216
211
|
*/
|
|
217
212
|
_disableBodyScroll() {
|
|
218
|
-
this._modalScrollContainer &&
|
|
213
|
+
this._modalScrollContainer && q(this._modalScrollContainer);
|
|
219
214
|
}
|
|
220
215
|
/**
|
|
221
216
|
* Template for the close button element. Called within the
|
|
@@ -224,18 +219,18 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
224
219
|
* @private
|
|
225
220
|
*/
|
|
226
221
|
renderCloseButton() {
|
|
227
|
-
var
|
|
228
|
-
return this.isDismissible ?
|
|
222
|
+
var o;
|
|
223
|
+
return this.isDismissible ? r`
|
|
229
224
|
<pie-icon-button
|
|
230
225
|
@click="${() => {
|
|
231
226
|
this.isOpen = !1;
|
|
232
227
|
}}"
|
|
233
228
|
variant="ghost-secondary"
|
|
234
229
|
class="c-modal-closeBtn"
|
|
235
|
-
aria-label="${((
|
|
230
|
+
aria-label="${((o = this.aria) == null ? void 0 : o.close) || g}"
|
|
236
231
|
data-test-id="modal-close-button">
|
|
237
232
|
<icon-close></icon-close>
|
|
238
|
-
</pie-icon-button>` :
|
|
233
|
+
</pie-icon-button>` : g;
|
|
239
234
|
}
|
|
240
235
|
/**
|
|
241
236
|
* Template for the back button element. Called within the
|
|
@@ -244,19 +239,19 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
244
239
|
* @private
|
|
245
240
|
*/
|
|
246
241
|
renderBackButton() {
|
|
247
|
-
var
|
|
248
|
-
return this.hasBackButton ?
|
|
242
|
+
var o;
|
|
243
|
+
return this.hasBackButton ? r`
|
|
249
244
|
<pie-icon-button
|
|
250
245
|
@click="${() => {
|
|
251
246
|
this._backButtonClicked = !0, this.isOpen = !1;
|
|
252
247
|
}}"
|
|
253
248
|
variant="ghost-secondary"
|
|
254
249
|
class="c-modal-backBtn"
|
|
255
|
-
aria-label="${
|
|
250
|
+
aria-label="${v((o = this.aria) == null ? void 0 : o.back)}"
|
|
256
251
|
data-test-id="modal-back-button">
|
|
257
|
-
${this.isRTL ?
|
|
252
|
+
${this.isRTL ? r`<icon-chevron-right></icon-chevron-right>` : r`<icon-chevron-left></icon-chevron-left>`}
|
|
258
253
|
</pie-icon-button>
|
|
259
|
-
` :
|
|
254
|
+
` : g;
|
|
260
255
|
}
|
|
261
256
|
/**
|
|
262
257
|
* Renders the "leadingAction" button if the text is provided.
|
|
@@ -268,18 +263,18 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
268
263
|
* @private
|
|
269
264
|
*/
|
|
270
265
|
renderLeadingAction() {
|
|
271
|
-
const { ariaLabel:
|
|
272
|
-
return
|
|
266
|
+
const { ariaLabel: o, text: e, variant: t = "primary" } = this.leadingAction || {};
|
|
267
|
+
return e ? r`
|
|
273
268
|
<pie-button
|
|
274
|
-
variant="${
|
|
275
|
-
aria-label="${
|
|
269
|
+
variant="${t}"
|
|
270
|
+
aria-label="${v(o)}"
|
|
276
271
|
type="submit"
|
|
277
272
|
?isFullWidth="${this.hasStackedActions}"
|
|
278
273
|
@click="${() => this._handleActionClick("leading")}"
|
|
279
274
|
data-test-id="modal-leading-action">
|
|
280
|
-
${
|
|
275
|
+
${e}
|
|
281
276
|
</pie-button>
|
|
282
|
-
` :
|
|
277
|
+
` : g;
|
|
283
278
|
}
|
|
284
279
|
/**
|
|
285
280
|
* Renders the "supportingAction" button if the text is provided.
|
|
@@ -292,17 +287,17 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
292
287
|
* @private
|
|
293
288
|
*/
|
|
294
289
|
renderSupportingAction() {
|
|
295
|
-
var
|
|
296
|
-
const { ariaLabel:
|
|
297
|
-
return !
|
|
290
|
+
var i;
|
|
291
|
+
const { ariaLabel: o, text: e, variant: t = "ghost" } = this.supportingAction || {};
|
|
292
|
+
return !e || !((i = this.leadingAction) != null && i.text) ? g : r`
|
|
298
293
|
<pie-button
|
|
299
|
-
variant="${
|
|
300
|
-
aria-label="${
|
|
294
|
+
variant="${t}"
|
|
295
|
+
aria-label="${v(o)}"
|
|
301
296
|
type="reset"
|
|
302
297
|
?isFullWidth="${this.hasStackedActions}"
|
|
303
298
|
@click="${() => this._handleActionClick("supporting")}"
|
|
304
299
|
data-test-id="modal-supporting-action">
|
|
305
|
-
${
|
|
300
|
+
${e}
|
|
306
301
|
</pie-button>
|
|
307
302
|
`;
|
|
308
303
|
}
|
|
@@ -313,20 +308,20 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
313
308
|
* @private
|
|
314
309
|
*/
|
|
315
310
|
renderModalFooter() {
|
|
316
|
-
var
|
|
317
|
-
const
|
|
318
|
-
|
|
319
|
-
const
|
|
311
|
+
var i, a;
|
|
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
|
+
const e = {
|
|
320
315
|
"c-modal-footer": !0,
|
|
321
316
|
"c-modal-footer--stackedActions": this.hasStackedActions
|
|
322
|
-
},
|
|
323
|
-
<footer class="${B(
|
|
317
|
+
}, t = o ? r`
|
|
318
|
+
<footer class="${B(e)}" data-test-id="pie-modal-footer">
|
|
324
319
|
${this.renderLeadingAction()}
|
|
325
320
|
${this.renderSupportingAction()}
|
|
326
|
-
</footer>` :
|
|
327
|
-
return
|
|
321
|
+
</footer>` : g;
|
|
322
|
+
return r`
|
|
328
323
|
<slot name="footer">
|
|
329
|
-
${
|
|
324
|
+
${t}
|
|
330
325
|
</slot>`;
|
|
331
326
|
}
|
|
332
327
|
/**
|
|
@@ -334,14 +329,14 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
334
329
|
* @private
|
|
335
330
|
*/
|
|
336
331
|
renderLoadingSpinner() {
|
|
337
|
-
return this.isLoading ?
|
|
332
|
+
return this.isLoading ? r`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : g;
|
|
338
333
|
}
|
|
339
334
|
/**
|
|
340
335
|
* Renders the modal inner content and footer of the modal.
|
|
341
336
|
* @private
|
|
342
337
|
*/
|
|
343
338
|
renderModalContentAndFooter() {
|
|
344
|
-
return
|
|
339
|
+
return r`
|
|
345
340
|
<article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
|
|
346
341
|
<div class="c-modal-contentInner" data-test-id="modal-content-inner">
|
|
347
342
|
<slot></slot>
|
|
@@ -355,37 +350,37 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
355
350
|
* @private
|
|
356
351
|
*/
|
|
357
352
|
renderHeading() {
|
|
358
|
-
const { heading:
|
|
359
|
-
return
|
|
360
|
-
<${
|
|
361
|
-
${
|
|
362
|
-
</${
|
|
353
|
+
const { heading: o, headingLevel: e } = this, t = T(e);
|
|
354
|
+
return r`
|
|
355
|
+
<${t} class="c-modal-heading">
|
|
356
|
+
${o}
|
|
357
|
+
</${t}>
|
|
363
358
|
`;
|
|
364
359
|
}
|
|
365
360
|
render() {
|
|
366
361
|
const {
|
|
367
|
-
aria:
|
|
368
|
-
isDismissible:
|
|
369
|
-
isFooterPinned:
|
|
370
|
-
isFullWidthBelowMid:
|
|
371
|
-
isLoading:
|
|
372
|
-
position:
|
|
373
|
-
size:
|
|
374
|
-
} = this,
|
|
362
|
+
aria: o,
|
|
363
|
+
isDismissible: e,
|
|
364
|
+
isFooterPinned: t,
|
|
365
|
+
isFullWidthBelowMid: i,
|
|
366
|
+
isLoading: a,
|
|
367
|
+
position: c,
|
|
368
|
+
size: p
|
|
369
|
+
} = this, $ = a && (o == null ? void 0 : o.loading) || void 0, E = {
|
|
375
370
|
"c-modal": !0,
|
|
376
|
-
[`c-modal--${
|
|
377
|
-
"c-modal--top":
|
|
378
|
-
"c-modal--dismissible":
|
|
379
|
-
"c-modal--loading":
|
|
380
|
-
"c-modal--pinnedFooter":
|
|
381
|
-
"c-modal--fullWidthBelowMid":
|
|
371
|
+
[`c-modal--${p}`]: !0,
|
|
372
|
+
"c-modal--top": c === "top",
|
|
373
|
+
"c-modal--dismissible": e,
|
|
374
|
+
"c-modal--loading": a,
|
|
375
|
+
"c-modal--pinnedFooter": t,
|
|
376
|
+
"c-modal--fullWidthBelowMid": i
|
|
382
377
|
};
|
|
383
|
-
return
|
|
378
|
+
return r`
|
|
384
379
|
<dialog
|
|
385
380
|
id="dialog"
|
|
386
|
-
class="${B(
|
|
387
|
-
aria-busy="${
|
|
388
|
-
aria-label="${
|
|
381
|
+
class="${B(E)}"
|
|
382
|
+
aria-busy="${a ? "true" : "false"}"
|
|
383
|
+
aria-label="${v($)}"
|
|
389
384
|
data-test-id="pie-modal">
|
|
390
385
|
<header class="c-modal-header" data-test-id="modal-header">
|
|
391
386
|
${this.renderBackButton()}
|
|
@@ -393,77 +388,78 @@ const v = "pie-modal", C = class C extends N(O) {
|
|
|
393
388
|
${this.renderCloseButton()}
|
|
394
389
|
</header>
|
|
395
390
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
396
|
-
|
|
391
|
+
t ? this.renderModalContentAndFooter() : r`
|
|
397
392
|
<div class="c-modal-scrollContainer">
|
|
398
393
|
${this.renderModalContentAndFooter()}
|
|
399
394
|
</div>`}
|
|
400
395
|
</dialog>`;
|
|
401
396
|
}
|
|
402
397
|
};
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
r([
|
|
398
|
+
n.styles = P(X);
|
|
399
|
+
l([
|
|
406
400
|
d({ type: Object })
|
|
407
|
-
],
|
|
408
|
-
|
|
401
|
+
], n.prototype, "aria", 2);
|
|
402
|
+
l([
|
|
409
403
|
d({ type: String }),
|
|
410
|
-
|
|
411
|
-
],
|
|
412
|
-
|
|
404
|
+
N(w)
|
|
405
|
+
], n.prototype, "heading", 2);
|
|
406
|
+
l([
|
|
413
407
|
d({ type: String }),
|
|
414
|
-
|
|
415
|
-
],
|
|
416
|
-
|
|
408
|
+
C(w, G, s.headingLevel)
|
|
409
|
+
], n.prototype, "headingLevel", 2);
|
|
410
|
+
l([
|
|
417
411
|
d({ type: Boolean })
|
|
418
|
-
],
|
|
419
|
-
|
|
412
|
+
], n.prototype, "hasBackButton", 2);
|
|
413
|
+
l([
|
|
420
414
|
d({ type: Boolean })
|
|
421
|
-
],
|
|
422
|
-
|
|
415
|
+
], n.prototype, "hasStackedActions", 2);
|
|
416
|
+
l([
|
|
423
417
|
d({ type: Boolean, reflect: !0 })
|
|
424
|
-
],
|
|
425
|
-
|
|
418
|
+
], n.prototype, "isDismissible", 2);
|
|
419
|
+
l([
|
|
426
420
|
d({ type: Boolean })
|
|
427
|
-
],
|
|
428
|
-
|
|
421
|
+
], n.prototype, "isFooterPinned", 2);
|
|
422
|
+
l([
|
|
429
423
|
d({ type: Boolean })
|
|
430
|
-
],
|
|
431
|
-
|
|
424
|
+
], n.prototype, "isFullWidthBelowMid", 2);
|
|
425
|
+
l([
|
|
432
426
|
d({ type: Boolean, reflect: !0 })
|
|
433
|
-
],
|
|
434
|
-
|
|
427
|
+
], n.prototype, "isLoading", 2);
|
|
428
|
+
l([
|
|
435
429
|
d({ type: Boolean })
|
|
436
|
-
],
|
|
437
|
-
|
|
430
|
+
], n.prototype, "isOpen", 2);
|
|
431
|
+
l([
|
|
438
432
|
d({ type: Object })
|
|
439
|
-
],
|
|
440
|
-
|
|
433
|
+
], n.prototype, "leadingAction", 2);
|
|
434
|
+
l([
|
|
441
435
|
d({ type: String }),
|
|
442
|
-
|
|
443
|
-
],
|
|
444
|
-
|
|
436
|
+
C(w, Q, s.position)
|
|
437
|
+
], n.prototype, "position", 2);
|
|
438
|
+
l([
|
|
445
439
|
d({ type: String })
|
|
446
|
-
],
|
|
447
|
-
|
|
440
|
+
], n.prototype, "returnFocusAfterCloseSelector", 2);
|
|
441
|
+
l([
|
|
448
442
|
d({ type: String }),
|
|
449
|
-
|
|
450
|
-
],
|
|
451
|
-
|
|
443
|
+
C(w, J, s.size)
|
|
444
|
+
], n.prototype, "size", 2);
|
|
445
|
+
l([
|
|
452
446
|
d({ type: Object })
|
|
453
|
-
],
|
|
454
|
-
|
|
447
|
+
], n.prototype, "supportingAction", 2);
|
|
448
|
+
l([
|
|
455
449
|
K("dialog")
|
|
456
|
-
],
|
|
457
|
-
|
|
450
|
+
], n.prototype, "_dialog", 2);
|
|
451
|
+
n = l([
|
|
452
|
+
W("pie-modal")
|
|
453
|
+
], n);
|
|
458
454
|
export {
|
|
459
455
|
L as ON_MODAL_BACK_EVENT,
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
456
|
+
S as ON_MODAL_CLOSE_EVENT,
|
|
457
|
+
Z as ON_MODAL_LEADING_ACTION_CLICK,
|
|
458
|
+
_ as ON_MODAL_OPEN_EVENT,
|
|
459
|
+
ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
460
|
+
n as PieModal,
|
|
461
|
+
s as defaultProps,
|
|
462
|
+
G as headingLevels,
|
|
463
|
+
Q as positions,
|
|
464
|
+
J as sizes
|
|
469
465
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -40,11 +40,11 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeat/pie-design-tokens": "6.10.0",
|
|
43
|
-
"@justeattakeaway/pie-button": "1.
|
|
43
|
+
"@justeattakeaway/pie-button": "1.6.0",
|
|
44
44
|
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
45
45
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
46
46
|
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
47
|
-
"@justeattakeaway/pie-text-input": "0.
|
|
47
|
+
"@justeattakeaway/pie-text-input": "0.28.0",
|
|
48
48
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
49
49
|
"@types/body-scroll-lock": "3.1.2",
|
|
50
50
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
@@ -53,11 +53,11 @@
|
|
|
53
53
|
"extends": "../../../package.json"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@justeattakeaway/pie-button": "1.
|
|
57
|
-
"@justeattakeaway/pie-icon-button": "1.
|
|
58
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
59
|
-
"@justeattakeaway/pie-spinner": "1.
|
|
60
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
56
|
+
"@justeattakeaway/pie-button": "1.6.0",
|
|
57
|
+
"@justeattakeaway/pie-icon-button": "1.5.0",
|
|
58
|
+
"@justeattakeaway/pie-icons-webc": "1.10.0",
|
|
59
|
+
"@justeattakeaway/pie-spinner": "1.2.0",
|
|
60
|
+
"@justeattakeaway/pie-webc-core": "0.26.0",
|
|
61
61
|
"body-scroll-lock": "3.1.5",
|
|
62
62
|
"dialog-polyfill": "0.5.6"
|
|
63
63
|
},
|
package/src/index.ts
CHANGED
|
@@ -14,8 +14,8 @@ import {
|
|
|
14
14
|
requiredProperty,
|
|
15
15
|
RtlMixin,
|
|
16
16
|
validPropertyValues,
|
|
17
|
-
defineCustomElement,
|
|
18
17
|
dispatchCustomEvent,
|
|
18
|
+
safeCustomElement,
|
|
19
19
|
} from '@justeattakeaway/pie-webc-core';
|
|
20
20
|
import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
|
|
21
21
|
import '@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js';
|
|
@@ -56,6 +56,7 @@ export interface ModalEventDetail {
|
|
|
56
56
|
* @slot footer - The footer slot
|
|
57
57
|
* @slot - Default slot
|
|
58
58
|
*/
|
|
59
|
+
@safeCustomElement('pie-modal')
|
|
59
60
|
export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
60
61
|
@property({ type: Object })
|
|
61
62
|
public aria: ModalProps['aria'];
|
|
@@ -587,8 +588,6 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
|
587
588
|
};
|
|
588
589
|
}
|
|
589
590
|
|
|
590
|
-
defineCustomElement(componentSelector, PieModal);
|
|
591
|
-
|
|
592
591
|
declare global {
|
|
593
592
|
interface HTMLElementTagNameMap {
|
|
594
593
|
[componentSelector]: PieModal;
|