@justeattakeaway/pie-modal 0.33.1 → 0.34.1

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.
Files changed (4) hide show
  1. package/dist/index.js +173 -218
  2. package/dist/react.js +12 -11
  3. package/package.json +7 -7
  4. package/src/index.ts +1 -1
package/dist/index.js CHANGED
@@ -1,50 +1,51 @@
1
- import { isServer as D, unsafeCSS as T, nothing as c, LitElement as F } from "lit";
2
- import { html as m, unsafeStatic as I } from "lit/static-html.js";
3
- import { property as r, query as N } from "lit/decorators.js";
1
+ import { LitElement as P, nothing as r, unsafeCSS as T } from "lit";
2
+ import { html as c, unsafeStatic as F } from "lit/static-html.js";
3
+ import { property as d, query as N } from "lit/decorators.js";
4
4
  import "@justeattakeaway/pie-button";
5
5
  import "@justeattakeaway/pie-icon-button";
6
+ import { RtlMixin as I, requiredProperty as R, validPropertyValues as z, defineCustomElement as j } from "@justeattakeaway/pie-webc-core";
6
7
  import "@justeattakeaway/pie-icons-webc/IconClose";
7
8
  import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
8
9
  import "@justeattakeaway/pie-icons-webc/IconChevronRight";
9
10
  import "@justeattakeaway/pie-spinner";
