@justeattakeaway/pie-modal 1.10.0 → 1.11.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/custom-elements.json +9 -6
- package/dist/index.d.ts +2 -5
- package/dist/index.js +128 -128
- package/dist/react.d.ts +2 -5
- package/package.json +9 -9
- package/src/index.ts +13 -8
- package/src/modal.scss +4 -0
package/custom-elements.json
CHANGED
|
@@ -282,6 +282,15 @@
|
|
|
282
282
|
},
|
|
283
283
|
"privacy": "private"
|
|
284
284
|
},
|
|
285
|
+
{
|
|
286
|
+
"kind": "field",
|
|
287
|
+
"name": "_scrollableContainer",
|
|
288
|
+
"type": {
|
|
289
|
+
"text": "HTMLElement | null"
|
|
290
|
+
},
|
|
291
|
+
"privacy": "private",
|
|
292
|
+
"default": "null"
|
|
293
|
+
},
|
|
285
294
|
{
|
|
286
295
|
"kind": "field",
|
|
287
296
|
"name": "_backButtonClicked",
|
|
@@ -628,12 +637,6 @@
|
|
|
628
637
|
"name": "pie-modal-supporting-action-click"
|
|
629
638
|
}
|
|
630
639
|
],
|
|
631
|
-
"mixins": [
|
|
632
|
-
{
|
|
633
|
-
"name": "RtlMixin",
|
|
634
|
-
"package": "@justeattakeaway/pie-webc-core"
|
|
635
|
-
}
|
|
636
|
-
],
|
|
637
640
|
"superclass": {
|
|
638
641
|
"name": "PieElement",
|
|
639
642
|
"package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import { CSSResult } from 'lit';
|
|
3
|
-
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
4
|
import { PropertyValues } from 'lit';
|
|
6
|
-
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
5
|
import { TemplateResult } from 'lit';
|
|
8
6
|
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
9
7
|
|
|
@@ -153,7 +151,7 @@ export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-ac
|
|
|
153
151
|
* @slot footer - The footer slot
|
|
154
152
|
* @slot - Default slot
|
|
155
153
|
*/
|
|
156
|
-
export declare class PieModal extends
|
|
154
|
+
export declare class PieModal extends PieElement implements ModalProps {
|
|
157
155
|
aria: ModalProps['aria'];
|
|
158
156
|
heading: string;
|
|
159
157
|
headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
@@ -170,6 +168,7 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
170
168
|
size: "medium" | "large" | "small";
|
|
171
169
|
supportingAction: ModalProps['supportingAction'];
|
|
172
170
|
private _dialog;
|
|
171
|
+
private _scrollableContainer;
|
|
173
172
|
private _backButtonClicked;
|
|
174
173
|
private _abortController;
|
|
175
174
|
private _escKeyAbortController;
|
|
@@ -284,8 +283,6 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
284
283
|
private _handleDialogLightDismiss;
|
|
285
284
|
}
|
|
286
285
|
|
|
287
|
-
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
288
|
-
|
|
289
286
|
export declare const positions: readonly ["top", "center"];
|
|
290
287
|
|
|
291
288
|
export declare const sizes: readonly ["small", "medium", "large"];
|
package/dist/index.js
CHANGED
|
@@ -1,87 +1,86 @@
|
|
|
1
|
-
import { LitElement as F,
|
|
2
|
-
import { html as
|
|
1
|
+
import { LitElement as F, unsafeCSS as P, nothing as g } from "lit";
|
|
2
|
+
import { html as s, unsafeStatic as T } from "lit/static-html.js";
|
|
3
3
|
import { property as d, query as K } from "lit/decorators.js";
|
|
4
|
-
import { classMap as
|
|
5
|
-
import { ifDefined as
|
|
4
|
+
import { classMap as z } from "lit/directives/class-map.js";
|
|
5
|
+
import { ifDefined as b } from "lit/directives/if-defined.js";
|
|
6
6
|
import "@justeattakeaway/pie-button";
|
|
7
7
|
import "@justeattakeaway/pie-icon-button";
|
|
8
|
-
import {
|
|
8
|
+
import { requiredProperty as I, validPropertyValues as C, safeCustomElement as N, dispatchCustomEvent as h } 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
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
12
11
|
import "@justeattakeaway/pie-spinner";
|
|
13
12
|
const k = class k extends F {
|
|
14
13
|
willUpdate() {
|
|
15
14
|
this.getAttribute("v") || this.setAttribute("v", k.v);
|
|
16
15
|
}
|
|
17
16
|
};
|
|
18
|
-
k.v = "1.
|
|
17
|
+
k.v = "1.11.0";
|
|
19
18
|
let x = k;
|
|
20
|
-
function
|
|
21
|
-
if (Array.isArray(
|
|
22
|
-
for (var
|
|
23
|
-
t[
|
|
19
|
+
function W(e) {
|
|
20
|
+
if (Array.isArray(e)) {
|
|
21
|
+
for (var o = 0, t = Array(e.length); o < e.length; o++)
|
|
22
|
+
t[o] = e[o];
|
|
24
23
|
return t;
|
|
25
24
|
} else
|
|
26
|
-
return Array.from(
|
|
25
|
+
return Array.from(e);
|
|
27
26
|
}
|
|
28
|
-
var
|
|
27
|
+
var B = !1;
|
|
29
28
|
if (typeof window < "u") {
|
|
30
29
|
var A = {
|
|
31
30
|
get passive() {
|
|
32
|
-
|
|
31
|
+
B = !0;
|
|
33
32
|
}
|
|
34
33
|
};
|
|
35
34
|
window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
|
|
36
35
|
}
|
|
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 = [],
|
|
36
|
+
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 = [], v = !1, M = -1, u = void 0, f = void 0, D = function(o) {
|
|
38
37
|
return m.some(function(t) {
|
|
39
|
-
return !!(t.options.allowTouchMove && t.options.allowTouchMove(
|
|
38
|
+
return !!(t.options.allowTouchMove && t.options.allowTouchMove(o));
|
|
40
39
|
});
|
|
41
|
-
}, y = function(
|
|
42
|
-
var t =
|
|
40
|
+
}, y = function(o) {
|
|
41
|
+
var t = o || window.event;
|
|
43
42
|
return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
|
|
44
|
-
}, j = function(
|
|
43
|
+
}, j = function(o) {
|
|
45
44
|
if (f === void 0) {
|
|
46
45
|
var t = !1, i = window.innerWidth - document.documentElement.clientWidth;
|
|
47
46
|
t && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
|
|
48
47
|
}
|
|
49
48
|
u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
50
|
-
},
|
|
49
|
+
}, R = function() {
|
|
51
50
|
f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
|
|
52
|
-
},
|
|
53
|
-
return
|
|
54
|
-
},
|
|
55
|
-
var i =
|
|
56
|
-
return D(
|
|
57
|
-
},
|
|
58
|
-
if (!
|
|
51
|
+
}, V = function(o) {
|
|
52
|
+
return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
|
|
53
|
+
}, Y = function(o, t) {
|
|
54
|
+
var i = o.targetTouches[0].clientY - M;
|
|
55
|
+
return D(o.target) ? !1 : t && t.scrollTop === 0 && i > 0 || V(t) && i < 0 ? y(o) : (o.stopPropagation(), !0);
|
|
56
|
+
}, H = function(o, t) {
|
|
57
|
+
if (!o) {
|
|
59
58
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
60
59
|
return;
|
|
61
60
|
}
|
|
62
61
|
if (!m.some(function(a) {
|
|
63
|
-
return a.targetElement ===
|
|
62
|
+
return a.targetElement === o;
|
|
64
63
|
})) {
|
|
65
64
|
var i = {
|
|
66
|
-
targetElement:
|
|
65
|
+
targetElement: o,
|
|
67
66
|
options: {}
|
|
68
67
|
};
|
|
69
|
-
m = [].concat(
|
|
68
|
+
m = [].concat(W(m), [i]), O ? (o.ontouchstart = function(a) {
|
|
70
69
|
a.targetTouches.length === 1 && (M = a.targetTouches[0].clientY);
|
|
71
|
-
},
|
|
72
|
-
a.targetTouches.length === 1 &&
|
|
73
|
-
},
|
|
70
|
+
}, o.ontouchmove = function(a) {
|
|
71
|
+
a.targetTouches.length === 1 && Y(a, o);
|
|
72
|
+
}, v || (document.addEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !0)) : j();
|
|
74
73
|
}
|
|
75
|
-
},
|
|
76
|
-
if (!
|
|
74
|
+
}, q = function(o) {
|
|
75
|
+
if (!o) {
|
|
77
76
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
78
77
|
return;
|
|
79
78
|
}
|
|
80
79
|
m = m.filter(function(t) {
|
|
81
|
-
return t.targetElement !==
|
|
82
|
-
}), O ? (
|
|
80
|
+
return t.targetElement !== o;
|
|
81
|
+
}), O ? (o.ontouchstart = null, o.ontouchmove = null, v && m.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : m.length || R();
|
|
83
82
|
};
|
|
84
|
-
const
|
|
83
|
+
const U = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--dt-color-content-default);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal .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}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}', X = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], J = ["top", "center"], S = "pie-modal-close", _ = "pie-modal-open", L = "pie-modal-back", Q = "pie-modal-leading-action-click", Z = "pie-modal-supporting-action-click", r = {
|
|
85
84
|
hasBackButton: !1,
|
|
86
85
|
hasStackedActions: !1,
|
|
87
86
|
headingLevel: "h2",
|
|
@@ -93,61 +92,62 @@ const X = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
|
|
|
93
92
|
position: "center",
|
|
94
93
|
size: "medium"
|
|
95
94
|
};
|
|
96
|
-
var
|
|
97
|
-
for (var a = i > 1 ? void 0 : i ?
|
|
98
|
-
(p =
|
|
99
|
-
return i && a &&
|
|
95
|
+
var ee = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, l = (e, o, t, i) => {
|
|
96
|
+
for (var a = i > 1 ? void 0 : i ? oe(o, t) : o, c = e.length - 1, p; c >= 0; c--)
|
|
97
|
+
(p = e[c]) && (a = (i ? p(o, t, a) : p(a)) || a);
|
|
98
|
+
return i && a && ee(o, t, a), a;
|
|
100
99
|
};
|
|
101
100
|
const w = "pie-modal";
|
|
102
|
-
let n = class extends
|
|
101
|
+
let n = class extends x {
|
|
103
102
|
constructor() {
|
|
104
|
-
super(...arguments), this.headingLevel =
|
|
105
|
-
|
|
106
|
-
}, this._handleDialogLightDismiss = (
|
|
107
|
-
if (!this.isDismissible ||
|
|
103
|
+
super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
|
|
104
|
+
e.key === "Escape" && e.preventDefault();
|
|
105
|
+
}, this._handleDialogLightDismiss = (e) => {
|
|
106
|
+
if (!this.isDismissible || e.target !== e.currentTarget)
|
|
108
107
|
return;
|
|
109
|
-
const
|
|
108
|
+
const o = this._dialog.getBoundingClientRect(), {
|
|
110
109
|
top: t = 0,
|
|
111
110
|
bottom: i = 0,
|
|
112
111
|
left: a = 0,
|
|
113
112
|
right: c = 0
|
|
114
|
-
} =
|
|
113
|
+
} = o || {};
|
|
115
114
|
if (t === 0 && i === 0 && a === 0 && c === 0)
|
|
116
115
|
return;
|
|
117
|
-
(
|
|
116
|
+
(e.clientY < t || e.clientY > i || e.clientX < a || e.clientX > c) && (this.isOpen = !1);
|
|
118
117
|
};
|
|
119
118
|
}
|
|
120
119
|
get _modalScrollContainer() {
|
|
121
|
-
|
|
120
|
+
var e;
|
|
121
|
+
return this._scrollableContainer || (this._scrollableContainer = (e = this._dialog) == null ? void 0 : e.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
|
|
122
122
|
}
|
|
123
123
|
connectedCallback() {
|
|
124
124
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
125
|
-
const { signal:
|
|
126
|
-
this.addEventListener("click", (
|
|
125
|
+
const { signal: e } = this._abortController;
|
|
126
|
+
this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(_, (o) => this._handleModalOpened(o), { signal: e }), document.addEventListener(S, (o) => this._handleModalClosed(o), { signal: e }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: e });
|
|
127
127
|
}
|
|
128
128
|
disconnectedCallback() {
|
|
129
129
|
super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
|
|
130
130
|
}
|
|
131
|
-
async firstUpdated(
|
|
131
|
+
async firstUpdated(e) {
|
|
132
132
|
(await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
|
|
133
133
|
const { signal: t } = this._abortController;
|
|
134
134
|
this._dialog.addEventListener("close", () => {
|
|
135
135
|
this.isOpen = !1;
|
|
136
|
-
}, { signal: t }), this._handleModalOpenStateOnFirstRender(
|
|
136
|
+
}, { signal: t }), this._handleModalOpenStateOnFirstRender(e);
|
|
137
137
|
}
|
|
138
|
-
updated(
|
|
139
|
-
this._handleModalOpenStateChanged(
|
|
138
|
+
updated(e) {
|
|
139
|
+
this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
|
|
140
140
|
}
|
|
141
|
-
_handleIsDismissibleChanged(
|
|
142
|
-
const
|
|
143
|
-
!
|
|
141
|
+
_handleIsDismissibleChanged(e) {
|
|
142
|
+
const o = e.get("isDismissible"), t = this.isDismissible;
|
|
143
|
+
!o && t && this._removeEscKeyEventListener(), o && !t && this._setupEscKeyListener();
|
|
144
144
|
}
|
|
145
145
|
/**
|
|
146
146
|
* Opens the dialog element and disables page scrolling
|
|
147
147
|
*/
|
|
148
|
-
_handleModalOpened(
|
|
149
|
-
const { targetModal:
|
|
150
|
-
if (
|
|
148
|
+
_handleModalOpened(e) {
|
|
149
|
+
const { targetModal: o } = e.detail;
|
|
150
|
+
if (o === this) {
|
|
151
151
|
if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
|
|
152
152
|
return;
|
|
153
153
|
this._dialog.showModal(), requestAnimationFrame(() => {
|
|
@@ -158,9 +158,9 @@ let n = class extends I(x) {
|
|
|
158
158
|
/**
|
|
159
159
|
* Closes the dialog element and re-enables page scrolling
|
|
160
160
|
*/
|
|
161
|
-
_handleModalClosed(
|
|
162
|
-
const { targetModal:
|
|
163
|
-
|
|
161
|
+
_handleModalClosed(e) {
|
|
162
|
+
const { targetModal: o } = e.detail;
|
|
163
|
+
o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
|
|
164
164
|
}
|
|
165
165
|
/**
|
|
166
166
|
* Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
|
|
@@ -168,49 +168,49 @@ let n = class extends I(x) {
|
|
|
168
168
|
_setupEscKeyListener() {
|
|
169
169
|
if (!this._escKeyAbortController && !this.isDismissible) {
|
|
170
170
|
this._escKeyAbortController = new AbortController();
|
|
171
|
-
const { signal:
|
|
172
|
-
document.addEventListener("keydown", (
|
|
171
|
+
const { signal: e } = this._escKeyAbortController;
|
|
172
|
+
document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: e });
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
/**
|
|
176
176
|
* Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
|
|
177
177
|
*/
|
|
178
178
|
_removeEscKeyEventListener() {
|
|
179
|
-
var
|
|
180
|
-
(
|
|
179
|
+
var e;
|
|
180
|
+
(e = this._escKeyAbortController) == null || e.abort(), this._escKeyAbortController = null;
|
|
181
181
|
}
|
|
182
182
|
// Handles the value of the isOpen property on first render of the component
|
|
183
|
-
_handleModalOpenStateOnFirstRender(
|
|
184
|
-
|
|
183
|
+
_handleModalOpenStateOnFirstRender(e) {
|
|
184
|
+
e.get("isOpen") === void 0 && this.isOpen && h(this, _, { targetModal: this });
|
|
185
185
|
}
|
|
186
186
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
187
|
-
_handleModalOpenStateChanged(
|
|
188
|
-
const
|
|
189
|
-
|
|
187
|
+
_handleModalOpenStateChanged(e) {
|
|
188
|
+
const o = e.get("isOpen");
|
|
189
|
+
o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, S, { targetModal: this }) : h(this, _, { targetModal: this }));
|
|
190
190
|
}
|
|
191
|
-
_handleActionClick(
|
|
192
|
-
|
|
191
|
+
_handleActionClick(e) {
|
|
192
|
+
e === "leading" ? (this._dialog.close("leading"), h(this, Q, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, Z, { targetModal: this }));
|
|
193
193
|
}
|
|
194
194
|
/**
|
|
195
195
|
* Return focus to the specified element, providing the selector is valid
|
|
196
196
|
* and the chosen element can be found.
|
|
197
197
|
*/
|
|
198
198
|
_returnFocus() {
|
|
199
|
-
var
|
|
200
|
-
const
|
|
201
|
-
|
|
199
|
+
var o, t;
|
|
200
|
+
const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
|
|
201
|
+
e && ((t = document.querySelector(e)) == null || t.focus());
|
|
202
202
|
}
|
|
203
203
|
/**
|
|
204
204
|
* Enables body scroll by unlocking the scroll container.
|
|
205
205
|
*/
|
|
206
206
|
_enableBodyScroll() {
|
|
207
|
-
this.
|
|
207
|
+
this._scrollableContainer && q(this._scrollableContainer);
|
|
208
208
|
}
|
|
209
209
|
/**
|
|
210
210
|
* Disables body scroll by locking the scroll container.
|
|
211
211
|
*/
|
|
212
212
|
_disableBodyScroll() {
|
|
213
|
-
this._modalScrollContainer &&
|
|
213
|
+
this._modalScrollContainer && H(this._modalScrollContainer);
|
|
214
214
|
}
|
|
215
215
|
/**
|
|
216
216
|
* Template for the close button element. Called within the
|
|
@@ -219,15 +219,15 @@ let n = class extends I(x) {
|
|
|
219
219
|
* @private
|
|
220
220
|
*/
|
|
221
221
|
renderCloseButton() {
|
|
222
|
-
var
|
|
223
|
-
return this.isDismissible ?
|
|
222
|
+
var e;
|
|
223
|
+
return this.isDismissible ? s`
|
|
224
224
|
<pie-icon-button
|
|
225
225
|
@click="${() => {
|
|
226
226
|
this.isOpen = !1;
|
|
227
227
|
}}"
|
|
228
228
|
variant="ghost-secondary"
|
|
229
229
|
class="c-modal-closeBtn"
|
|
230
|
-
aria-label="${((
|
|
230
|
+
aria-label="${((e = this.aria) == null ? void 0 : e.close) || g}"
|
|
231
231
|
data-test-id="modal-close-button">
|
|
232
232
|
<icon-close></icon-close>
|
|
233
233
|
</pie-icon-button>` : g;
|
|
@@ -239,17 +239,17 @@ let n = class extends I(x) {
|
|
|
239
239
|
* @private
|
|
240
240
|
*/
|
|
241
241
|
renderBackButton() {
|
|
242
|
-
var
|
|
243
|
-
return this.hasBackButton ?
|
|
242
|
+
var e;
|
|
243
|
+
return this.hasBackButton ? s`
|
|
244
244
|
<pie-icon-button
|
|
245
245
|
@click="${() => {
|
|
246
246
|
this._backButtonClicked = !0, this.isOpen = !1;
|
|
247
247
|
}}"
|
|
248
248
|
variant="ghost-secondary"
|
|
249
249
|
class="c-modal-backBtn"
|
|
250
|
-
aria-label="${
|
|
250
|
+
aria-label="${b((e = this.aria) == null ? void 0 : e.back)}"
|
|
251
251
|
data-test-id="modal-back-button">
|
|
252
|
-
|
|
252
|
+
<icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-right>
|
|
253
253
|
</pie-icon-button>
|
|
254
254
|
` : g;
|
|
255
255
|
}
|
|
@@ -263,16 +263,16 @@ let n = class extends I(x) {
|
|
|
263
263
|
* @private
|
|
264
264
|
*/
|
|
265
265
|
renderLeadingAction() {
|
|
266
|
-
const { ariaLabel:
|
|
267
|
-
return
|
|
266
|
+
const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
|
|
267
|
+
return o ? s`
|
|
268
268
|
<pie-button
|
|
269
269
|
variant="${t}"
|
|
270
|
-
aria-label="${
|
|
270
|
+
aria-label="${b(e)}"
|
|
271
271
|
type="submit"
|
|
272
272
|
?isFullWidth="${this.hasStackedActions}"
|
|
273
273
|
@click="${() => this._handleActionClick("leading")}"
|
|
274
274
|
data-test-id="modal-leading-action">
|
|
275
|
-
${
|
|
275
|
+
${o}
|
|
276
276
|
</pie-button>
|
|
277
277
|
` : g;
|
|
278
278
|
}
|
|
@@ -288,16 +288,16 @@ let n = class extends I(x) {
|
|
|
288
288
|
*/
|
|
289
289
|
renderSupportingAction() {
|
|
290
290
|
var i;
|
|
291
|
-
const { ariaLabel:
|
|
292
|
-
return !
|
|
291
|
+
const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
|
|
292
|
+
return !o || !((i = this.leadingAction) != null && i.text) ? g : s`
|
|
293
293
|
<pie-button
|
|
294
294
|
variant="${t}"
|
|
295
|
-
aria-label="${
|
|
295
|
+
aria-label="${b(e)}"
|
|
296
296
|
type="reset"
|
|
297
297
|
?isFullWidth="${this.hasStackedActions}"
|
|
298
298
|
@click="${() => this._handleActionClick("supporting")}"
|
|
299
299
|
data-test-id="modal-supporting-action">
|
|
300
|
-
${
|
|
300
|
+
${o}
|
|
301
301
|
</pie-button>
|
|
302
302
|
`;
|
|
303
303
|
}
|
|
@@ -309,17 +309,17 @@ let n = class extends I(x) {
|
|
|
309
309
|
*/
|
|
310
310
|
renderModalFooter() {
|
|
311
311
|
var i, a;
|
|
312
|
-
const
|
|
313
|
-
|
|
314
|
-
const
|
|
312
|
+
const e = (i = this.leadingAction) == null ? void 0 : i.text;
|
|
313
|
+
e || (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 o = {
|
|
315
315
|
"c-modal-footer": !0,
|
|
316
316
|
"c-modal-footer--stackedActions": this.hasStackedActions
|
|
317
|
-
}, t =
|
|
318
|
-
<footer class="${
|
|
317
|
+
}, t = e ? s`
|
|
318
|
+
<footer class="${z(o)}" data-test-id="pie-modal-footer">
|
|
319
319
|
${this.renderLeadingAction()}
|
|
320
320
|
${this.renderSupportingAction()}
|
|
321
321
|
</footer>` : g;
|
|
322
|
-
return
|
|
322
|
+
return s`
|
|
323
323
|
<slot name="footer">
|
|
324
324
|
${t}
|
|
325
325
|
</slot>`;
|
|
@@ -329,14 +329,14 @@ let n = class extends I(x) {
|
|
|
329
329
|
* @private
|
|
330
330
|
*/
|
|
331
331
|
renderLoadingSpinner() {
|
|
332
|
-
return this.isLoading ?
|
|
332
|
+
return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : g;
|
|
333
333
|
}
|
|
334
334
|
/**
|
|
335
335
|
* Renders the modal inner content and footer of the modal.
|
|
336
336
|
* @private
|
|
337
337
|
*/
|
|
338
338
|
renderModalContentAndFooter() {
|
|
339
|
-
return
|
|
339
|
+
return s`
|
|
340
340
|
<article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
|
|
341
341
|
<div class="c-modal-contentInner" data-test-id="modal-content-inner">
|
|
342
342
|
<slot></slot>
|
|
@@ -350,37 +350,37 @@ let n = class extends I(x) {
|
|
|
350
350
|
* @private
|
|
351
351
|
*/
|
|
352
352
|
renderHeading() {
|
|
353
|
-
const { heading:
|
|
354
|
-
return
|
|
353
|
+
const { heading: e, headingLevel: o } = this, t = T(o);
|
|
354
|
+
return s`
|
|
355
355
|
<${t} class="c-modal-heading">
|
|
356
|
-
${
|
|
356
|
+
${e}
|
|
357
357
|
</${t}>
|
|
358
358
|
`;
|
|
359
359
|
}
|
|
360
360
|
render() {
|
|
361
361
|
const {
|
|
362
|
-
aria:
|
|
363
|
-
isDismissible:
|
|
362
|
+
aria: e,
|
|
363
|
+
isDismissible: o,
|
|
364
364
|
isFooterPinned: t,
|
|
365
365
|
isFullWidthBelowMid: i,
|
|
366
366
|
isLoading: a,
|
|
367
367
|
position: c,
|
|
368
368
|
size: p
|
|
369
|
-
} = this, $ = a && (
|
|
369
|
+
} = this, $ = a && (e == null ? void 0 : e.loading) || void 0, E = {
|
|
370
370
|
"c-modal": !0,
|
|
371
371
|
[`c-modal--${p}`]: !0,
|
|
372
372
|
"c-modal--top": c === "top",
|
|
373
|
-
"c-modal--dismissible":
|
|
373
|
+
"c-modal--dismissible": o,
|
|
374
374
|
"c-modal--loading": a,
|
|
375
375
|
"c-modal--pinnedFooter": t,
|
|
376
376
|
"c-modal--fullWidthBelowMid": i
|
|
377
377
|
};
|
|
378
|
-
return
|
|
378
|
+
return s`
|
|
379
379
|
<dialog
|
|
380
380
|
id="dialog"
|
|
381
|
-
class="${
|
|
381
|
+
class="${z(E)}"
|
|
382
382
|
aria-busy="${a ? "true" : "false"}"
|
|
383
|
-
aria-label="${
|
|
383
|
+
aria-label="${b($)}"
|
|
384
384
|
data-test-id="pie-modal">
|
|
385
385
|
<header class="c-modal-header" data-test-id="modal-header">
|
|
386
386
|
${this.renderBackButton()}
|
|
@@ -388,24 +388,24 @@ let n = class extends I(x) {
|
|
|
388
388
|
${this.renderCloseButton()}
|
|
389
389
|
</header>
|
|
390
390
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
391
|
-
t ? this.renderModalContentAndFooter() :
|
|
391
|
+
t ? this.renderModalContentAndFooter() : s`
|
|
392
392
|
<div class="c-modal-scrollContainer">
|
|
393
393
|
${this.renderModalContentAndFooter()}
|
|
394
394
|
</div>`}
|
|
395
395
|
</dialog>`;
|
|
396
396
|
}
|
|
397
397
|
};
|
|
398
|
-
n.styles = P(
|
|
398
|
+
n.styles = P(U);
|
|
399
399
|
l([
|
|
400
400
|
d({ type: Object })
|
|
401
401
|
], n.prototype, "aria", 2);
|
|
402
402
|
l([
|
|
403
403
|
d({ type: String }),
|
|
404
|
-
|
|
404
|
+
I(w)
|
|
405
405
|
], n.prototype, "heading", 2);
|
|
406
406
|
l([
|
|
407
407
|
d({ type: String }),
|
|
408
|
-
C(w,
|
|
408
|
+
C(w, X, r.headingLevel)
|
|
409
409
|
], n.prototype, "headingLevel", 2);
|
|
410
410
|
l([
|
|
411
411
|
d({ type: Boolean })
|
|
@@ -433,14 +433,14 @@ l([
|
|
|
433
433
|
], n.prototype, "leadingAction", 2);
|
|
434
434
|
l([
|
|
435
435
|
d({ type: String }),
|
|
436
|
-
C(w,
|
|
436
|
+
C(w, J, r.position)
|
|
437
437
|
], n.prototype, "position", 2);
|
|
438
438
|
l([
|
|
439
439
|
d({ type: String })
|
|
440
440
|
], n.prototype, "returnFocusAfterCloseSelector", 2);
|
|
441
441
|
l([
|
|
442
442
|
d({ type: String }),
|
|
443
|
-
C(w,
|
|
443
|
+
C(w, G, r.size)
|
|
444
444
|
], n.prototype, "size", 2);
|
|
445
445
|
l([
|
|
446
446
|
d({ type: Object })
|
|
@@ -449,17 +449,17 @@ l([
|
|
|
449
449
|
K("dialog")
|
|
450
450
|
], n.prototype, "_dialog", 2);
|
|
451
451
|
n = l([
|
|
452
|
-
|
|
452
|
+
N("pie-modal")
|
|
453
453
|
], n);
|
|
454
454
|
export {
|
|
455
455
|
L as ON_MODAL_BACK_EVENT,
|
|
456
456
|
S as ON_MODAL_CLOSE_EVENT,
|
|
457
|
-
|
|
457
|
+
Q as ON_MODAL_LEADING_ACTION_CLICK,
|
|
458
458
|
_ as ON_MODAL_OPEN_EVENT,
|
|
459
|
-
|
|
459
|
+
Z as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
460
460
|
n as PieModal,
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
461
|
+
r as defaultProps,
|
|
462
|
+
X as headingLevels,
|
|
463
|
+
J as positions,
|
|
464
|
+
G as sizes
|
|
465
465
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import { CSSResult } from 'lit';
|
|
3
|
-
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
4
|
import { PropertyValues } from 'lit';
|
|
6
5
|
import * as React_2 from 'react';
|
|
7
|
-
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
8
6
|
import { TemplateResult } from 'lit';
|
|
9
7
|
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
10
8
|
|
|
@@ -152,7 +150,7 @@ export declare const PieModal: React_2.ForwardRefExoticComponent<React_2.PropsWi
|
|
|
152
150
|
* @slot footer - The footer slot
|
|
153
151
|
* @slot - Default slot
|
|
154
152
|
*/
|
|
155
|
-
declare class PieModal_2 extends
|
|
153
|
+
declare class PieModal_2 extends PieElement implements ModalProps {
|
|
156
154
|
aria: ModalProps['aria'];
|
|
157
155
|
heading: string;
|
|
158
156
|
headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
@@ -169,6 +167,7 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
|
|
|
169
167
|
size: "medium" | "large" | "small";
|
|
170
168
|
supportingAction: ModalProps['supportingAction'];
|
|
171
169
|
private _dialog;
|
|
170
|
+
private _scrollableContainer;
|
|
172
171
|
private _backButtonClicked;
|
|
173
172
|
private _abortController;
|
|
174
173
|
private _escKeyAbortController;
|
|
@@ -283,8 +282,6 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
|
|
|
283
282
|
private _handleDialogLightDismiss;
|
|
284
283
|
}
|
|
285
284
|
|
|
286
|
-
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
287
|
-
|
|
288
285
|
declare type PieModalEvents = {
|
|
289
286
|
onPieModalOpen?: (event: CustomEvent) => void;
|
|
290
287
|
onPieModalClose?: (event: CustomEvent) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.11.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": "7.2.0",
|
|
43
|
-
"@justeattakeaway/pie-button": "1.6.
|
|
43
|
+
"@justeattakeaway/pie-button": "1.6.7",
|
|
44
44
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
45
45
|
"@justeattakeaway/pie-css": "0.19.0",
|
|
46
|
-
"@justeattakeaway/pie-monorepo-utils": "0.
|
|
47
|
-
"@justeattakeaway/pie-text-input": "0.28.
|
|
46
|
+
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
47
|
+
"@justeattakeaway/pie-text-input": "0.28.12",
|
|
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.6.
|
|
57
|
-
"@justeattakeaway/pie-icon-button": "2.0.
|
|
58
|
-
"@justeattakeaway/pie-icons-webc": "1.14.
|
|
59
|
-
"@justeattakeaway/pie-spinner": "1.2.
|
|
60
|
-
"@justeattakeaway/pie-webc-core": "1.
|
|
56
|
+
"@justeattakeaway/pie-button": "1.6.7",
|
|
57
|
+
"@justeattakeaway/pie-icon-button": "2.0.6",
|
|
58
|
+
"@justeattakeaway/pie-icons-webc": "1.14.2",
|
|
59
|
+
"@justeattakeaway/pie-spinner": "1.2.5",
|
|
60
|
+
"@justeattakeaway/pie-webc-core": "1.1.0",
|
|
61
61
|
"body-scroll-lock": "3.1.5",
|
|
62
62
|
"dialog-polyfill": "0.5.6"
|
|
63
63
|
},
|
package/src/index.ts
CHANGED
|
@@ -12,14 +12,12 @@ import '@justeattakeaway/pie-button';
|
|
|
12
12
|
import '@justeattakeaway/pie-icon-button';
|
|
13
13
|
import {
|
|
14
14
|
requiredProperty,
|
|
15
|
-
RtlMixin,
|
|
16
15
|
validPropertyValues,
|
|
17
16
|
dispatchCustomEvent,
|
|
18
17
|
safeCustomElement,
|
|
19
18
|
} from '@justeattakeaway/pie-webc-core';
|
|
20
19
|
import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
|
|
21
20
|
import '@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js';
|
|
22
|
-
import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
|
|
23
21
|
import '@justeattakeaway/pie-spinner';
|
|
24
22
|
|
|
25
23
|
import styles from './modal.scss?inline';
|
|
@@ -57,7 +55,7 @@ export interface ModalEventDetail {
|
|
|
57
55
|
* @slot - Default slot
|
|
58
56
|
*/
|
|
59
57
|
@safeCustomElement('pie-modal')
|
|
60
|
-
export class PieModal extends
|
|
58
|
+
export class PieModal extends PieElement implements ModalProps {
|
|
61
59
|
@property({ type: Object })
|
|
62
60
|
public aria: ModalProps['aria'];
|
|
63
61
|
|
|
@@ -110,6 +108,8 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
|
110
108
|
@query('dialog')
|
|
111
109
|
private _dialog!: HTMLDialogElement;
|
|
112
110
|
|
|
111
|
+
private _scrollableContainer: HTMLElement | null = null;
|
|
112
|
+
|
|
113
113
|
private _backButtonClicked = false;
|
|
114
114
|
|
|
115
115
|
private _abortController!: AbortController;
|
|
@@ -119,7 +119,12 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
|
119
119
|
private _escKeyAbortController: AbortController | null = null;
|
|
120
120
|
|
|
121
121
|
private get _modalScrollContainer (): Element | null {
|
|
122
|
-
|
|
122
|
+
// Cache the scrollable container to avoid race conditions where it has been removed during disconnectedCallback
|
|
123
|
+
if (!this._scrollableContainer) {
|
|
124
|
+
this._scrollableContainer = this._dialog?.querySelector<HTMLElement>('.c-modal-scrollContainer');
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
return this._scrollableContainer;
|
|
123
128
|
}
|
|
124
129
|
|
|
125
130
|
// Renders a `CSSResult` generated from SCSS by Vite
|
|
@@ -200,7 +205,7 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
|
200
205
|
1. Use requestAnimationFrame to defer non-blocking operations.
|
|
201
206
|
2. Batch non-blocking updates inside requestAnimationFrame
|
|
202
207
|
3. Call `showModal()` first and defer `_disableBodyScroll` & `_setupEscKeyListener`
|
|
203
|
-
|
|
208
|
+
to the next `task`.
|
|
204
209
|
*/
|
|
205
210
|
requestAnimationFrame(() => {
|
|
206
211
|
// Read styles before writing them to avoid forced layout recalculations (layout trashing).
|
|
@@ -319,8 +324,8 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
|
319
324
|
* Enables body scroll by unlocking the scroll container.
|
|
320
325
|
*/
|
|
321
326
|
private _enableBodyScroll (): void {
|
|
322
|
-
if (this.
|
|
323
|
-
enableBodyScroll(this.
|
|
327
|
+
if (this._scrollableContainer) {
|
|
328
|
+
enableBodyScroll(this._scrollableContainer);
|
|
324
329
|
}
|
|
325
330
|
}
|
|
326
331
|
|
|
@@ -373,7 +378,7 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
|
373
378
|
class="c-modal-backBtn"
|
|
374
379
|
aria-label="${ifDefined(this.aria?.back)}"
|
|
375
380
|
data-test-id="modal-back-button">
|
|
376
|
-
|
|
381
|
+
<icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-right>
|
|
377
382
|
</pie-icon-button>
|
|
378
383
|
`;
|
|
379
384
|
}
|