@justeattakeaway/pie-modal 0.22.0 → 0.24.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/dist/index.js +86 -86
- package/package.json +7 -7
- package/src/modal.scss +1 -7
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { isServer as te, css as I, LitElement as O, html as M, unsafeCSS as
|
|
2
|
-
import { html as p, unsafeStatic as
|
|
1
|
+
import { isServer as te, css as I, LitElement as O, html as M, unsafeCSS as oe, nothing as c } from "lit";
|
|
2
|
+
import { html as p, unsafeStatic as ie } from "lit/static-html.js";
|
|
3
3
|
import { property as r, query as $ } from "lit/decorators.js";
|
|
4
4
|
const ne = (n) => {
|
|
5
5
|
class e extends n {
|
|
@@ -17,9 +17,9 @@ const ne = (n) => {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
return e;
|
|
20
|
-
}, E = (n, e, t) => function(
|
|
20
|
+
}, E = (n, e, t) => function(i, a) {
|
|
21
21
|
const l = `#${a}`;
|
|
22
|
-
Object.defineProperty(
|
|
22
|
+
Object.defineProperty(i, a, {
|
|
23
23
|
get() {
|
|
24
24
|
return this[l];
|
|
25
25
|
},
|
|
@@ -32,15 +32,15 @@ const ne = (n) => {
|
|
|
32
32
|
), this[l] = t), this.requestUpdate(a, u);
|
|
33
33
|
}
|
|
34
34
|
});
|
|
35
|
-
}, ae = (n) => function(t,
|
|
36
|
-
const
|
|
37
|
-
Object.defineProperty(t,
|
|
35
|
+
}, ae = (n) => function(t, o) {
|
|
36
|
+
const i = `#${o}`;
|
|
37
|
+
Object.defineProperty(t, o, {
|
|
38
38
|
get() {
|
|
39
|
-
return this[
|
|
39
|
+
return this[i];
|
|
40
40
|
},
|
|
41
41
|
set(a) {
|
|
42
|
-
const l = this[
|
|
43
|
-
(a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${
|
|
42
|
+
const l = this[i];
|
|
43
|
+
(a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[i] = a, this.requestUpdate(o, l);
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
46
|
}, _ = {
|
|
@@ -52,8 +52,8 @@ const ne = (n) => {
|
|
|
52
52
|
xxl: 40
|
|
53
53
|
}, W = Object.keys(_), Y = "xs", U = 8, z = 32;
|
|
54
54
|
function le(n, e, t) {
|
|
55
|
-
const
|
|
56
|
-
return
|
|
55
|
+
const o = parseInt(n, 10), i = o % t === 0;
|
|
56
|
+
return o >= e && i;
|
|
57
57
|
}
|
|
58
58
|
const H = {
|
|
59
59
|
large: (n) => le(n, z, U),
|
|
@@ -67,26 +67,26 @@ function se(n) {
|
|
|
67
67
|
const e = H.regular(n), t = e ? _[n] : _[Y];
|
|
68
68
|
return { isValid: e, size: t };
|
|
69
69
|
}
|
|
70
|
-
const m = (n, e, t,
|
|
71
|
-
const
|
|
70
|
+
const m = (n, e, t, o) => {
|
|
71
|
+
const i = n.endsWith("Large") || n.endsWith("-large");
|
|
72
72
|
let a, l;
|
|
73
73
|
if (t) {
|
|
74
|
-
if ({ isValid: a, size: l } =
|
|
75
|
-
const h =
|
|
74
|
+
if ({ isValid: a, size: l } = i ? re(t) : se(t), !a) {
|
|
75
|
+
const h = i ? `Invalid prop "size" value supplied to "${o}". The prop value should be a number equal or greater than ${z} and multiple of ${U}.` : `Invalid prop "size" value supplied to "${o}". The prop value should be one of the following values: ${W.join(", ")}.`;
|
|
76
76
|
console.error(h);
|
|
77
77
|
}
|
|
78
78
|
} else
|
|
79
|
-
l =
|
|
79
|
+
l = i ? z : _[Y];
|
|
80
80
|
return {
|
|
81
81
|
class: [n, e].filter(Boolean).join(" "),
|
|
82
82
|
width: l,
|
|
83
83
|
height: l
|
|
84
84
|
};
|
|
85
85
|
};
|
|
86
|
-
var de = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, P = (n, e, t,
|
|
87
|
-
for (var
|
|
88
|
-
(l = n[a]) && (
|
|
89
|
-
return
|
|
86
|
+
var de = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, P = (n, e, t, o) => {
|
|
87
|
+
for (var i = o > 1 ? void 0 : o ? ce(e, t) : e, a = n.length - 1, l; a >= 0; a--)
|
|
88
|
+
(l = n[a]) && (i = (o ? l(e, t, i) : l(i)) || i);
|
|
89
|
+
return o && i && de(e, t, i), i;
|
|
90
90
|
};
|
|
91
91
|
const R = "icon-close";
|
|
92
92
|
let b = class extends O {
|
|
@@ -94,16 +94,16 @@ let b = class extends O {
|
|
|
94
94
|
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--close";
|
|
95
95
|
}
|
|
96
96
|
connectedCallback() {
|
|
97
|
-
var e, t,
|
|
97
|
+
var e, t, o;
|
|
98
98
|
if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
|
|
99
|
-
const
|
|
100
|
-
(t = this._svg) == null || t.setAttribute("width",
|
|
99
|
+
const i = m("c-pieIcon c-pieIcon--close", "", null, "IconClose");
|
|
100
|
+
(t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height);
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
updated(e) {
|
|
104
|
-
var t,
|
|
105
|
-
let
|
|
106
|
-
e.has("size") && (
|
|
104
|
+
var t, o;
|
|
105
|
+
let i;
|
|
106
|
+
e.has("size") && (i = m("c-pieIcon c-pieIcon--close", "", this.size, "IconClose"), (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height));
|
|
107
107
|
}
|
|
108
108
|
render() {
|
|
109
109
|
return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--close"><path d="M11.868 3.205 8 7.072 4.133 3.205l-.928.927L7.073 8l-3.868 3.867.928.928L8 8.927l3.868 3.868.927-.928L8.928 8l3.867-3.868-.927-.927Z"></path></svg>`;
|
|
@@ -127,10 +127,10 @@ P([
|
|
|
127
127
|
$("svg")
|
|
128
128
|
], b.prototype, "_svg", 2);
|
|
129
129
|
customElements.get(R) === void 0 && customElements.define(R, b);
|
|
130
|
-
var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, D = (n, e, t,
|
|
131
|
-
for (var
|
|
132
|
-
(l = n[a]) && (
|
|
133
|
-
return
|
|
130
|
+
var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, D = (n, e, t, o) => {
|
|
131
|
+
for (var i = o > 1 ? void 0 : o ? pe(e, t) : e, a = n.length - 1, l; a >= 0; a--)
|
|
132
|
+
(l = n[a]) && (i = (o ? l(e, t, i) : l(i)) || i);
|
|
133
|
+
return o && i && he(e, t, i), i;
|
|
134
134
|
};
|
|
135
135
|
const N = "icon-chevron-left";
|
|
136
136
|
class w extends O {
|
|
@@ -138,16 +138,16 @@ class w extends O {
|
|
|
138
138
|
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
|
|
139
139
|
}
|
|
140
140
|
connectedCallback() {
|
|
141
|
-
var e, t,
|
|
141
|
+
var e, t, o;
|
|
142
142
|
if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
|
|
143
|
-
const
|
|
144
|
-
(t = this._svg) == null || t.setAttribute("width",
|
|
143
|
+
const i = m("c-pieIcon c-pieIcon--chevronLeft", "", null, "IconChevronLeft");
|
|
144
|
+
(t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height);
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
147
|
updated(e) {
|
|
148
|
-
var t,
|
|
149
|
-
let
|
|
150
|
-
e.has("size") && (
|
|
148
|
+
var t, o;
|
|
149
|
+
let i;
|
|
150
|
+
e.has("size") && (i = m("c-pieIcon c-pieIcon--chevronLeft", "", this.size, "IconChevronLeft"), (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height));
|
|
151
151
|
}
|
|
152
152
|
render() {
|
|
153
153
|
return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronLeft"><path d="M10.96 2.82 5.605 8l5.399 5.197-.875.963-5.565-5.364a1.164 1.164 0 0 1 0-1.671l5.495-5.25.901.945Z"></path></svg>`;
|
|
@@ -171,10 +171,10 @@ D([
|
|
|
171
171
|
$("svg")
|
|
172
172
|
], w.prototype, "_svg", 2);
|
|
173
173
|
customElements.get(N) === void 0 && customElements.define(N, w);
|
|
174
|
-
var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, T = (n, e, t,
|
|
175
|
-
for (var
|
|
176
|
-
(l = n[a]) && (
|
|
177
|
-
return
|
|
174
|
+
var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, T = (n, e, t, o) => {
|
|
175
|
+
for (var i = o > 1 ? void 0 : o ? ue(e, t) : e, a = n.length - 1, l; a >= 0; a--)
|
|
176
|
+
(l = n[a]) && (i = (o ? l(e, t, i) : l(i)) || i);
|
|
177
|
+
return o && i && ge(e, t, i), i;
|
|
178
178
|
};
|
|
179
179
|
const q = "icon-chevron-right";
|
|
180
180
|
class y extends O {
|
|
@@ -182,16 +182,16 @@ class y extends O {
|
|
|
182
182
|
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronRight";
|
|
183
183
|
}
|
|
184
184
|
connectedCallback() {
|
|
185
|
-
var e, t,
|
|
185
|
+
var e, t, o;
|
|
186
186
|
if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
|
|
187
|
-
const
|
|
188
|
-
(t = this._svg) == null || t.setAttribute("width",
|
|
187
|
+
const i = m("c-pieIcon c-pieIcon--chevronRight", "", null, "IconChevronRight");
|
|
188
|
+
(t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height);
|
|
189
189
|
}
|
|
190
190
|
}
|
|
191
191
|
updated(e) {
|
|
192
|
-
var t,
|
|
193
|
-
let
|
|
194
|
-
e.has("size") && (
|
|
192
|
+
var t, o;
|
|
193
|
+
let i;
|
|
194
|
+
e.has("size") && (i = m("c-pieIcon c-pieIcon--chevronRight", "", this.size, "IconChevronRight"), (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height));
|
|
195
195
|
}
|
|
196
196
|
render() {
|
|
197
197
|
return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronRight"><path d="M5.044 13.18 10.399 8 5 2.82l.875-.962 5.539 5.346a1.164 1.164 0 0 1 0 1.636l-5.469 5.285-.901-.945Z"></path></svg>`;
|
|
@@ -241,8 +241,8 @@ var Z = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
241
241
|
return X(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
|
|
242
242
|
}, ve = function(e) {
|
|
243
243
|
if (f === void 0) {
|
|
244
|
-
var t = !!e && e.reserveScrollBarGap === !0,
|
|
245
|
-
t &&
|
|
244
|
+
var t = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
|
|
245
|
+
t && o > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
|
|
246
246
|
}
|
|
247
247
|
v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
248
248
|
}, fe = function() {
|
|
@@ -250,24 +250,24 @@ var Z = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
250
250
|
}, be = function(e) {
|
|
251
251
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
252
252
|
}, we = function(e, t) {
|
|
253
|
-
var
|
|
254
|
-
return X(e.target) ? !1 : t && t.scrollTop === 0 &&
|
|
253
|
+
var o = e.targetTouches[0].clientY - G;
|
|
254
|
+
return X(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || be(t) && o < 0 ? A(e) : (e.stopPropagation(), !0);
|
|
255
255
|
}, ye = function(e, t) {
|
|
256
256
|
if (!e) {
|
|
257
257
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
258
258
|
return;
|
|
259
259
|
}
|
|
260
|
-
if (!g.some(function(
|
|
261
|
-
return
|
|
260
|
+
if (!g.some(function(i) {
|
|
261
|
+
return i.targetElement === e;
|
|
262
262
|
})) {
|
|
263
|
-
var
|
|
263
|
+
var o = {
|
|
264
264
|
targetElement: e,
|
|
265
265
|
options: t || {}
|
|
266
266
|
};
|
|
267
|
-
g = [].concat(me(g), [
|
|
268
|
-
|
|
269
|
-
}, e.ontouchmove = function(
|
|
270
|
-
|
|
267
|
+
g = [].concat(me(g), [o]), Z ? (e.ontouchstart = function(i) {
|
|
268
|
+
i.targetTouches.length === 1 && (G = i.targetTouches[0].clientY);
|
|
269
|
+
}, e.ontouchmove = function(i) {
|
|
270
|
+
i.targetTouches.length === 1 && we(i, e);
|
|
271
271
|
}, C || (document.addEventListener("touchmove", A, j ? { passive: !1 } : void 0), C = !0)) : ve(t);
|
|
272
272
|
}
|
|
273
273
|
}, ke = function(e) {
|
|
@@ -279,12 +279,12 @@ var Z = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
279
279
|
return t.targetElement !== e;
|
|
280
280
|
}), Z ? (e.ontouchstart = null, e.ontouchmove = null, C && g.length === 0 && (document.removeEventListener("touchmove", A, j ? { passive: !1 } : void 0), C = !1)) : g.length || fe();
|
|
281
281
|
};
|
|
282
|
-
const xe = `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}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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);
|
|
282
|
+
const xe = `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}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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: 768px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j)}@media (max-width: 767px){.c-modal[position=top][isfullwidthbelowmid]{margin-block-start:var(--dt-spacing-none)}}.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{padding-inline:var(--dt-spacing-d);padding-block:14px;display:grid;grid-template-areas:"back heading close" ". heading .";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:center}@media (min-width: 768px){.c-modal .c-modal-header{padding-inline:var(--dt-spacing-e);padding-block:20px}}.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-b);padding-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-c);padding-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-header{padding-block:var(--dt-spacing-b);padding-inline-end:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-header{padding-block:var(--dt-spacing-c);padding-inline-end:var(--dt-spacing-c)}}.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);--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}.c-modal[hasbackbutton] .c-modal-heading{padding-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{padding-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{padding-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{padding-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back}.c-modal .c-modal-closeBtn{grid-area:close}.c-modal[isfooterpinned] .c-modal-content,.c-modal .c-modal-scrollContainer{overflow-y:auto}.c-modal .c-modal-scrollContainer{--bg-scroll-start: linear-gradient(var(--dt-color-container-default) 30%, rgba(255, 255, 255, 0));--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-top: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));--bg-scroll-bottom: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-start: 100% 40px;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-top: 100% 16px;--bg-size-scroll-bottom: 100% 16px;background:var(--bg-scroll-start),var(--bg-scroll-end),var(--bg-scroll-top),var(--bg-scroll-bottom);background-repeat:no-repeat;background-color:var(--dt-color-container-default);background-size:var(--bg-size-scroll-start),var(--bg-size-scroll-end),var(--bg-size-scroll-top),var(--bg-size-scroll-bottom);background-attachment:local,local,scroll,scroll}.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: var(--dt-spacing-e);--modal-content-padding-block: var(--dt-spacing-a);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;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);padding-block:var(--modal-content-padding-block)}.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-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal[isLoading] .c-modal-content:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}
|
|
283
283
|
`, _e = ["h1", "h2", "h3", "h4", "h5", "h6"], ze = ["small", "medium", "large"], Ce = ["top", "center"], S = "pie-modal-close", x = "pie-modal-open", B = "pie-modal-back", Ae = "pie-modal-leading-action-click", Oe = "pie-modal-supporting-action-click";
|
|
284
|
-
var $e = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, d = (n, e, t,
|
|
285
|
-
for (var
|
|
286
|
-
(l = n[a]) && (
|
|
287
|
-
return
|
|
284
|
+
var $e = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, d = (n, e, t, o) => {
|
|
285
|
+
for (var i = o > 1 ? void 0 : o ? Le(e, t) : e, a = n.length - 1, l; a >= 0; a--)
|
|
286
|
+
(l = n[a]) && (i = (o ? l(e, t, i) : l(i)) || i);
|
|
287
|
+
return o && i && $e(e, t, i), i;
|
|
288
288
|
};
|
|
289
289
|
const k = "pie-modal";
|
|
290
290
|
class s extends ne(O) {
|
|
@@ -296,14 +296,14 @@ class s extends ne(O) {
|
|
|
296
296
|
if (!this.isDismissible)
|
|
297
297
|
return;
|
|
298
298
|
const t = (u = this._dialog) == null ? void 0 : u.getBoundingClientRect(), {
|
|
299
|
-
top:
|
|
300
|
-
bottom:
|
|
299
|
+
top: o = 0,
|
|
300
|
+
bottom: i = 0,
|
|
301
301
|
left: a = 0,
|
|
302
302
|
right: l = 0
|
|
303
303
|
} = t || {};
|
|
304
|
-
if (
|
|
304
|
+
if (o === 0 && i === 0 && a === 0 && l === 0)
|
|
305
305
|
return;
|
|
306
|
-
(e.clientY <
|
|
306
|
+
(e.clientY < o || e.clientY > i || e.clientX < a || e.clientX > l) && (this.isOpen = !1);
|
|
307
307
|
}, this._dispatchModalCustomEvent = (e) => {
|
|
308
308
|
const t = new CustomEvent(e, {
|
|
309
309
|
bubbles: !0,
|
|
@@ -319,7 +319,7 @@ class s extends ne(O) {
|
|
|
319
319
|
document.removeEventListener(x, this._handleModalOpened.bind(this)), document.removeEventListener(S, this._handleModalClosed.bind(this)), document.removeEventListener(B, this._handleModalClosed.bind(this)), super.disconnectedCallback();
|
|
320
320
|
}
|
|
321
321
|
async firstUpdated(e) {
|
|
322
|
-
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((
|
|
322
|
+
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", () => {
|
|
323
323
|
this.isOpen = !1;
|
|
324
324
|
})), this._handleModalOpenStateOnFirstRender(e);
|
|
325
325
|
}
|
|
@@ -330,17 +330,17 @@ class s extends ne(O) {
|
|
|
330
330
|
* Opens the dialog element and disables page scrolling
|
|
331
331
|
*/
|
|
332
332
|
_handleModalOpened() {
|
|
333
|
-
var t,
|
|
333
|
+
var t, o, i, a;
|
|
334
334
|
const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
|
|
335
|
-
e && ye(e), !((
|
|
335
|
+
e && ye(e), !((o = this._dialog) != null && o.hasAttribute("open") || !((i = this._dialog) != null && i.isConnected)) && ((a = this._dialog) == null || a.showModal());
|
|
336
336
|
}
|
|
337
337
|
/**
|
|
338
338
|
* Closes the dialog element and re-enables page scrolling
|
|
339
339
|
*/
|
|
340
340
|
_handleModalClosed() {
|
|
341
|
-
var t,
|
|
341
|
+
var t, o;
|
|
342
342
|
const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
|
|
343
|
-
e && ke(e), (
|
|
343
|
+
e && ke(e), (o = this._dialog) == null || o.close(), this._returnFocus();
|
|
344
344
|
}
|
|
345
345
|
// Handles the value of the isOpen property on first render of the component
|
|
346
346
|
_handleModalOpenStateOnFirstRender(e) {
|
|
@@ -352,17 +352,17 @@ class s extends ne(O) {
|
|
|
352
352
|
t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(B)) : this._dispatchModalCustomEvent(S) : this._dispatchModalCustomEvent(x));
|
|
353
353
|
}
|
|
354
354
|
_handleActionClick(e) {
|
|
355
|
-
var t,
|
|
356
|
-
e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(Ae)) : e === "supporting" && ((
|
|
355
|
+
var t, o;
|
|
356
|
+
e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(Ae)) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), this._dispatchModalCustomEvent(Oe));
|
|
357
357
|
}
|
|
358
358
|
/**
|
|
359
359
|
* Return focus to the specified element, providing the selector is valid
|
|
360
360
|
* and the chosen element can be found.
|
|
361
361
|
*/
|
|
362
362
|
_returnFocus() {
|
|
363
|
-
var t,
|
|
363
|
+
var t, o;
|
|
364
364
|
const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
|
|
365
|
-
e && ((
|
|
365
|
+
e && ((o = document.querySelector(e)) == null || o.focus());
|
|
366
366
|
}
|
|
367
367
|
/**
|
|
368
368
|
* Template for the close button element. Called within the
|
|
@@ -415,11 +415,11 @@ class s extends ne(O) {
|
|
|
415
415
|
* @private
|
|
416
416
|
*/
|
|
417
417
|
renderLeadingAction() {
|
|
418
|
-
const { text: e, variant: t = "primary", ariaLabel:
|
|
418
|
+
const { text: e, variant: t = "primary", ariaLabel: o } = this.leadingAction;
|
|
419
419
|
return e ? p`
|
|
420
420
|
<pie-button
|
|
421
421
|
variant="${t}"
|
|
422
|
-
aria-label="${
|
|
422
|
+
aria-label="${o || c}"
|
|
423
423
|
type="submit"
|
|
424
424
|
?isFullWidth="${this.hasStackedActions}"
|
|
425
425
|
@click="${() => this._handleActionClick("leading")}"
|
|
@@ -440,11 +440,11 @@ class s extends ne(O) {
|
|
|
440
440
|
* @private
|
|
441
441
|
*/
|
|
442
442
|
renderSupportingAction() {
|
|
443
|
-
const { text: e, variant: t = "ghost", ariaLabel:
|
|
443
|
+
const { text: e, variant: t = "ghost", ariaLabel: o } = this.supportingAction;
|
|
444
444
|
return e ? this.leadingAction ? p`
|
|
445
445
|
<pie-button
|
|
446
446
|
variant="${t}"
|
|
447
|
-
aria-label="${
|
|
447
|
+
aria-label="${o || c}"
|
|
448
448
|
type="reset"
|
|
449
449
|
?isFullWidth="${this.hasStackedActions}"
|
|
450
450
|
@click="${() => this._handleActionClick("supporting")}"
|
|
@@ -473,8 +473,8 @@ class s extends ne(O) {
|
|
|
473
473
|
const {
|
|
474
474
|
aria: e,
|
|
475
475
|
hasBackButton: t,
|
|
476
|
-
hasStackedActions:
|
|
477
|
-
heading:
|
|
476
|
+
hasStackedActions: o,
|
|
477
|
+
heading: i,
|
|
478
478
|
headingLevel: a = "h2",
|
|
479
479
|
isDismissible: l,
|
|
480
480
|
isFooterPinned: h,
|
|
@@ -484,7 +484,7 @@ class s extends ne(O) {
|
|
|
484
484
|
position: Q,
|
|
485
485
|
size: K,
|
|
486
486
|
supportingAction: ee
|
|
487
|
-
} = this, F =
|
|
487
|
+
} = this, F = ie(a);
|
|
488
488
|
return p`
|
|
489
489
|
<dialog
|
|
490
490
|
id="dialog"
|
|
@@ -493,7 +493,7 @@ class s extends ne(O) {
|
|
|
493
493
|
position="${Q}"
|
|
494
494
|
?hasActions=${J || ee}
|
|
495
495
|
?hasBackButton=${t}
|
|
496
|
-
?hasStackedActions=${
|
|
496
|
+
?hasStackedActions=${o}
|
|
497
497
|
?isDismissible=${l}
|
|
498
498
|
?isFooterPinned=${h}
|
|
499
499
|
?isFullWidthBelowMid=${u}
|
|
@@ -504,7 +504,7 @@ class s extends ne(O) {
|
|
|
504
504
|
<header class="c-modal-header">
|
|
505
505
|
${t ? this.renderBackButton() : c}
|
|
506
506
|
<${F} class="c-modal-heading">
|
|
507
|
-
${
|
|
507
|
+
${i}
|
|
508
508
|
</${F}>
|
|
509
509
|
${l ? this.renderCloseButton() : c}
|
|
510
510
|
</header>
|
|
@@ -517,7 +517,7 @@ class s extends ne(O) {
|
|
|
517
517
|
</dialog>`;
|
|
518
518
|
}
|
|
519
519
|
}
|
|
520
|
-
s.styles =
|
|
520
|
+
s.styles = oe(xe);
|
|
521
521
|
d([
|
|
522
522
|
r({ type: Object })
|
|
523
523
|
], s.prototype, "aria", 2);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.24.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"author": "JustEatTakeaway - Design System Web Team",
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@justeat/pie-design-tokens": "5.
|
|
32
|
-
"@justeattakeaway/pie-button": "
|
|
33
|
-
"@justeattakeaway/pie-components-config": "
|
|
34
|
-
"@justeattakeaway/pie-icon-button": "
|
|
35
|
-
"@justeattakeaway/pie-icons-webc": "
|
|
36
|
-
"@justeattakeaway/pie-webc-core": "
|
|
31
|
+
"@justeat/pie-design-tokens": "5.8.2",
|
|
32
|
+
"@justeattakeaway/pie-button": "0.29.0",
|
|
33
|
+
"@justeattakeaway/pie-components-config": "0.4.0",
|
|
34
|
+
"@justeattakeaway/pie-icon-button": "0.15.0",
|
|
35
|
+
"@justeattakeaway/pie-icons-webc": "0.8.1",
|
|
36
|
+
"@justeattakeaway/pie-webc-core": "0.9.0",
|
|
37
37
|
"@types/body-scroll-lock": "3.1.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
package/src/modal.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
@use '@justeattakeaway/pie-css/scss' as p;
|
|
1
2
|
@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
|
|
2
3
|
@use 'dialog-polyfill/dist/dialog-polyfill.css';
|
|
3
4
|
|
|
4
|
-
// TODO - add to CSS lib once created
|
|
5
5
|
*,
|
|
6
6
|
*:before,
|
|
7
7
|
*:after {
|
|
@@ -34,12 +34,6 @@
|
|
|
34
34
|
--modal-bg-color: var(--dt-color-container-default);
|
|
35
35
|
--modal-elevation: var(--dt-elevation-04);
|
|
36
36
|
|
|
37
|
-
// TODO: This should be moved into global CSS typography setting
|
|
38
|
-
// This should be imported by consuming apps and set on the application body
|
|
39
|
-
text-rendering: optimizelegibility;
|
|
40
|
-
-webkit-font-smoothing: antialiased;
|
|
41
|
-
-moz-font-smoothing: antialiased;
|
|
42
|
-
|
|
43
37
|
&:focus-visible {
|
|
44
38
|
outline: none;
|
|
45
39
|
}
|