@justeattakeaway/pie-modal 1.4.3 → 1.5.1
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 +2 -2
- package/dist/index.d.ts +3 -3
- package/dist/index.js +140 -127
- package/dist/react.d.ts +3 -3
- package/package.json +11 -10
- package/src/index.ts +3 -2
- package/declaration.d.ts +0 -9
package/custom-elements.json
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
3
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
|
-
import
|
|
4
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
5
|
import type { PropertyValues } from 'lit';
|
|
6
6
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
7
|
import type { TemplateResult } from 'lit';
|
|
@@ -165,7 +165,7 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
165
165
|
leadingAction: ModalProps['leadingAction'];
|
|
166
166
|
position: "top" | "center";
|
|
167
167
|
returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
|
|
168
|
-
size: "
|
|
168
|
+
size: "small" | "medium" | "large";
|
|
169
169
|
supportingAction: ModalProps['supportingAction'];
|
|
170
170
|
private _dialog;
|
|
171
171
|
private _backButtonClicked;
|
|
@@ -282,7 +282,7 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
282
282
|
private _handleDialogLightDismiss;
|
|
283
283
|
}
|
|
284
284
|
|
|
285
|
-
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof
|
|
285
|
+
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
286
286
|
|
|
287
287
|
export declare const positions: readonly ["top", "center"];
|
|
288
288
|
|
package/dist/index.js
CHANGED
|
@@ -1,22 +1,35 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { LitElement as P, unsafeCSS as T, nothing as p } from "lit";
|
|
2
|
+
import { property as l, query as K } from "lit/decorators.js";
|
|
3
|
+
import { html as c, unsafeStatic as I } from "lit/static-html.js";
|
|
4
4
|
import { classMap as B } from "lit/directives/class-map.js";
|
|
5
|
-
import { ifDefined as
|
|
5
|
+
import { ifDefined as b } from "lit/directives/if-defined.js";
|
|
6
6
|
import "@justeattakeaway/pie-button";
|
|
7
7
|
import "@justeattakeaway/pie-icon-button";
|
|
8
|
-
import { RtlMixin as
|
|
8
|
+
import { RtlMixin as N, dispatchCustomEvent as h, requiredProperty as W, validPropertyValues as _, defineCustomElement as R } from "@justeattakeaway/pie-webc-core";
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
10
10
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
|
|
11
11
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
12
12
|
import "@justeattakeaway/pie-spinner";
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
var j = Object.defineProperty, V = (n, e, t, o) => {
|
|
14
|
+
for (var i = void 0, r = n.length - 1, m; r >= 0; r--)
|
|
15
|
+
(m = n[r]) && (i = m(e, t, i) || i);
|
|
16
|
+
return i && j(e, t, i), i;
|
|
17
|
+
};
|
|
18
|
+
class O extends P {
|
|
19
|
+
constructor() {
|
|
20
|
+
super(...arguments), this.v = "1.5.1";
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
V([
|
|
24
|
+
l({ type: String, reflect: !0 })
|
|
25
|
+
], O.prototype, "v");
|
|
26
|
+
function Y(n) {
|
|
27
|
+
if (Array.isArray(n)) {
|
|
28
|
+
for (var e = 0, t = Array(n.length); e < n.length; e++)
|
|
29
|
+
t[e] = n[e];
|
|
17
30
|
return t;
|
|
18
31
|
} else
|
|
19
|
-
return Array.from(
|
|
32
|
+
return Array.from(n);
|
|
20
33
|
}
|
|
21
34
|
var x = !1;
|
|
22
35
|
if (typeof window < "u") {
|
|
@@ -27,54 +40,54 @@ if (typeof window < "u") {
|
|
|
27
40
|
};
|
|
28
41
|
window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
|
|
29
42
|
}
|
|
30
|
-
var
|
|
31
|
-
return
|
|
43
|
+
var M = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], y = !1, D = -1, u = void 0, f = void 0, $ = function(e) {
|
|
44
|
+
return g.some(function(t) {
|
|
32
45
|
return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
|
|
33
46
|
});
|
|
34
|
-
},
|
|
47
|
+
}, k = function(e) {
|
|
35
48
|
var t = e || window.event;
|
|
36
|
-
return
|
|
37
|
-
},
|
|
49
|
+
return $(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
|
|
50
|
+
}, H = function(e) {
|
|
38
51
|
if (f === void 0) {
|
|
39
52
|
var t = !1, o = window.innerWidth - document.documentElement.clientWidth;
|
|
40
53
|
t && o > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
|
|
41
54
|
}
|
|
42
55
|
u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
43
|
-
},
|
|
56
|
+
}, q = function() {
|
|
44
57
|
f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
|
|
45
|
-
},
|
|
58
|
+
}, U = function(e) {
|
|
46
59
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
47
|
-
},
|
|
48
|
-
var o = e.targetTouches[0].clientY -
|
|
49
|
-
return
|
|
50
|
-
},
|
|
60
|
+
}, X = function(e, t) {
|
|
61
|
+
var o = e.targetTouches[0].clientY - D;
|
|
62
|
+
return $(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || U(t) && o < 0 ? k(e) : (e.stopPropagation(), !0);
|
|
63
|
+
}, G = function(e, t) {
|
|
51
64
|
if (!e) {
|
|
52
65
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
53
66
|
return;
|
|
54
67
|
}
|
|
55
|
-
if (!
|
|
68
|
+
if (!g.some(function(i) {
|
|
56
69
|
return i.targetElement === e;
|
|
57
70
|
})) {
|
|
58
71
|
var o = {
|
|
59
72
|
targetElement: e,
|
|
60
73
|
options: {}
|
|
61
74
|
};
|
|
62
|
-
|
|
63
|
-
i.targetTouches.length === 1 && (
|
|
75
|
+
g = [].concat(Y(g), [o]), M ? (e.ontouchstart = function(i) {
|
|
76
|
+
i.targetTouches.length === 1 && (D = i.targetTouches[0].clientY);
|
|
64
77
|
}, e.ontouchmove = function(i) {
|
|
65
|
-
i.targetTouches.length === 1 &&
|
|
66
|
-
},
|
|
78
|
+
i.targetTouches.length === 1 && X(i, e);
|
|
79
|
+
}, y || (document.addEventListener("touchmove", k, x ? { passive: !1 } : void 0), y = !0)) : H();
|
|
67
80
|
}
|
|
68
|
-
},
|
|
81
|
+
}, J = function(e) {
|
|
69
82
|
if (!e) {
|
|
70
83
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
71
84
|
return;
|
|
72
85
|
}
|
|
73
|
-
|
|
86
|
+
g = g.filter(function(t) {
|
|
74
87
|
return t.targetElement !== e;
|
|
75
|
-
}),
|
|
88
|
+
}), M ? (e.ontouchstart = null, e.ontouchmove = null, y && g.length === 0 && (document.removeEventListener("touchmove", k, x ? { passive: !1 } : void 0), y = !1)) : g.length || q();
|
|
76
89
|
};
|
|
77
|
-
const
|
|
90
|
+
const Q = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--dt-color-content-default);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal .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:not(:last-child){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}}', Z = ["h1", "h2", "h3", "h4", "h5", "h6"], ee = ["small", "medium", "large"], te = ["top", "center"], A = "pie-modal-close", w = "pie-modal-open", L = "pie-modal-back", oe = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click", s = {
|
|
78
91
|
hasBackButton: !1,
|
|
79
92
|
hasStackedActions: !1,
|
|
80
93
|
headingLevel: "h2",
|
|
@@ -86,14 +99,14 @@ const X = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
|
|
|
86
99
|
position: "center",
|
|
87
100
|
size: "medium"
|
|
88
101
|
};
|
|
89
|
-
var
|
|
90
|
-
for (var i = void 0,
|
|
91
|
-
(
|
|
92
|
-
return i &&
|
|
102
|
+
var ne = Object.defineProperty, d = (n, e, t, o) => {
|
|
103
|
+
for (var i = void 0, r = n.length - 1, m; r >= 0; r--)
|
|
104
|
+
(m = n[r]) && (i = m(e, t, i) || i);
|
|
105
|
+
return i && ne(e, t, i), i;
|
|
93
106
|
};
|
|
94
|
-
const
|
|
107
|
+
const v = "pie-modal", C = class C extends N(O) {
|
|
95
108
|
constructor() {
|
|
96
|
-
super(...arguments), this.headingLevel =
|
|
109
|
+
super(...arguments), this.headingLevel = s.headingLevel, this.hasBackButton = s.hasBackButton, this.hasStackedActions = s.hasStackedActions, this.isDismissible = s.isDismissible, this.isFooterPinned = s.isFooterPinned, this.isFullWidthBelowMid = s.isFullWidthBelowMid, this.isLoading = s.isLoading, this.isOpen = s.isOpen, this.position = s.position, this.size = s.size, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
|
|
97
110
|
e.key === "Escape" && e.preventDefault();
|
|
98
111
|
}, this._handleDialogLightDismiss = (e) => {
|
|
99
112
|
if (!this.isDismissible || e.target !== e.currentTarget)
|
|
@@ -101,12 +114,12 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
101
114
|
const t = this._dialog.getBoundingClientRect(), {
|
|
102
115
|
top: o = 0,
|
|
103
116
|
bottom: i = 0,
|
|
104
|
-
left:
|
|
105
|
-
right:
|
|
117
|
+
left: r = 0,
|
|
118
|
+
right: m = 0
|
|
106
119
|
} = t || {};
|
|
107
|
-
if (o === 0 && i === 0 &&
|
|
120
|
+
if (o === 0 && i === 0 && r === 0 && m === 0)
|
|
108
121
|
return;
|
|
109
|
-
(e.clientY < o || e.clientY > i || e.clientX <
|
|
122
|
+
(e.clientY < o || e.clientY > i || e.clientX < r || e.clientX > m) && (this.isOpen = !1);
|
|
110
123
|
};
|
|
111
124
|
}
|
|
112
125
|
get _modalScrollContainer() {
|
|
@@ -181,7 +194,7 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
181
194
|
t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, w, { targetModal: this }));
|
|
182
195
|
}
|
|
183
196
|
_handleActionClick(e) {
|
|
184
|
-
e === "leading" ? (this._dialog.close("leading"), h(this,
|
|
197
|
+
e === "leading" ? (this._dialog.close("leading"), h(this, oe, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, ie, { targetModal: this }));
|
|
185
198
|
}
|
|
186
199
|
/**
|
|
187
200
|
* Return focus to the specified element, providing the selector is valid
|
|
@@ -196,13 +209,13 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
196
209
|
* Enables body scroll by unlocking the scroll container.
|
|
197
210
|
*/
|
|
198
211
|
_enableBodyScroll() {
|
|
199
|
-
this._modalScrollContainer &&
|
|
212
|
+
this._modalScrollContainer && J(this._modalScrollContainer);
|
|
200
213
|
}
|
|
201
214
|
/**
|
|
202
215
|
* Disables body scroll by locking the scroll container.
|
|
203
216
|
*/
|
|
204
217
|
_disableBodyScroll() {
|
|
205
|
-
this._modalScrollContainer &&
|
|
218
|
+
this._modalScrollContainer && G(this._modalScrollContainer);
|
|
206
219
|
}
|
|
207
220
|
/**
|
|
208
221
|
* Template for the close button element. Called within the
|
|
@@ -212,7 +225,7 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
212
225
|
*/
|
|
213
226
|
renderCloseButton() {
|
|
214
227
|
var e;
|
|
215
|
-
return this.isDismissible ?
|
|
228
|
+
return this.isDismissible ? c`
|
|
216
229
|
<pie-icon-button
|
|
217
230
|
@click="${() => {
|
|
218
231
|
this.isOpen = !1;
|
|
@@ -232,16 +245,16 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
232
245
|
*/
|
|
233
246
|
renderBackButton() {
|
|
234
247
|
var e;
|
|
235
|
-
return this.hasBackButton ?
|
|
248
|
+
return this.hasBackButton ? c`
|
|
236
249
|
<pie-icon-button
|
|
237
250
|
@click="${() => {
|
|
238
251
|
this._backButtonClicked = !0, this.isOpen = !1;
|
|
239
252
|
}}"
|
|
240
253
|
variant="ghost-secondary"
|
|
241
254
|
class="c-modal-backBtn"
|
|
242
|
-
aria-label="${
|
|
255
|
+
aria-label="${b((e = this.aria) == null ? void 0 : e.back)}"
|
|
243
256
|
data-test-id="modal-back-button">
|
|
244
|
-
${this.isRTL ?
|
|
257
|
+
${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
|
|
245
258
|
</pie-icon-button>
|
|
246
259
|
` : p;
|
|
247
260
|
}
|
|
@@ -256,10 +269,10 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
256
269
|
*/
|
|
257
270
|
renderLeadingAction() {
|
|
258
271
|
const { ariaLabel: e, text: t, variant: o = "primary" } = this.leadingAction || {};
|
|
259
|
-
return t ?
|
|
272
|
+
return t ? c`
|
|
260
273
|
<pie-button
|
|
261
274
|
variant="${o}"
|
|
262
|
-
aria-label="${
|
|
275
|
+
aria-label="${b(e)}"
|
|
263
276
|
type="submit"
|
|
264
277
|
?isFullWidth="${this.hasStackedActions}"
|
|
265
278
|
@click="${() => this._handleActionClick("leading")}"
|
|
@@ -281,10 +294,10 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
281
294
|
renderSupportingAction() {
|
|
282
295
|
var i;
|
|
283
296
|
const { ariaLabel: e, text: t, variant: o = "ghost" } = this.supportingAction || {};
|
|
284
|
-
return !t || !((i = this.leadingAction) != null && i.text) ? p :
|
|
297
|
+
return !t || !((i = this.leadingAction) != null && i.text) ? p : c`
|
|
285
298
|
<pie-button
|
|
286
299
|
variant="${o}"
|
|
287
|
-
aria-label="${
|
|
300
|
+
aria-label="${b(e)}"
|
|
288
301
|
type="reset"
|
|
289
302
|
?isFullWidth="${this.hasStackedActions}"
|
|
290
303
|
@click="${() => this._handleActionClick("supporting")}"
|
|
@@ -307,7 +320,7 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
307
320
|
"c-modal-footer": !0,
|
|
308
321
|
"c-modal-footer--stackedActions": this.hasStackedActions
|
|
309
322
|
};
|
|
310
|
-
return
|
|
323
|
+
return c`
|
|
311
324
|
<footer class="${B(e)}" data-test-id="pie-modal-footer">
|
|
312
325
|
${this.renderLeadingAction()}
|
|
313
326
|
${this.renderSupportingAction()}
|
|
@@ -318,14 +331,14 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
318
331
|
* @private
|
|
319
332
|
*/
|
|
320
333
|
renderLoadingSpinner() {
|
|
321
|
-
return this.isLoading ?
|
|
334
|
+
return this.isLoading ? c`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : p;
|
|
322
335
|
}
|
|
323
336
|
/**
|
|
324
337
|
* Renders the modal inner content and footer of the modal.
|
|
325
338
|
* @private
|
|
326
339
|
*/
|
|
327
340
|
renderModalContentAndFooter() {
|
|
328
|
-
return
|
|
341
|
+
return c`
|
|
329
342
|
<article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
|
|
330
343
|
<div class="c-modal-contentInner" data-test-id="modal-content-inner">
|
|
331
344
|
<slot></slot>
|
|
@@ -339,8 +352,8 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
339
352
|
* @private
|
|
340
353
|
*/
|
|
341
354
|
renderHeading() {
|
|
342
|
-
const { heading: e, headingLevel: t } = this, o =
|
|
343
|
-
return
|
|
355
|
+
const { heading: e, headingLevel: t } = this, o = I(t);
|
|
356
|
+
return c`
|
|
344
357
|
<${o} class="c-modal-heading">
|
|
345
358
|
${e}
|
|
346
359
|
</${o}>
|
|
@@ -352,24 +365,24 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
352
365
|
isDismissible: t,
|
|
353
366
|
isFooterPinned: o,
|
|
354
367
|
isFullWidthBelowMid: i,
|
|
355
|
-
isLoading:
|
|
356
|
-
position:
|
|
368
|
+
isLoading: r,
|
|
369
|
+
position: m,
|
|
357
370
|
size: z
|
|
358
|
-
} = this,
|
|
371
|
+
} = this, E = r && (e == null ? void 0 : e.loading) || void 0, F = {
|
|
359
372
|
"c-modal": !0,
|
|
360
373
|
[`c-modal--${z}`]: !0,
|
|
361
|
-
"c-modal--top":
|
|
374
|
+
"c-modal--top": m === "top",
|
|
362
375
|
"c-modal--dismissible": t,
|
|
363
|
-
"c-modal--loading":
|
|
376
|
+
"c-modal--loading": r,
|
|
364
377
|
"c-modal--pinnedFooter": o,
|
|
365
378
|
"c-modal--fullWidthBelowMid": i
|
|
366
379
|
};
|
|
367
|
-
return
|
|
380
|
+
return c`
|
|
368
381
|
<dialog
|
|
369
382
|
id="dialog"
|
|
370
|
-
class="${B(
|
|
371
|
-
aria-busy="${
|
|
372
|
-
aria-label="${
|
|
383
|
+
class="${B(F)}"
|
|
384
|
+
aria-busy="${r ? "true" : "false"}"
|
|
385
|
+
aria-label="${b(E)}"
|
|
373
386
|
data-test-id="pie-modal">
|
|
374
387
|
<header class="c-modal-header" data-test-id="modal-header">
|
|
375
388
|
${this.renderBackButton()}
|
|
@@ -377,77 +390,77 @@ const b = "pie-modal", C = class C extends I(F) {
|
|
|
377
390
|
${this.renderCloseButton()}
|
|
378
391
|
</header>
|
|
379
392
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
380
|
-
o ? this.renderModalContentAndFooter() :
|
|
393
|
+
o ? this.renderModalContentAndFooter() : c`
|
|
381
394
|
<div class="c-modal-scrollContainer">
|
|
382
395
|
${this.renderModalContentAndFooter()}
|
|
383
396
|
</div>`}
|
|
384
397
|
</dialog>`;
|
|
385
398
|
}
|
|
386
399
|
};
|
|
387
|
-
C.styles = T(
|
|
388
|
-
let
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
],
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
],
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
_(
|
|
399
|
-
],
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
],
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
],
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
],
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
],
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
],
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
],
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
],
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
],
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
_(
|
|
427
|
-
],
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
],
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
_(
|
|
434
|
-
],
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
],
|
|
438
|
-
|
|
400
|
+
C.styles = T(Q);
|
|
401
|
+
let a = C;
|
|
402
|
+
d([
|
|
403
|
+
l({ type: Object })
|
|
404
|
+
], a.prototype, "aria");
|
|
405
|
+
d([
|
|
406
|
+
l({ type: String }),
|
|
407
|
+
W(v)
|
|
408
|
+
], a.prototype, "heading");
|
|
409
|
+
d([
|
|
410
|
+
l({ type: String }),
|
|
411
|
+
_(v, Z, s.headingLevel)
|
|
412
|
+
], a.prototype, "headingLevel");
|
|
413
|
+
d([
|
|
414
|
+
l({ type: Boolean })
|
|
415
|
+
], a.prototype, "hasBackButton");
|
|
416
|
+
d([
|
|
417
|
+
l({ type: Boolean })
|
|
418
|
+
], a.prototype, "hasStackedActions");
|
|
419
|
+
d([
|
|
420
|
+
l({ type: Boolean, reflect: !0 })
|
|
421
|
+
], a.prototype, "isDismissible");
|
|
422
|
+
d([
|
|
423
|
+
l({ type: Boolean })
|
|
424
|
+
], a.prototype, "isFooterPinned");
|
|
425
|
+
d([
|
|
426
|
+
l({ type: Boolean })
|
|
427
|
+
], a.prototype, "isFullWidthBelowMid");
|
|
428
|
+
d([
|
|
429
|
+
l({ type: Boolean, reflect: !0 })
|
|
430
|
+
], a.prototype, "isLoading");
|
|
431
|
+
d([
|
|
432
|
+
l({ type: Boolean })
|
|
433
|
+
], a.prototype, "isOpen");
|
|
434
|
+
d([
|
|
435
|
+
l({ type: Object })
|
|
436
|
+
], a.prototype, "leadingAction");
|
|
437
|
+
d([
|
|
438
|
+
l({ type: String }),
|
|
439
|
+
_(v, te, s.position)
|
|
440
|
+
], a.prototype, "position");
|
|
441
|
+
d([
|
|
442
|
+
l({ type: String })
|
|
443
|
+
], a.prototype, "returnFocusAfterCloseSelector");
|
|
444
|
+
d([
|
|
445
|
+
l({ type: String }),
|
|
446
|
+
_(v, ee, s.size)
|
|
447
|
+
], a.prototype, "size");
|
|
448
|
+
d([
|
|
449
|
+
l({ type: Object })
|
|
450
|
+
], a.prototype, "supportingAction");
|
|
451
|
+
d([
|
|
439
452
|
K("dialog")
|
|
440
|
-
],
|
|
441
|
-
|
|
453
|
+
], a.prototype, "_dialog");
|
|
454
|
+
R(v, a);
|
|
442
455
|
export {
|
|
443
456
|
L as ON_MODAL_BACK_EVENT,
|
|
444
457
|
A as ON_MODAL_CLOSE_EVENT,
|
|
445
|
-
|
|
458
|
+
oe as ON_MODAL_LEADING_ACTION_CLICK,
|
|
446
459
|
w as ON_MODAL_OPEN_EVENT,
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
460
|
+
ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
461
|
+
a as PieModal,
|
|
462
|
+
s as defaultProps,
|
|
463
|
+
Z as headingLevels,
|
|
464
|
+
te as positions,
|
|
465
|
+
ee as sizes
|
|
453
466
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
3
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
|
-
import
|
|
4
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
5
|
import type { PropertyValues } from 'lit';
|
|
6
6
|
import * as React_2 from 'react';
|
|
7
7
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
@@ -164,7 +164,7 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
|
|
|
164
164
|
leadingAction: ModalProps['leadingAction'];
|
|
165
165
|
position: "top" | "center";
|
|
166
166
|
returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
|
|
167
|
-
size: "
|
|
167
|
+
size: "small" | "medium" | "large";
|
|
168
168
|
supportingAction: ModalProps['supportingAction'];
|
|
169
169
|
private _dialog;
|
|
170
170
|
private _backButtonClicked;
|
|
@@ -281,7 +281,7 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
|
|
|
281
281
|
private _handleDialogLightDismiss;
|
|
282
282
|
}
|
|
283
283
|
|
|
284
|
-
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof
|
|
284
|
+
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
285
285
|
|
|
286
286
|
declare type PieModalEvents = {
|
|
287
287
|
onPieModalOpen?: (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.5.1",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -40,10 +40,11 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeat/pie-design-tokens": "6.10.0",
|
|
43
|
-
"@justeattakeaway/pie-button": "1.
|
|
44
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
45
|
-
"@justeattakeaway/pie-css": "0.
|
|
46
|
-
"@justeattakeaway/pie-
|
|
43
|
+
"@justeattakeaway/pie-button": "1.5.1",
|
|
44
|
+
"@justeattakeaway/pie-components-config": "0.19.1",
|
|
45
|
+
"@justeattakeaway/pie-css": "0.16.0",
|
|
46
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.0",
|
|
47
|
+
"@justeattakeaway/pie-text-input": "0.27.1",
|
|
47
48
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
48
49
|
"@types/body-scroll-lock": "3.1.2",
|
|
49
50
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
@@ -52,11 +53,11 @@
|
|
|
52
53
|
"extends": "../../../package.json"
|
|
53
54
|
},
|
|
54
55
|
"dependencies": {
|
|
55
|
-
"@justeattakeaway/pie-button": "1.
|
|
56
|
-
"@justeattakeaway/pie-icon-button": "1.
|
|
57
|
-
"@justeattakeaway/pie-icons-webc": "1.6.
|
|
58
|
-
"@justeattakeaway/pie-spinner": "1.
|
|
59
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
56
|
+
"@justeattakeaway/pie-button": "1.5.1",
|
|
57
|
+
"@justeattakeaway/pie-icon-button": "1.4.1",
|
|
58
|
+
"@justeattakeaway/pie-icons-webc": "1.6.2",
|
|
59
|
+
"@justeattakeaway/pie-spinner": "1.1.1",
|
|
60
|
+
"@justeattakeaway/pie-webc-core": "0.25.1",
|
|
60
61
|
"body-scroll-lock": "3.1.5",
|
|
61
62
|
"dialog-polyfill": "0.5.6"
|
|
62
63
|
},
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
2
|
+
nothing, type TemplateResult, unsafeCSS, type PropertyValues,
|
|
3
3
|
} from 'lit';
|
|
4
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
4
5
|
import { html, unsafeStatic } from 'lit/static-html.js';
|
|
5
6
|
import { property, query } from 'lit/decorators.js';
|
|
6
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
@@ -53,7 +54,7 @@ export interface ModalEventDetail {
|
|
|
53
54
|
* @event {CustomEvent} pie-modal-leading-action-click - when the modal leading action is clicked.
|
|
54
55
|
* @event {CustomEvent} pie-modal-supporting-action-click - when the modal supporting action is clicked.
|
|
55
56
|
*/
|
|
56
|
-
export class PieModal extends RtlMixin(
|
|
57
|
+
export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
57
58
|
@property({ type: Object })
|
|
58
59
|
public aria: ModalProps['aria'];
|
|
59
60
|
|