10
- function R(n) {
11
+ function W(n) {
11
12
  if (Array.isArray(n)) {
12
- for (var e = 0, i = Array(n.length); e < n.length; e++)
13
- i[e] = n[e];
14
- return i;
13
+ for (var e = 0, o = Array(n.length); e < n.length; e++)
14
+ o[e] = n[e];
15
+ return o;
15
16
  } else
16
17
  return Array.from(n);
17
18
  }
18
- var z = !1;
19
+ var C = !1;
19
20
  if (typeof window < "u") {
20
21
  var A = {
21
22
  get passive() {
22
- z = !0;
23
+ C = !0;
23
24
  }
24
25
  };
25
26
  window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
26
27
  }
27
- 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 = [], k = !1, $ = -1, h = void 0, u = void 0, L = function(e) {
28
- return p.some(function(i) {
29
- return !!(i.options.allowTouchMove && i.options.allowTouchMove(e));
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 = [], b = !1, S = -1, g = void 0, h = void 0, L = function(e) {
29
+ return p.some(function(o) {
30
+ return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
30
31
  });
31
- }, w = function(e) {
32
- var i = e || window.event;
33
- return L(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
34
- }, j = function(e) {
35
- if (u === void 0) {
36
- var i = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
37
- i && o > 0 && (u = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
32
+ }, k = function(e) {
33
+ var o = e || window.event;
34
+ return L(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
35
+ }, Y = function(e) {
36
+ if (h === void 0) {
37
+ var o = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
38
+ o && i > 0 && (h = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
38
39
  }
39
- h === void 0 && (h = document.body.style.overflow, document.body.style.overflow = "hidden");
40
- }, W = function() {
41
- u !== void 0 && (document.body.style.paddingRight = u, u = void 0), h !== void 0 && (document.body.style.overflow = h, h = void 0);
40
+ g === void 0 && (g = document.body.style.overflow, document.body.style.overflow = "hidden");
41
+ }, V = function() {
42
+ h !== void 0 && (document.body.style.paddingRight = h, h = void 0), g !== void 0 && (document.body.style.overflow = g, g = void 0);
42
43
  }, q = function(e) {
43
44
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
44
- }, Y = function(e, i) {
45
- var o = e.targetTouches[0].clientY - $;
46
- return L(e.target) ? !1 : i && i.scrollTop === 0 && o > 0 || q(i) && o < 0 ? w(e) : (e.stopPropagation(), !0);
47
- }, V = function(e, i) {
45
+ }, H = function(e, o) {
46
+ var i = e.targetTouches[0].clientY - S;
47
+ return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ? k(e) : (e.stopPropagation(), !0);
48
+ }, U = function(e, o) {
48
49
  if (!e) {
49
50
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
50
51
  return;
@@ -52,112 +53,66 @@ var B = typeof window < "u" && window.navigator && window.navigator.platform &&
52
53
  if (!p.some(function(t) {
53
54
  return t.targetElement === e;
54
55
  })) {
55
- var o = {
56
+ var i = {
56
57
  targetElement: e,
57
- options: i || {}
58
+ options: o || {}
58
59
  };
59
- p = [].concat(R(p), [o]), B ? (e.ontouchstart = function(t) {
60
- t.targetTouches.length === 1 && ($ = t.targetTouches[0].clientY);
60
+ p = [].concat(W(p), [i]), B ? (e.ontouchstart = function(t) {
61
+ t.targetTouches.length === 1 && (S = t.targetTouches[0].clientY);
61
62
  }, e.ontouchmove = function(t) {
62
- t.targetTouches.length === 1 && Y(t, e);
63
- }, k || (document.addEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !0)) : j(i);
63
+ t.targetTouches.length === 1 && H(t, e);
64
+ }, b || (document.addEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !0)) : Y(o);
64
65
  }
65
- }, H = function(e) {
66
+ }, K = function(e) {
66
67
  if (!e) {
67
68
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
68
69
  return;
69
70
  }
70
- p = p.filter(function(i) {
71
- return i.targetElement !== e;
72
- }), B ? (e.ontouchstart = null, e.ontouchmove = null, k && p.length === 0 && (document.removeEventListener("touchmove", w, z ? { passive: !1 } : void 0), k = !1)) : p.length || W();
71
+ p = p.filter(function(o) {
72
+ return o.targetElement !== e;
73
+ }), B ? (e.ontouchstart = null, e.ontouchmove = null, b && p.length === 0 && (document.removeEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !1)) : p.length || V();
73
74
  };
74
- const U = (n) => {
75
- class e extends n {
76
- /**
77
- * A getter to determine whether the text direction is right-to-left (RTL).
78
- * If the `dir` property is present on the component, it will be used to determine the text direction.
79
- * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
80
- * from the document's root element. This inference is not available during SSR.
81
- * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
82
- *
83
- * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
84
- */
85
- get isRTL() {
86
- return this.dir ? this.dir === "rtl" : !D && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
87
- }
88
- }
89
- return e;
90
- }, C = (n, e, i) => function(t, a) {
91
- const s = `#${a}`;
92
- Object.defineProperty(t, a, {
93
- get() {
94
- return this[s];
95
- },
96
- set(g) {
97
- e.includes(g) ? this[s] = g : (console.error(
98
- `<${n}> Invalid value "${g}" provided for property "${a}".`,
99
- `Must be one of: ${e.join(" | ")}.`,
100
- `Falling back to default value: "${i}"`
101
- ), this[s] = i);
102
- },
103
- configurable: !0
104
- });
105
- }, G = (n) => function(i, o) {
106
- const t = `#${o}`;
107
- Object.defineProperty(i, o, {
108
- get() {
109
- return this[t];
110
- },
111
- set(a) {
112
- (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[t] = a;
113
- },
114
- configurable: !0
115
- });
116
- };
117
- function X(n, e) {
118
- customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
119
- }
120
- const K = `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)}}@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=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--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;block-size:auto;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}}
121
- `, J = ["h1", "h2", "h3", "h4", "h5", "h6"], Q = ["small", "medium", "large"], Z = ["top", "center"], x = "pie-modal-close", b = "pie-modal-open", _ = "pie-modal-back", ee = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click";
122
- var oe = Object.defineProperty, te = Object.getOwnPropertyDescriptor, d = (n, e, i, o) => {
123
- for (var t = o > 1 ? void 0 : o ? te(e, i) : e, a = n.length - 1, s; a >= 0; a--)
124
- (s = n[a]) && (t = (o ? s(e, i, t) : s(t)) || t);
125
- return o && t && oe(e, i, t), t;
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)}}@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=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--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;block-size:auto;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
+ `, X = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], x = "pie-modal-close", v = "pie-modal-open", _ = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click";
77
+ var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (n, e, o, i) => {
78
+ for (var t = i > 1 ? void 0 : i ? ie(e, o) : e, s = n.length - 1, m; s >= 0; s--)
79
+ (m = n[s]) && (t = (i ? m(e, o, t) : m(t)) || t);
80
+ return i && t && oe(e, o, t), t;
126
81
  };
127
- const f = "pie-modal";
128
- class l extends U(F) {
82
+ const u = "pie-modal";
83
+ class a extends I(P) {
129
84
  constructor() {
130
85
  super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
131
86
  this.isDismissible || e.preventDefault();
132
87
  }, this._handleDialogLightDismiss = (e) => {
133
- var v;
88
+ var f;
134
89
  if (!this.isDismissible)
135
90
  return;
136
- const i = (v = this._dialog) == null ? void 0 : v.getBoundingClientRect(), {
137
- top: o = 0,
91
+ const o = (f = this._dialog) == null ? void 0 : f.getBoundingClientRect(), {
92
+ top: i = 0,
138
93
  bottom: t = 0,
139
- left: a = 0,
140
- right: s = 0
141
- } = i || {};
142
- if (o === 0 && t === 0 && a === 0 && s === 0)
94
+ left: s = 0,
95
+ right: m = 0
96
+ } = o || {};
97
+ if (i === 0 && t === 0 && s === 0 && m === 0)
143
98
  return;
144
- (e.clientY < o || e.clientY > t || e.clientX < a || e.clientX > s) && (this.isOpen = !1);
99
+ (e.clientY < i || e.clientY > t || e.clientX < s || e.clientX > m) && (this.isOpen = !1);
145
100
  }, this._dispatchModalCustomEvent = (e) => {
146
- const i = new CustomEvent(e, {
101
+ const o = new CustomEvent(e, {
147
102
  bubbles: !0,
148
103
  composed: !0
149
104
  });
150
- this.dispatchEvent(i);
105
+ this.dispatchEvent(o);
151
106
  };
152
107
  }
153
108
  connectedCallback() {
154
- super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(b, this._handleModalOpened.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
109
+ super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(v, this._handleModalOpened.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
155
110
  }
156
111
  disconnectedCallback() {
157
- document.removeEventListener(b, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
112
+ document.removeEventListener(v, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
158
113
  }
159
114
  async firstUpdated(e) {
160
- super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((o) => o.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._dialog.addEventListener("close", () => {
115
+ super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((i) => i.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._dialog.addEventListener("close", () => {
161
116
  this.isOpen = !1;
162
117
  })), this._handleModalOpenStateOnFirstRender(e);
163
118
  }
@@ -168,39 +123,39 @@ class l extends U(F) {
168
123
  * Opens the dialog element and disables page scrolling
169
124
  */
170
125
  _handleModalOpened() {
171
- var i, o, t, a;
172
- const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
173
- e && V(e), !((o = this._dialog) != null && o.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((a = this._dialog) == null || a.showModal());
126
+ var o, i, t, s;
127
+ const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
128
+ e && U(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((s = this._dialog) == null || s.showModal());
174
129
  }
175
130
  /**
176
131
  * Closes the dialog element and re-enables page scrolling
177
132
  */
178
133
  _handleModalClosed() {
179
- var i, o;
180
- const e = (i = this._dialog) == null ? void 0 : i.querySelector(".c-modal-scrollContainer");
181
- e && H(e), (o = this._dialog) == null || o.close(), this._returnFocus();
134
+ var o, i;
135
+ const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
136
+ e && K(e), (i = this._dialog) == null || i.close(), this._returnFocus();
182
137
  }
183
138
  // Handles the value of the isOpen property on first render of the component
184
139
  _handleModalOpenStateOnFirstRender(e) {
185
- e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(b);
140
+ e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(v);
186
141
  }
187
142
  // Handles changes to the modal isOpen property by dispatching any appropriate events
188
143
  _handleModalOpenStateChanged(e) {
189
- const i = e.get("isOpen");
190
- i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(b));
144
+ const o = e.get("isOpen");
145
+ o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(v));
191
146
  }
192
147
  _handleActionClick(e) {
193
- var i, o;
194
- e === "leading" ? ((i = this._dialog) == null || i.close("leading"), this._dispatchModalCustomEvent(ee)) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), this._dispatchModalCustomEvent(ie));
148
+ var o, i;
149
+ e === "leading" ? ((o = this._dialog) == null || o.close("leading"), this._dispatchModalCustomEvent(Z)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(ee));
195
150
  }
196
151
  /**
197
152
  * Return focus to the specified element, providing the selector is valid
198
153
  * and the chosen element can be found.
199
154
  */
200
155
  _returnFocus() {
201
- var i, o;
202
- const e = (i = this.returnFocusAfterCloseSelector) == null ? void 0 : i.trim();
203
- e && ((o = document.querySelector(e)) == null || o.focus());
156
+ var o, i;
157
+ const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
158
+ e && ((i = document.querySelector(e)) == null || i.focus());
204
159
  }
205
160
  /**
206
161
  * Template for the close button element. Called within the
@@ -210,14 +165,14 @@ class l extends U(F) {
210
165
  */
211
166
  renderCloseButton() {
212
167
  var e;
213
- return m`
168
+ return c`
214
169
  <pie-icon-button
215
170
  @click="${() => {
216
171
  this.isOpen = !1;
217
172
  }}"
218
173
  variant="ghost-secondary"
219
174
  class="c-modal-closeBtn"
220
- aria-label="${((e = this.aria) == null ? void 0 : e.close) || c}"
175
+ aria-label="${((e = this.aria) == null ? void 0 : e.close) || r}"
221
176
  data-test-id="modal-close-button">
222
177
  <icon-close></icon-close>
223
178
  </pie-icon-button>`;
@@ -230,16 +185,16 @@ class l extends U(F) {
230
185
  */
231
186
  renderBackButton() {
232
187
  var e;
233
- return m`
188
+ return c`
234
189
  <pie-icon-button
235
190
  @click="${() => {
236
191
  this._backButtonClicked = !0, this.isOpen = !1;
237
192
  }}"
238
193
  variant="ghost-secondary"
239
194
  class="c-modal-backBtn"
240
- aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
195
+ aria-label="${((e = this.aria) == null ? void 0 : e.back) || r}"
241
196
  data-test-id="modal-back-button">
242
- ${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
197
+ ${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
243
198
  </pie-icon-button>
244
199
  `;
245
200
  }
@@ -253,18 +208,18 @@ class l extends U(F) {
253
208
  * @private
254
209
  */
255
210
  renderLeadingAction() {
256
- const { text: e, variant: i = "primary", ariaLabel: o } = this.leadingAction;
257
- return e ? m`
211
+ const { text: e, variant: o = "primary", ariaLabel: i } = this.leadingAction;
212
+ return e ? c`
258
213
  <pie-button
259
- variant="${i}"
260
- aria-label="${o || c}"
214
+ variant="${o}"
215
+ aria-label="${i || r}"
261
216
  type="submit"
262
217
  ?isFullWidth="${this.hasStackedActions}"
263
218
  @click="${() => this._handleActionClick("leading")}"
264
219
  data-test-id="modal-leading-action">
265
220
  ${e}
266
221
  </pie-button>
267
- ` : c;
222
+ ` : r;
268
223
  }
269
224
  /**
270
225
  * Render supportingAction button depending on prop availability.
@@ -278,77 +233,77 @@ class l extends U(F) {
278
233
  * @private
279
234
  */
280
235
  renderSupportingAction() {
281
- const { text: e, variant: i = "ghost", ariaLabel: o } = this.supportingAction;
282
- return e ? this.leadingAction ? m`
236
+ const { text: e, variant: o = "ghost", ariaLabel: i } = this.supportingAction;
237
+ return e ? this.leadingAction ? c`
283
238
  <pie-button
284
- variant="${i}"
285
- aria-label="${o || c}"
239
+ variant="${o}"
240
+ aria-label="${i || r}"
286
241
  type="reset"
287
242
  ?isFullWidth="${this.hasStackedActions}"
288
243
  @click="${() => this._handleActionClick("supporting")}"
289
244
  data-test-id="modal-supporting-action">
290
245
  ${e}
291
246
  </pie-button>
292
- ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), c) : c;
247
+ ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), r) : r;
293
248
  }
294
249
  /**
295
250
  * Renders the modal inner content and footer of the modal.
296
251
  * @private
297
252
  */
298
253
  renderModalContentAndFooter() {
299
- return m`
254
+ return c`
300
255
  <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
301
256
  <div class="c-modal-contentInner">
302
257
  <slot></slot>
303
258
  </div>
304
- ${this.isLoading ? m`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : c}
259
+ ${this.isLoading ? c`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : r}
305
260
  </article>
306
261
  <footer class="c-modal-footer">
307
- ${this.leadingAction ? this.renderLeadingAction() : c}
308
- ${this.supportingAction ? this.renderSupportingAction() : c}
262
+ ${this.leadingAction ? this.renderLeadingAction() : r}
263
+ ${this.supportingAction ? this.renderSupportingAction() : r}
309
264
  </footer>`;
310
265
  }
311
266
  render() {
312
267
  const {
313
268
  aria: e,
314
- hasBackButton: i,
315
- hasStackedActions: o,
269
+ hasBackButton: o,
270
+ hasStackedActions: i,
316
271
  heading: t,
317
- headingLevel: a = "h2",
318
- isDismissible: s,
319
- isFooterPinned: g,
320
- isFullWidthBelowMid: v,
272
+ headingLevel: s = "h2",
273
+ isDismissible: m,
274
+ isFooterPinned: w,
275
+ isFullWidthBelowMid: f,
321
276
  isLoading: y,
322
- leadingAction: S,
323
- position: M,
277
+ leadingAction: M,
278
+ position: $,
324
279
  size: E,
325
- supportingAction: P
326
- } = this, O = I(a);
327
- return m`
280
+ supportingAction: D
281
+ } = this, O = F(s);
282
+ return c`
328
283
  <dialog
329
284
  id="dialog"
330
285
  class="c-modal"
331
286
  size="${E}"
332
- position="${M}"
333
- ?hasActions=${S || P}
334
- ?hasBackButton=${i}
335
- ?hasStackedActions=${o}
336
- ?isDismissible=${s}
337
- ?isFooterPinned=${g}
338
- ?isFullWidthBelowMid=${v}
287
+ position="${$}"
288
+ ?hasActions=${M || D}
289
+ ?hasBackButton=${o}
290
+ ?hasStackedActions=${i}
291
+ ?isDismissible=${m}
292
+ ?isFooterPinned=${w}
293
+ ?isFullWidthBelowMid=${f}
339
294
  ?isLoading=${y}
340
295
  aria-busy="${y ? "true" : "false"}"
341
- aria-label="${y && (e == null ? void 0 : e.loading) || c}"
296
+ aria-label="${y && (e == null ? void 0 : e.loading) || r}"
342
297
  data-test-id="pie-modal">
343
298
  <header class="c-modal-header">
344
- ${i ? this.renderBackButton() : c}
299
+ ${o ? this.renderBackButton() : r}
345
300
  <${O} class="c-modal-heading">
346
301
  ${t}
347
302
  </${O}>
348
- ${s ? this.renderCloseButton() : c}
303
+ ${m ? this.renderCloseButton() : r}
349
304
  </header>
350
305
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
351
- g ? this.renderModalContentAndFooter() : m`
306
+ w ? this.renderModalContentAndFooter() : c`
352
307
  <div class="c-modal-scrollContainer">
353
308
  ${this.renderModalContentAndFooter()}
354
309
  </div>
@@ -356,68 +311,68 @@ class l extends U(F) {
356
311
  </dialog>`;
357
312
  }
358
313
  }
359
- l.styles = T(K);
360
- d([
361
- r({ type: Object })
362
- ], l.prototype, "aria", 2);
363
- d([
364
- r({ type: String }),
365
- G(f)
366
- ], l.prototype, "heading", 2);
367
- d([
368
- r(),
369
- C(f, J, "h2")
370
- ], l.prototype, "headingLevel", 2);
371
- d([
372
- r({ type: Boolean })
373
- ], l.prototype, "hasBackButton", 2);
374
- d([
375
- r({ type: Boolean })
376
- ], l.prototype, "hasStackedActions", 2);
377
- d([
378
- r({ type: Boolean, reflect: !0 })
379
- ], l.prototype, "isDismissible", 2);
380
- d([
381
- r({ type: Boolean })
382
- ], l.prototype, "isFooterPinned", 2);
383
- d([
384
- r({ type: Boolean })
385
- ], l.prototype, "isFullWidthBelowMid", 2);
386
- d([
387
- r({ type: Boolean, reflect: !0 })
388
- ], l.prototype, "isLoading", 2);
389
- d([
390
- r({ type: Boolean })
391
- ], l.prototype, "isOpen", 2);
392
- d([
393
- r({ type: Object })
394
- ], l.prototype, "leadingAction", 2);
395
- d([
396
- r(),
397
- C(f, Z, "center")
398
- ], l.prototype, "position", 2);
399
- d([
400
- r()
401
- ], l.prototype, "returnFocusAfterCloseSelector", 2);
402
- d([
403
- r(),
404
- C(f, Q, "medium")
405
- ], l.prototype, "size", 2);
406
- d([
407
- r({ type: Object })
408
- ], l.prototype, "supportingAction", 2);
409
- d([
314
+ a.styles = T(G);
315
+ l([
316
+ d({ type: Object })
317
+ ], a.prototype, "aria", 2);
318
+ l([
319
+ d({ type: String }),
320
+ R(u)
321
+ ], a.prototype, "heading", 2);
322
+ l([
323
+ d(),
324
+ z(u, X, "h2")
325
+ ], a.prototype, "headingLevel", 2);
326
+ l([
327
+ d({ type: Boolean })
328
+ ], a.prototype, "hasBackButton", 2);
329
+ l([
330
+ d({ type: Boolean })
331
+ ], a.prototype, "hasStackedActions", 2);
332
+ l([
333
+ d({ type: Boolean, reflect: !0 })
334
+ ], a.prototype, "isDismissible", 2);
335
+ l([
336
+ d({ type: Boolean })
337
+ ], a.prototype, "isFooterPinned", 2);
338
+ l([
339
+ d({ type: Boolean })
340
+ ], a.prototype, "isFullWidthBelowMid", 2);
341
+ l([
342
+ d({ type: Boolean, reflect: !0 })
343
+ ], a.prototype, "isLoading", 2);
344
+ l([
345
+ d({ type: Boolean })
346
+ ], a.prototype, "isOpen", 2);
347
+ l([
348
+ d({ type: Object })
349
+ ], a.prototype, "leadingAction", 2);
350
+ l([
351
+ d(),
352
+ z(u, Q, "center")
353
+ ], a.prototype, "position", 2);
354
+ l([
355
+ d()
356
+ ], a.prototype, "returnFocusAfterCloseSelector", 2);
357
+ l([
358
+ d(),
359
+ z(u, J, "medium")
360
+ ], a.prototype, "size", 2);
361
+ l([
362
+ d({ type: Object })
363
+ ], a.prototype, "supportingAction", 2);
364
+ l([
410
365
  N("dialog")
411
- ], l.prototype, "_dialog", 2);
412
- X(f, l);
366
+ ], a.prototype, "_dialog", 2);
367
+ j(u, a);
413
368
  export {
414
369
  _ as ON_MODAL_BACK_EVENT,
415
370
  x as ON_MODAL_CLOSE_EVENT,
416
- ee as ON_MODAL_LEADING_ACTION_CLICK,
417
- b as ON_MODAL_OPEN_EVENT,
418
- ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
419
- l as PieModal,
420
- J as headingLevels,
421
- Z as positions,
422
- Q as sizes
371
+ Z as ON_MODAL_LEADING_ACTION_CLICK,
372
+ v as ON_MODAL_OPEN_EVENT,
373
+ ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
374
+ a as PieModal,
375
+ X as headingLevels,
376
+ Q as positions,
377
+ J as sizes
423
378
  };
package/dist/react.js CHANGED
@@ -1,17 +1,18 @@
1
1
  import * as o from "react";
2
2
  import { createComponent as i } from "@lit/react";
3
3
  import { PieModal as e } from "./index.js";
4
- import { ON_MODAL_BACK_EVENT as C, ON_MODAL_CLOSE_EVENT as P, ON_MODAL_LEADING_ACTION_CLICK as A, ON_MODAL_OPEN_EVENT as L, ON_MODAL_SUPPORTING_ACTION_CLICK as E, headingLevels as g, positions as k, sizes as D } from "./index.js";
4
+ import { ON_MODAL_BACK_EVENT as P, ON_MODAL_CLOSE_EVENT as A, ON_MODAL_LEADING_ACTION_CLICK as L, ON_MODAL_OPEN_EVENT as E, ON_MODAL_SUPPORTING_ACTION_CLICK as g, headingLevels as k, positions as D, sizes as I } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/static-html.js";
7
7
  import "lit/decorators.js";
8
8
  import "@justeattakeaway/pie-button";
9
9
  import "@justeattakeaway/pie-icon-button";
10
+ import "@justeattakeaway/pie-webc-core";
10
11
  import "@justeattakeaway/pie-icons-webc/IconClose";
11
12
  import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
12
13
  import "@justeattakeaway/pie-icons-webc/IconChevronRight";
13
14
  import "@justeattakeaway/pie-spinner";
14
- const s = i({
15
+ const N = i({
15
16
  displayName: "PieModal",
16
17
  elementClass: e,
17
18
  react: o,
@@ -30,13 +31,13 @@ const s = i({
30
31
  }
31
32
  });
32
33
  export {
33
- C as ON_MODAL_BACK_EVENT,
34
- P as ON_MODAL_CLOSE_EVENT,
35
- A as ON_MODAL_LEADING_ACTION_CLICK,
36
- L as ON_MODAL_OPEN_EVENT,
37
- E as ON_MODAL_SUPPORTING_ACTION_CLICK,
38
- s as PieModal,
39
- g as headingLevels,
40
- k as positions,
41
- D as sizes
34
+ P as ON_MODAL_BACK_EVENT,
35
+ A as ON_MODAL_CLOSE_EVENT,
36
+ L as ON_MODAL_LEADING_ACTION_CLICK,
37
+ E as ON_MODAL_OPEN_EVENT,
38
+ g as ON_MODAL_SUPPORTING_ACTION_CLICK,
39
+ N as PieModal,
40
+ k as headingLevels,
41
+ D as positions,
42
+ I as sizes
42
43
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "0.33.1",
3
+ "version": "0.34.1",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -29,18 +29,18 @@
29
29
  "license": "Apache-2.0",
30
30
  "devDependencies": {
31
31
  "@justeat/pie-design-tokens": "5.9.0",
32
- "@justeattakeaway/pie-components-config": "0.6.0",
32
+ "@justeattakeaway/pie-components-config": "0.6.1",
33
33
  "@types/body-scroll-lock": "3.1.2"
34
34
  },
35
35
  "volta": {
36
36
  "extends": "../../../package.json"
37
37
  },
38
38
  "dependencies": {
39
- "@justeattakeaway/pie-button": "0.39.1",
40
- "@justeattakeaway/pie-icon-button": "0.21.3",
41
- "@justeattakeaway/pie-icons-webc": "0.11.1",
42
- "@justeattakeaway/pie-spinner": "0.2.2",
43
- "@justeattakeaway/pie-webc-core": "0.12.0",
39
+ "@justeattakeaway/pie-button": "0.40.1",
40
+ "@justeattakeaway/pie-icon-button": "0.23.0",
41
+ "@justeattakeaway/pie-icons-webc": "0.12.0",
42
+ "@justeattakeaway/pie-spinner": "0.3.1",
43
+ "@justeattakeaway/pie-webc-core": "0.13.0",
44
44
  "body-scroll-lock": "3.1.5",
45
45
  "dialog-polyfill": "0.5.6"
46
46
  },
package/src/index.ts CHANGED
@@ -343,7 +343,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
343
343
  <div class="c-modal-contentInner">
344
344
  <slot></slot>
345
345
  </div>
346
- ${this.isLoading ? html`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : nothing}
346
+ ${this.isLoading ? html`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : nothing}
347
347
  </article>
348
348
  <footer class="c-modal-footer">
349
349
  ${this.leadingAction ? this.renderLeadingAction() : nothing}