@justeattakeaway/pie-modal 0.46.1 → 0.47.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.
|
@@ -266,14 +266,13 @@ n.DialogManager = function() {
|
|
|
266
266
|
var e = this.checkDOM_.bind(this);
|
|
267
267
|
this.overlay = document.createElement("div"), this.overlay.className = "_dialog_overlay", this.overlay.addEventListener("click", (function(t) {
|
|
268
268
|
this.forwardTab_ = void 0, t.stopPropagation(), e([]);
|
|
269
|
-
}).bind(this)), this.handleKey_ = this.handleKey_.bind(this), this.handleFocus_ = this.handleFocus_.bind(this), this.zIndexLow_ = 1e5, this.zIndexHigh_ =
|
|
269
|
+
}).bind(this)), this.handleKey_ = this.handleKey_.bind(this), this.handleFocus_ = this.handleFocus_.bind(this), this.zIndexLow_ = 1e5, this.zIndexHigh_ = 100150, this.forwardTab_ = void 0, "MutationObserver" in window && (this.mo_ = new MutationObserver(function(t) {
|
|
270
270
|
var o = [];
|
|
271
271
|
t.forEach(function(i) {
|
|
272
272
|
for (var a = 0, r; r = i.removedNodes[a]; ++a) {
|
|
273
273
|
if (r instanceof Element)
|
|
274
274
|
r.localName === "dialog" && o.push(r);
|
|
275
|
-
else
|
|
276
|
-
continue;
|
|
275
|
+
else continue;
|
|
277
276
|
o = o.concat(r.querySelectorAll("dialog"));
|
|
278
277
|
}
|
|
279
278
|
}), o.length && e(o);
|
|
@@ -292,8 +291,7 @@ n.DialogManager.prototype.updateStacking = function() {
|
|
|
292
291
|
if (i) {
|
|
293
292
|
var a = i.dialog.parentNode || document.body;
|
|
294
293
|
a.appendChild(this.overlay);
|
|
295
|
-
} else
|
|
296
|
-
this.overlay.parentNode && this.overlay.parentNode.removeChild(this.overlay);
|
|
294
|
+
} else this.overlay.parentNode && this.overlay.parentNode.removeChild(this.overlay);
|
|
297
295
|
};
|
|
298
296
|
n.DialogManager.prototype.containedByTopDialog_ = function(e) {
|
|
299
297
|
for (; e = c(e); ) {
|
|
@@ -322,8 +320,7 @@ n.DialogManager.prototype.handleKey_ = function(e) {
|
|
|
322
320
|
cancelable: !0
|
|
323
321
|
}), o = this.pendingDialogStack[0];
|
|
324
322
|
o && g(o.dialog, t) && o.dialog.close();
|
|
325
|
-
} else
|
|
326
|
-
e.keyCode === 9 && (this.forwardTab_ = !e.shiftKey);
|
|
323
|
+
} else e.keyCode === 9 && (this.forwardTab_ = !e.shiftKey);
|
|
327
324
|
};
|
|
328
325
|
n.DialogManager.prototype.checkDOM_ = function(e) {
|
|
329
326
|
var t = this.pendingDialogStack.slice();
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { html as
|
|
3
|
-
import { property as r, query as
|
|
4
|
-
import { classMap as
|
|
5
|
-
import { ifDefined as
|
|
1
|
+
import { LitElement as I, unsafeCSS as N, nothing as h } from "lit";
|
|
2
|
+
import { html as c, unsafeStatic as W } from "lit/static-html.js";
|
|
3
|
+
import { property as r, query as R } from "lit/decorators.js";
|
|
4
|
+
import { classMap as M } from "lit/directives/class-map.js";
|
|
5
|
+
import { ifDefined as y } from "lit/directives/if-defined.js";
|
|
6
6
|
import "@justeattakeaway/pie-button";
|
|
7
7
|
import "@justeattakeaway/pie-icon-button";
|
|
8
|
-
import { RtlMixin as
|
|
8
|
+
import { RtlMixin as j, dispatchCustomEvent as u, requiredProperty as Y, validPropertyValues as B, defineCustomElement as V } from "@justeattakeaway/pie-webc-core";
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
10
10
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
|
|
11
11
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
12
12
|
import "@justeattakeaway/pie-spinner";
|
|
13
|
-
function
|
|
13
|
+
function q(n) {
|
|
14
14
|
if (Array.isArray(n)) {
|
|
15
15
|
for (var e = 0, o = Array(n.length); e < n.length; e++)
|
|
16
16
|
o[e] = n[e];
|
|
@@ -20,33 +20,33 @@ function V(n) {
|
|
|
20
20
|
}
|
|
21
21
|
var O = !1;
|
|
22
22
|
if (typeof window < "u") {
|
|
23
|
-
var
|
|
23
|
+
var A = {
|
|
24
24
|
get passive() {
|
|
25
25
|
O = !0;
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
|
-
window.addEventListener("testPassive", null,
|
|
28
|
+
window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
|
|
29
29
|
}
|
|
30
|
-
var
|
|
30
|
+
var $ = 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 = [], x = !1, D = -1, f = void 0, v = void 0, F = function(e) {
|
|
31
31
|
return g.some(function(o) {
|
|
32
32
|
return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
|
|
33
33
|
});
|
|
34
34
|
}, _ = function(e) {
|
|
35
35
|
var o = e || window.event;
|
|
36
|
-
return
|
|
37
|
-
},
|
|
36
|
+
return F(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
|
|
37
|
+
}, H = function(e) {
|
|
38
38
|
if (v === void 0) {
|
|
39
|
-
var o = !!e
|
|
39
|
+
var o = !!e, t = window.innerWidth - document.documentElement.clientWidth;
|
|
40
40
|
o && t > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
|
|
41
41
|
}
|
|
42
42
|
f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
43
|
-
},
|
|
43
|
+
}, K = function() {
|
|
44
44
|
v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
|
|
45
|
-
},
|
|
45
|
+
}, U = function(e) {
|
|
46
46
|
return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
|
|
47
|
-
},
|
|
47
|
+
}, X = function(e, o) {
|
|
48
48
|
var t = e.targetTouches[0].clientY - D;
|
|
49
|
-
return
|
|
49
|
+
return F(e.target) ? !1 : o && o.scrollTop === 0 && t > 0 || U(o) && t < 0 ? _(e) : (e.stopPropagation(), !0);
|
|
50
50
|
}, G = function(e, o) {
|
|
51
51
|
if (!e) {
|
|
52
52
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
@@ -57,25 +57,24 @@ var A = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
57
57
|
})) {
|
|
58
58
|
var t = {
|
|
59
59
|
targetElement: e,
|
|
60
|
-
options:
|
|
60
|
+
options: {}
|
|
61
61
|
};
|
|
62
|
-
g = [].concat(
|
|
62
|
+
g = [].concat(q(g), [t]), $ ? (e.ontouchstart = function(i) {
|
|
63
63
|
i.targetTouches.length === 1 && (D = i.targetTouches[0].clientY);
|
|
64
64
|
}, e.ontouchmove = function(i) {
|
|
65
|
-
i.targetTouches.length === 1 &&
|
|
66
|
-
}, x || (document.addEventListener("touchmove", _, O ? { passive: !1 } : void 0), x = !0)) :
|
|
65
|
+
i.targetTouches.length === 1 && X(i, e);
|
|
66
|
+
}, x || (document.addEventListener("touchmove", _, O ? { passive: !1 } : void 0), x = !0)) : H(o);
|
|
67
67
|
}
|
|
68
|
-
},
|
|
68
|
+
}, J = function(e) {
|
|
69
69
|
if (!e) {
|
|
70
70
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
71
71
|
return;
|
|
72
72
|
}
|
|
73
73
|
g = g.filter(function(o) {
|
|
74
74
|
return o.targetElement !== e;
|
|
75
|
-
}),
|
|
75
|
+
}), $ ? (e.ontouchstart = null, e.ontouchmove = null, x && g.length === 0 && (document.removeEventListener("touchmove", _, O ? { passive: !1 } : void 0), x = !1)) : g.length || K();
|
|
76
76
|
};
|
|
77
|
-
const
|
|
78
|
-
`, Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], ee = ["top", "center"], z = "pie-modal-close", y = "pie-modal-open", C = "pie-modal-back", oe = "pie-modal-leading-action-click", te = "pie-modal-supporting-action-click", s = {
|
|
77
|
+
const Q = '*,*:after,*:before{box-sizing:inherit}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:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.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-l-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: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--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.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--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.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.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: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{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-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 769px){.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-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end: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);--modal-content-padding-block-end: var(--dt-spacing-e);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:not(:last-child){padding-block-end:var(--modal-content-padding-block);min-block-size:var(--modal-content-min-block-size)}.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.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}', Z = ["h1", "h2", "h3", "h4", "h5", "h6"], ee = ["small", "medium", "large"], oe = ["top", "center"], z = "pie-modal-close", w = "pie-modal-open", C = "pie-modal-back", te = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click", s = {
|
|
79
78
|
hasBackButton: !1,
|
|
80
79
|
hasStackedActions: !1,
|
|
81
80
|
headingLevel: "h2",
|
|
@@ -87,13 +86,12 @@ const J = `*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
|
|
|
87
86
|
position: "center",
|
|
88
87
|
size: "medium"
|
|
89
88
|
};
|
|
90
|
-
var
|
|
91
|
-
for (var i =
|
|
92
|
-
(
|
|
93
|
-
return
|
|
89
|
+
var ae = Object.defineProperty, l = (n, e, o, t) => {
|
|
90
|
+
for (var i = void 0, d = n.length - 1, m; d >= 0; d--)
|
|
91
|
+
(m = n[d]) && (i = m(e, o, i) || i);
|
|
92
|
+
return i && ae(e, o, i), i;
|
|
94
93
|
};
|
|
95
|
-
const b = "pie-modal"
|
|
96
|
-
class a extends R(T) {
|
|
94
|
+
const b = "pie-modal", L = class L extends j(I) {
|
|
97
95
|
constructor() {
|
|
98
96
|
super(...arguments), this.headingLevel = s.headingLevel, this.hasBackButton = s.hasBackButton, this.hasStackedActions = s.hasStackedActions, this.isDismissible = s.isDismissible, this.isFooterPinned = s.isFooterPinned, this.isFullWidthBelowMid = s.isFullWidthBelowMid, this.isLoading = s.isLoading, this.isOpen = s.isOpen, this.position = s.position, this.size = s.size, this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
|
|
99
97
|
this.isDismissible || e.preventDefault();
|
|
@@ -105,21 +103,21 @@ class a extends R(T) {
|
|
|
105
103
|
top: t = 0,
|
|
106
104
|
bottom: i = 0,
|
|
107
105
|
left: d = 0,
|
|
108
|
-
right:
|
|
106
|
+
right: m = 0
|
|
109
107
|
} = o || {};
|
|
110
|
-
if (t === 0 && i === 0 && d === 0 &&
|
|
108
|
+
if (t === 0 && i === 0 && d === 0 && m === 0)
|
|
111
109
|
return;
|
|
112
|
-
(e.clientY < t || e.clientY > i || e.clientX < d || e.clientX >
|
|
110
|
+
(e.clientY < t || e.clientY > i || e.clientX < d || e.clientX > m) && (this.isOpen = !1);
|
|
113
111
|
};
|
|
114
112
|
}
|
|
115
113
|
connectedCallback() {
|
|
116
|
-
super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(
|
|
114
|
+
super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(w, (e) => this._handleModalOpened(e)), document.addEventListener(z, (e) => this._handleModalClosed(e)), document.addEventListener(C, (e) => this._handleModalClosed(e));
|
|
117
115
|
}
|
|
118
116
|
disconnectedCallback() {
|
|
119
|
-
document.removeEventListener(
|
|
117
|
+
document.removeEventListener(w, (e) => this._handleModalOpened(e)), document.removeEventListener(z, (e) => this._handleModalClosed(e)), document.removeEventListener(C, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
|
|
120
118
|
}
|
|
121
119
|
async firstUpdated(e) {
|
|
122
|
-
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-
|
|
120
|
+
super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-CbjBMXAG.js").then((t) => t.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (t) => this._handleDialogCancelEvent(t)), this._dialog.addEventListener("close", () => {
|
|
123
121
|
this.isOpen = !1;
|
|
124
122
|
})), this._handleModalOpenStateOnFirstRender(e);
|
|
125
123
|
}
|
|
@@ -130,13 +128,13 @@ class a extends R(T) {
|
|
|
130
128
|
* Opens the dialog element and disables page scrolling
|
|
131
129
|
*/
|
|
132
130
|
_handleModalOpened(e) {
|
|
133
|
-
var t, i, d,
|
|
131
|
+
var t, i, d, m;
|
|
134
132
|
const { targetModal: o } = e.detail;
|
|
135
133
|
if (o === this) {
|
|
136
134
|
const p = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
|
|
137
135
|
if (p && ("scrollTo" in window && window.scrollTo(0, 0), G(p)), (i = this._dialog) != null && i.hasAttribute("open") || !((d = this._dialog) != null && d.isConnected))
|
|
138
136
|
return;
|
|
139
|
-
(
|
|
137
|
+
(m = this._dialog) == null || m.showModal();
|
|
140
138
|
}
|
|
141
139
|
}
|
|
142
140
|
/**
|
|
@@ -147,21 +145,21 @@ class a extends R(T) {
|
|
|
147
145
|
const { targetModal: o } = e.detail;
|
|
148
146
|
if (o === this) {
|
|
149
147
|
const d = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
|
|
150
|
-
d &&
|
|
148
|
+
d && J(d), (i = this._dialog) == null || i.close(), this._returnFocus();
|
|
151
149
|
}
|
|
152
150
|
}
|
|
153
151
|
// Handles the value of the isOpen property on first render of the component
|
|
154
152
|
_handleModalOpenStateOnFirstRender(e) {
|
|
155
|
-
e.get("isOpen") === void 0 && this.isOpen && u(this,
|
|
153
|
+
e.get("isOpen") === void 0 && this.isOpen && u(this, w, { targetModal: this });
|
|
156
154
|
}
|
|
157
155
|
// Handles changes to the modal isOpen property by dispatching any appropriate events
|
|
158
156
|
_handleModalOpenStateChanged(e) {
|
|
159
157
|
const o = e.get("isOpen");
|
|
160
|
-
o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, C, { targetModal: this })) : u(this, z, { targetModal: this }) : u(this,
|
|
158
|
+
o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, C, { targetModal: this })) : u(this, z, { targetModal: this }) : u(this, w, { targetModal: this }));
|
|
161
159
|
}
|
|
162
160
|
_handleActionClick(e) {
|
|
163
161
|
var o, t;
|
|
164
|
-
e === "leading" ? ((o = this._dialog) == null || o.close("leading"), u(this,
|
|
162
|
+
e === "leading" ? ((o = this._dialog) == null || o.close("leading"), u(this, te, { targetModal: this })) : e === "supporting" && ((t = this._dialog) == null || t.close("supporting"), u(this, ie, { targetModal: this }));
|
|
165
163
|
}
|
|
166
164
|
/**
|
|
167
165
|
* Return focus to the specified element, providing the selector is valid
|
|
@@ -180,7 +178,7 @@ class a extends R(T) {
|
|
|
180
178
|
*/
|
|
181
179
|
renderCloseButton() {
|
|
182
180
|
var e;
|
|
183
|
-
return this.isDismissible ?
|
|
181
|
+
return this.isDismissible ? c`
|
|
184
182
|
<pie-icon-button
|
|
185
183
|
@click="${() => {
|
|
186
184
|
this.isOpen = !1;
|
|
@@ -200,16 +198,16 @@ class a extends R(T) {
|
|
|
200
198
|
*/
|
|
201
199
|
renderBackButton() {
|
|
202
200
|
var e;
|
|
203
|
-
return this.hasBackButton ?
|
|
201
|
+
return this.hasBackButton ? c`
|
|
204
202
|
<pie-icon-button
|
|
205
203
|
@click="${() => {
|
|
206
204
|
this._backButtonClicked = !0, this.isOpen = !1;
|
|
207
205
|
}}"
|
|
208
206
|
variant="ghost-secondary"
|
|
209
207
|
class="c-modal-backBtn"
|
|
210
|
-
aria-label="${
|
|
208
|
+
aria-label="${y((e = this.aria) == null ? void 0 : e.back)}"
|
|
211
209
|
data-test-id="modal-back-button">
|
|
212
|
-
${this.isRTL ?
|
|
210
|
+
${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
|
|
213
211
|
</pie-icon-button>
|
|
214
212
|
` : h;
|
|
215
213
|
}
|
|
@@ -224,10 +222,10 @@ class a extends R(T) {
|
|
|
224
222
|
*/
|
|
225
223
|
renderLeadingAction() {
|
|
226
224
|
const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
|
|
227
|
-
return o ?
|
|
225
|
+
return o ? c`
|
|
228
226
|
<pie-button
|
|
229
227
|
variant="${t}"
|
|
230
|
-
aria-label="${
|
|
228
|
+
aria-label="${y(e)}"
|
|
231
229
|
type="submit"
|
|
232
230
|
?isFullWidth="${this.hasStackedActions}"
|
|
233
231
|
@click="${() => this._handleActionClick("leading")}"
|
|
@@ -249,10 +247,10 @@ class a extends R(T) {
|
|
|
249
247
|
renderSupportingAction() {
|
|
250
248
|
var i;
|
|
251
249
|
const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
|
|
252
|
-
return !o || !((i = this.leadingAction) != null && i.text) ? h :
|
|
250
|
+
return !o || !((i = this.leadingAction) != null && i.text) ? h : c`
|
|
253
251
|
<pie-button
|
|
254
252
|
variant="${t}"
|
|
255
|
-
aria-label="${
|
|
253
|
+
aria-label="${y(e)}"
|
|
256
254
|
type="reset"
|
|
257
255
|
?isFullWidth="${this.hasStackedActions}"
|
|
258
256
|
@click="${() => this._handleActionClick("supporting")}"
|
|
@@ -275,8 +273,8 @@ class a extends R(T) {
|
|
|
275
273
|
"c-modal-footer": !0,
|
|
276
274
|
"c-modal-footer--stackedActions": this.hasStackedActions
|
|
277
275
|
};
|
|
278
|
-
return
|
|
279
|
-
<footer class="${
|
|
276
|
+
return c`
|
|
277
|
+
<footer class="${M(e)}" data-test-id="pie-modal-footer">
|
|
280
278
|
${this.renderLeadingAction()}
|
|
281
279
|
${this.renderSupportingAction()}
|
|
282
280
|
</footer>`;
|
|
@@ -286,14 +284,14 @@ class a extends R(T) {
|
|
|
286
284
|
* @private
|
|
287
285
|
*/
|
|
288
286
|
renderLoadingSpinner() {
|
|
289
|
-
return this.isLoading ?
|
|
287
|
+
return this.isLoading ? c`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : h;
|
|
290
288
|
}
|
|
291
289
|
/**
|
|
292
290
|
* Renders the modal inner content and footer of the modal.
|
|
293
291
|
* @private
|
|
294
292
|
*/
|
|
295
293
|
renderModalContentAndFooter() {
|
|
296
|
-
return
|
|
294
|
+
return c`
|
|
297
295
|
<article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
|
|
298
296
|
<div class="c-modal-contentInner" data-test-id="modal-content-inner">
|
|
299
297
|
<slot></slot>
|
|
@@ -309,105 +307,106 @@ class a extends R(T) {
|
|
|
309
307
|
headingLevel: t,
|
|
310
308
|
isDismissible: i,
|
|
311
309
|
isFooterPinned: d,
|
|
312
|
-
isFullWidthBelowMid:
|
|
310
|
+
isFullWidthBelowMid: m,
|
|
313
311
|
isLoading: p,
|
|
314
312
|
position: k,
|
|
315
|
-
size:
|
|
316
|
-
} = this,
|
|
313
|
+
size: E
|
|
314
|
+
} = this, S = W(t), T = p && (e == null ? void 0 : e.loading) || void 0, P = {
|
|
317
315
|
"c-modal": !0,
|
|
318
|
-
[`c-modal--${
|
|
316
|
+
[`c-modal--${E}`]: !0,
|
|
319
317
|
"c-modal--top": k === "top",
|
|
320
318
|
"c-modal--dismissible": i,
|
|
321
319
|
"c-modal--loading": p,
|
|
322
320
|
"c-modal--pinnedFooter": d,
|
|
323
|
-
"c-modal--fullWidthBelowMid":
|
|
321
|
+
"c-modal--fullWidthBelowMid": m
|
|
324
322
|
};
|
|
325
|
-
return
|
|
323
|
+
return c`
|
|
326
324
|
<dialog
|
|
327
325
|
id="dialog"
|
|
328
|
-
class="${
|
|
326
|
+
class="${M(P)}"
|
|
329
327
|
aria-busy="${p ? "true" : "false"}"
|
|
330
|
-
aria-label="${
|
|
328
|
+
aria-label="${y(T)}"
|
|
331
329
|
data-test-id="pie-modal">
|
|
332
330
|
<header class="c-modal-header"
|
|
333
331
|
data-test-id="modal-header">
|
|
334
332
|
${this.renderBackButton()}
|
|
335
|
-
<${
|
|
333
|
+
<${S} class="c-modal-heading">
|
|
336
334
|
${o}
|
|
337
|
-
</${
|
|
335
|
+
</${S}>
|
|
338
336
|
${this.renderCloseButton()}
|
|
339
337
|
</header>
|
|
340
338
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
341
|
-
d ? this.renderModalContentAndFooter() :
|
|
339
|
+
d ? this.renderModalContentAndFooter() : c`
|
|
342
340
|
<div class="c-modal-scrollContainer">
|
|
343
341
|
${this.renderModalContentAndFooter()}
|
|
344
342
|
</div>`}
|
|
345
343
|
</dialog>`;
|
|
346
344
|
}
|
|
347
|
-
}
|
|
348
|
-
|
|
345
|
+
};
|
|
346
|
+
L.styles = N(Q);
|
|
347
|
+
let a = L;
|
|
349
348
|
l([
|
|
350
349
|
r({ type: Object })
|
|
351
|
-
], a.prototype, "aria"
|
|
350
|
+
], a.prototype, "aria");
|
|
352
351
|
l([
|
|
353
352
|
r({ type: String }),
|
|
354
|
-
|
|
355
|
-
], a.prototype, "heading"
|
|
353
|
+
Y(b)
|
|
354
|
+
], a.prototype, "heading");
|
|
356
355
|
l([
|
|
357
356
|
r(),
|
|
358
|
-
B(b,
|
|
359
|
-
], a.prototype, "headingLevel"
|
|
357
|
+
B(b, Z, s.headingLevel)
|
|
358
|
+
], a.prototype, "headingLevel");
|
|
360
359
|
l([
|
|
361
360
|
r({ type: Boolean })
|
|
362
|
-
], a.prototype, "hasBackButton"
|
|
361
|
+
], a.prototype, "hasBackButton");
|
|
363
362
|
l([
|
|
364
363
|
r({ type: Boolean })
|
|
365
|
-
], a.prototype, "hasStackedActions"
|
|
364
|
+
], a.prototype, "hasStackedActions");
|
|
366
365
|
l([
|
|
367
366
|
r({ type: Boolean, reflect: !0 })
|
|
368
|
-
], a.prototype, "isDismissible"
|
|
367
|
+
], a.prototype, "isDismissible");
|
|
369
368
|
l([
|
|
370
369
|
r({ type: Boolean })
|
|
371
|
-
], a.prototype, "isFooterPinned"
|
|
370
|
+
], a.prototype, "isFooterPinned");
|
|
372
371
|
l([
|
|
373
372
|
r({ type: Boolean })
|
|
374
|
-
], a.prototype, "isFullWidthBelowMid"
|
|
373
|
+
], a.prototype, "isFullWidthBelowMid");
|
|
375
374
|
l([
|
|
376
375
|
r({ type: Boolean, reflect: !0 })
|
|
377
|
-
], a.prototype, "isLoading"
|
|
376
|
+
], a.prototype, "isLoading");
|
|
378
377
|
l([
|
|
379
378
|
r({ type: Boolean })
|
|
380
|
-
], a.prototype, "isOpen"
|
|
379
|
+
], a.prototype, "isOpen");
|
|
381
380
|
l([
|
|
382
381
|
r({ type: Object })
|
|
383
|
-
], a.prototype, "leadingAction"
|
|
382
|
+
], a.prototype, "leadingAction");
|
|
384
383
|
l([
|
|
385
384
|
r(),
|
|
386
|
-
B(b,
|
|
387
|
-
], a.prototype, "position"
|
|
385
|
+
B(b, oe, s.position)
|
|
386
|
+
], a.prototype, "position");
|
|
388
387
|
l([
|
|
389
388
|
r()
|
|
390
|
-
], a.prototype, "returnFocusAfterCloseSelector"
|
|
389
|
+
], a.prototype, "returnFocusAfterCloseSelector");
|
|
391
390
|
l([
|
|
392
391
|
r(),
|
|
393
|
-
B(b,
|
|
394
|
-
], a.prototype, "size"
|
|
392
|
+
B(b, ee, s.size)
|
|
393
|
+
], a.prototype, "size");
|
|
395
394
|
l([
|
|
396
395
|
r({ type: Object })
|
|
397
|
-
], a.prototype, "supportingAction"
|
|
396
|
+
], a.prototype, "supportingAction");
|
|
398
397
|
l([
|
|
399
|
-
|
|
400
|
-
], a.prototype, "_dialog"
|
|
401
|
-
|
|
398
|
+
R("dialog")
|
|
399
|
+
], a.prototype, "_dialog");
|
|
400
|
+
V(b, a);
|
|
402
401
|
export {
|
|
403
402
|
C as ON_MODAL_BACK_EVENT,
|
|
404
403
|
z as ON_MODAL_CLOSE_EVENT,
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
404
|
+
te as ON_MODAL_LEADING_ACTION_CLICK,
|
|
405
|
+
w as ON_MODAL_OPEN_EVENT,
|
|
406
|
+
ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
408
407
|
a as PieModal,
|
|
409
408
|
s as defaultProps,
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
409
|
+
Z as headingLevels,
|
|
410
|
+
oe as positions,
|
|
411
|
+
ee as sizes
|
|
413
412
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,22 +1,10 @@
|
|
|
1
1
|
import * as o from "react";
|
|
2
|
-
import { createComponent as
|
|
3
|
-
import { PieModal as
|
|
4
|
-
import { ON_MODAL_BACK_EVENT as
|
|
5
|
-
|
|
6
|
-
import "lit/static-html.js";
|
|
7
|
-
import "lit/decorators.js";
|
|
8
|
-
import "lit/directives/class-map.js";
|
|
9
|
-
import "lit/directives/if-defined.js";
|
|
10
|
-
import "@justeattakeaway/pie-button";
|
|
11
|
-
import "@justeattakeaway/pie-icon-button";
|
|
12
|
-
import "@justeattakeaway/pie-webc-core";
|
|
13
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
14
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
|
|
15
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
16
|
-
import "@justeattakeaway/pie-spinner";
|
|
17
|
-
const a = i({
|
|
2
|
+
import { createComponent as e } from "@lit/react";
|
|
3
|
+
import { PieModal as i } from "./index.js";
|
|
4
|
+
import { ON_MODAL_BACK_EVENT as c, ON_MODAL_CLOSE_EVENT as m, ON_MODAL_LEADING_ACTION_CLICK as s, ON_MODAL_OPEN_EVENT as _, ON_MODAL_SUPPORTING_ACTION_CLICK as O, defaultProps as M, headingLevels as N, positions as r, sizes as P } from "./index.js";
|
|
5
|
+
const a = e({
|
|
18
6
|
displayName: "PieModal",
|
|
19
|
-
elementClass:
|
|
7
|
+
elementClass: i,
|
|
20
8
|
react: o,
|
|
21
9
|
tagName: "pie-modal",
|
|
22
10
|
events: {
|
|
@@ -31,16 +19,16 @@ const a = i({
|
|
|
31
19
|
onPieModalSupportingActionClick: "pie-modal-supporting-action-click"
|
|
32
20
|
// when the modal supporting action is clicked.
|
|
33
21
|
}
|
|
34
|
-
}),
|
|
22
|
+
}), t = a;
|
|
35
23
|
export {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
24
|
+
c as ON_MODAL_BACK_EVENT,
|
|
25
|
+
m as ON_MODAL_CLOSE_EVENT,
|
|
26
|
+
s as ON_MODAL_LEADING_ACTION_CLICK,
|
|
27
|
+
_ as ON_MODAL_OPEN_EVENT,
|
|
28
|
+
O as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
29
|
+
t as PieModal,
|
|
30
|
+
M as defaultProps,
|
|
31
|
+
N as headingLevels,
|
|
32
|
+
r as positions,
|
|
33
|
+
P as sizes
|
|
46
34
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.47.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
|
-
"@justeat/pie-design-tokens": "6.
|
|
39
|
+
"@justeat/pie-design-tokens": "6.5.0",
|
|
40
40
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
41
|
-
"@justeattakeaway/pie-css": "0.
|
|
41
|
+
"@justeattakeaway/pie-css": "0.13.0",
|
|
42
42
|
"@justeattakeaway/pie-wrapper-react": "0.14.1",
|
|
43
43
|
"@types/body-scroll-lock": "3.1.2",
|
|
44
44
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"extends": "../../../package.json"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@justeattakeaway/pie-button": "0.49.
|
|
51
|
-
"@justeattakeaway/pie-icon-button": "0.28.
|
|
50
|
+
"@justeattakeaway/pie-button": "0.49.1",
|
|
51
|
+
"@justeattakeaway/pie-icon-button": "0.28.12",
|
|
52
52
|
"@justeattakeaway/pie-icons-webc": "0.25.1",
|
|
53
|
-
"@justeattakeaway/pie-spinner": "0.
|
|
53
|
+
"@justeattakeaway/pie-spinner": "0.7.0",
|
|
54
54
|
"@justeattakeaway/pie-webc-core": "0.24.0",
|
|
55
55
|
"body-scroll-lock": "3.1.5",
|
|
56
56
|
"dialog-polyfill": "0.5.6"
|
package/src/modal.scss
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
2
|
@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
|
|
3
|
+
@use '@justeattakeaway/pie-css/scss/settings' as *;
|
|
3
4
|
@use 'dialog-polyfill/dist/dialog-polyfill.css';
|
|
4
5
|
|
|
5
6
|
.c-modal {
|
|
6
7
|
// Custom Property Declarations
|
|
7
8
|
// These are defined here instead of :host to encapsulate them inside Shadow DOM
|
|
8
|
-
$breakpoint-wide: 768px;
|
|
9
|
-
|
|
10
9
|
--modal-size-s: 450px;
|
|
11
10
|
--modal-size-m: 600px;
|
|
12
11
|
--modal-size-l: 1080px;
|
|
@@ -23,7 +22,7 @@
|
|
|
23
22
|
|
|
24
23
|
// We need to override the icon sizes at different screen sizes regardless of size prop passed in
|
|
25
24
|
pie-icon-button {
|
|
26
|
-
@media
|
|
25
|
+
@include media('<md') {
|
|
27
26
|
--btn-dimension: 40px;
|
|
28
27
|
}
|
|
29
28
|
}
|
|
@@ -50,7 +49,7 @@
|
|
|
50
49
|
--modal-margin-large: var(--dt-spacing-j);
|
|
51
50
|
--modal-margin-block: var(--modal-margin-small);
|
|
52
51
|
|
|
53
|
-
@media
|
|
52
|
+
@include media('>md') {
|
|
54
53
|
--modal-margin-block: var(--modal-margin-large);
|
|
55
54
|
}
|
|
56
55
|
|
|
@@ -69,7 +68,7 @@
|
|
|
69
68
|
&.c-modal--small {
|
|
70
69
|
--modal-max-inline-size: var(--modal-size-s);
|
|
71
70
|
|
|
72
|
-
@media
|
|
71
|
+
@include media('>md') {
|
|
73
72
|
--modal-margin-block: var(--modal-margin-large);
|
|
74
73
|
}
|
|
75
74
|
}
|
|
@@ -87,7 +86,7 @@
|
|
|
87
86
|
// Fullscreen styles
|
|
88
87
|
&.c-modal--large,
|
|
89
88
|
&.c-modal--medium.c-modal--fullWidthBelowMid {
|
|
90
|
-
@media
|
|
89
|
+
@include media('<md') {
|
|
91
90
|
--modal-margin-block: var(--modal-margin-none);
|
|
92
91
|
--modal-border-radius: var(--dt-radius-rounded-none);
|
|
93
92
|
--modal-block-size: 100%;
|
|
@@ -110,17 +109,25 @@
|
|
|
110
109
|
|
|
111
110
|
&.c-modal--large,
|
|
112
111
|
&.c-modal--fullWidthBelowMid.c-modal--medium {
|
|
113
|
-
@media
|
|
112
|
+
@include media('<md') {
|
|
114
113
|
margin-block-start: var(--dt-spacing-none);
|
|
115
114
|
max-block-size: 100%;
|
|
116
115
|
}
|
|
117
116
|
}
|
|
118
117
|
}
|
|
119
118
|
|
|
120
|
-
// We need to pull in the token directly here because the
|
|
121
|
-
// pseudo element `::backdrop` doesn't seem to pick up custom css properties.
|
|
122
119
|
&::backdrop {
|
|
123
|
-
background:
|
|
120
|
+
background: var(--dt-color-overlay);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// TODO: Can be removed along with pie-design-tokens dependency
|
|
124
|
+
// after v17.6 becomes the last we support, currently it is v16+
|
|
125
|
+
// where css vars are not working on ::backdrop
|
|
126
|
+
// Safari >= 16
|
|
127
|
+
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
|
|
128
|
+
&::backdrop {
|
|
129
|
+
background: #{dt.$color-overlay};
|
|
130
|
+
}
|
|
124
131
|
}
|
|
125
132
|
|
|
126
133
|
& .c-modal-footer {
|
|
@@ -133,13 +140,13 @@
|
|
|
133
140
|
gap: var(--modal-button-spacing);
|
|
134
141
|
padding: var(--modal-footer-padding);
|
|
135
142
|
|
|
136
|
-
@media
|
|
143
|
+
@include media('>md') {
|
|
137
144
|
--modal-footer-padding: var(--dt-spacing-e);
|
|
138
145
|
}
|
|
139
146
|
|
|
140
147
|
&.c-modal-footer--stackedActions {
|
|
141
148
|
// TODO: Move breakpoint sizes into shared CSS component utilities
|
|
142
|
-
@media
|
|
149
|
+
@include media('<md') {
|
|
143
150
|
flex-direction: column;
|
|
144
151
|
}
|
|
145
152
|
}
|
|
@@ -167,7 +174,7 @@
|
|
|
167
174
|
margin-inline-end: var(--dt-spacing-d);
|
|
168
175
|
margin-block: 14px; // This is deliberately not a custom property
|
|
169
176
|
|
|
170
|
-
@media
|
|
177
|
+
@include media('>md') {
|
|
171
178
|
--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
|
|
172
179
|
--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
|
|
173
180
|
margin-inline-start: var(--dt-spacing-e);
|
|
@@ -180,7 +187,7 @@
|
|
|
180
187
|
.c-modal-backBtn + .c-modal-heading {
|
|
181
188
|
margin-inline-start: var(--dt-spacing-b);
|
|
182
189
|
|
|
183
|
-
@media
|
|
190
|
+
@include media('>md') {
|
|
184
191
|
margin-inline-start: var(--dt-spacing-c);
|
|
185
192
|
}
|
|
186
193
|
}
|
|
@@ -188,7 +195,7 @@
|
|
|
188
195
|
&.c-modal--dismissible .c-modal-heading {
|
|
189
196
|
margin-inline-end: var(--dt-spacing-d);
|
|
190
197
|
|
|
191
|
-
@media
|
|
198
|
+
@include media('>md') {
|
|
192
199
|
margin-inline-end: var(--dt-spacing-e);
|
|
193
200
|
}
|
|
194
201
|
}
|
|
@@ -200,7 +207,7 @@
|
|
|
200
207
|
margin-inline-start: var(--dt-spacing-b);
|
|
201
208
|
margin-inline-end: var(--dt-spacing-none);
|
|
202
209
|
|
|
203
|
-
@media
|
|
210
|
+
@include media('>md') {
|
|
204
211
|
margin-block-start: var(--dt-spacing-c);
|
|
205
212
|
margin-block-end: var(--dt-spacing-c);
|
|
206
213
|
margin-inline-start: var(--dt-spacing-c);
|
|
@@ -215,7 +222,7 @@
|
|
|
215
222
|
margin-inline-start: var(--dt-spacing-none);
|
|
216
223
|
margin-inline-end: var(--dt-spacing-b);
|
|
217
224
|
|
|
218
|
-
@media
|
|
225
|
+
@include media('>md') {
|
|
219
226
|
margin-block-start: var(--dt-spacing-c);
|
|
220
227
|
margin-block-end: var(--dt-spacing-c);
|
|
221
228
|
margin-inline-start: var(--dt-spacing-none);
|
|
@@ -234,7 +241,7 @@
|
|
|
234
241
|
--modal-content-min-block-size: var(--dt-spacing-j);
|
|
235
242
|
|
|
236
243
|
|
|
237
|
-
@media
|
|
244
|
+
@include media('>md') {
|
|
238
245
|
--modal-content-padding-inline: var(--dt-spacing-e);
|
|
239
246
|
}
|
|
240
247
|
|