@justeattakeaway/pie-modal 0.27.0 → 0.28.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.d.ts +1 -0
- package/dist/index.js +110 -103
- package/dist/react.d.ts +1 -0
- package/package.json +5 -5
- package/src/index.ts +3 -2
package/dist/index.d.ts
CHANGED
|
@@ -133,6 +133,7 @@ export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
|
|
|
133
133
|
export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-action-click";
|
|
134
134
|
|
|
135
135
|
/**
|
|
136
|
+
* @tagname pie-modal
|
|
136
137
|
* @event {CustomEvent} pie-modal-open - when the modal is opened.
|
|
137
138
|
* @event {CustomEvent} pie-modal-close - when the modal is closed.
|
|
138
139
|
* @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { isServer as
|
|
2
|
-
import { html as p, unsafeStatic as
|
|
3
|
-
import { property as l, query as
|
|
4
|
-
const
|
|
1
|
+
import { isServer as K, css as I, LitElement as $, html as M, unsafeCSS as ee, nothing as c } from "lit";
|
|
2
|
+
import { html as p, unsafeStatic as te } from "lit/static-html.js";
|
|
3
|
+
import { property as l, query as O } from "lit/decorators.js";
|
|
4
|
+
const ie = (n) => {
|
|
5
5
|
class e extends n {
|
|
6
6
|
/**
|
|
7
7
|
* A getter to determine whether the text direction is right-to-left (RTL).
|
|
@@ -13,7 +13,7 @@ const ne = (n) => {
|
|
|
13
13
|
* @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
|
|
14
14
|
*/
|
|
15
15
|
get isRTL() {
|
|
16
|
-
return this.dir ? this.dir === "rtl" : !
|
|
16
|
+
return this.dir ? this.dir === "rtl" : !K && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
return e;
|
|
@@ -32,7 +32,7 @@ const ne = (n) => {
|
|
|
32
32
|
), this[r] = t), this.requestUpdate(a, m);
|
|
33
33
|
}
|
|
34
34
|
});
|
|
35
|
-
},
|
|
35
|
+
}, oe = (n) => function(t, i) {
|
|
36
36
|
const o = `#${i}`;
|
|
37
37
|
Object.defineProperty(t, i, {
|
|
38
38
|
get() {
|
|
@@ -43,53 +43,60 @@ const ne = (n) => {
|
|
|
43
43
|
(a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${i}"`), this[o] = a, this.requestUpdate(i, r);
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
|
-
}
|
|
46
|
+
};
|
|
47
|
+
function ne(n, e) {
|
|
48
|
+
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);
|
|
49
|
+
}
|
|
50
|
+
function P(n, e) {
|
|
51
|
+
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);
|
|
52
|
+
}
|
|
53
|
+
const z = {
|
|
47
54
|
xs: 16,
|
|
48
55
|
s: 20,
|
|
49
56
|
m: 24,
|
|
50
57
|
l: 28,
|
|
51
58
|
xl: 32,
|
|
52
59
|
xxl: 40
|
|
53
|
-
}, W = Object.keys(z),
|
|
54
|
-
function
|
|
60
|
+
}, W = Object.keys(z), q = "xs", V = 8, _ = 32;
|
|
61
|
+
function ae(n, e, t) {
|
|
55
62
|
const i = parseInt(n, 10), o = i % t === 0;
|
|
56
63
|
return i >= e && o;
|
|
57
64
|
}
|
|
58
|
-
const
|
|
59
|
-
large: (n) =>
|
|
65
|
+
const Y = {
|
|
66
|
+
large: (n) => ae(n, _, V),
|
|
60
67
|
regular: (n) => W.includes(n)
|
|
61
68
|
};
|
|
62
|
-
function
|
|
63
|
-
const e =
|
|
69
|
+
function re(n) {
|
|
70
|
+
const e = Y.large(n);
|
|
64
71
|
return { isValid: e, size: e ? n : _ };
|
|
65
72
|
}
|
|
66
|
-
function
|
|
67
|
-
const e =
|
|
73
|
+
function le(n) {
|
|
74
|
+
const e = Y.regular(n), t = e ? z[n] : z[q];
|
|
68
75
|
return { isValid: e, size: t };
|
|
69
76
|
}
|
|
70
77
|
const u = (n, e, t, i) => {
|
|
71
78
|
const o = n.endsWith("Large") || n.endsWith("-large");
|
|
72
79
|
let a, r;
|
|
73
80
|
if (t) {
|
|
74
|
-
if ({ isValid: a, size: r } = o ?
|
|
75
|
-
const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${_} and multiple of ${
|
|
81
|
+
if ({ isValid: a, size: r } = o ? re(t) : le(t), !a) {
|
|
82
|
+
const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${_} and multiple of ${V}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${W.join(", ")}.`;
|
|
76
83
|
console.error(h);
|
|
77
84
|
}
|
|
78
85
|
} else
|
|
79
|
-
r = o ? _ : z[
|
|
86
|
+
r = o ? _ : z[q];
|
|
80
87
|
return {
|
|
81
88
|
class: [n, e].filter(Boolean).join(" "),
|
|
82
89
|
width: r,
|
|
83
90
|
height: r
|
|
84
91
|
};
|
|
85
92
|
};
|
|
86
|
-
var
|
|
87
|
-
for (var o = i > 1 ? void 0 : i ?
|
|
93
|
+
var se = Object.defineProperty, de = Object.getOwnPropertyDescriptor, D = (n, e, t, i) => {
|
|
94
|
+
for (var o = i > 1 ? void 0 : i ? de(e, t) : e, a = n.length - 1, r; a >= 0; a--)
|
|
88
95
|
(r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
|
|
89
|
-
return i && o &&
|
|
96
|
+
return i && o && se(e, t, o), o;
|
|
90
97
|
};
|
|
91
|
-
const
|
|
92
|
-
|
|
98
|
+
const ce = "icon-close";
|
|
99
|
+
class b extends $ {
|
|
93
100
|
constructor() {
|
|
94
101
|
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--close";
|
|
95
102
|
}
|
|
@@ -108,7 +115,7 @@ let b = class extends O {
|
|
|
108
115
|
render() {
|
|
109
116
|
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>`;
|
|
110
117
|
}
|
|
111
|
-
}
|
|
118
|
+
}
|
|
112
119
|
b.styles = I`
|
|
113
120
|
:host-context(pie-icon-button) svg,
|
|
114
121
|
:host-context(pie-button) svg {
|
|
@@ -117,23 +124,23 @@ b.styles = I`
|
|
|
117
124
|
height: var(--btn-icon-size);
|
|
118
125
|
}
|
|
119
126
|
`;
|
|
120
|
-
|
|
127
|
+
D([
|
|
121
128
|
l({ type: String, reflect: !0 })
|
|
122
129
|
], b.prototype, "size", 2);
|
|
123
|
-
|
|
130
|
+
D([
|
|
124
131
|
l({ type: String, reflect: !0 })
|
|
125
132
|
], b.prototype, "class", 2);
|
|
126
|
-
|
|
127
|
-
|
|
133
|
+
D([
|
|
134
|
+
O("svg")
|
|
128
135
|
], b.prototype, "_svg", 2);
|
|
129
|
-
|
|
130
|
-
var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor,
|
|
136
|
+
P(ce, b);
|
|
137
|
+
var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, T = (n, e, t, i) => {
|
|
131
138
|
for (var o = i > 1 ? void 0 : i ? pe(e, t) : e, a = n.length - 1, r; a >= 0; a--)
|
|
132
139
|
(r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
|
|
133
140
|
return i && o && he(e, t, o), o;
|
|
134
141
|
};
|
|
135
|
-
const
|
|
136
|
-
class w extends
|
|
142
|
+
const ge = "icon-chevron-left";
|
|
143
|
+
class w extends $ {
|
|
137
144
|
constructor() {
|
|
138
145
|
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
|
|
139
146
|
}
|
|
@@ -161,23 +168,23 @@ w.styles = I`
|
|
|
161
168
|
height: var(--btn-icon-size);
|
|
162
169
|
}
|
|
163
170
|
`;
|
|
164
|
-
|
|
171
|
+
T([
|
|
165
172
|
l({ type: String, reflect: !0 })
|
|
166
173
|
], w.prototype, "size", 2);
|
|
167
|
-
|
|
174
|
+
T([
|
|
168
175
|
l({ type: String, reflect: !0 })
|
|
169
176
|
], w.prototype, "class", 2);
|
|
170
|
-
|
|
171
|
-
|
|
177
|
+
T([
|
|
178
|
+
O("svg")
|
|
172
179
|
], w.prototype, "_svg", 2);
|
|
173
|
-
|
|
174
|
-
var
|
|
175
|
-
for (var o = i > 1 ? void 0 : i ?
|
|
180
|
+
P(ge, w);
|
|
181
|
+
var me = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
|
|
182
|
+
for (var o = i > 1 ? void 0 : i ? ue(e, t) : e, a = n.length - 1, r; a >= 0; a--)
|
|
176
183
|
(r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
|
|
177
|
-
return i && o &&
|
|
184
|
+
return i && o && me(e, t, o), o;
|
|
178
185
|
};
|
|
179
|
-
const
|
|
180
|
-
class y extends
|
|
186
|
+
const ve = "icon-chevron-right";
|
|
187
|
+
class y extends $ {
|
|
181
188
|
constructor() {
|
|
182
189
|
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronRight";
|
|
183
190
|
}
|
|
@@ -205,17 +212,17 @@ y.styles = I`
|
|
|
205
212
|
height: var(--btn-icon-size);
|
|
206
213
|
}
|
|
207
214
|
`;
|
|
208
|
-
|
|
215
|
+
j([
|
|
209
216
|
l({ type: String, reflect: !0 })
|
|
210
217
|
], y.prototype, "size", 2);
|
|
211
|
-
|
|
218
|
+
j([
|
|
212
219
|
l({ type: String, reflect: !0 })
|
|
213
220
|
], y.prototype, "class", 2);
|
|
214
|
-
|
|
215
|
-
|
|
221
|
+
j([
|
|
222
|
+
O("svg")
|
|
216
223
|
], y.prototype, "_svg", 2);
|
|
217
|
-
|
|
218
|
-
function
|
|
224
|
+
P(ve, y);
|
|
225
|
+
function fe(n) {
|
|
219
226
|
if (Array.isArray(n)) {
|
|
220
227
|
for (var e = 0, t = Array(n.length); e < n.length; e++)
|
|
221
228
|
t[e] = n[e];
|
|
@@ -223,36 +230,36 @@ function ue(n) {
|
|
|
223
230
|
} else
|
|
224
231
|
return Array.from(n);
|
|
225
232
|
}
|
|
226
|
-
var
|
|
233
|
+
var F = !1;
|
|
227
234
|
if (typeof window < "u") {
|
|
228
|
-
var
|
|
235
|
+
var N = {
|
|
229
236
|
get passive() {
|
|
230
|
-
|
|
237
|
+
F = !0;
|
|
231
238
|
}
|
|
232
239
|
};
|
|
233
|
-
window.addEventListener("testPassive", null,
|
|
240
|
+
window.addEventListener("testPassive", null, N), window.removeEventListener("testPassive", null, N);
|
|
234
241
|
}
|
|
235
|
-
var
|
|
242
|
+
var U = 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 = [], C = !1, H = -1, v = void 0, f = void 0, Z = function(e) {
|
|
236
243
|
return g.some(function(t) {
|
|
237
244
|
return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
|
|
238
245
|
});
|
|
239
246
|
}, A = function(e) {
|
|
240
247
|
var t = e || window.event;
|
|
241
|
-
return
|
|
242
|
-
},
|
|
248
|
+
return Z(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
|
|
249
|
+
}, be = function(e) {
|
|
243
250
|
if (f === void 0) {
|
|
244
251
|
var t = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
|
|
245
252
|
t && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
|
|
246
253
|
}
|
|
247
254
|
v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
248
|
-
},
|
|
255
|
+
}, we = function() {
|
|
249
256
|
f !== void 0 && (document.body.style.paddingRight = f, f = void 0), v !== void 0 && (document.body.style.overflow = v, v = void 0);
|
|
250
|
-
},
|
|
257
|
+
}, ye = function(e) {
|
|
251
258
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
252
|
-
},
|
|
253
|
-
var i = e.targetTouches[0].clientY -
|
|
254
|
-
return
|
|
255
|
-
},
|
|
259
|
+
}, ke = function(e, t) {
|
|
260
|
+
var i = e.targetTouches[0].clientY - H;
|
|
261
|
+
return Z(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || ye(t) && i < 0 ? A(e) : (e.stopPropagation(), !0);
|
|
262
|
+
}, xe = function(e, t) {
|
|
256
263
|
if (!e) {
|
|
257
264
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
258
265
|
return;
|
|
@@ -264,30 +271,30 @@ var Z = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
264
271
|
targetElement: e,
|
|
265
272
|
options: t || {}
|
|
266
273
|
};
|
|
267
|
-
g = [].concat(
|
|
268
|
-
o.targetTouches.length === 1 && (
|
|
274
|
+
g = [].concat(fe(g), [i]), U ? (e.ontouchstart = function(o) {
|
|
275
|
+
o.targetTouches.length === 1 && (H = o.targetTouches[0].clientY);
|
|
269
276
|
}, e.ontouchmove = function(o) {
|
|
270
|
-
o.targetTouches.length === 1 &&
|
|
271
|
-
}, C || (document.addEventListener("touchmove", A,
|
|
277
|
+
o.targetTouches.length === 1 && ke(o, e);
|
|
278
|
+
}, C || (document.addEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !0)) : be(t);
|
|
272
279
|
}
|
|
273
|
-
},
|
|
280
|
+
}, ze = function(e) {
|
|
274
281
|
if (!e) {
|
|
275
282
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
276
283
|
return;
|
|
277
284
|
}
|
|
278
285
|
g = g.filter(function(t) {
|
|
279
286
|
return t.targetElement !== e;
|
|
280
|
-
}),
|
|
287
|
+
}), U ? (e.ontouchstart = null, e.ontouchmove = null, C && g.length === 0 && (document.removeEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !1)) : g.length || we();
|
|
281
288
|
};
|
|
282
|
-
const
|
|
283
|
-
`,
|
|
284
|
-
var
|
|
285
|
-
for (var o = i > 1 ? void 0 : i ?
|
|
289
|
+
const _e = `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);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--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;margin-inline:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{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[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-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--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-inline);padding-block:var(--modal-content-padding-block)}@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-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}
|
|
290
|
+
`, Ce = ["h1", "h2", "h3", "h4", "h5", "h6"], Ae = ["small", "medium", "large"], $e = ["top", "center"], B = "pie-modal-close", x = "pie-modal-open", S = "pie-modal-back", Oe = "pie-modal-leading-action-click", Le = "pie-modal-supporting-action-click";
|
|
291
|
+
var Be = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, d = (n, e, t, i) => {
|
|
292
|
+
for (var o = i > 1 ? void 0 : i ? Se(e, t) : e, a = n.length - 1, r; a >= 0; a--)
|
|
286
293
|
(r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
|
|
287
|
-
return i && o &&
|
|
294
|
+
return i && o && Be(e, t, o), o;
|
|
288
295
|
};
|
|
289
296
|
const k = "pie-modal";
|
|
290
|
-
class s extends
|
|
297
|
+
class s extends ie($) {
|
|
291
298
|
constructor() {
|
|
292
299
|
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) => {
|
|
293
300
|
this.isDismissible || e.preventDefault();
|
|
@@ -313,10 +320,10 @@ class s extends ne(O) {
|
|
|
313
320
|
};
|
|
314
321
|
}
|
|
315
322
|
connectedCallback() {
|
|
316
|
-
super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(x, this._handleModalOpened.bind(this)), document.addEventListener(
|
|
323
|
+
super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(x, this._handleModalOpened.bind(this)), document.addEventListener(B, this._handleModalClosed.bind(this)), document.addEventListener(S, this._handleModalClosed.bind(this));
|
|
317
324
|
}
|
|
318
325
|
disconnectedCallback() {
|
|
319
|
-
document.removeEventListener(x, this._handleModalOpened.bind(this)), document.removeEventListener(
|
|
326
|
+
document.removeEventListener(x, this._handleModalOpened.bind(this)), document.removeEventListener(B, this._handleModalClosed.bind(this)), document.removeEventListener(S, this._handleModalClosed.bind(this)), super.disconnectedCallback();
|
|
320
327
|
}
|
|
321
328
|
async firstUpdated(e) {
|
|
322
329
|
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((i) => i.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._dialog.addEventListener("close", () => {
|
|
@@ -332,7 +339,7 @@ class s extends ne(O) {
|
|
|
332
339
|
_handleModalOpened() {
|
|
333
340
|
var t, i, o, a;
|
|
334
341
|
const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
|
|
335
|
-
e &&
|
|
342
|
+
e && xe(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((a = this._dialog) == null || a.showModal());
|
|
336
343
|
}
|
|
337
344
|
/**
|
|
338
345
|
* Closes the dialog element and re-enables page scrolling
|
|
@@ -340,7 +347,7 @@ class s extends ne(O) {
|
|
|
340
347
|
_handleModalClosed() {
|
|
341
348
|
var t, i;
|
|
342
349
|
const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
|
|
343
|
-
e &&
|
|
350
|
+
e && ze(e), (i = this._dialog) == null || i.close(), this._returnFocus();
|
|
344
351
|
}
|
|
345
352
|
// Handles the value of the isOpen property on first render of the component
|
|
346
353
|
_handleModalOpenStateOnFirstRender(e) {
|
|
@@ -349,11 +356,11 @@ class s extends ne(O) {
|
|
|
349
356
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
350
357
|
_handleModalOpenStateChanged(e) {
|
|
351
358
|
const t = e.get("isOpen");
|
|
352
|
-
t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(
|
|
359
|
+
t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(S)) : this._dispatchModalCustomEvent(B) : this._dispatchModalCustomEvent(x));
|
|
353
360
|
}
|
|
354
361
|
_handleActionClick(e) {
|
|
355
362
|
var t, i;
|
|
356
|
-
e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(
|
|
363
|
+
e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(Oe)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(Le));
|
|
357
364
|
}
|
|
358
365
|
/**
|
|
359
366
|
* Return focus to the specified element, providing the selector is valid
|
|
@@ -480,18 +487,18 @@ class s extends ne(O) {
|
|
|
480
487
|
isFooterPinned: h,
|
|
481
488
|
isFullWidthBelowMid: m,
|
|
482
489
|
isLoading: L,
|
|
483
|
-
leadingAction:
|
|
484
|
-
position:
|
|
485
|
-
size:
|
|
486
|
-
supportingAction:
|
|
487
|
-
} = this,
|
|
490
|
+
leadingAction: G,
|
|
491
|
+
position: X,
|
|
492
|
+
size: J,
|
|
493
|
+
supportingAction: Q
|
|
494
|
+
} = this, R = te(a);
|
|
488
495
|
return p`
|
|
489
496
|
<dialog
|
|
490
497
|
id="dialog"
|
|
491
498
|
class="c-modal"
|
|
492
|
-
size="${
|
|
493
|
-
position="${
|
|
494
|
-
?hasActions=${
|
|
499
|
+
size="${J}"
|
|
500
|
+
position="${X}"
|
|
501
|
+
?hasActions=${G || Q}
|
|
495
502
|
?hasBackButton=${t}
|
|
496
503
|
?hasStackedActions=${i}
|
|
497
504
|
?isDismissible=${r}
|
|
@@ -503,9 +510,9 @@ class s extends ne(O) {
|
|
|
503
510
|
data-test-id="pie-modal">
|
|
504
511
|
<header class="c-modal-header">
|
|
505
512
|
${t ? this.renderBackButton() : c}
|
|
506
|
-
<${
|
|
513
|
+
<${R} class="c-modal-heading">
|
|
507
514
|
${o}
|
|
508
|
-
</${
|
|
515
|
+
</${R}>
|
|
509
516
|
${r ? this.renderCloseButton() : c}
|
|
510
517
|
</header>
|
|
511
518
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
@@ -517,17 +524,17 @@ class s extends ne(O) {
|
|
|
517
524
|
</dialog>`;
|
|
518
525
|
}
|
|
519
526
|
}
|
|
520
|
-
s.styles =
|
|
527
|
+
s.styles = ee(_e);
|
|
521
528
|
d([
|
|
522
529
|
l({ type: Object })
|
|
523
530
|
], s.prototype, "aria", 2);
|
|
524
531
|
d([
|
|
525
532
|
l({ type: String }),
|
|
526
|
-
|
|
533
|
+
oe(k)
|
|
527
534
|
], s.prototype, "heading", 2);
|
|
528
535
|
d([
|
|
529
536
|
l(),
|
|
530
|
-
E(k,
|
|
537
|
+
E(k, Ce, "h2")
|
|
531
538
|
], s.prototype, "headingLevel", 2);
|
|
532
539
|
d([
|
|
533
540
|
l({ type: Boolean })
|
|
@@ -555,30 +562,30 @@ d([
|
|
|
555
562
|
], s.prototype, "leadingAction", 2);
|
|
556
563
|
d([
|
|
557
564
|
l(),
|
|
558
|
-
E(k,
|
|
565
|
+
E(k, $e, "center")
|
|
559
566
|
], s.prototype, "position", 2);
|
|
560
567
|
d([
|
|
561
568
|
l()
|
|
562
569
|
], s.prototype, "returnFocusAfterCloseSelector", 2);
|
|
563
570
|
d([
|
|
564
571
|
l(),
|
|
565
|
-
E(k,
|
|
572
|
+
E(k, Ae, "medium")
|
|
566
573
|
], s.prototype, "size", 2);
|
|
567
574
|
d([
|
|
568
575
|
l({ type: Object })
|
|
569
576
|
], s.prototype, "supportingAction", 2);
|
|
570
577
|
d([
|
|
571
|
-
|
|
578
|
+
O("dialog")
|
|
572
579
|
], s.prototype, "_dialog", 2);
|
|
573
|
-
|
|
580
|
+
ne(k, s);
|
|
574
581
|
export {
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
582
|
+
S as ON_MODAL_BACK_EVENT,
|
|
583
|
+
B as ON_MODAL_CLOSE_EVENT,
|
|
584
|
+
Oe as ON_MODAL_LEADING_ACTION_CLICK,
|
|
578
585
|
x as ON_MODAL_OPEN_EVENT,
|
|
579
|
-
|
|
586
|
+
Le as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
580
587
|
s as PieModal,
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
588
|
+
Ce as headingLevels,
|
|
589
|
+
$e as positions,
|
|
590
|
+
Ae as sizes
|
|
584
591
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -143,6 +143,7 @@ export declare const PieModal: ReactWebComponent<PieModal_2, {
|
|
|
143
143
|
}>;
|
|
144
144
|
|
|
145
145
|
/**
|
|
146
|
+
* @tagname pie-modal
|
|
146
147
|
* @event {CustomEvent} pie-modal-open - when the modal is opened.
|
|
147
148
|
* @event {CustomEvent} pie-modal-close - when the modal is closed.
|
|
148
149
|
* @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@justeat/pie-design-tokens": "5.8.2",
|
|
32
|
-
"@justeattakeaway/pie-button": "0.
|
|
32
|
+
"@justeattakeaway/pie-button": "0.33.0",
|
|
33
33
|
"@justeattakeaway/pie-components-config": "0.4.0",
|
|
34
|
-
"@justeattakeaway/pie-icon-button": "0.
|
|
35
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
36
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
34
|
+
"@justeattakeaway/pie-icon-button": "0.18.0",
|
|
35
|
+
"@justeattakeaway/pie-icons-webc": "0.11.0",
|
|
36
|
+
"@justeattakeaway/pie-webc-core": "0.11.0",
|
|
37
37
|
"@types/body-scroll-lock": "3.1.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
package/src/index.ts
CHANGED
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
import { html, unsafeStatic } from 'lit/static-html.js';
|
|
5
5
|
import { property, query } from 'lit/decorators.js';
|
|
6
6
|
import {
|
|
7
|
-
requiredProperty, RtlMixin, validPropertyValues,
|
|
7
|
+
requiredProperty, RtlMixin, validPropertyValues, defineCustomElement,
|
|
8
8
|
} from '@justeattakeaway/pie-webc-core';
|
|
9
9
|
import '@justeattakeaway/pie-icons-webc/IconClose';
|
|
10
10
|
import '@justeattakeaway/pie-icons-webc/IconChevronLeft';
|
|
@@ -33,6 +33,7 @@ export * from './defs';
|
|
|
33
33
|
const componentSelector = 'pie-modal';
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
|
+
* @tagname pie-modal
|
|
36
37
|
* @event {CustomEvent} pie-modal-open - when the modal is opened.
|
|
37
38
|
* @event {CustomEvent} pie-modal-close - when the modal is closed.
|
|
38
39
|
* @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
|
|
@@ -452,7 +453,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
|
|
|
452
453
|
};
|
|
453
454
|
}
|
|
454
455
|
|
|
455
|
-
|
|
456
|
+
defineCustomElement(componentSelector, PieModal);
|
|
456
457
|
|
|
457
458
|
declare global {
|
|
458
459
|
interface HTMLElementTagNameMap {
|