@justeattakeaway/pie-modal 0.33.0 → 0.33.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/README.md +1 -1
- package/dist/index.js +121 -121
- package/dist/react.d.ts +2 -2
- package/dist/react.js +16 -70
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -57,7 +57,7 @@ import '@justeattakeaway/pie-modal';
|
|
|
57
57
|
```js
|
|
58
58
|
// React
|
|
59
59
|
// For React, you will need to import our React-specific component build
|
|
60
|
-
// which wraps the web component using
|
|
60
|
+
// which wraps the web component using @lit/react
|
|
61
61
|
import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
|
|
62
62
|
```
|
|
63
63
|
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { isServer as D, unsafeCSS as T, nothing as c, LitElement as F } from "lit";
|
|
2
2
|
import { html as m, unsafeStatic as I } from "lit/static-html.js";
|
|
3
|
-
import { property as
|
|
3
|
+
import { property as r, query as N } from "lit/decorators.js";
|
|
4
4
|
import "@justeattakeaway/pie-button";
|
|
5
5
|
import "@justeattakeaway/pie-icon-button";
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/IconClose";
|
|
@@ -24,54 +24,54 @@ if (typeof window < "u") {
|
|
|
24
24
|
};
|
|
25
25
|
window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
|
|
26
26
|
}
|
|
27
|
-
var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1),
|
|
28
|
-
return
|
|
27
|
+
var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], k = !1, $ = -1, h = void 0, u = void 0, L = function(e) {
|
|
28
|
+
return p.some(function(i) {
|
|
29
29
|
return !!(i.options.allowTouchMove && i.options.allowTouchMove(e));
|
|
30
30
|
});
|
|
31
31
|
}, w = function(e) {
|
|
32
32
|
var i = e || window.event;
|
|
33
33
|
return L(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
|
|
34
34
|
}, j = function(e) {
|
|
35
|
-
if (
|
|
36
|
-
var i = !!e && e.reserveScrollBarGap === !0,
|
|
37
|
-
i &&
|
|
35
|
+
if (u === void 0) {
|
|
36
|
+
var i = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
|
|
37
|
+
i && o > 0 && (u = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
|
|
38
38
|
}
|
|
39
|
-
|
|
40
|
-
},
|
|
41
|
-
|
|
42
|
-
},
|
|
39
|
+
h === void 0 && (h = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
40
|
+
}, W = function() {
|
|
41
|
+
u !== void 0 && (document.body.style.paddingRight = u, u = void 0), h !== void 0 && (document.body.style.overflow = h, h = void 0);
|
|
42
|
+
}, q = function(e) {
|
|
43
43
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
44
|
-
}, V = function(e, i) {
|
|
45
|
-
var t = e.targetTouches[0].clientY - $;
|
|
46
|
-
return L(e.target) ? !1 : i && i.scrollTop === 0 && t > 0 || W(i) && t < 0 ? w(e) : (e.stopPropagation(), !0);
|
|
47
44
|
}, Y = function(e, i) {
|
|
45
|
+
var o = e.targetTouches[0].clientY - $;
|
|
46
|
+
return L(e.target) ? !1 : i && i.scrollTop === 0 && o > 0 || q(i) && o < 0 ? w(e) : (e.stopPropagation(), !0);
|
|
47
|
+
}, V = function(e, i) {
|
|
48
48
|
if (!e) {
|
|
49
49
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
50
50
|
return;
|
|
51
51
|
}
|
|
52
|
-
if (!
|
|
53
|
-
return
|
|
52
|
+
if (!p.some(function(t) {
|
|
53
|
+
return t.targetElement === e;
|
|
54
54
|
})) {
|
|
55
|
-
var
|
|
55
|
+
var o = {
|
|
56
56
|
targetElement: e,
|
|
57
57
|
options: i || {}
|
|
58
58
|
};
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}, e.ontouchmove = function(
|
|
62
|
-
|
|
59
|
+
p = [].concat(R(p), [o]), B ? (e.ontouchstart = function(t) {
|
|
60
|
+
t.targetTouches.length === 1 && ($ = t.targetTouches[0].clientY);
|
|
61
|
+
}, e.ontouchmove = function(t) {
|
|
62
|
+
t.targetTouches.length === 1 && Y(t, e);
|
|
63
63
|
}, k || (document.addEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !0)) : j(i);
|
|
64
64
|
}
|
|
65
|
-
},
|
|
65
|
+
}, H = function(e) {
|
|
66
66
|
if (!e) {
|
|
67
67
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
68
68
|
return;
|
|
69
69
|
}
|
|
70
|
-
|
|
70
|
+
p = p.filter(function(i) {
|
|
71
71
|
return i.targetElement !== e;
|
|
72
|
-
}), B ? (e.ontouchstart = null, e.ontouchmove = null, k &&
|
|
72
|
+
}), B ? (e.ontouchstart = null, e.ontouchmove = null, k && p.length === 0 && (document.removeEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !1)) : p.length || W();
|
|
73
73
|
};
|
|
74
|
-
const
|
|
74
|
+
const U = (n) => {
|
|
75
75
|
class e extends n {
|
|
76
76
|
/**
|
|
77
77
|
* A getter to determine whether the text direction is right-to-left (RTL).
|
|
@@ -87,61 +87,61 @@ const H = (n) => {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
return e;
|
|
90
|
-
}, C = (n, e, i) => function(
|
|
91
|
-
const
|
|
92
|
-
Object.defineProperty(
|
|
90
|
+
}, C = (n, e, i) => function(t, a) {
|
|
91
|
+
const s = `#${a}`;
|
|
92
|
+
Object.defineProperty(t, a, {
|
|
93
93
|
get() {
|
|
94
|
-
return this[
|
|
94
|
+
return this[s];
|
|
95
95
|
},
|
|
96
|
-
set(
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
`<${n}> Invalid value "${p}" provided for property "${a}".`,
|
|
96
|
+
set(g) {
|
|
97
|
+
e.includes(g) ? this[s] = g : (console.error(
|
|
98
|
+
`<${n}> Invalid value "${g}" provided for property "${a}".`,
|
|
100
99
|
`Must be one of: ${e.join(" | ")}.`,
|
|
101
100
|
`Falling back to default value: "${i}"`
|
|
102
|
-
), this[
|
|
103
|
-
}
|
|
101
|
+
), this[s] = i);
|
|
102
|
+
},
|
|
103
|
+
configurable: !0
|
|
104
104
|
});
|
|
105
|
-
}, G = (n) => function(i,
|
|
106
|
-
const
|
|
107
|
-
Object.defineProperty(i,
|
|
105
|
+
}, G = (n) => function(i, o) {
|
|
106
|
+
const t = `#${o}`;
|
|
107
|
+
Object.defineProperty(i, o, {
|
|
108
108
|
get() {
|
|
109
|
-
return this[
|
|
109
|
+
return this[t];
|
|
110
110
|
},
|
|
111
111
|
set(a) {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
(a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[t] = a;
|
|
113
|
+
},
|
|
114
|
+
configurable: !0
|
|
115
115
|
});
|
|
116
116
|
};
|
|
117
117
|
function X(n, e) {
|
|
118
118
|
customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
|
|
119
119
|
}
|
|
120
|
-
const
|
|
121
|
-
`,
|
|
122
|
-
var
|
|
123
|
-
for (var
|
|
124
|
-
(
|
|
125
|
-
return
|
|
120
|
+
const K = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal[size=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;block-size:auto;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
|
|
121
|
+
`, J = ["h1", "h2", "h3", "h4", "h5", "h6"], Q = ["small", "medium", "large"], Z = ["top", "center"], x = "pie-modal-close", b = "pie-modal-open", _ = "pie-modal-back", ee = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click";
|
|
122
|
+
var oe = Object.defineProperty, te = Object.getOwnPropertyDescriptor, d = (n, e, i, o) => {
|
|
123
|
+
for (var t = o > 1 ? void 0 : o ? te(e, i) : e, a = n.length - 1, s; a >= 0; a--)
|
|
124
|
+
(s = n[a]) && (t = (o ? s(e, i, t) : s(t)) || t);
|
|
125
|
+
return o && t && oe(e, i, t), t;
|
|
126
126
|
};
|
|
127
|
-
const
|
|
128
|
-
class l extends
|
|
127
|
+
const f = "pie-modal";
|
|
128
|
+
class l extends U(F) {
|
|
129
129
|
constructor() {
|
|
130
130
|
super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
|
|
131
131
|
this.isDismissible || e.preventDefault();
|
|
132
132
|
}, this._handleDialogLightDismiss = (e) => {
|
|
133
|
-
var
|
|
133
|
+
var v;
|
|
134
134
|
if (!this.isDismissible)
|
|
135
135
|
return;
|
|
136
|
-
const i = (
|
|
137
|
-
top:
|
|
138
|
-
bottom:
|
|
136
|
+
const i = (v = this._dialog) == null ? void 0 : v.getBoundingClientRect(), {
|
|
137
|
+
top: o = 0,
|
|
138
|
+
bottom: t = 0,
|
|
139
139
|
left: a = 0,
|
|
140
|
-
right:
|
|
140
|
+
right: s = 0
|
|
141
141
|
} = i || {};
|
|
142
|
-
if (
|
|
142
|
+
if (o === 0 && t === 0 && a === 0 && s === 0)
|
|
143
143
|
return;
|
|
144
|
-
(e.clientY <
|
|
144
|
+
(e.clientY < o || e.clientY > t || e.clientX < a || e.clientX > s) && (this.isOpen = !1);
|
|
145
145
|
}, this._dispatchModalCustomEvent = (e) => {
|
|
146
146
|
const i = new CustomEvent(e, {
|
|
147
147
|
bubbles: !0,
|
|
@@ -157,7 +157,7 @@ class l extends H(F) {
|
|
|
157
157
|
document.removeEventListener(b, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
|
|
158
158
|
}
|
|
159
159
|
async firstUpdated(e) {
|
|
160
|
-
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((
|
|
160
|
+
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((o) => o.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._dialog.addEventListener("close", () => {
|
|
161
161
|
this.isOpen = !1;
|
|
162
162
|
})), this._handleModalOpenStateOnFirstRender(e);
|
|
163
163
|
}
|
|
@@ -168,17 +168,17 @@ class l extends H(F) {
|
|
|
168
168
|
* Opens the dialog element and disables page scrolling
|
|
169
169
|
*/
|
|
170
170
|
_handleModalOpened() {
|
|
171
|
-
var i,
|
|
171
|
+
var i, o, t, a;
|
|
172
172
|
const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
|
|
173
|
-
e &&
|
|
173
|
+
e && V(e), !((o = this._dialog) != null && o.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((a = this._dialog) == null || a.showModal());
|
|
174
174
|
}
|
|
175
175
|
/**
|
|
176
176
|
* Closes the dialog element and re-enables page scrolling
|
|
177
177
|
*/
|
|
178
178
|
_handleModalClosed() {
|
|
179
|
-
var i,
|
|
179
|
+
var i, o;
|
|
180
180
|
const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
|
|
181
|
-
e &&
|
|
181
|
+
e && H(e), (o = this._dialog) == null || o.close(), this._returnFocus();
|
|
182
182
|
}
|
|
183
183
|
// Handles the value of the isOpen property on first render of the component
|
|
184
184
|
_handleModalOpenStateOnFirstRender(e) {
|
|
@@ -190,17 +190,17 @@ class l extends H(F) {
|
|
|
190
190
|
i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(b));
|
|
191
191
|
}
|
|
192
192
|
_handleActionClick(e) {
|
|
193
|
-
var i,
|
|
194
|
-
e === "leading" ? ((i = this._dialog) == null || i.close("leading"), this._dispatchModalCustomEvent(ee)) : e === "supporting" && ((
|
|
193
|
+
var i, o;
|
|
194
|
+
e === "leading" ? ((i = this._dialog) == null || i.close("leading"), this._dispatchModalCustomEvent(ee)) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), this._dispatchModalCustomEvent(ie));
|
|
195
195
|
}
|
|
196
196
|
/**
|
|
197
197
|
* Return focus to the specified element, providing the selector is valid
|
|
198
198
|
* and the chosen element can be found.
|
|
199
199
|
*/
|
|
200
200
|
_returnFocus() {
|
|
201
|
-
var i,
|
|
201
|
+
var i, o;
|
|
202
202
|
const e = (i = this.returnFocusAfterCloseSelector) == null ? void 0 : i.trim();
|
|
203
|
-
e && ((
|
|
203
|
+
e && ((o = document.querySelector(e)) == null || o.focus());
|
|
204
204
|
}
|
|
205
205
|
/**
|
|
206
206
|
* Template for the close button element. Called within the
|
|
@@ -253,11 +253,11 @@ class l extends H(F) {
|
|
|
253
253
|
* @private
|
|
254
254
|
*/
|
|
255
255
|
renderLeadingAction() {
|
|
256
|
-
const { text: e, variant: i = "primary", ariaLabel:
|
|
256
|
+
const { text: e, variant: i = "primary", ariaLabel: o } = this.leadingAction;
|
|
257
257
|
return e ? m`
|
|
258
258
|
<pie-button
|
|
259
259
|
variant="${i}"
|
|
260
|
-
aria-label="${
|
|
260
|
+
aria-label="${o || c}"
|
|
261
261
|
type="submit"
|
|
262
262
|
?isFullWidth="${this.hasStackedActions}"
|
|
263
263
|
@click="${() => this._handleActionClick("leading")}"
|
|
@@ -278,11 +278,11 @@ class l extends H(F) {
|
|
|
278
278
|
* @private
|
|
279
279
|
*/
|
|
280
280
|
renderSupportingAction() {
|
|
281
|
-
const { text: e, variant: i = "ghost", ariaLabel:
|
|
281
|
+
const { text: e, variant: i = "ghost", ariaLabel: o } = this.supportingAction;
|
|
282
282
|
return e ? this.leadingAction ? m`
|
|
283
283
|
<pie-button
|
|
284
284
|
variant="${i}"
|
|
285
|
-
aria-label="${
|
|
285
|
+
aria-label="${o || c}"
|
|
286
286
|
type="reset"
|
|
287
287
|
?isFullWidth="${this.hasStackedActions}"
|
|
288
288
|
@click="${() => this._handleActionClick("supporting")}"
|
|
@@ -312,12 +312,12 @@ class l extends H(F) {
|
|
|
312
312
|
const {
|
|
313
313
|
aria: e,
|
|
314
314
|
hasBackButton: i,
|
|
315
|
-
hasStackedActions:
|
|
316
|
-
heading:
|
|
315
|
+
hasStackedActions: o,
|
|
316
|
+
heading: t,
|
|
317
317
|
headingLevel: a = "h2",
|
|
318
|
-
isDismissible:
|
|
319
|
-
isFooterPinned:
|
|
320
|
-
isFullWidthBelowMid:
|
|
318
|
+
isDismissible: s,
|
|
319
|
+
isFooterPinned: g,
|
|
320
|
+
isFullWidthBelowMid: v,
|
|
321
321
|
isLoading: y,
|
|
322
322
|
leadingAction: S,
|
|
323
323
|
position: M,
|
|
@@ -332,10 +332,10 @@ class l extends H(F) {
|
|
|
332
332
|
position="${M}"
|
|
333
333
|
?hasActions=${S || P}
|
|
334
334
|
?hasBackButton=${i}
|
|
335
|
-
?hasStackedActions=${
|
|
336
|
-
?isDismissible=${
|
|
337
|
-
?isFooterPinned=${
|
|
338
|
-
?isFullWidthBelowMid=${
|
|
335
|
+
?hasStackedActions=${o}
|
|
336
|
+
?isDismissible=${s}
|
|
337
|
+
?isFooterPinned=${g}
|
|
338
|
+
?isFullWidthBelowMid=${v}
|
|
339
339
|
?isLoading=${y}
|
|
340
340
|
aria-busy="${y ? "true" : "false"}"
|
|
341
341
|
aria-label="${y && (e == null ? void 0 : e.loading) || c}"
|
|
@@ -343,12 +343,12 @@ class l extends H(F) {
|
|
|
343
343
|
<header class="c-modal-header">
|
|
344
344
|
${i ? this.renderBackButton() : c}
|
|
345
345
|
<${O} class="c-modal-heading">
|
|
346
|
-
${
|
|
346
|
+
${t}
|
|
347
347
|
</${O}>
|
|
348
|
-
${
|
|
348
|
+
${s ? this.renderCloseButton() : c}
|
|
349
349
|
</header>
|
|
350
350
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
351
|
-
|
|
351
|
+
g ? this.renderModalContentAndFooter() : m`
|
|
352
352
|
<div class="c-modal-scrollContainer">
|
|
353
353
|
${this.renderModalContentAndFooter()}
|
|
354
354
|
</div>
|
|
@@ -356,60 +356,60 @@ class l extends H(F) {
|
|
|
356
356
|
</dialog>`;
|
|
357
357
|
}
|
|
358
358
|
}
|
|
359
|
-
l.styles = T(
|
|
360
|
-
|
|
361
|
-
|
|
359
|
+
l.styles = T(K);
|
|
360
|
+
d([
|
|
361
|
+
r({ type: Object })
|
|
362
362
|
], l.prototype, "aria", 2);
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
G(
|
|
363
|
+
d([
|
|
364
|
+
r({ type: String }),
|
|
365
|
+
G(f)
|
|
366
366
|
], l.prototype, "heading", 2);
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
C(
|
|
367
|
+
d([
|
|
368
|
+
r(),
|
|
369
|
+
C(f, J, "h2")
|
|
370
370
|
], l.prototype, "headingLevel", 2);
|
|
371
|
-
|
|
372
|
-
|
|
371
|
+
d([
|
|
372
|
+
r({ type: Boolean })
|
|
373
373
|
], l.prototype, "hasBackButton", 2);
|
|
374
|
-
|
|
375
|
-
|
|
374
|
+
d([
|
|
375
|
+
r({ type: Boolean })
|
|
376
376
|
], l.prototype, "hasStackedActions", 2);
|
|
377
|
-
|
|
378
|
-
|
|
377
|
+
d([
|
|
378
|
+
r({ type: Boolean, reflect: !0 })
|
|
379
379
|
], l.prototype, "isDismissible", 2);
|
|
380
|
-
|
|
381
|
-
|
|
380
|
+
d([
|
|
381
|
+
r({ type: Boolean })
|
|
382
382
|
], l.prototype, "isFooterPinned", 2);
|
|
383
|
-
|
|
384
|
-
|
|
383
|
+
d([
|
|
384
|
+
r({ type: Boolean })
|
|
385
385
|
], l.prototype, "isFullWidthBelowMid", 2);
|
|
386
|
-
|
|
387
|
-
|
|
386
|
+
d([
|
|
387
|
+
r({ type: Boolean, reflect: !0 })
|
|
388
388
|
], l.prototype, "isLoading", 2);
|
|
389
|
-
|
|
390
|
-
|
|
389
|
+
d([
|
|
390
|
+
r({ type: Boolean })
|
|
391
391
|
], l.prototype, "isOpen", 2);
|
|
392
|
-
|
|
393
|
-
|
|
392
|
+
d([
|
|
393
|
+
r({ type: Object })
|
|
394
394
|
], l.prototype, "leadingAction", 2);
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
C(
|
|
395
|
+
d([
|
|
396
|
+
r(),
|
|
397
|
+
C(f, Z, "center")
|
|
398
398
|
], l.prototype, "position", 2);
|
|
399
|
-
|
|
400
|
-
|
|
399
|
+
d([
|
|
400
|
+
r()
|
|
401
401
|
], l.prototype, "returnFocusAfterCloseSelector", 2);
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
C(
|
|
402
|
+
d([
|
|
403
|
+
r(),
|
|
404
|
+
C(f, Q, "medium")
|
|
405
405
|
], l.prototype, "size", 2);
|
|
406
|
-
|
|
407
|
-
|
|
406
|
+
d([
|
|
407
|
+
r({ type: Object })
|
|
408
408
|
], l.prototype, "supportingAction", 2);
|
|
409
|
-
|
|
409
|
+
d([
|
|
410
410
|
N("dialog")
|
|
411
411
|
], l.prototype, "_dialog", 2);
|
|
412
|
-
X(
|
|
412
|
+
X(f, l);
|
|
413
413
|
export {
|
|
414
414
|
_ as ON_MODAL_BACK_EVENT,
|
|
415
415
|
x as ON_MODAL_CLOSE_EVENT,
|
|
@@ -417,7 +417,7 @@ export {
|
|
|
417
417
|
b as ON_MODAL_OPEN_EVENT,
|
|
418
418
|
ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
419
419
|
l as PieModal,
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
420
|
+
J as headingLevels,
|
|
421
|
+
Z as positions,
|
|
422
|
+
Q as sizes
|
|
423
423
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
|
-
import type { EventName } from '@lit
|
|
2
|
+
import type { EventName } from '@lit/react';
|
|
3
3
|
import type { LitElement } from 'lit';
|
|
4
4
|
import type { PropertyValues } from 'lit';
|
|
5
|
-
import type { ReactWebComponent } from '@lit
|
|
5
|
+
import type { ReactWebComponent } from '@lit/react';
|
|
6
6
|
import type { TemplateResult } from 'lit';
|
|
7
7
|
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
8
8
|
|
package/dist/react.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import * as o from "react";
|
|
2
|
+
import { createComponent as i } from "@lit/react";
|
|
3
|
+
import { PieModal as e } from "./index.js";
|
|
4
|
+
import { ON_MODAL_BACK_EVENT as C, ON_MODAL_CLOSE_EVENT as P, ON_MODAL_LEADING_ACTION_CLICK as A, ON_MODAL_OPEN_EVENT as L, ON_MODAL_SUPPORTING_ACTION_CLICK as E, headingLevels as g, positions as k, sizes as D } from "./index.js";
|
|
4
5
|
import "lit";
|
|
5
6
|
import "lit/static-html.js";
|
|
6
7
|
import "lit/decorators.js";
|
|
@@ -10,65 +11,10 @@ import "@justeattakeaway/pie-icons-webc/IconClose";
|
|
|
10
11
|
import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
|
|
11
12
|
import "@justeattakeaway/pie-icons-webc/IconChevronRight";
|
|
12
13
|
import "@justeattakeaway/pie-spinner";
|
|
13
|
-
|
|
14
|
-
* @license
|
|
15
|
-
* Copyright 2018 Google LLC
|
|
16
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/
|
|
18
|
-
const C = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), O = /* @__PURE__ */ new WeakMap(), L = (o, t, d, c, m) => {
|
|
19
|
-
const s = m == null ? void 0 : m[t];
|
|
20
|
-
s === void 0 || d === c ? d == null && t in HTMLElement.prototype ? o.removeAttribute(t) : o[t] = d : ((a, i, h) => {
|
|
21
|
-
let l = O.get(a);
|
|
22
|
-
l === void 0 && O.set(a, l = /* @__PURE__ */ new Map());
|
|
23
|
-
let r = l.get(i);
|
|
24
|
-
h !== void 0 ? r === void 0 ? (l.set(i, r = { handleEvent: h }), a.addEventListener(i, r)) : r.handleEvent = h : r !== void 0 && (l.delete(i), a.removeEventListener(i, r));
|
|
25
|
-
})(o, s, d);
|
|
26
|
-
}, A = (o, t) => {
|
|
27
|
-
typeof o == "function" ? o(t) : o.current = t;
|
|
28
|
-
};
|
|
29
|
-
function y(o = window.React, t, d, c, m) {
|
|
30
|
-
let s, a, i;
|
|
31
|
-
if (t === void 0) {
|
|
32
|
-
const p = o;
|
|
33
|
-
({ tagName: a, elementClass: i, events: c, displayName: m } = p), s = p.react;
|
|
34
|
-
} else
|
|
35
|
-
s = o, i = d, a = t;
|
|
36
|
-
const h = s.Component, l = s.createElement, r = new Set(Object.keys(c ?? {}));
|
|
37
|
-
class v extends h {
|
|
38
|
-
constructor() {
|
|
39
|
-
super(...arguments), this.o = null;
|
|
40
|
-
}
|
|
41
|
-
t(e) {
|
|
42
|
-
if (this.o !== null)
|
|
43
|
-
for (const u in this.i)
|
|
44
|
-
L(this.o, u, this.props[u], e ? e[u] : void 0, c);
|
|
45
|
-
}
|
|
46
|
-
componentDidMount() {
|
|
47
|
-
var e;
|
|
48
|
-
this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
|
|
49
|
-
}
|
|
50
|
-
componentDidUpdate(e) {
|
|
51
|
-
this.t(e);
|
|
52
|
-
}
|
|
53
|
-
render() {
|
|
54
|
-
const { _$Gl: e, ...u } = this.props;
|
|
55
|
-
this.h !== e && (this.u = (n) => {
|
|
56
|
-
e !== null && A(e, n), this.o = n, this.h = e;
|
|
57
|
-
}), this.i = {};
|
|
58
|
-
const N = { ref: this.u };
|
|
59
|
-
for (const [n, _] of Object.entries(u))
|
|
60
|
-
C.has(n) ? N[n === "className" ? "class" : n] = _ : r.has(n) || n in i.prototype ? this.i[n] = _ : N[n] = _;
|
|
61
|
-
return N.suppressHydrationWarning = !0, l(a, N);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
v.displayName = m ?? i.name;
|
|
65
|
-
const M = s.forwardRef((p, e) => l(v, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
|
|
66
|
-
return M.displayName = v.displayName, M;
|
|
67
|
-
}
|
|
68
|
-
const R = y({
|
|
14
|
+
const s = i({
|
|
69
15
|
displayName: "PieModal",
|
|
70
|
-
elementClass:
|
|
71
|
-
react:
|
|
16
|
+
elementClass: e,
|
|
17
|
+
react: o,
|
|
72
18
|
tagName: "pie-modal",
|
|
73
19
|
events: {
|
|
74
20
|
onPieModalOpen: "pie-modal-open",
|
|
@@ -84,13 +30,13 @@ const R = y({
|
|
|
84
30
|
}
|
|
85
31
|
});
|
|
86
32
|
export {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
33
|
+
C as ON_MODAL_BACK_EVENT,
|
|
34
|
+
P as ON_MODAL_CLOSE_EVENT,
|
|
35
|
+
A as ON_MODAL_LEADING_ACTION_CLICK,
|
|
36
|
+
L as ON_MODAL_OPEN_EVENT,
|
|
37
|
+
E as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
38
|
+
s as PieModal,
|
|
39
|
+
g as headingLevels,
|
|
40
|
+
k as positions,
|
|
41
|
+
D as sizes
|
|
96
42
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.33.
|
|
3
|
+
"version": "0.33.1",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"extends": "../../../package.json"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@justeattakeaway/pie-button": "0.39.
|
|
40
|
-
"@justeattakeaway/pie-icon-button": "0.21.
|
|
39
|
+
"@justeattakeaway/pie-button": "0.39.1",
|
|
40
|
+
"@justeattakeaway/pie-icon-button": "0.21.3",
|
|
41
41
|
"@justeattakeaway/pie-icons-webc": "0.11.1",
|
|
42
|
-
"@justeattakeaway/pie-spinner": "0.2.
|
|
43
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
42
|
+
"@justeattakeaway/pie-spinner": "0.2.2",
|
|
43
|
+
"@justeattakeaway/pie-webc-core": "0.12.0",
|
|
44
44
|
"body-scroll-lock": "3.1.5",
|
|
45
45
|
"dialog-polyfill": "0.5.6"
|
|
46
46
|
},
|