@justeattakeaway/pie-modal 0.35.3 → 0.35.4
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 +6 -6
- package/package.json +3 -3
- package/src/modal.scss +13 -17
package/dist/index.js
CHANGED
|
@@ -25,11 +25,11 @@ if (typeof window < "u") {
|
|
|
25
25
|
};
|
|
26
26
|
window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
|
|
27
27
|
}
|
|
28
|
-
var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [],
|
|
28
|
+
var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], w = !1, S = -1, h = void 0, u = void 0, L = function(e) {
|
|
29
29
|
return p.some(function(o) {
|
|
30
30
|
return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
|
|
31
31
|
});
|
|
32
|
-
},
|
|
32
|
+
}, k = function(e) {
|
|
33
33
|
var o = e || window.event;
|
|
34
34
|
return L(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
|
|
35
35
|
}, Y = function(e) {
|
|
@@ -44,7 +44,7 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
44
44
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
45
45
|
}, H = function(e, o) {
|
|
46
46
|
var i = e.targetTouches[0].clientY - S;
|
|
47
|
-
return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ?
|
|
47
|
+
return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ? k(e) : (e.stopPropagation(), !0);
|
|
48
48
|
}, U = function(e, o) {
|
|
49
49
|
if (!e) {
|
|
50
50
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
@@ -61,7 +61,7 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
61
61
|
t.targetTouches.length === 1 && (S = t.targetTouches[0].clientY);
|
|
62
62
|
}, e.ontouchmove = function(t) {
|
|
63
63
|
t.targetTouches.length === 1 && H(t, e);
|
|
64
|
-
},
|
|
64
|
+
}, w || (document.addEventListener("touchmove", k, C ? { passive: !1 } : void 0), w = !0)) : Y(o);
|
|
65
65
|
}
|
|
66
66
|
}, K = function(e) {
|
|
67
67
|
if (!e) {
|
|
@@ -70,9 +70,9 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
70
70
|
}
|
|
71
71
|
p = p.filter(function(o) {
|
|
72
72
|
return o.targetElement !== e;
|
|
73
|
-
}), B ? (e.ontouchstart = null, e.ontouchmove = null,
|
|
73
|
+
}), B ? (e.ontouchstart = null, e.ontouchmove = null, w && p.length === 0 && (document.removeEventListener("touchmove", k, C ? { passive: !1 } : void 0), w = !1)) : p.length || V();
|
|
74
74
|
};
|
|
75
|
-
const G = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}
|
|
75
|
+
const G = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}.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],.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]>.c-modal-scrollContainer,.c-modal[size=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
|
|
76
76
|
`, X = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], x = "pie-modal-close", b = "pie-modal-open", _ = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click";
|
|
77
77
|
var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (n, e, o, i) => {
|
|
78
78
|
for (var t = i > 1 ? void 0 : i ? ie(e, o) : e, r = n.length - 1, c; r >= 0; r--)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.35.
|
|
3
|
+
"version": "0.35.4",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@justeattakeaway/pie-button": "0.41.0",
|
|
40
|
-
"@justeattakeaway/pie-icon-button": "0.24.
|
|
41
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
40
|
+
"@justeattakeaway/pie-icon-button": "0.24.2",
|
|
41
|
+
"@justeattakeaway/pie-icons-webc": "0.14.0",
|
|
42
42
|
"@justeattakeaway/pie-spinner": "0.3.1",
|
|
43
43
|
"@justeattakeaway/pie-webc-core": "0.13.0",
|
|
44
44
|
"body-scroll-lock": "3.1.5",
|
package/src/modal.scss
CHANGED
|
@@ -82,34 +82,31 @@
|
|
|
82
82
|
|
|
83
83
|
&[size='medium'] {
|
|
84
84
|
/* Same as default styles */
|
|
85
|
-
&[isfullwidthbelowmid] {
|
|
86
|
-
@media (max-width: calc($breakpoint-wide - 1px)) {
|
|
87
|
-
--modal-margin-block: var(--modal-margin-none);
|
|
88
|
-
--modal-border-radius: var(--dt-radius-rounded-none);
|
|
89
|
-
--modal-block-size: 100%;
|
|
90
|
-
--modal-inline-size: 100%;
|
|
91
|
-
|
|
92
|
-
// In this case, the modal must exceed the previous maximum width
|
|
93
|
-
--modal-max-inline-size: 100%;
|
|
94
|
-
|
|
95
|
-
// this ensures the content container spans the full height
|
|
96
|
-
> .c-modal-scrollContainer {
|
|
97
|
-
block-size: 100%;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
85
|
}
|
|
102
86
|
|
|
103
87
|
&[size='large'] {
|
|
104
88
|
--modal-inline-size: 75%;
|
|
105
89
|
--modal-max-inline-size: var(--modal-size-l);
|
|
106
90
|
--modal-margin-block: var(--modal-margin-large);
|
|
91
|
+
}
|
|
107
92
|
|
|
93
|
+
// Fullscreen styles
|
|
94
|
+
&[size='large'],
|
|
95
|
+
&[size='medium'][isfullwidthbelowmid] {
|
|
108
96
|
@media (max-width: calc($breakpoint-wide - 1px)) {
|
|
109
97
|
--modal-margin-block: var(--modal-margin-none);
|
|
110
98
|
--modal-border-radius: var(--dt-radius-rounded-none);
|
|
111
99
|
--modal-block-size: 100%;
|
|
112
100
|
--modal-inline-size: 100%;
|
|
101
|
+
|
|
102
|
+
// In order to be fullscreen, the modal may need to exceed
|
|
103
|
+
// the previous maximum width for a medium modal
|
|
104
|
+
--modal-max-inline-size: 100%;
|
|
105
|
+
|
|
106
|
+
// this ensures the content container spans the full height
|
|
107
|
+
> .c-modal-scrollContainer {
|
|
108
|
+
block-size: 100%;
|
|
109
|
+
}
|
|
113
110
|
}
|
|
114
111
|
}
|
|
115
112
|
|
|
@@ -271,7 +268,6 @@
|
|
|
271
268
|
& > .c-modal-scrollContainer {
|
|
272
269
|
display: flex;
|
|
273
270
|
flex-direction: column;
|
|
274
|
-
block-size: auto;
|
|
275
271
|
overflow-y: auto;
|
|
276
272
|
|
|
277
273
|
// These are the shadows used to indicate scrolling above and below content
|