@justeattakeaway/pie-modal 1.10.1 → 1.11.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/custom-elements.json +0 -6
- package/dist/index.d.ts +1 -5
- package/dist/index.js +53 -54
- package/dist/react.d.ts +1 -5
- package/package.json +9 -9
- package/src/index.ts +2 -4
- package/src/modal.scss +4 -0
package/custom-elements.json
CHANGED
|
@@ -637,12 +637,6 @@
|
|
|
637
637
|
"name": "pie-modal-supporting-action-click"
|
|
638
638
|
}
|
|
639
639
|
],
|
|
640
|
-
"mixins": [
|
|
641
|
-
{
|
|
642
|
-
"name": "RtlMixin",
|
|
643
|
-
"package": "@justeattakeaway/pie-webc-core"
|
|
644
|
-
}
|
|
645
|
-
],
|
|
646
640
|
"superclass": {
|
|
647
641
|
"name": "PieElement",
|
|
648
642
|
"package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import { CSSResult } from 'lit';
|
|
3
|
-
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
4
|
import { PropertyValues } from 'lit';
|
|
6
|
-
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
5
|
import { TemplateResult } from 'lit';
|
|
8
6
|
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
9
7
|
|
|
@@ -153,7 +151,7 @@ export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-ac
|
|
|
153
151
|
* @slot footer - The footer slot
|
|
154
152
|
* @slot - Default slot
|
|
155
153
|
*/
|
|
156
|
-
export declare class PieModal extends
|
|
154
|
+
export declare class PieModal extends PieElement implements ModalProps {
|
|
157
155
|
aria: ModalProps['aria'];
|
|
158
156
|
heading: string;
|
|
159
157
|
headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
@@ -285,8 +283,6 @@ export declare class PieModal extends PieModal_base implements ModalProps {
|
|
|
285
283
|
private _handleDialogLightDismiss;
|
|
286
284
|
}
|
|
287
285
|
|
|
288
|
-
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
289
|
-
|
|
290
286
|
export declare const positions: readonly ["top", "center"];
|
|
291
287
|
|
|
292
288
|
export declare const sizes: readonly ["small", "medium", "large"];
|
package/dist/index.js
CHANGED
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
import { LitElement as F,
|
|
2
|
-
import { html as
|
|
1
|
+
import { LitElement as F, unsafeCSS as P, nothing as g } from "lit";
|
|
2
|
+
import { html as s, unsafeStatic as T } from "lit/static-html.js";
|
|
3
3
|
import { property as d, query as K } from "lit/decorators.js";
|
|
4
|
-
import { classMap as
|
|
4
|
+
import { classMap as z } from "lit/directives/class-map.js";
|
|
5
5
|
import { ifDefined as b } from "lit/directives/if-defined.js";
|
|
6
6
|
import "@justeattakeaway/pie-button";
|
|
7
7
|
import "@justeattakeaway/pie-icon-button";
|
|
8
|
-
import {
|
|
8
|
+
import { requiredProperty as I, validPropertyValues as C, safeCustomElement as N, dispatchCustomEvent as h } 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
|
-
import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
12
11
|
import "@justeattakeaway/pie-spinner";
|
|
13
12
|
const k = class k extends F {
|
|
14
13
|
willUpdate() {
|
|
15
14
|
this.getAttribute("v") || this.setAttribute("v", k.v);
|
|
16
15
|
}
|
|
17
16
|
};
|
|
18
|
-
k.v = "1.
|
|
17
|
+
k.v = "1.11.0";
|
|
19
18
|
let x = k;
|
|
20
|
-
function
|
|
19
|
+
function W(e) {
|
|
21
20
|
if (Array.isArray(e)) {
|
|
22
21
|
for (var o = 0, t = Array(e.length); o < e.length; o++)
|
|
23
22
|
t[o] = e[o];
|
|
@@ -25,11 +24,11 @@ function R(e) {
|
|
|
25
24
|
} else
|
|
26
25
|
return Array.from(e);
|
|
27
26
|
}
|
|
28
|
-
var
|
|
27
|
+
var B = !1;
|
|
29
28
|
if (typeof window < "u") {
|
|
30
29
|
var A = {
|
|
31
30
|
get passive() {
|
|
32
|
-
|
|
31
|
+
B = !0;
|
|
33
32
|
}
|
|
34
33
|
};
|
|
35
34
|
window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
|
|
@@ -47,14 +46,14 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
47
46
|
t && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
|
|
48
47
|
}
|
|
49
48
|
u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
|
|
50
|
-
},
|
|
49
|
+
}, R = function() {
|
|
51
50
|
f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
|
|
52
|
-
},
|
|
51
|
+
}, V = function(o) {
|
|
53
52
|
return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
|
|
54
|
-
},
|
|
53
|
+
}, Y = function(o, t) {
|
|
55
54
|
var i = o.targetTouches[0].clientY - M;
|
|
56
|
-
return D(o.target) ? !1 : t && t.scrollTop === 0 && i > 0 ||
|
|
57
|
-
},
|
|
55
|
+
return D(o.target) ? !1 : t && t.scrollTop === 0 && i > 0 || V(t) && i < 0 ? y(o) : (o.stopPropagation(), !0);
|
|
56
|
+
}, H = function(o, t) {
|
|
58
57
|
if (!o) {
|
|
59
58
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
60
59
|
return;
|
|
@@ -66,22 +65,22 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
66
65
|
targetElement: o,
|
|
67
66
|
options: {}
|
|
68
67
|
};
|
|
69
|
-
m = [].concat(
|
|
68
|
+
m = [].concat(W(m), [i]), O ? (o.ontouchstart = function(a) {
|
|
70
69
|
a.targetTouches.length === 1 && (M = a.targetTouches[0].clientY);
|
|
71
70
|
}, o.ontouchmove = function(a) {
|
|
72
|
-
a.targetTouches.length === 1 &&
|
|
73
|
-
}, v || (document.addEventListener("touchmove", y,
|
|
71
|
+
a.targetTouches.length === 1 && Y(a, o);
|
|
72
|
+
}, v || (document.addEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !0)) : j();
|
|
74
73
|
}
|
|
75
|
-
},
|
|
74
|
+
}, q = function(o) {
|
|
76
75
|
if (!o) {
|
|
77
76
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
78
77
|
return;
|
|
79
78
|
}
|
|
80
79
|
m = m.filter(function(t) {
|
|
81
80
|
return t.targetElement !== o;
|
|
82
|
-
}), O ? (o.ontouchstart = null, o.ontouchmove = null, v && m.length === 0 && (document.removeEventListener("touchmove", y,
|
|
81
|
+
}), O ? (o.ontouchstart = null, o.ontouchmove = null, v && m.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : m.length || R();
|
|
83
82
|
};
|
|
84
|
-
const
|
|
83
|
+
const U = '*,*: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-below-20);position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--dt-color-content-default);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 ::slotted([slot=footer]){display:flex;width:100%}.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:has(+slot>footer){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}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}', X = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], J = ["top", "center"], S = "pie-modal-close", _ = "pie-modal-open", L = "pie-modal-back", Q = "pie-modal-leading-action-click", Z = "pie-modal-supporting-action-click", r = {
|
|
85
84
|
hasBackButton: !1,
|
|
86
85
|
hasStackedActions: !1,
|
|
87
86
|
headingLevel: "h2",
|
|
@@ -93,15 +92,15 @@ const X = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
|
|
|
93
92
|
position: "center",
|
|
94
93
|
size: "medium"
|
|
95
94
|
};
|
|
96
|
-
var
|
|
97
|
-
for (var a = i > 1 ? void 0 : i ?
|
|
95
|
+
var ee = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, l = (e, o, t, i) => {
|
|
96
|
+
for (var a = i > 1 ? void 0 : i ? oe(o, t) : o, c = e.length - 1, p; c >= 0; c--)
|
|
98
97
|
(p = e[c]) && (a = (i ? p(o, t, a) : p(a)) || a);
|
|
99
|
-
return i && a &&
|
|
98
|
+
return i && a && ee(o, t, a), a;
|
|
100
99
|
};
|
|
101
100
|
const w = "pie-modal";
|
|
102
|
-
let n = class extends
|
|
101
|
+
let n = class extends x {
|
|
103
102
|
constructor() {
|
|
104
|
-
super(...arguments), this.headingLevel =
|
|
103
|
+
super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
|
|
105
104
|
e.key === "Escape" && e.preventDefault();
|
|
106
105
|
}, this._handleDialogLightDismiss = (e) => {
|
|
107
106
|
if (!this.isDismissible || e.target !== e.currentTarget)
|
|
@@ -190,7 +189,7 @@ let n = class extends I(x) {
|
|
|
190
189
|
o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, S, { targetModal: this }) : h(this, _, { targetModal: this }));
|
|
191
190
|
}
|
|
192
191
|
_handleActionClick(e) {
|
|
193
|
-
e === "leading" ? (this._dialog.close("leading"), h(this,
|
|
192
|
+
e === "leading" ? (this._dialog.close("leading"), h(this, Q, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, Z, { targetModal: this }));
|
|
194
193
|
}
|
|
195
194
|
/**
|
|
196
195
|
* Return focus to the specified element, providing the selector is valid
|
|
@@ -205,13 +204,13 @@ let n = class extends I(x) {
|
|
|
205
204
|
* Enables body scroll by unlocking the scroll container.
|
|
206
205
|
*/
|
|
207
206
|
_enableBodyScroll() {
|
|
208
|
-
this._scrollableContainer &&
|
|
207
|
+
this._scrollableContainer && q(this._scrollableContainer);
|
|
209
208
|
}
|
|
210
209
|
/**
|
|
211
210
|
* Disables body scroll by locking the scroll container.
|
|
212
211
|
*/
|
|
213
212
|
_disableBodyScroll() {
|
|
214
|
-
this._modalScrollContainer &&
|
|
213
|
+
this._modalScrollContainer && H(this._modalScrollContainer);
|
|
215
214
|
}
|
|
216
215
|
/**
|
|
217
216
|
* Template for the close button element. Called within the
|
|
@@ -221,7 +220,7 @@ let n = class extends I(x) {
|
|
|
221
220
|
*/
|
|
222
221
|
renderCloseButton() {
|
|
223
222
|
var e;
|
|
224
|
-
return this.isDismissible ?
|
|
223
|
+
return this.isDismissible ? s`
|
|
225
224
|
<pie-icon-button
|
|
226
225
|
@click="${() => {
|
|
227
226
|
this.isOpen = !1;
|
|
@@ -241,7 +240,7 @@ let n = class extends I(x) {
|
|
|
241
240
|
*/
|
|
242
241
|
renderBackButton() {
|
|
243
242
|
var e;
|
|
244
|
-
return this.hasBackButton ?
|
|
243
|
+
return this.hasBackButton ? s`
|
|
245
244
|
<pie-icon-button
|
|
246
245
|
@click="${() => {
|
|
247
246
|
this._backButtonClicked = !0, this.isOpen = !1;
|
|
@@ -250,7 +249,7 @@ let n = class extends I(x) {
|
|
|
250
249
|
class="c-modal-backBtn"
|
|
251
250
|
aria-label="${b((e = this.aria) == null ? void 0 : e.back)}"
|
|
252
251
|
data-test-id="modal-back-button">
|
|
253
|
-
|
|
252
|
+
<icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-right>
|
|
254
253
|
</pie-icon-button>
|
|
255
254
|
` : g;
|
|
256
255
|
}
|
|
@@ -265,7 +264,7 @@ let n = class extends I(x) {
|
|
|
265
264
|
*/
|
|
266
265
|
renderLeadingAction() {
|
|
267
266
|
const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
|
|
268
|
-
return o ?
|
|
267
|
+
return o ? s`
|
|
269
268
|
<pie-button
|
|
270
269
|
variant="${t}"
|
|
271
270
|
aria-label="${b(e)}"
|
|
@@ -290,7 +289,7 @@ let n = class extends I(x) {
|
|
|
290
289
|
renderSupportingAction() {
|
|
291
290
|
var i;
|
|
292
291
|
const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
|
|
293
|
-
return !o || !((i = this.leadingAction) != null && i.text) ? g :
|
|
292
|
+
return !o || !((i = this.leadingAction) != null && i.text) ? g : s`
|
|
294
293
|
<pie-button
|
|
295
294
|
variant="${t}"
|
|
296
295
|
aria-label="${b(e)}"
|
|
@@ -315,12 +314,12 @@ let n = class extends I(x) {
|
|
|
315
314
|
const o = {
|
|
316
315
|
"c-modal-footer": !0,
|
|
317
316
|
"c-modal-footer--stackedActions": this.hasStackedActions
|
|
318
|
-
}, t = e ?
|
|
319
|
-
<footer class="${
|
|
317
|
+
}, t = e ? s`
|
|
318
|
+
<footer class="${z(o)}" data-test-id="pie-modal-footer">
|
|
320
319
|
${this.renderLeadingAction()}
|
|
321
320
|
${this.renderSupportingAction()}
|
|
322
321
|
</footer>` : g;
|
|
323
|
-
return
|
|
322
|
+
return s`
|
|
324
323
|
<slot name="footer">
|
|
325
324
|
${t}
|
|
326
325
|
</slot>`;
|
|
@@ -330,14 +329,14 @@ let n = class extends I(x) {
|
|
|
330
329
|
* @private
|
|
331
330
|
*/
|
|
332
331
|
renderLoadingSpinner() {
|
|
333
|
-
return this.isLoading ?
|
|
332
|
+
return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : g;
|
|
334
333
|
}
|
|
335
334
|
/**
|
|
336
335
|
* Renders the modal inner content and footer of the modal.
|
|
337
336
|
* @private
|
|
338
337
|
*/
|
|
339
338
|
renderModalContentAndFooter() {
|
|
340
|
-
return
|
|
339
|
+
return s`
|
|
341
340
|
<article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
|
|
342
341
|
<div class="c-modal-contentInner" data-test-id="modal-content-inner">
|
|
343
342
|
<slot></slot>
|
|
@@ -352,7 +351,7 @@ let n = class extends I(x) {
|
|
|
352
351
|
*/
|
|
353
352
|
renderHeading() {
|
|
354
353
|
const { heading: e, headingLevel: o } = this, t = T(o);
|
|
355
|
-
return
|
|
354
|
+
return s`
|
|
356
355
|
<${t} class="c-modal-heading">
|
|
357
356
|
${e}
|
|
358
357
|
</${t}>
|
|
@@ -376,10 +375,10 @@ let n = class extends I(x) {
|
|
|
376
375
|
"c-modal--pinnedFooter": t,
|
|
377
376
|
"c-modal--fullWidthBelowMid": i
|
|
378
377
|
};
|
|
379
|
-
return
|
|
378
|
+
return s`
|
|
380
379
|
<dialog
|
|
381
380
|
id="dialog"
|
|
382
|
-
class="${
|
|
381
|
+
class="${z(E)}"
|
|
383
382
|
aria-busy="${a ? "true" : "false"}"
|
|
384
383
|
aria-label="${b($)}"
|
|
385
384
|
data-test-id="pie-modal">
|
|
@@ -389,24 +388,24 @@ let n = class extends I(x) {
|
|
|
389
388
|
${this.renderCloseButton()}
|
|
390
389
|
</header>
|
|
391
390
|
${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
|
|
392
|
-
t ? this.renderModalContentAndFooter() :
|
|
391
|
+
t ? this.renderModalContentAndFooter() : s`
|
|
393
392
|
<div class="c-modal-scrollContainer">
|
|
394
393
|
${this.renderModalContentAndFooter()}
|
|
395
394
|
</div>`}
|
|
396
395
|
</dialog>`;
|
|
397
396
|
}
|
|
398
397
|
};
|
|
399
|
-
n.styles = P(
|
|
398
|
+
n.styles = P(U);
|
|
400
399
|
l([
|
|
401
400
|
d({ type: Object })
|
|
402
401
|
], n.prototype, "aria", 2);
|
|
403
402
|
l([
|
|
404
403
|
d({ type: String }),
|
|
405
|
-
|
|
404
|
+
I(w)
|
|
406
405
|
], n.prototype, "heading", 2);
|
|
407
406
|
l([
|
|
408
407
|
d({ type: String }),
|
|
409
|
-
C(w,
|
|
408
|
+
C(w, X, r.headingLevel)
|
|
410
409
|
], n.prototype, "headingLevel", 2);
|
|
411
410
|
l([
|
|
412
411
|
d({ type: Boolean })
|
|
@@ -434,14 +433,14 @@ l([
|
|
|
434
433
|
], n.prototype, "leadingAction", 2);
|
|
435
434
|
l([
|
|
436
435
|
d({ type: String }),
|
|
437
|
-
C(w,
|
|
436
|
+
C(w, J, r.position)
|
|
438
437
|
], n.prototype, "position", 2);
|
|
439
438
|
l([
|
|
440
439
|
d({ type: String })
|
|
441
440
|
], n.prototype, "returnFocusAfterCloseSelector", 2);
|
|
442
441
|
l([
|
|
443
442
|
d({ type: String }),
|
|
444
|
-
C(w,
|
|
443
|
+
C(w, G, r.size)
|
|
445
444
|
], n.prototype, "size", 2);
|
|
446
445
|
l([
|
|
447
446
|
d({ type: Object })
|
|
@@ -450,17 +449,17 @@ l([
|
|
|
450
449
|
K("dialog")
|
|
451
450
|
], n.prototype, "_dialog", 2);
|
|
452
451
|
n = l([
|
|
453
|
-
|
|
452
|
+
N("pie-modal")
|
|
454
453
|
], n);
|
|
455
454
|
export {
|
|
456
455
|
L as ON_MODAL_BACK_EVENT,
|
|
457
456
|
S as ON_MODAL_CLOSE_EVENT,
|
|
458
|
-
|
|
457
|
+
Q as ON_MODAL_LEADING_ACTION_CLICK,
|
|
459
458
|
_ as ON_MODAL_OPEN_EVENT,
|
|
460
|
-
|
|
459
|
+
Z as ON_MODAL_SUPPORTING_ACTION_CLICK,
|
|
461
460
|
n as PieModal,
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
461
|
+
r as defaultProps,
|
|
462
|
+
X as headingLevels,
|
|
463
|
+
J as positions,
|
|
464
|
+
G as sizes
|
|
466
465
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import { CSSResult } from 'lit';
|
|
3
|
-
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
4
|
import { PropertyValues } from 'lit';
|
|
6
5
|
import * as React_2 from 'react';
|
|
7
|
-
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
8
6
|
import { TemplateResult } from 'lit';
|
|
9
7
|
import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
|
|
10
8
|
|
|
@@ -152,7 +150,7 @@ export declare const PieModal: React_2.ForwardRefExoticComponent<React_2.PropsWi
|
|
|
152
150
|
* @slot footer - The footer slot
|
|
153
151
|
* @slot - Default slot
|
|
154
152
|
*/
|
|
155
|
-
declare class PieModal_2 extends
|
|
153
|
+
declare class PieModal_2 extends PieElement implements ModalProps {
|
|
156
154
|
aria: ModalProps['aria'];
|
|
157
155
|
heading: string;
|
|
158
156
|
headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
@@ -284,8 +282,6 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
|
|
|
284
282
|
private _handleDialogLightDismiss;
|
|
285
283
|
}
|
|
286
284
|
|
|
287
|
-
declare const PieModal_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
288
|
-
|
|
289
285
|
declare type PieModalEvents = {
|
|
290
286
|
onPieModalOpen?: (event: CustomEvent) => void;
|
|
291
287
|
onPieModalClose?: (event: CustomEvent) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.11.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -40,11 +40,11 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeat/pie-design-tokens": "7.2.0",
|
|
43
|
-
"@justeattakeaway/pie-button": "1.6.
|
|
43
|
+
"@justeattakeaway/pie-button": "1.6.7",
|
|
44
44
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
45
45
|
"@justeattakeaway/pie-css": "0.19.0",
|
|
46
|
-
"@justeattakeaway/pie-monorepo-utils": "0.
|
|
47
|
-
"@justeattakeaway/pie-text-input": "0.28.
|
|
46
|
+
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
47
|
+
"@justeattakeaway/pie-text-input": "0.28.12",
|
|
48
48
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
49
49
|
"@types/body-scroll-lock": "3.1.2",
|
|
50
50
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
@@ -53,11 +53,11 @@
|
|
|
53
53
|
"extends": "../../../package.json"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@justeattakeaway/pie-button": "1.6.
|
|
57
|
-
"@justeattakeaway/pie-icon-button": "2.0.
|
|
58
|
-
"@justeattakeaway/pie-icons-webc": "1.14.
|
|
59
|
-
"@justeattakeaway/pie-spinner": "1.2.
|
|
60
|
-
"@justeattakeaway/pie-webc-core": "1.
|
|
56
|
+
"@justeattakeaway/pie-button": "1.6.7",
|
|
57
|
+
"@justeattakeaway/pie-icon-button": "2.0.6",
|
|
58
|
+
"@justeattakeaway/pie-icons-webc": "1.14.2",
|
|
59
|
+
"@justeattakeaway/pie-spinner": "1.2.5",
|
|
60
|
+
"@justeattakeaway/pie-webc-core": "1.1.0",
|
|
61
61
|
"body-scroll-lock": "3.1.5",
|
|
62
62
|
"dialog-polyfill": "0.5.6"
|
|
63
63
|
},
|
package/src/index.ts
CHANGED
|
@@ -12,14 +12,12 @@ import '@justeattakeaway/pie-button';
|
|
|
12
12
|
import '@justeattakeaway/pie-icon-button';
|
|
13
13
|
import {
|
|
14
14
|
requiredProperty,
|
|
15
|
-
RtlMixin,
|
|
16
15
|
validPropertyValues,
|
|
17
16
|
dispatchCustomEvent,
|
|
18
17
|
safeCustomElement,
|
|
19
18
|
} from '@justeattakeaway/pie-webc-core';
|
|
20
19
|
import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
|
|
21
20
|
import '@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js';
|
|
22
|
-
import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
|
|
23
21
|
import '@justeattakeaway/pie-spinner';
|
|
24
22
|
|
|
25
23
|
import styles from './modal.scss?inline';
|
|
@@ -57,7 +55,7 @@ export interface ModalEventDetail {
|
|
|
57
55
|
* @slot - Default slot
|
|
58
56
|
*/
|
|
59
57
|
@safeCustomElement('pie-modal')
|
|
60
|
-
export class PieModal extends
|
|
58
|
+
export class PieModal extends PieElement implements ModalProps {
|
|
61
59
|
@property({ type: Object })
|
|
62
60
|
public aria: ModalProps['aria'];
|
|
63
61
|
|
|
@@ -380,7 +378,7 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
|
|
|
380
378
|
class="c-modal-backBtn"
|
|
381
379
|
aria-label="${ifDefined(this.aria?.back)}"
|
|
382
380
|
data-test-id="modal-back-button">
|
|
383
|
-
|
|
381
|
+
<icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-right>
|
|
384
382
|
</pie-icon-button>
|
|
385
383
|
`;
|
|
386
384
|
}
|