@justeattakeaway/pie-modal 0.32.0 → 0.32.2
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 +227 -182
- package/dist/react.js +11 -12
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -1,118 +1,163 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { html as
|
|
3
|
-
import { property as
|
|
1
|
+
import { isServer as D, unsafeCSS as T, nothing as c, LitElement as F } from "lit";
|
|
2
|
+
import { html as m, unsafeStatic as I } from "lit/static-html.js";
|
|
3
|
+
import { property as s, query as N } from "lit/decorators.js";
|
|
4
4
|
import "@justeattakeaway/pie-button";
|
|
5
5
|
import "@justeattakeaway/pie-icon-button";
|
|
6
|
-
import { RtlMixin as I, requiredProperty as R, validPropertyValues as z, defineCustomElement as j } from "@justeattakeaway/pie-webc-core";
|
|
7
6
|
import "@justeattakeaway/pie-icons-webc/IconClose";
|
|
8
7
|
import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
|
|
9
8
|
import "@justeattakeaway/pie-icons-webc/IconChevronRight";
|
|
10
9
|
import "@justeattakeaway/pie-spinner";
|
|
11
|
-
function
|
|
12
|
-
if (Array.isArray(
|
|
13
|
-
for (var e = 0,
|
|
14
|
-
|
|
15
|
-
return
|
|
10
|
+
function R(n) {
|
|
11
|
+
if (Array.isArray(n)) {
|
|
12
|
+
for (var e = 0, i = Array(n.length); e < n.length; e++)
|
|
13
|
+
i[e] = n[e];
|
|
14
|
+
return i;
|
|
16
15
|
} else
|
|
17
|
-
return Array.from(
|
|
16
|
+
return Array.from(n);
|
|
18
17
|
}
|
|
19
|
-
var
|
|
18
|
+
var z = !1;
|
|
20
19
|
if (typeof window < "u") {
|
|
21
20
|
var A = {
|
|
22
21
|
get passive() {
|
|
23
|
-
|
|
22
|
+
z = !0;
|
|
24
23
|
}
|
|
25
24
|
};
|
|
26
25
|
window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
|
|
27
26
|
}
|
|
28
|
-
var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1),
|
|
29
|
-
return
|
|
30
|
-
return !!(
|
|
27
|
+
var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), h = [], k = !1, $ = -1, u = void 0, f = void 0, L = function(e) {
|
|
28
|
+
return h.some(function(i) {
|
|
29
|
+
return !!(i.options.allowTouchMove && i.options.allowTouchMove(e));
|
|
31
30
|
});
|
|
32
|
-
},
|
|
33
|
-
var
|
|
34
|
-
return L(
|
|
35
|
-
},
|
|
36
|
-
if (
|
|
37
|
-
var
|
|
38
|
-
|
|
31
|
+
}, w = function(e) {
|
|
32
|
+
var i = e || window.event;
|
|
33
|
+
return L(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
|
|
34
|
+
}, j = function(e) {
|
|
35
|
+
if (f === void 0) {
|
|
36
|
+
var i = !!e && e.reserveScrollBarGap === !0, t = window.innerWidth - document.documentElement.clientWidth;
|
|
37
|
+
i && t > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
|
|
39
38
|
}
|
|
40
|
-
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
},
|
|
39
|
+
u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
40
|
+
}, q = function() {
|
|
41
|
+
f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
|
|
42
|
+
}, W = function(e) {
|
|
44
43
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
45
|
-
},
|
|
46
|
-
var
|
|
47
|
-
return L(e.target) ? !1 :
|
|
48
|
-
},
|
|
44
|
+
}, V = function(e, i) {
|
|
45
|
+
var t = e.targetTouches[0].clientY - $;
|
|
46
|
+
return L(e.target) ? !1 : i && i.scrollTop === 0 && t > 0 || W(i) && t < 0 ? w(e) : (e.stopPropagation(), !0);
|
|
47
|
+
}, Y = function(e, i) {
|
|
49
48
|
if (!e) {
|
|
50
49
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
51
50
|
return;
|
|
52
51
|
}
|
|
53
|
-
if (!
|
|
54
|
-
return
|
|
52
|
+
if (!h.some(function(o) {
|
|
53
|
+
return o.targetElement === e;
|
|
55
54
|
})) {
|
|
56
|
-
var
|
|
55
|
+
var t = {
|
|
57
56
|
targetElement: e,
|
|
58
|
-
options:
|
|
57
|
+
options: i || {}
|
|
59
58
|
};
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}, e.ontouchmove = function(
|
|
63
|
-
|
|
64
|
-
},
|
|
59
|
+
h = [].concat(R(h), [t]), B ? (e.ontouchstart = function(o) {
|
|
60
|
+
o.targetTouches.length === 1 && ($ = o.targetTouches[0].clientY);
|
|
61
|
+
}, e.ontouchmove = function(o) {
|
|
62
|
+
o.targetTouches.length === 1 && V(o, e);
|
|
63
|
+
}, k || (document.addEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !0)) : j(i);
|
|
65
64
|
}
|
|
66
|
-
},
|
|
65
|
+
}, U = function(e) {
|
|
67
66
|
if (!e) {
|
|
68
67
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
69
68
|
return;
|
|
70
69
|
}
|
|
71
|
-
|
|
72
|
-
return
|
|
73
|
-
}), B ? (e.ontouchstart = null, e.ontouchmove = null,
|
|
70
|
+
h = h.filter(function(i) {
|
|
71
|
+
return i.targetElement !== e;
|
|
72
|
+
}), B ? (e.ontouchstart = null, e.ontouchmove = null, k && h.length === 0 && (document.removeEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !1)) : h.length || q();
|
|
74
73
|
};
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
74
|
+
const H = (n) => {
|
|
75
|
+
class e extends n {
|
|
76
|
+
/**
|
|
77
|
+
* A getter to determine whether the text direction is right-to-left (RTL).
|
|
78
|
+
* If the `dir` property is present on the component, it will be used to determine the text direction.
|
|
79
|
+
* If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
|
|
80
|
+
* from the document's root element. This inference is not available during SSR.
|
|
81
|
+
* In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
|
|
82
|
+
*
|
|
83
|
+
* @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
|
|
84
|
+
*/
|
|
85
|
+
get isRTL() {
|
|
86
|
+
return this.dir ? this.dir === "rtl" : !D && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return e;
|
|
90
|
+
}, C = (n, e, i) => function(o, a) {
|
|
91
|
+
const d = `#${a}`;
|
|
92
|
+
Object.defineProperty(o, a, {
|
|
93
|
+
get() {
|
|
94
|
+
return this[d];
|
|
95
|
+
},
|
|
96
|
+
set(p) {
|
|
97
|
+
const g = this[d];
|
|
98
|
+
e.includes(p) ? this[d] = p : (console.error(
|
|
99
|
+
`<${n}> Invalid value "${p}" provided for property "${a}".`,
|
|
100
|
+
`Must be one of: ${e.join(" | ")}.`,
|
|
101
|
+
`Falling back to default value: "${i}"`
|
|
102
|
+
), this[d] = i), this.requestUpdate(a, g);
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
}, G = (n) => function(i, t) {
|
|
106
|
+
const o = `#${t}`;
|
|
107
|
+
Object.defineProperty(i, t, {
|
|
108
|
+
get() {
|
|
109
|
+
return this[o];
|
|
110
|
+
},
|
|
111
|
+
set(a) {
|
|
112
|
+
const d = this[o];
|
|
113
|
+
(a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${t}"`), this[o] = a, this.requestUpdate(t, d);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
function X(n, e) {
|
|
118
|
+
customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
|
|
119
|
+
}
|
|
120
|
+
const J = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;height:100%;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
|
|
121
|
+
`, Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], K = ["top", "center"], x = "pie-modal-close", b = "pie-modal-open", _ = "pie-modal-back", ee = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click";
|
|
122
|
+
var te = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, r = (n, e, i, t) => {
|
|
123
|
+
for (var o = t > 1 ? void 0 : t ? oe(e, i) : e, a = n.length - 1, d; a >= 0; a--)
|
|
124
|
+
(d = n[a]) && (o = (t ? d(e, i, o) : d(o)) || o);
|
|
125
|
+
return t && o && te(e, i, o), o;
|
|
81
126
|
};
|
|
82
|
-
const
|
|
83
|
-
class
|
|
127
|
+
const v = "pie-modal";
|
|
128
|
+
class l extends H(F) {
|
|
84
129
|
constructor() {
|
|
85
130
|
super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
|
|
86
131
|
this.isDismissible || e.preventDefault();
|
|
87
132
|
}, this._handleDialogLightDismiss = (e) => {
|
|
88
|
-
var
|
|
133
|
+
var g;
|
|
89
134
|
if (!this.isDismissible)
|
|
90
135
|
return;
|
|
91
|
-
const
|
|
92
|
-
top:
|
|
93
|
-
bottom:
|
|
94
|
-
left:
|
|
95
|
-
right:
|
|
96
|
-
} =
|
|
97
|
-
if (
|
|
136
|
+
const i = (g = this._dialog) == null ? void 0 : g.getBoundingClientRect(), {
|
|
137
|
+
top: t = 0,
|
|
138
|
+
bottom: o = 0,
|
|
139
|
+
left: a = 0,
|
|
140
|
+
right: d = 0
|
|
141
|
+
} = i || {};
|
|
142
|
+
if (t === 0 && o === 0 && a === 0 && d === 0)
|
|
98
143
|
return;
|
|
99
|
-
(e.clientY <
|
|
144
|
+
(e.clientY < t || e.clientY > o || e.clientX < a || e.clientX > d) && (this.isOpen = !1);
|
|
100
145
|
}, this._dispatchModalCustomEvent = (e) => {
|
|
101
|
-
const
|
|
146
|
+
const i = new CustomEvent(e, {
|
|
102
147
|
bubbles: !0,
|
|
103
148
|
composed: !0
|
|
104
149
|
});
|
|
105
|
-
this.dispatchEvent(
|
|
150
|
+
this.dispatchEvent(i);
|
|
106
151
|
};
|
|
107
152
|
}
|
|
108
153
|
connectedCallback() {
|
|
109
|
-
super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(
|
|
154
|
+
super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(b, this._handleModalOpened.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
|
|
110
155
|
}
|
|
111
156
|
disconnectedCallback() {
|
|
112
|
-
document.removeEventListener(
|
|
157
|
+
document.removeEventListener(b, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
|
|
113
158
|
}
|
|
114
159
|
async firstUpdated(e) {
|
|
115
|
-
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((
|
|
160
|
+
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((t) => t.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (t) => this._handleDialogCancelEvent(t)), this._dialog.addEventListener("close", () => {
|
|
116
161
|
this.isOpen = !1;
|
|
117
162
|
})), this._handleModalOpenStateOnFirstRender(e);
|
|
118
163
|
}
|
|
@@ -123,39 +168,39 @@ class n extends I(P) {
|
|
|
123
168
|
* Opens the dialog element and disables page scrolling
|
|
124
169
|
*/
|
|
125
170
|
_handleModalOpened() {
|
|
126
|
-
var
|
|
127
|
-
const e = (
|
|
128
|
-
e &&
|
|
171
|
+
var i, t, o, a;
|
|
172
|
+
const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
|
|
173
|
+
e && Y(e), !((t = this._dialog) != null && t.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((a = this._dialog) == null || a.showModal());
|
|
129
174
|
}
|
|
130
175
|
/**
|
|
131
176
|
* Closes the dialog element and re-enables page scrolling
|
|
132
177
|
*/
|
|
133
178
|
_handleModalClosed() {
|
|
134
|
-
var
|
|
135
|
-
const e = (
|
|
136
|
-
e &&
|
|
179
|
+
var i, t;
|
|
180
|
+
const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
|
|
181
|
+
e && U(e), (t = this._dialog) == null || t.close(), this._returnFocus();
|
|
137
182
|
}
|
|
138
183
|
// Handles the value of the isOpen property on first render of the component
|
|
139
184
|
_handleModalOpenStateOnFirstRender(e) {
|
|
140
|
-
e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(
|
|
185
|
+
e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(b);
|
|
141
186
|
}
|
|
142
187
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
143
188
|
_handleModalOpenStateChanged(e) {
|
|
144
|
-
const
|
|
145
|
-
|
|
189
|
+
const i = e.get("isOpen");
|
|
190
|
+
i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(b));
|
|
146
191
|
}
|
|
147
192
|
_handleActionClick(e) {
|
|
148
|
-
var
|
|
149
|
-
e === "leading" ? ((
|
|
193
|
+
var i, t;
|
|
194
|
+
e === "leading" ? ((i = this._dialog) == null || i.close("leading"), this._dispatchModalCustomEvent(ee)) : e === "supporting" && ((t = this._dialog) == null || t.close("supporting"), this._dispatchModalCustomEvent(ie));
|
|
150
195
|
}
|
|
151
196
|
/**
|
|
152
197
|
* Return focus to the specified element, providing the selector is valid
|
|
153
198
|
* and the chosen element can be found.
|
|
154
199
|
*/
|
|
155
200
|
_returnFocus() {
|
|
156
|
-
var
|
|
157
|
-
const e = (
|
|
158
|
-
e && ((
|
|
201
|
+
var i, t;
|
|
202
|
+
const e = (i = this.returnFocusAfterCloseSelector) == null ? void 0 : i.trim();
|
|
203
|
+
e && ((t = document.querySelector(e)) == null || t.focus());
|
|
159
204
|
}
|
|
160
205
|
/**
|
|
161
206
|
* Template for the close button element. Called within the
|
|
@@ -165,14 +210,14 @@ class n extends I(P) {
|
|
|
165
210
|
*/
|
|
166
211
|
renderCloseButton() {
|
|
167
212
|
var e;
|
|
168
|
-
return
|
|
213
|
+
return m`
|
|
169
214
|
<pie-icon-button
|
|
170
215
|
@click="${() => {
|
|
171
216
|
this.isOpen = !1;
|
|
172
217
|
}}"
|
|
173
218
|
variant="ghost-secondary"
|
|
174
219
|
class="c-modal-closeBtn"
|
|
175
|
-
aria-label="${((e = this.aria) == null ? void 0 : e.close) ||
|
|
220
|
+
aria-label="${((e = this.aria) == null ? void 0 : e.close) || c}"
|
|
176
221
|
data-test-id="modal-close-button">
|
|
177
222
|
<icon-close></icon-close>
|
|
178
223
|
</pie-icon-button>`;
|
|
@@ -185,16 +230,16 @@ class n extends I(P) {
|
|
|
185
230
|
*/
|
|
186
231
|
renderBackButton() {
|
|
187
232
|
var e;
|
|
188
|
-
return
|
|
233
|
+
return m`
|
|
189
234
|
<pie-icon-button
|
|
190
235
|
@click="${() => {
|
|
191
236
|
this._backButtonClicked = !0, this.isOpen = !1;
|
|
192
237
|
}}"
|
|
193
238
|
variant="ghost-secondary"
|
|
194
239
|
class="c-modal-backBtn"
|
|
195
|
-
aria-label="${((e = this.aria) == null ? void 0 : e.back) ||
|
|
240
|
+
aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
|
|
196
241
|
data-test-id="modal-back-button">
|
|
197
|
-
${this.isRTL ?
|
|
242
|
+
${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
|
|
198
243
|
</pie-icon-button>
|
|
199
244
|
`;
|
|
200
245
|
}
|
|
@@ -208,18 +253,18 @@ class n extends I(P) {
|
|
|
208
253
|
* @private
|
|
209
254
|
*/
|
|
210
255
|
renderLeadingAction() {
|
|
211
|
-
const { text: e, variant:
|
|
212
|
-
return e ?
|
|
256
|
+
const { text: e, variant: i = "primary", ariaLabel: t } = this.leadingAction;
|
|
257
|
+
return e ? m`
|
|
213
258
|
<pie-button
|
|
214
|
-
variant="${
|
|
215
|
-
aria-label="${
|
|
259
|
+
variant="${i}"
|
|
260
|
+
aria-label="${t || c}"
|
|
216
261
|
type="submit"
|
|
217
262
|
?isFullWidth="${this.hasStackedActions}"
|
|
218
263
|
@click="${() => this._handleActionClick("leading")}"
|
|
219
264
|
data-test-id="modal-leading-action">
|
|
220
265
|
${e}
|
|
221
266
|
</pie-button>
|
|
222
|
-
` :
|
|
267
|
+
` : c;
|
|
223
268
|
}
|
|
224
269
|
/**
|
|
225
270
|
* Render supportingAction button depending on prop availability.
|
|
@@ -233,77 +278,77 @@ class n extends I(P) {
|
|
|
233
278
|
* @private
|
|
234
279
|
*/
|
|
235
280
|
renderSupportingAction() {
|
|
236
|
-
const { text: e, variant:
|
|
237
|
-
return e ? this.leadingAction ?
|
|
281
|
+
const { text: e, variant: i = "ghost", ariaLabel: t } = this.supportingAction;
|
|
282
|
+
return e ? this.leadingAction ? m`
|
|
238
283
|
<pie-button
|
|
239
|
-
variant="${
|
|
240
|
-
aria-label="${
|
|
284
|
+
variant="${i}"
|
|
285
|
+
aria-label="${t || c}"
|
|
241
286
|
type="reset"
|
|
242
287
|
?isFullWidth="${this.hasStackedActions}"
|
|
243
288
|
@click="${() => this._handleActionClick("supporting")}"
|
|
244
289
|
data-test-id="modal-supporting-action">
|
|
245
290
|
${e}
|
|
246
291
|
</pie-button>
|
|
247
|
-
` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."),
|
|
292
|
+
` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), c) : c;
|
|
248
293
|
}
|
|
249
294
|
/**
|
|
250
295
|
* Renders the modal inner content and footer of the modal.
|
|
251
296
|
* @private
|
|
252
297
|
*/
|
|
253
298
|
renderModalContentAndFooter() {
|
|
254
|
-
return
|
|
299
|
+
return m`
|
|
255
300
|
<article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
|
|
256
301
|
<div class="c-modal-contentInner">
|
|
257
302
|
<slot></slot>
|
|
258
303
|
</div>
|
|
259
|
-
${this.isLoading ?
|
|
304
|
+
${this.isLoading ? m`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : c}
|
|
260
305
|
</article>
|
|
261
306
|
<footer class="c-modal-footer">
|
|
262
|
-
${this.leadingAction ? this.renderLeadingAction() :
|
|
263
|
-
${this.supportingAction ? this.renderSupportingAction() :
|
|
307
|
+
${this.leadingAction ? this.renderLeadingAction() : c}
|
|
308
|
+
${this.supportingAction ? this.renderSupportingAction() : c}
|
|
264
309
|
</footer>`;
|
|
265
310
|
}
|
|
266
311
|
render() {
|
|
267
312
|
const {
|
|
268
313
|
aria: e,
|
|
269
|
-
hasBackButton:
|
|
270
|
-
hasStackedActions:
|
|
271
|
-
heading:
|
|
272
|
-
headingLevel:
|
|
273
|
-
isDismissible:
|
|
274
|
-
isFooterPinned:
|
|
275
|
-
isFullWidthBelowMid:
|
|
314
|
+
hasBackButton: i,
|
|
315
|
+
hasStackedActions: t,
|
|
316
|
+
heading: o,
|
|
317
|
+
headingLevel: a = "h2",
|
|
318
|
+
isDismissible: d,
|
|
319
|
+
isFooterPinned: p,
|
|
320
|
+
isFullWidthBelowMid: g,
|
|
276
321
|
isLoading: y,
|
|
277
|
-
leadingAction:
|
|
278
|
-
position:
|
|
322
|
+
leadingAction: S,
|
|
323
|
+
position: M,
|
|
279
324
|
size: E,
|
|
280
|
-
supportingAction:
|
|
281
|
-
} = this, O =
|
|
282
|
-
return
|
|
325
|
+
supportingAction: P
|
|
326
|
+
} = this, O = I(a);
|
|
327
|
+
return m`
|
|
283
328
|
<dialog
|
|
284
329
|
id="dialog"
|
|
285
330
|
class="c-modal"
|
|
286
331
|
size="${E}"
|
|
287
|
-
position="${
|
|
288
|
-
?hasActions=${
|
|
289
|
-
?hasBackButton=${
|
|
290
|
-
?hasStackedActions=${
|
|
291
|
-
?isDismissible=${
|
|
292
|
-
?isFooterPinned=${
|
|
293
|
-
?isFullWidthBelowMid=${
|
|
332
|
+
position="${M}"
|
|
333
|
+
?hasActions=${S || P}
|
|
334
|
+
?hasBackButton=${i}
|
|
335
|
+
?hasStackedActions=${t}
|
|
336
|
+
?isDismissible=${d}
|
|
337
|
+
?isFooterPinned=${p}
|
|
338
|
+
?isFullWidthBelowMid=${g}
|
|
294
339
|
?isLoading=${y}
|
|
295
340
|
aria-busy="${y ? "true" : "false"}"
|
|
296
|
-
aria-label="${y && (e == null ? void 0 : e.loading) ||
|
|
341
|
+
aria-label="${y && (e == null ? void 0 : e.loading) || c}"
|
|
297
342
|
data-test-id="pie-modal">
|
|
298
343
|
<header class="c-modal-header">
|
|
299
|
-
${
|
|
344
|
+
${i ? this.renderBackButton() : c}
|
|
300
345
|
<${O} class="c-modal-heading">
|
|
301
|
-
${
|
|
346
|
+
${o}
|
|
302
347
|
</${O}>
|
|
303
|
-
${
|
|
348
|
+
${d ? this.renderCloseButton() : c}
|
|
304
349
|
</header>
|
|
305
350
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
306
|
-
|
|
351
|
+
p ? this.renderModalContentAndFooter() : m`
|
|
307
352
|
<div class="c-modal-scrollContainer">
|
|
308
353
|
${this.renderModalContentAndFooter()}
|
|
309
354
|
</div>
|
|
@@ -311,68 +356,68 @@ class n extends I(P) {
|
|
|
311
356
|
</dialog>`;
|
|
312
357
|
}
|
|
313
358
|
}
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
],
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
],
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
],
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
],
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
],
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
],
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
],
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
],
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
],
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
],
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
],
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
],
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
],
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
],
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
],
|
|
364
|
-
|
|
359
|
+
l.styles = T(J);
|
|
360
|
+
r([
|
|
361
|
+
s({ type: Object })
|
|
362
|
+
], l.prototype, "aria", 2);
|
|
363
|
+
r([
|
|
364
|
+
s({ type: String }),
|
|
365
|
+
G(v)
|
|
366
|
+
], l.prototype, "heading", 2);
|
|
367
|
+
r([
|
|
368
|
+
s(),
|
|
369
|
+
C(v, Q, "h2")
|
|
370
|
+
], l.prototype, "headingLevel", 2);
|
|
371
|
+
r([
|
|
372
|
+
s({ type: Boolean })
|
|
373
|
+
], l.prototype, "hasBackButton", 2);
|
|
374
|
+
r([
|
|
375
|
+
s({ type: Boolean })
|
|
376
|
+
], l.prototype, "hasStackedActions", 2);
|
|
377
|
+
r([
|
|
378
|
+
s({ type: Boolean, reflect: !0 })
|
|
379
|
+
], l.prototype, "isDismissible", 2);
|
|
380
|
+
r([
|
|
381
|
+
s({ type: Boolean })
|
|
382
|
+
], l.prototype, "isFooterPinned", 2);
|
|
383
|
+
r([
|
|
384
|
+
s({ type: Boolean })
|
|
385
|
+
], l.prototype, "isFullWidthBelowMid", 2);
|
|
386
|
+
r([
|
|
387
|
+
s({ type: Boolean, reflect: !0 })
|
|
388
|
+
], l.prototype, "isLoading", 2);
|
|
389
|
+
r([
|
|
390
|
+
s({ type: Boolean })
|
|
391
|
+
], l.prototype, "isOpen", 2);
|
|
392
|
+
r([
|
|
393
|
+
s({ type: Object })
|
|
394
|
+
], l.prototype, "leadingAction", 2);
|
|
395
|
+
r([
|
|
396
|
+
s(),
|
|
397
|
+
C(v, K, "center")
|
|
398
|
+
], l.prototype, "position", 2);
|
|
399
|
+
r([
|
|
400
|
+
s()
|
|
401
|
+
], l.prototype, "returnFocusAfterCloseSelector", 2);
|
|
402
|
+
r([
|
|
403
|
+
s(),
|
|
404
|
+
C(v, Z, "medium")
|
|
405
|
+
], l.prototype, "size", 2);
|
|
406
|
+
r([
|
|
407
|
+
s({ type: Object })
|
|
408
|
+
], l.prototype, "supportingAction", 2);
|
|
409
|
+
r([
|
|
365
410
|
N("dialog")
|
|
366
|
-
],
|
|
367
|
-
|
|
411
|
+
], l.prototype, "_dialog", 2);
|
|
412
|
+
X(v, l);
|
|
368
413
|
export {
|
|
369
414
|
_ as ON_MODAL_BACK_EVENT,
|
|
370
415
|
x as ON_MODAL_CLOSE_EVENT,
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
416
|
+
ee as ON_MODAL_LEADING_ACTION_CLICK,
|
|
417
|
+
b as ON_MODAL_OPEN_EVENT,
|
|
418
|
+
ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
419
|
+
l as PieModal,
|
|
420
|
+
Q as headingLevels,
|
|
421
|
+
K as positions,
|
|
422
|
+
Z as sizes
|
|
378
423
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import * as f from "react";
|
|
2
2
|
import { PieModal as E } from "./index.js";
|
|
3
|
-
import { ON_MODAL_BACK_EVENT as
|
|
3
|
+
import { ON_MODAL_BACK_EVENT as V, ON_MODAL_CLOSE_EVENT as $, ON_MODAL_LEADING_ACTION_CLICK as j, ON_MODAL_OPEN_EVENT as B, ON_MODAL_SUPPORTING_ACTION_CLICK as H, headingLevels as U, positions as W, sizes as z } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/static-html.js";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
7
|
import "@justeattakeaway/pie-button";
|
|
8
8
|
import "@justeattakeaway/pie-icon-button";
|
|
9
|
-
import "@justeattakeaway/pie-webc-core";
|
|
10
9
|
import "@justeattakeaway/pie-icons-webc/IconClose";
|
|
11
10
|
import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
|
|
12
11
|
import "@justeattakeaway/pie-icons-webc/IconChevronRight";
|
|
@@ -66,7 +65,7 @@ function y(o = window.React, t, d, c, m) {
|
|
|
66
65
|
const M = s.forwardRef((p, e) => l(v, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
|
|
67
66
|
return M.displayName = v.displayName, M;
|
|
68
67
|
}
|
|
69
|
-
const
|
|
68
|
+
const R = y({
|
|
70
69
|
displayName: "PieModal",
|
|
71
70
|
elementClass: E,
|
|
72
71
|
react: f,
|
|
@@ -85,13 +84,13 @@ const x = y({
|
|
|
85
84
|
}
|
|
86
85
|
});
|
|
87
86
|
export {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
87
|
+
V as ON_MODAL_BACK_EVENT,
|
|
88
|
+
$ as ON_MODAL_CLOSE_EVENT,
|
|
89
|
+
j as ON_MODAL_LEADING_ACTION_CLICK,
|
|
90
|
+
B as ON_MODAL_OPEN_EVENT,
|
|
91
|
+
H as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
92
|
+
R as PieModal,
|
|
93
|
+
U as headingLevels,
|
|
94
|
+
W as positions,
|
|
95
|
+
z as sizes
|
|
97
96
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.32.
|
|
3
|
+
"version": "0.32.2",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@justeat/pie-design-tokens": "5.9.0",
|
|
32
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
33
|
-
"@types/body-scroll-lock": "3.1.
|
|
32
|
+
"@justeattakeaway/pie-components-config": "0.6.0",
|
|
33
|
+
"@types/body-scroll-lock": "3.1.2"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"body-scroll-lock": "3.1.5"
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"extends": "../../../package.json"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-button": "0.
|
|
43
|
-
"@justeattakeaway/pie-icon-button": "0.21.
|
|
42
|
+
"@justeattakeaway/pie-button": "0.38.0",
|
|
43
|
+
"@justeattakeaway/pie-icon-button": "0.21.2",
|
|
44
44
|
"@justeattakeaway/pie-icons-webc": "0.11.1",
|
|
45
45
|
"@justeattakeaway/pie-spinner": "0.2.1",
|
|
46
46
|
"@justeattakeaway/pie-webc-core": "0.11.0",
|