@justeattakeaway/pie-modal 0.13.0 → 0.14.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/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +12 -0
- package/README.md +12 -10
- package/dist/index.js +193 -167
- package/dist/types/packages/components/pie-modal/src/defs.d.ts +21 -0
- package/dist/types/packages/components/pie-modal/src/defs.d.ts.map +1 -1
- package/dist/types/packages/components/pie-modal/src/index.d.ts +17 -0
- package/dist/types/packages/components/pie-modal/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/defs.ts +28 -0
- package/src/index.ts +45 -7
- package/src/modal.scss +63 -17
- package/test/component/pie-modal.spec.ts +110 -12
- package/test/helpers/index.ts +2 -0
- package/test/visual/pie-modal.spec.ts +191 -74
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { nothing as
|
|
2
|
-
import { html as
|
|
3
|
-
import { property as s, query as
|
|
4
|
-
import { property as
|
|
5
|
-
var
|
|
6
|
-
for (var
|
|
7
|
-
(
|
|
8
|
-
return
|
|
1
|
+
import { nothing as g, unsafeCSS as E, LitElement as D } from "lit";
|
|
2
|
+
import { html as h, unsafeStatic as T } from "lit/static-html.js";
|
|
3
|
+
import { property as s, query as A } from "lit/decorators.js";
|
|
4
|
+
import { property as F } from "lit/decorators/property.js";
|
|
5
|
+
var R = Object.defineProperty, j = Object.getOwnPropertyDescriptor, I = (n, e, t, i) => {
|
|
6
|
+
for (var o = i > 1 ? void 0 : i ? j(e, t) : e, a = n.length - 1, d; a >= 0; a--)
|
|
7
|
+
(d = n[a]) && (o = (i ? d(e, t, o) : d(o)) || o);
|
|
8
|
+
return i && o && R(e, t, o), o;
|
|
9
9
|
};
|
|
10
|
-
const
|
|
10
|
+
const q = (n) => {
|
|
11
11
|
class e extends n {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments), this.dir = "ltr";
|
|
@@ -22,171 +22,171 @@ const I = (n) => {
|
|
|
22
22
|
* will not be reactive and is only computed once
|
|
23
23
|
*/
|
|
24
24
|
get isRTL() {
|
|
25
|
-
var
|
|
26
|
-
return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((
|
|
25
|
+
var i;
|
|
26
|
+
return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((i = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : i.direction) === "rtl";
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
return
|
|
30
|
-
|
|
29
|
+
return I([
|
|
30
|
+
F({ type: String, reflect: !0 })
|
|
31
31
|
], e.prototype, "dir", 2), e;
|
|
32
|
-
},
|
|
33
|
-
const
|
|
34
|
-
Object.defineProperty(
|
|
32
|
+
}, B = (n, e, t) => function(o, a) {
|
|
33
|
+
const d = `#${a}`;
|
|
34
|
+
Object.defineProperty(o, a, {
|
|
35
35
|
get() {
|
|
36
|
-
return this[
|
|
36
|
+
return this[d];
|
|
37
37
|
},
|
|
38
38
|
set(p) {
|
|
39
|
-
const
|
|
40
|
-
e.includes(p) ? this[
|
|
39
|
+
const u = this[d];
|
|
40
|
+
e.includes(p) ? this[d] = p : (console.error(
|
|
41
41
|
`<${n}> Invalid value "${p}" provided for property "${a}".`,
|
|
42
42
|
`Must be one of: ${e.join(" | ")}.`,
|
|
43
|
-
`Falling back to default value: "${
|
|
44
|
-
), this[
|
|
43
|
+
`Falling back to default value: "${t}"`
|
|
44
|
+
), this[d] = t), this.requestUpdate(a, u);
|
|
45
45
|
}
|
|
46
46
|
});
|
|
47
|
-
},
|
|
48
|
-
const
|
|
49
|
-
Object.defineProperty(
|
|
47
|
+
}, V = (n) => function(t, i) {
|
|
48
|
+
const o = `#${i}`;
|
|
49
|
+
Object.defineProperty(t, i, {
|
|
50
50
|
get() {
|
|
51
|
-
return this[
|
|
51
|
+
return this[o];
|
|
52
52
|
},
|
|
53
53
|
set(a) {
|
|
54
|
-
const
|
|
55
|
-
(a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${
|
|
54
|
+
const d = this[o];
|
|
55
|
+
(a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${i}"`), this[o] = a, this.requestUpdate(i, d);
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
58
|
};
|
|
59
|
-
function
|
|
59
|
+
function N(n) {
|
|
60
60
|
if (Array.isArray(n)) {
|
|
61
|
-
for (var e = 0,
|
|
62
|
-
|
|
63
|
-
return
|
|
61
|
+
for (var e = 0, t = Array(n.length); e < n.length; e++)
|
|
62
|
+
t[e] = n[e];
|
|
63
|
+
return t;
|
|
64
64
|
} else
|
|
65
65
|
return Array.from(n);
|
|
66
66
|
}
|
|
67
67
|
var O = !1;
|
|
68
68
|
if (typeof window < "u") {
|
|
69
|
-
var
|
|
69
|
+
var S = {
|
|
70
70
|
get passive() {
|
|
71
71
|
O = !0;
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
|
-
window.addEventListener("testPassive", null,
|
|
74
|
+
window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
|
|
75
75
|
}
|
|
76
|
-
var
|
|
77
|
-
return
|
|
78
|
-
return !!(
|
|
76
|
+
var w = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), m = [], k = !1, M = -1, f = void 0, c = void 0, v = void 0, $ = function(e) {
|
|
77
|
+
return m.some(function(t) {
|
|
78
|
+
return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
|
|
79
79
|
});
|
|
80
|
-
},
|
|
81
|
-
var
|
|
82
|
-
return
|
|
83
|
-
},
|
|
84
|
-
if (
|
|
85
|
-
var
|
|
86
|
-
if (
|
|
87
|
-
var
|
|
88
|
-
|
|
80
|
+
}, x = function(e) {
|
|
81
|
+
var t = e || window.event;
|
|
82
|
+
return $(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
|
|
83
|
+
}, H = function(e) {
|
|
84
|
+
if (v === void 0) {
|
|
85
|
+
var t = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
|
|
86
|
+
if (t && i > 0) {
|
|
87
|
+
var o = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
|
|
88
|
+
v = document.body.style.paddingRight, document.body.style.paddingRight = o + i + "px";
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
|
|
92
|
-
},
|
|
93
|
-
|
|
94
|
-
},
|
|
91
|
+
f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
92
|
+
}, W = function() {
|
|
93
|
+
v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
|
|
94
|
+
}, Y = function() {
|
|
95
95
|
return window.requestAnimationFrame(function() {
|
|
96
|
-
if (
|
|
97
|
-
|
|
96
|
+
if (c === void 0) {
|
|
97
|
+
c = {
|
|
98
98
|
position: document.body.style.position,
|
|
99
99
|
top: document.body.style.top,
|
|
100
100
|
left: document.body.style.left
|
|
101
101
|
};
|
|
102
|
-
var e = window,
|
|
103
|
-
document.body.style.position = "fixed", document.body.style.top = -
|
|
102
|
+
var e = window, t = e.scrollY, i = e.scrollX, o = e.innerHeight;
|
|
103
|
+
document.body.style.position = "fixed", document.body.style.top = -t, document.body.style.left = -i, setTimeout(function() {
|
|
104
104
|
return window.requestAnimationFrame(function() {
|
|
105
|
-
var a =
|
|
106
|
-
a &&
|
|
105
|
+
var a = o - window.innerHeight;
|
|
106
|
+
a && t >= o && (document.body.style.top = -(t + a));
|
|
107
107
|
});
|
|
108
108
|
}, 300);
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
|
-
},
|
|
112
|
-
if (
|
|
113
|
-
var e = -parseInt(document.body.style.top, 10),
|
|
114
|
-
document.body.style.position =
|
|
111
|
+
}, U = function() {
|
|
112
|
+
if (c !== void 0) {
|
|
113
|
+
var e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
|
|
114
|
+
document.body.style.position = c.position, document.body.style.top = c.top, document.body.style.left = c.left, window.scrollTo(t, e), c = void 0;
|
|
115
115
|
}
|
|
116
|
-
},
|
|
116
|
+
}, X = function(e) {
|
|
117
117
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
118
|
-
},
|
|
119
|
-
var
|
|
120
|
-
return
|
|
121
|
-
},
|
|
118
|
+
}, G = function(e, t) {
|
|
119
|
+
var i = e.targetTouches[0].clientY - M;
|
|
120
|
+
return $(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || X(t) && i < 0 ? x(e) : (e.stopPropagation(), !0);
|
|
121
|
+
}, J = function(e, t) {
|
|
122
122
|
if (!e) {
|
|
123
123
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
124
124
|
return;
|
|
125
125
|
}
|
|
126
|
-
if (!
|
|
127
|
-
return
|
|
126
|
+
if (!m.some(function(o) {
|
|
127
|
+
return o.targetElement === e;
|
|
128
128
|
})) {
|
|
129
|
-
var
|
|
129
|
+
var i = {
|
|
130
130
|
targetElement: e,
|
|
131
|
-
options:
|
|
131
|
+
options: t || {}
|
|
132
132
|
};
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}, e.ontouchmove = function(
|
|
136
|
-
|
|
137
|
-
},
|
|
133
|
+
m = [].concat(N(m), [i]), w ? Y() : H(t), w && (e.ontouchstart = function(o) {
|
|
134
|
+
o.targetTouches.length === 1 && (M = o.targetTouches[0].clientY);
|
|
135
|
+
}, e.ontouchmove = function(o) {
|
|
136
|
+
o.targetTouches.length === 1 && G(o, e);
|
|
137
|
+
}, k || (document.addEventListener("touchmove", x, O ? { passive: !1 } : void 0), k = !0));
|
|
138
138
|
}
|
|
139
|
-
},
|
|
139
|
+
}, Q = function(e) {
|
|
140
140
|
if (!e) {
|
|
141
141
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
142
142
|
return;
|
|
143
143
|
}
|
|
144
|
-
|
|
145
|
-
return
|
|
146
|
-
}),
|
|
144
|
+
m = m.filter(function(t) {
|
|
145
|
+
return t.targetElement !== e;
|
|
146
|
+
}), w && (e.ontouchstart = null, e.ontouchmove = null, k && m.length === 0 && (document.removeEventListener("touchmove", x, O ? { passive: !1 } : void 0), k = !1)), w ? U() : W();
|
|
147
147
|
};
|
|
148
|
-
const
|
|
149
|
-
`,
|
|
150
|
-
var
|
|
151
|
-
for (var
|
|
152
|
-
(
|
|
153
|
-
return
|
|
148
|
+
const Z = `*,*: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,.5)}.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)}}.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 .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);overflow-y:auto}.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}
|
|
149
|
+
`, K = ["h1", "h2", "h3", "h4", "h5", "h6"], ee = ["small", "medium", "large"], te = ["top", "center"], _ = "pie-modal-close", y = "pie-modal-open", z = "pie-modal-back";
|
|
150
|
+
var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (n, e, t, i) => {
|
|
151
|
+
for (var o = i > 1 ? void 0 : i ? ie(e, t) : e, a = n.length - 1, d; a >= 0; a--)
|
|
152
|
+
(d = n[a]) && (o = (i ? d(e, t, o) : d(o)) || o);
|
|
153
|
+
return i && o && oe(e, t, o), o;
|
|
154
154
|
};
|
|
155
|
-
const
|
|
156
|
-
class
|
|
155
|
+
const b = "pie-modal";
|
|
156
|
+
class r extends q(D) {
|
|
157
157
|
constructor() {
|
|
158
|
-
super(), this.headingLevel = "h2", this.isDismissible = !1, this.hasBackButton = !1, this.isFullWidthBelowMid = !1, this.isOpen = !1, this.isLoading = !1, this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
|
|
158
|
+
super(), this.headingLevel = "h2", this.isDismissible = !1, this.hasBackButton = !1, this.isFullWidthBelowMid = !1, this.isOpen = !1, this.isLoading = !1, this.size = "medium", this.position = "center", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
|
|
159
159
|
this.isDismissible || e.preventDefault();
|
|
160
160
|
}, this._handleDialogLightDismiss = (e) => {
|
|
161
|
-
var
|
|
161
|
+
var u;
|
|
162
162
|
if (!this.isDismissible)
|
|
163
163
|
return;
|
|
164
|
-
const
|
|
165
|
-
top:
|
|
166
|
-
bottom:
|
|
164
|
+
const t = (u = this._dialog) == null ? void 0 : u.getBoundingClientRect(), {
|
|
165
|
+
top: i = 0,
|
|
166
|
+
bottom: o = 0,
|
|
167
167
|
left: a = 0,
|
|
168
|
-
right:
|
|
169
|
-
} =
|
|
170
|
-
if (
|
|
168
|
+
right: d = 0
|
|
169
|
+
} = t || {};
|
|
170
|
+
if (i === 0 && o === 0 && a === 0 && d === 0)
|
|
171
171
|
return;
|
|
172
|
-
(e.clientY <
|
|
172
|
+
(e.clientY < i || e.clientY > o || e.clientX < a || e.clientX > d) && (this.isOpen = !1);
|
|
173
173
|
}, this._dispatchModalCustomEvent = (e) => {
|
|
174
|
-
const
|
|
174
|
+
const t = new CustomEvent(e, {
|
|
175
175
|
bubbles: !0,
|
|
176
176
|
composed: !0
|
|
177
177
|
});
|
|
178
|
-
this.dispatchEvent(
|
|
178
|
+
this.dispatchEvent(t);
|
|
179
179
|
}, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
|
|
180
180
|
}
|
|
181
181
|
connectedCallback() {
|
|
182
|
-
super.connectedCallback(), document.addEventListener(
|
|
182
|
+
super.connectedCallback(), document.addEventListener(y, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this)), document.addEventListener(z, this._handleModalClosed.bind(this));
|
|
183
183
|
}
|
|
184
184
|
disconnectedCallback() {
|
|
185
|
-
document.removeEventListener(
|
|
185
|
+
document.removeEventListener(y, this._handleModalOpened.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), document.removeEventListener(z, this._handleModalClosed.bind(this)), super.disconnectedCallback();
|
|
186
186
|
}
|
|
187
187
|
firstUpdated(e) {
|
|
188
|
-
var
|
|
189
|
-
(
|
|
188
|
+
var t, i;
|
|
189
|
+
(t = this._dialog) == null || t.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._handleModalOpenStateOnFirstRender(e), (i = this._dialog) == null || i.addEventListener("close", () => {
|
|
190
190
|
this.isOpen = !1;
|
|
191
191
|
});
|
|
192
192
|
}
|
|
@@ -197,33 +197,33 @@ class l extends I(E) {
|
|
|
197
197
|
* Opens the dialog element and disables page scrolling
|
|
198
198
|
*/
|
|
199
199
|
_handleModalOpened() {
|
|
200
|
-
var e,
|
|
201
|
-
|
|
200
|
+
var e, t, i;
|
|
201
|
+
J(this), !((e = this._dialog) != null && e.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((i = this._dialog) == null || i.showModal());
|
|
202
202
|
}
|
|
203
203
|
/**
|
|
204
204
|
* Closes the dialog element and re-enables page scrolling
|
|
205
205
|
*/
|
|
206
206
|
_handleModalClosed() {
|
|
207
207
|
var e;
|
|
208
|
-
|
|
208
|
+
Q(this), (e = this._dialog) == null || e.close(), this._returnFocus();
|
|
209
209
|
}
|
|
210
210
|
// Handles the value of the isOpen property on first render of the component
|
|
211
211
|
_handleModalOpenStateOnFirstRender(e) {
|
|
212
|
-
e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(
|
|
212
|
+
e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(y);
|
|
213
213
|
}
|
|
214
214
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
215
215
|
_handleModalOpenStateChanged(e) {
|
|
216
|
-
const
|
|
217
|
-
|
|
216
|
+
const t = e.get("isOpen");
|
|
217
|
+
t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(z)) : this._dispatchModalCustomEvent(_) : this._dispatchModalCustomEvent(y));
|
|
218
218
|
}
|
|
219
219
|
/**
|
|
220
220
|
* Return focus to the specified element, providing the selector is valid
|
|
221
221
|
* and the chosen element can be found.
|
|
222
222
|
*/
|
|
223
223
|
_returnFocus() {
|
|
224
|
-
var
|
|
225
|
-
const e = (
|
|
226
|
-
e && ((
|
|
224
|
+
var t, i;
|
|
225
|
+
const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
|
|
226
|
+
e && ((i = document.querySelector(e)) == null || i.focus());
|
|
227
227
|
}
|
|
228
228
|
/**
|
|
229
229
|
* Template for the close button element. Called within the
|
|
@@ -232,7 +232,7 @@ class l extends I(E) {
|
|
|
232
232
|
* @private
|
|
233
233
|
*/
|
|
234
234
|
renderCloseButton() {
|
|
235
|
-
return
|
|
235
|
+
return h`
|
|
236
236
|
<pie-icon-button
|
|
237
237
|
@click="${() => {
|
|
238
238
|
this.isOpen = !1;
|
|
@@ -249,7 +249,7 @@ class l extends I(E) {
|
|
|
249
249
|
* @private
|
|
250
250
|
*/
|
|
251
251
|
renderBackButton() {
|
|
252
|
-
return
|
|
252
|
+
return h`
|
|
253
253
|
<pie-icon-button
|
|
254
254
|
@click="${() => {
|
|
255
255
|
this._backButtonClicked = !0, this.isOpen = !1;
|
|
@@ -257,36 +257,65 @@ class l extends I(E) {
|
|
|
257
257
|
variant="ghost-secondary"
|
|
258
258
|
class="c-modal-backBtn"
|
|
259
259
|
data-test-id="modal-back-button">
|
|
260
|
-
${this.isRTL ?
|
|
260
|
+
${this.isRTL ? h`<icon-chevron-right />` : h`<icon-chevron-left />`}
|
|
261
261
|
</pie-icon-button>
|
|
262
262
|
`;
|
|
263
263
|
}
|
|
264
|
+
/**
|
|
265
|
+
* Render leadingAction button depending on prop availability.
|
|
266
|
+
*
|
|
267
|
+
* 1. If the prop `leadingAction` is not provided, the button is not rendered.
|
|
268
|
+
* 2. If the prop `leadingAction` is provided but any of the optional properties
|
|
269
|
+
* are not provided, they fall back to their default values.
|
|
270
|
+
*
|
|
271
|
+
* @private
|
|
272
|
+
*/
|
|
273
|
+
renderLeadingAction() {
|
|
274
|
+
const { text: e = "Confirm", variant: t = "primary", ariaLabel: i } = this.leadingAction;
|
|
275
|
+
return e ? h`
|
|
276
|
+
<pie-button
|
|
277
|
+
variant="${t}"
|
|
278
|
+
aria-label="${i || g}"
|
|
279
|
+
type="submit"
|
|
280
|
+
@click="${() => {
|
|
281
|
+
var o;
|
|
282
|
+
return (o = this._dialog) == null ? void 0 : o.close("leading");
|
|
283
|
+
}}"
|
|
284
|
+
data-test-id="modal-leading-action">
|
|
285
|
+
${e}
|
|
286
|
+
</pie-button>
|
|
287
|
+
` : g;
|
|
288
|
+
}
|
|
264
289
|
render() {
|
|
265
290
|
const {
|
|
266
291
|
hasBackButton: e,
|
|
267
|
-
heading:
|
|
268
|
-
headingLevel:
|
|
269
|
-
isDismissible:
|
|
292
|
+
heading: t,
|
|
293
|
+
headingLevel: i = "h2",
|
|
294
|
+
isDismissible: o,
|
|
270
295
|
isFullWidthBelowMid: a,
|
|
271
|
-
isLoading:
|
|
272
|
-
size: p
|
|
273
|
-
|
|
274
|
-
|
|
296
|
+
isLoading: d,
|
|
297
|
+
size: p,
|
|
298
|
+
leadingAction: u,
|
|
299
|
+
position: P
|
|
300
|
+
} = this, C = T(i);
|
|
301
|
+
return h`
|
|
275
302
|
<dialog
|
|
276
303
|
id="dialog"
|
|
277
304
|
class="c-modal"
|
|
305
|
+
data-test-id="pie-modal"
|
|
278
306
|
size="${p}"
|
|
307
|
+
position="${P}"
|
|
279
308
|
?hasBackButton=${e}
|
|
280
|
-
?isDismissible=${
|
|
309
|
+
?isDismissible=${o}
|
|
281
310
|
?isFullWidthBelowMid=${a}
|
|
282
|
-
?isLoading=${
|
|
311
|
+
?isLoading=${d}
|
|
283
312
|
data-test-id="pie-modal">
|
|
284
313
|
<header class="c-modal-header">
|
|
285
|
-
${e ? this.renderBackButton() :
|
|
286
|
-
<${
|
|
287
|
-
${
|
|
288
|
-
</${
|
|
289
|
-
${
|
|
314
|
+
${e ? this.renderBackButton() : g}
|
|
315
|
+
<${C} class="c-modal-heading">
|
|
316
|
+
${t}
|
|
317
|
+
</${C}>
|
|
318
|
+
${o ? this.renderCloseButton() : g}
|
|
290
319
|
</header>
|
|
291
320
|
<article class="c-modal-content c-modal-content--scrollable">
|
|
292
321
|
<div class="c-modal-contentInner">
|
|
@@ -294,22 +323,13 @@ class l extends I(E) {
|
|
|
294
323
|
</div>
|
|
295
324
|
</article>
|
|
296
325
|
<footer class="c-modal-footer">
|
|
297
|
-
|
|
298
|
-
variant="primary"
|
|
299
|
-
type="submit"
|
|
300
|
-
@click="${() => {
|
|
301
|
-
var h;
|
|
302
|
-
return (h = this._dialog) == null ? void 0 : h.close("leading");
|
|
303
|
-
}}"
|
|
304
|
-
data-test-id="modal-leading-action">
|
|
305
|
-
Confirm
|
|
306
|
-
</pie-button>
|
|
326
|
+
${u ? this.renderLeadingAction() : g}
|
|
307
327
|
<pie-button
|
|
308
328
|
variant="ghost"
|
|
309
329
|
type="reset"
|
|
310
330
|
@click="${() => {
|
|
311
|
-
var
|
|
312
|
-
return (
|
|
331
|
+
var L;
|
|
332
|
+
return (L = this._dialog) == null ? void 0 : L.close("supporting");
|
|
313
333
|
}}"
|
|
314
334
|
data-test-id="modal-supporting-action">
|
|
315
335
|
Cancel
|
|
@@ -318,43 +338,49 @@ class l extends I(E) {
|
|
|
318
338
|
</dialog>`;
|
|
319
339
|
}
|
|
320
340
|
}
|
|
321
|
-
|
|
322
|
-
|
|
341
|
+
r.styles = E(Z);
|
|
342
|
+
l([
|
|
323
343
|
s({ type: String }),
|
|
324
|
-
|
|
325
|
-
],
|
|
326
|
-
|
|
344
|
+
V(b)
|
|
345
|
+
], r.prototype, "heading", 2);
|
|
346
|
+
l([
|
|
327
347
|
s(),
|
|
328
|
-
|
|
329
|
-
],
|
|
330
|
-
|
|
348
|
+
B(b, K, "h2")
|
|
349
|
+
], r.prototype, "headingLevel", 2);
|
|
350
|
+
l([
|
|
331
351
|
s({ type: Boolean, reflect: !0 })
|
|
332
|
-
],
|
|
333
|
-
|
|
352
|
+
], r.prototype, "isDismissible", 2);
|
|
353
|
+
l([
|
|
334
354
|
s({ type: Boolean })
|
|
335
|
-
],
|
|
336
|
-
|
|
355
|
+
], r.prototype, "hasBackButton", 2);
|
|
356
|
+
l([
|
|
337
357
|
s({ type: Boolean })
|
|
338
|
-
],
|
|
339
|
-
|
|
358
|
+
], r.prototype, "isFullWidthBelowMid", 2);
|
|
359
|
+
l([
|
|
340
360
|
s({ type: Boolean })
|
|
341
|
-
],
|
|
342
|
-
|
|
361
|
+
], r.prototype, "isOpen", 2);
|
|
362
|
+
l([
|
|
343
363
|
s({ type: Boolean, reflect: !0 })
|
|
344
|
-
],
|
|
345
|
-
|
|
364
|
+
], r.prototype, "isLoading", 2);
|
|
365
|
+
l([
|
|
346
366
|
s()
|
|
347
|
-
],
|
|
348
|
-
|
|
367
|
+
], r.prototype, "returnFocusAfterCloseSelector", 2);
|
|
368
|
+
l([
|
|
349
369
|
s(),
|
|
350
|
-
|
|
351
|
-
],
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
],
|
|
355
|
-
|
|
370
|
+
B(b, ee, "medium")
|
|
371
|
+
], r.prototype, "size", 2);
|
|
372
|
+
l([
|
|
373
|
+
s()
|
|
374
|
+
], r.prototype, "leadingAction", 2);
|
|
375
|
+
l([
|
|
376
|
+
B(b, te, "center")
|
|
377
|
+
], r.prototype, "position", 2);
|
|
378
|
+
l([
|
|
379
|
+
A("dialog")
|
|
380
|
+
], r.prototype, "_dialog", 2);
|
|
381
|
+
customElements.define(b, r);
|
|
356
382
|
export {
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
383
|
+
r as PieModal,
|
|
384
|
+
K as headingLevels,
|
|
385
|
+
ee as sizes
|
|
360
386
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { RTLComponentProps } from '@justeattakeaway/pie-webc-core';
|
|
2
|
+
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
2
3
|
export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
3
4
|
export declare const sizes: readonly ["small", "medium", "large"];
|
|
5
|
+
export declare const positions: readonly ["top", "center"];
|
|
4
6
|
export interface ModalProps extends RTLComponentProps {
|
|
5
7
|
/**
|
|
6
8
|
* The text to display in the modal's heading.
|
|
@@ -46,6 +48,25 @@ export interface ModalProps extends RTLComponentProps {
|
|
|
46
48
|
* The size of the modal; this controls how wide it will appear on the page.
|
|
47
49
|
*/
|
|
48
50
|
size: typeof sizes[number];
|
|
51
|
+
/**
|
|
52
|
+
* The leading action configuration for the modal.
|
|
53
|
+
*/
|
|
54
|
+
leadingAction: {
|
|
55
|
+
/**
|
|
56
|
+
* The text to display for the leading action button.
|
|
57
|
+
*/
|
|
58
|
+
text: string;
|
|
59
|
+
/**
|
|
60
|
+
* The variant of the leading action button.
|
|
61
|
+
* Default: 'primary'
|
|
62
|
+
*/
|
|
63
|
+
variant?: Variant;
|
|
64
|
+
/**
|
|
65
|
+
* The ARIA label for the leading action button.
|
|
66
|
+
*/
|
|
67
|
+
ariaLabel?: string;
|
|
68
|
+
};
|
|
69
|
+
position: typeof positions[number];
|
|
49
70
|
}
|
|
50
71
|
/**
|
|
51
72
|
* Event name for when the modal is closed.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAElE,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAC3D,eAAO,MAAM,SAAS,4BAA6B,CAAC;AAEpD,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACjD;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE;QACX;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QAEb;;;WAGG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAElB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAKF,QAAQ,EAAE,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;CACtC;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { LitElement, TemplateResult } from 'lit';
|
|
2
2
|
import type { DependentMap } from '@justeattakeaway/pie-webc-core';
|
|
3
|
+
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
3
4
|
import { ModalProps, headingLevels, sizes } from './defs';
|
|
4
5
|
export { type ModalProps, headingLevels, sizes };
|
|
5
6
|
declare const componentSelector = "pie-modal";
|
|
@@ -22,6 +23,12 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
22
23
|
isLoading: boolean;
|
|
23
24
|
returnFocusAfterCloseSelector?: string;
|
|
24
25
|
size: ModalProps['size'];
|
|
26
|
+
leadingAction: {
|
|
27
|
+
text: string;
|
|
28
|
+
variant?: Variant;
|
|
29
|
+
ariaLabel?: string;
|
|
30
|
+
};
|
|
31
|
+
position: ModalProps['position'];
|
|
25
32
|
private _dialog?;
|
|
26
33
|
private _backButtonClicked;
|
|
27
34
|
static styles: import("lit").CSSResult;
|
|
@@ -66,6 +73,16 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
66
73
|
* @private
|
|
67
74
|
*/
|
|
68
75
|
private renderBackButton;
|
|
76
|
+
/**
|
|
77
|
+
* Render leadingAction button depending on prop availability.
|
|
78
|
+
*
|
|
79
|
+
* 1. If the prop `leadingAction` is not provided, the button is not rendered.
|
|
80
|
+
* 2. If the prop `leadingAction` is provided but any of the optional properties
|
|
81
|
+
* are not provided, they fall back to their default values.
|
|
82
|
+
*
|
|
83
|
+
* @private
|
|
84
|
+
*/
|
|
85
|
+
private renderLeadingAction;
|
|
69
86
|
render(): TemplateResult;
|
|
70
87
|
/**
|
|
71
88
|
* Dismisses the modal on backdrop click if `isDismissible` is `true`.
|