@justeattakeaway/pie-modal 0.38.5 → 0.38.7
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/custom-elements.json +0 -19
- package/dist/index.d.ts +0 -12
- package/dist/index.js +95 -114
- package/dist/react.d.ts +0 -12
- package/package.json +6 -6
- package/src/index.ts +11 -28
package/custom-elements.json
CHANGED
|
@@ -509,25 +509,6 @@
|
|
|
509
509
|
}
|
|
510
510
|
}
|
|
511
511
|
]
|
|
512
|
-
},
|
|
513
|
-
{
|
|
514
|
-
"kind": "method",
|
|
515
|
-
"name": "_dispatchModalCustomEvent",
|
|
516
|
-
"privacy": "private",
|
|
517
|
-
"return": {
|
|
518
|
-
"type": {
|
|
519
|
-
"text": "void"
|
|
520
|
-
}
|
|
521
|
-
},
|
|
522
|
-
"parameters": [
|
|
523
|
-
{
|
|
524
|
-
"name": "eventType",
|
|
525
|
-
"type": {
|
|
526
|
-
"text": "string"
|
|
527
|
-
}
|
|
528
|
-
}
|
|
529
|
-
],
|
|
530
|
-
"description": "Note: We should aim to have a shareable event helper system to allow\nus to share this across components in-future.\n\nDispatch a custom event.\n\nTo be used whenever we have behavioural events we want to\nbubble up through the modal."
|
|
531
512
|
}
|
|
532
513
|
],
|
|
533
514
|
"events": [
|
package/dist/index.d.ts
CHANGED
|
@@ -239,18 +239,6 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
239
239
|
* @param {MouseEvent} event - the click event targetting the modal/backdrop
|
|
240
240
|
*/
|
|
241
241
|
private _handleDialogLightDismiss;
|
|
242
|
-
/**
|
|
243
|
-
* Note: We should aim to have a shareable event helper system to allow
|
|
244
|
-
* us to share this across components in-future.
|
|
245
|
-
*
|
|
246
|
-
* Dispatch a custom event.
|
|
247
|
-
*
|
|
248
|
-
* To be used whenever we have behavioural events we want to
|
|
249
|
-
* bubble up through the modal.
|
|
250
|
-
*
|
|
251
|
-
* @param {string} eventType
|
|
252
|
-
*/
|
|
253
|
-
private _dispatchModalCustomEvent;
|
|
254
242
|
}
|
|
255
243
|
|
|
256
244
|
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof LitElement;
|
package/dist/index.js
CHANGED
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { html as m, unsafeStatic as
|
|
3
|
-
import { property as d, query as
|
|
1
|
+
import { LitElement as P, nothing as s, unsafeCSS as F } from "lit";
|
|
2
|
+
import { html as m, unsafeStatic as N } from "lit/static-html.js";
|
|
3
|
+
import { property as d, query as I } from "lit/decorators.js";
|
|
4
4
|
import "@justeattakeaway/pie-button";
|
|
5
5
|
import "@justeattakeaway/pie-icon-button";
|
|
6
|
-
import { RtlMixin as
|
|
6
|
+
import { RtlMixin as R, dispatchCustomEvent as h, requiredProperty as j, validPropertyValues as C, defineCustomElement as W } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-icons-webc/IconClose";
|
|
8
8
|
import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/IconChevronRight";
|
|
10
10
|
import "@justeattakeaway/pie-spinner";
|
|
11
|
-
function
|
|
12
|
-
if (Array.isArray(
|
|
13
|
-
for (var e = 0, i = Array(
|
|
14
|
-
i[e] =
|
|
11
|
+
function Y(n) {
|
|
12
|
+
if (Array.isArray(n)) {
|
|
13
|
+
for (var e = 0, i = Array(n.length); e < n.length; e++)
|
|
14
|
+
i[e] = n[e];
|
|
15
15
|
return i;
|
|
16
16
|
} else
|
|
17
|
-
return Array.from(
|
|
17
|
+
return Array.from(n);
|
|
18
18
|
}
|
|
19
|
-
var
|
|
19
|
+
var O = !1;
|
|
20
20
|
if (typeof window < "u") {
|
|
21
|
-
var
|
|
21
|
+
var B = {
|
|
22
22
|
get passive() {
|
|
23
|
-
|
|
23
|
+
O = !0;
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
|
-
window.addEventListener("testPassive", null,
|
|
26
|
+
window.addEventListener("testPassive", null, B), window.removeEventListener("testPassive", null, B);
|
|
27
27
|
}
|
|
28
|
-
var
|
|
28
|
+
var S = 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 = [], w = !1, L = -1, u = void 0, f = void 0, M = function(e) {
|
|
29
29
|
return g.some(function(i) {
|
|
30
30
|
return !!(i.options.allowTouchMove && i.options.allowTouchMove(e));
|
|
31
31
|
});
|
|
32
|
-
},
|
|
32
|
+
}, y = function(e) {
|
|
33
33
|
var i = e || window.event;
|
|
34
|
-
return
|
|
35
|
-
},
|
|
36
|
-
if (
|
|
34
|
+
return M(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
|
|
35
|
+
}, V = function(e) {
|
|
36
|
+
if (f === void 0) {
|
|
37
37
|
var i = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
|
|
38
|
-
i && o > 0 && (
|
|
38
|
+
i && o > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
|
|
39
39
|
}
|
|
40
|
-
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
},
|
|
40
|
+
u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
41
|
+
}, q = function() {
|
|
42
|
+
f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
|
|
43
|
+
}, H = function(e) {
|
|
44
44
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
45
|
-
}, H = function(e, i) {
|
|
46
|
-
var o = e.targetTouches[0].clientY - S;
|
|
47
|
-
return L(e.target) ? !1 : i && i.scrollTop === 0 && o > 0 || q(i) && o < 0 ? w(e) : (e.stopPropagation(), !0);
|
|
48
45
|
}, U = function(e, i) {
|
|
46
|
+
var o = e.targetTouches[0].clientY - L;
|
|
47
|
+
return M(e.target) ? !1 : i && i.scrollTop === 0 && o > 0 || H(i) && o < 0 ? y(e) : (e.stopPropagation(), !0);
|
|
48
|
+
}, K = function(e, i) {
|
|
49
49
|
if (!e) {
|
|
50
50
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
51
51
|
return;
|
|
@@ -57,38 +57,38 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
57
57
|
targetElement: e,
|
|
58
58
|
options: i || {}
|
|
59
59
|
};
|
|
60
|
-
g = [].concat(
|
|
61
|
-
t.targetTouches.length === 1 && (
|
|
60
|
+
g = [].concat(Y(g), [o]), S ? (e.ontouchstart = function(t) {
|
|
61
|
+
t.targetTouches.length === 1 && (L = t.targetTouches[0].clientY);
|
|
62
62
|
}, e.ontouchmove = function(t) {
|
|
63
|
-
t.targetTouches.length === 1 &&
|
|
64
|
-
},
|
|
63
|
+
t.targetTouches.length === 1 && U(t, e);
|
|
64
|
+
}, w || (document.addEventListener("touchmove", y, O ? { passive: !1 } : void 0), w = !0)) : V(i);
|
|
65
65
|
}
|
|
66
|
-
},
|
|
66
|
+
}, G = function(e) {
|
|
67
67
|
if (!e) {
|
|
68
68
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
69
69
|
return;
|
|
70
70
|
}
|
|
71
71
|
g = g.filter(function(i) {
|
|
72
72
|
return i.targetElement !== e;
|
|
73
|
-
}),
|
|
73
|
+
}), S ? (e.ontouchstart = null, e.ontouchmove = null, w && g.length === 0 && (document.removeEventListener("touchmove", y, O ? { passive: !1 } : void 0), w = !1)) : g.length || q();
|
|
74
74
|
};
|
|
75
|
-
const
|
|
76
|
-
`,
|
|
77
|
-
var
|
|
78
|
-
for (var t = o > 1 ? void 0 : o ?
|
|
79
|
-
(c =
|
|
80
|
-
return o && t &&
|
|
75
|
+
const X = `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)}}.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],.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]>.c-modal-scrollContainer,.c-modal[size=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-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-start:var(--dt-spacing-d);margin-inline-end: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-start:var(--dt-spacing-e);margin-inline-end: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-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: 768px){.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: 768px){.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);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-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);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;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}}
|
|
76
|
+
`, J = ["h1", "h2", "h3", "h4", "h5", "h6"], Q = ["small", "medium", "large"], Z = ["top", "center"], _ = "pie-modal-close", k = "pie-modal-open", z = "pie-modal-back", ee = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click";
|
|
77
|
+
var oe = Object.defineProperty, te = Object.getOwnPropertyDescriptor, l = (n, e, i, o) => {
|
|
78
|
+
for (var t = o > 1 ? void 0 : o ? te(e, i) : e, r = n.length - 1, c; r >= 0; r--)
|
|
79
|
+
(c = n[r]) && (t = (o ? c(e, i, t) : c(t)) || t);
|
|
80
|
+
return o && t && oe(e, i, t), t;
|
|
81
81
|
};
|
|
82
|
-
const
|
|
83
|
-
class
|
|
82
|
+
const v = "pie-modal";
|
|
83
|
+
class a extends R(P) {
|
|
84
84
|
constructor() {
|
|
85
85
|
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
86
|
this.isDismissible || e.preventDefault();
|
|
87
87
|
}, this._handleDialogLightDismiss = (e) => {
|
|
88
|
-
var
|
|
88
|
+
var b;
|
|
89
89
|
if (!this.isDismissible)
|
|
90
90
|
return;
|
|
91
|
-
const i = (
|
|
91
|
+
const i = (b = this._dialog) == null ? void 0 : b.getBoundingClientRect(), {
|
|
92
92
|
top: o = 0,
|
|
93
93
|
bottom: t = 0,
|
|
94
94
|
left: r = 0,
|
|
@@ -100,10 +100,10 @@ class n extends I(T) {
|
|
|
100
100
|
};
|
|
101
101
|
}
|
|
102
102
|
connectedCallback() {
|
|
103
|
-
super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(
|
|
103
|
+
super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(k, (e) => this._handleModalOpened(e)), document.addEventListener(_, (e) => this._handleModalClosed(e)), document.addEventListener(z, (e) => this._handleModalClosed(e));
|
|
104
104
|
}
|
|
105
105
|
disconnectedCallback() {
|
|
106
|
-
document.removeEventListener(
|
|
106
|
+
document.removeEventListener(k, (e) => this._handleModalOpened(e)), document.removeEventListener(_, (e) => this._handleModalClosed(e)), document.removeEventListener(z, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
|
|
107
107
|
}
|
|
108
108
|
async firstUpdated(e) {
|
|
109
109
|
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-209f54f8.js").then((o) => o.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._dialog.addEventListener("close", () => {
|
|
@@ -121,7 +121,7 @@ class n extends I(T) {
|
|
|
121
121
|
const { targetModal: i } = e.detail;
|
|
122
122
|
if (i === this) {
|
|
123
123
|
const p = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
|
|
124
|
-
if (p && ("scrollTo" in window && window.scrollTo(0, 0),
|
|
124
|
+
if (p && ("scrollTo" in window && window.scrollTo(0, 0), K(p)), (t = this._dialog) != null && t.hasAttribute("open") || !((r = this._dialog) != null && r.isConnected))
|
|
125
125
|
return;
|
|
126
126
|
(c = this._dialog) == null || c.showModal();
|
|
127
127
|
}
|
|
@@ -134,21 +134,21 @@ class n extends I(T) {
|
|
|
134
134
|
const { targetModal: i } = e.detail;
|
|
135
135
|
if (i === this) {
|
|
136
136
|
const r = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
|
|
137
|
-
r &&
|
|
137
|
+
r && G(r), (t = this._dialog) == null || t.close(), this._returnFocus();
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
// Handles the value of the isOpen property on first render of the component
|
|
141
141
|
_handleModalOpenStateOnFirstRender(e) {
|
|
142
|
-
e.get("isOpen") === void 0 && this.isOpen && this
|
|
142
|
+
e.get("isOpen") === void 0 && this.isOpen && h(this, k, { targetModal: this });
|
|
143
143
|
}
|
|
144
144
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
145
145
|
_handleModalOpenStateChanged(e) {
|
|
146
146
|
const i = e.get("isOpen");
|
|
147
|
-
i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, this
|
|
147
|
+
i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, z, { targetModal: this })) : h(this, _, { targetModal: this }) : h(this, k, { targetModal: this }));
|
|
148
148
|
}
|
|
149
149
|
_handleActionClick(e) {
|
|
150
150
|
var i, o;
|
|
151
|
-
e === "leading" ? ((i = this._dialog) == null || i.close("leading"), this
|
|
151
|
+
e === "leading" ? ((i = this._dialog) == null || i.close("leading"), h(this, ee, { targetModal: this })) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), h(this, ie, { targetModal: this }));
|
|
152
152
|
}
|
|
153
153
|
/**
|
|
154
154
|
* Return focus to the specified element, providing the selector is valid
|
|
@@ -274,34 +274,34 @@ class n extends I(T) {
|
|
|
274
274
|
headingLevel: r = "h2",
|
|
275
275
|
isDismissible: c,
|
|
276
276
|
isFooterPinned: p,
|
|
277
|
-
isFullWidthBelowMid:
|
|
278
|
-
isLoading:
|
|
279
|
-
leadingAction:
|
|
280
|
-
position:
|
|
277
|
+
isFullWidthBelowMid: b,
|
|
278
|
+
isLoading: x,
|
|
279
|
+
leadingAction: $,
|
|
280
|
+
position: D,
|
|
281
281
|
size: E,
|
|
282
|
-
supportingAction:
|
|
283
|
-
} = this,
|
|
282
|
+
supportingAction: T
|
|
283
|
+
} = this, A = N(r);
|
|
284
284
|
return m`
|
|
285
285
|
<dialog
|
|
286
286
|
id="dialog"
|
|
287
287
|
class="c-modal"
|
|
288
288
|
size="${E || "medium"}"
|
|
289
|
-
position="${
|
|
290
|
-
?hasActions=${
|
|
289
|
+
position="${D || "center"}"
|
|
290
|
+
?hasActions=${$ || T}
|
|
291
291
|
?hasBackButton=${i}
|
|
292
292
|
?hasStackedActions=${o}
|
|
293
293
|
?isDismissible=${c}
|
|
294
294
|
?isFooterPinned=${p}
|
|
295
|
-
?isFullWidthBelowMid=${
|
|
296
|
-
?isLoading=${
|
|
297
|
-
aria-busy="${
|
|
298
|
-
aria-label="${
|
|
295
|
+
?isFullWidthBelowMid=${b}
|
|
296
|
+
?isLoading=${x}
|
|
297
|
+
aria-busy="${x ? "true" : "false"}"
|
|
298
|
+
aria-label="${x && (e == null ? void 0 : e.loading) || s}"
|
|
299
299
|
data-test-id="pie-modal">
|
|
300
300
|
<header class="c-modal-header">
|
|
301
301
|
${i ? this.renderBackButton() : s}
|
|
302
|
-
<${
|
|
302
|
+
<${A} class="c-modal-heading">
|
|
303
303
|
${t}
|
|
304
|
-
</${
|
|
304
|
+
</${A}>
|
|
305
305
|
${c ? this.renderCloseButton() : s}
|
|
306
306
|
</header>
|
|
307
307
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
@@ -312,88 +312,69 @@ class n extends I(T) {
|
|
|
312
312
|
`}
|
|
313
313
|
</dialog>`;
|
|
314
314
|
}
|
|
315
|
-
/**
|
|
316
|
-
* Note: We should aim to have a shareable event helper system to allow
|
|
317
|
-
* us to share this across components in-future.
|
|
318
|
-
*
|
|
319
|
-
* Dispatch a custom event.
|
|
320
|
-
*
|
|
321
|
-
* To be used whenever we have behavioural events we want to
|
|
322
|
-
* bubble up through the modal.
|
|
323
|
-
*
|
|
324
|
-
* @param {string} eventType
|
|
325
|
-
*/
|
|
326
|
-
_dispatchModalCustomEvent(e) {
|
|
327
|
-
const i = new CustomEvent(e, {
|
|
328
|
-
bubbles: !0,
|
|
329
|
-
composed: !0,
|
|
330
|
-
detail: { targetModal: this }
|
|
331
|
-
});
|
|
332
|
-
this.dispatchEvent(i);
|
|
333
|
-
}
|
|
334
315
|
}
|
|
335
|
-
|
|
316
|
+
a.styles = F(X);
|
|
336
317
|
l([
|
|
337
318
|
d({ type: Object })
|
|
338
|
-
],
|
|
319
|
+
], a.prototype, "aria", 2);
|
|
339
320
|
l([
|
|
340
321
|
d({ type: String }),
|
|
341
|
-
|
|
342
|
-
],
|
|
322
|
+
j(v)
|
|
323
|
+
], a.prototype, "heading", 2);
|
|
343
324
|
l([
|
|
344
325
|
d(),
|
|
345
|
-
|
|
346
|
-
],
|
|
326
|
+
C(v, J, "h2")
|
|
327
|
+
], a.prototype, "headingLevel", 2);
|
|
347
328
|
l([
|
|
348
329
|
d({ type: Boolean })
|
|
349
|
-
],
|
|
330
|
+
], a.prototype, "hasBackButton", 2);
|
|
350
331
|
l([
|
|
351
332
|
d({ type: Boolean })
|
|
352
|
-
],
|
|
333
|
+
], a.prototype, "hasStackedActions", 2);
|
|
353
334
|
l([
|
|
354
335
|
d({ type: Boolean, reflect: !0 })
|
|
355
|
-
],
|
|
336
|
+
], a.prototype, "isDismissible", 2);
|
|
356
337
|
l([
|
|
357
338
|
d({ type: Boolean })
|
|
358
|
-
],
|
|
339
|
+
], a.prototype, "isFooterPinned", 2);
|
|
359
340
|
l([
|
|
360
341
|
d({ type: Boolean })
|
|
361
|
-
],
|
|
342
|
+
], a.prototype, "isFullWidthBelowMid", 2);
|
|
362
343
|
l([
|
|
363
344
|
d({ type: Boolean, reflect: !0 })
|
|
364
|
-
],
|
|
345
|
+
], a.prototype, "isLoading", 2);
|
|
365
346
|
l([
|
|
366
347
|
d({ type: Boolean })
|
|
367
|
-
],
|
|
348
|
+
], a.prototype, "isOpen", 2);
|
|
368
349
|
l([
|
|
369
350
|
d({ type: Object })
|
|
370
|
-
],
|
|
351
|
+
], a.prototype, "leadingAction", 2);
|
|
371
352
|
l([
|
|
372
353
|
d(),
|
|
373
|
-
|
|
374
|
-
],
|
|
354
|
+
C(v, Z, "center")
|
|
355
|
+
], a.prototype, "position", 2);
|
|
375
356
|
l([
|
|
376
357
|
d()
|
|
377
|
-
],
|
|
358
|
+
], a.prototype, "returnFocusAfterCloseSelector", 2);
|
|
378
359
|
l([
|
|
379
360
|
d(),
|
|
380
|
-
|
|
381
|
-
],
|
|
361
|
+
C(v, Q, "medium")
|
|
362
|
+
], a.prototype, "size", 2);
|
|
382
363
|
l([
|
|
383
364
|
d({ type: Object })
|
|
384
|
-
],
|
|
365
|
+
], a.prototype, "supportingAction", 2);
|
|
385
366
|
l([
|
|
386
|
-
|
|
387
|
-
],
|
|
388
|
-
|
|
367
|
+
I("dialog")
|
|
368
|
+
], a.prototype, "_dialog", 2);
|
|
369
|
+
W(v, a);
|
|
389
370
|
export {
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
371
|
+
z as ON_MODAL_BACK_EVENT,
|
|
372
|
+
_ as ON_MODAL_CLOSE_EVENT,
|
|
373
|
+
ee as ON_MODAL_LEADING_ACTION_CLICK,
|
|
374
|
+
k as ON_MODAL_OPEN_EVENT,
|
|
375
|
+
ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
376
|
+
a as PieModal,
|
|
377
|
+
J as headingLevels,
|
|
378
|
+
Z as positions,
|
|
379
|
+
Q as sizes
|
|
399
380
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -238,18 +238,6 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
|
|
|
238
238
|
* @param {MouseEvent} event - the click event targetting the modal/backdrop
|
|
239
239
|
*/
|
|
240
240
|
private _handleDialogLightDismiss;
|
|
241
|
-
/**
|
|
242
|
-
* Note: We should aim to have a shareable event helper system to allow
|
|
243
|
-
* us to share this across components in-future.
|
|
244
|
-
*
|
|
245
|
-
* Dispatch a custom event.
|
|
246
|
-
*
|
|
247
|
-
* To be used whenever we have behavioural events we want to
|
|
248
|
-
* bubble up through the modal.
|
|
249
|
-
*
|
|
250
|
-
* @param {string} eventType
|
|
251
|
-
*/
|
|
252
|
-
private _dispatchModalCustomEvent;
|
|
253
241
|
}
|
|
254
242
|
|
|
255
243
|
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof LitElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.38.
|
|
3
|
+
"version": "0.38.7",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
"extends": "../../../package.json"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@justeattakeaway/pie-button": "0.45.
|
|
46
|
-
"@justeattakeaway/pie-icon-button": "0.27.
|
|
47
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
48
|
-
"@justeattakeaway/pie-spinner": "0.5.
|
|
49
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
45
|
+
"@justeattakeaway/pie-button": "0.45.5",
|
|
46
|
+
"@justeattakeaway/pie-icon-button": "0.27.5",
|
|
47
|
+
"@justeattakeaway/pie-icons-webc": "0.18.0",
|
|
48
|
+
"@justeattakeaway/pie-spinner": "0.5.4",
|
|
49
|
+
"@justeattakeaway/pie-webc-core": "0.19.0",
|
|
50
50
|
"body-scroll-lock": "3.1.5",
|
|
51
51
|
"dialog-polyfill": "0.5.6"
|
|
52
52
|
},
|
package/src/index.ts
CHANGED
|
@@ -8,7 +8,11 @@ import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
|
|
|
8
8
|
import '@justeattakeaway/pie-button';
|
|
9
9
|
import '@justeattakeaway/pie-icon-button';
|
|
10
10
|
import {
|
|
11
|
-
requiredProperty,
|
|
11
|
+
requiredProperty,
|
|
12
|
+
RtlMixin,
|
|
13
|
+
validPropertyValues,
|
|
14
|
+
defineCustomElement,
|
|
15
|
+
dispatchCustomEvent,
|
|
12
16
|
} from '@justeattakeaway/pie-webc-core';
|
|
13
17
|
import '@justeattakeaway/pie-icons-webc/IconClose';
|
|
14
18
|
import '@justeattakeaway/pie-icons-webc/IconChevronLeft';
|
|
@@ -203,7 +207,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
|
|
|
203
207
|
const previousValue = changedProperties.get('isOpen');
|
|
204
208
|
|
|
205
209
|
if (previousValue === undefined && this.isOpen) {
|
|
206
|
-
this
|
|
210
|
+
dispatchCustomEvent(this, ON_MODAL_OPEN_EVENT, { targetModal: this });
|
|
207
211
|
}
|
|
208
212
|
}
|
|
209
213
|
|
|
@@ -216,12 +220,12 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
|
|
|
216
220
|
if (this._backButtonClicked) {
|
|
217
221
|
// Reset the flag
|
|
218
222
|
this._backButtonClicked = false;
|
|
219
|
-
this
|
|
223
|
+
dispatchCustomEvent(this, ON_MODAL_BACK_EVENT, { targetModal: this });
|
|
220
224
|
} else {
|
|
221
|
-
this
|
|
225
|
+
dispatchCustomEvent(this, ON_MODAL_CLOSE_EVENT, { targetModal: this });
|
|
222
226
|
}
|
|
223
227
|
} else {
|
|
224
|
-
this
|
|
228
|
+
dispatchCustomEvent(this, ON_MODAL_OPEN_EVENT, { targetModal: this });
|
|
225
229
|
}
|
|
226
230
|
}
|
|
227
231
|
}
|
|
@@ -229,10 +233,10 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
|
|
|
229
233
|
private _handleActionClick (actionType: ModalActionType) : void {
|
|
230
234
|
if (actionType === 'leading') {
|
|
231
235
|
this._dialog?.close('leading');
|
|
232
|
-
this
|
|
236
|
+
dispatchCustomEvent(this, ON_MODAL_LEADING_ACTION_CLICK, { targetModal: this });
|
|
233
237
|
} else if (actionType === 'supporting') {
|
|
234
238
|
this._dialog?.close('supporting');
|
|
235
|
-
this
|
|
239
|
+
dispatchCustomEvent(this, ON_MODAL_SUPPORTING_ACTION_CLICK, { targetModal: this });
|
|
236
240
|
}
|
|
237
241
|
}
|
|
238
242
|
|
|
@@ -453,27 +457,6 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
|
|
|
453
457
|
this.isOpen = false;
|
|
454
458
|
}
|
|
455
459
|
};
|
|
456
|
-
|
|
457
|
-
/**
|
|
458
|
-
* Note: We should aim to have a shareable event helper system to allow
|
|
459
|
-
* us to share this across components in-future.
|
|
460
|
-
*
|
|
461
|
-
* Dispatch a custom event.
|
|
462
|
-
*
|
|
463
|
-
* To be used whenever we have behavioural events we want to
|
|
464
|
-
* bubble up through the modal.
|
|
465
|
-
*
|
|
466
|
-
* @param {string} eventType
|
|
467
|
-
*/
|
|
468
|
-
private _dispatchModalCustomEvent (eventType: string): void {
|
|
469
|
-
const event = new CustomEvent<ModalEventDetail>(eventType, {
|
|
470
|
-
bubbles: true,
|
|
471
|
-
composed: true,
|
|
472
|
-
detail: { targetModal: this },
|
|
473
|
-
});
|
|
474
|
-
|
|
475
|
-
this.dispatchEvent(event);
|
|
476
|
-
}
|
|
477
460
|
}
|
|
478
461
|
|
|
479
462
|
defineCustomElement(componentSelector, PieModal);
|