@justeattakeaway/pie-modal 1.5.1 → 1.6.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.
Files changed (7) hide show
  1. package/custom-elements.json +10 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +139 -136
  4. package/dist/react.d.ts +2 -0
  5. package/package.json +5 -5
  6. package/src/index.ts +11 -4
  7. package/src/modal.scss +8 -4
package/custom-elements.json CHANGED
@@ -173,6 +173,16 @@
173
173
  "kind": "class",
174
174
  "description": "",
175
175
  "name": "PieModal",
176
+ "slots": [
177
+ {
178
+ "description": "The footer slot",
179
+ "name": "footer"
180
+ },
181
+ {
182
+ "description": "Default slot",
183
+ "name": ""
184
+ }
185
+ ],
176
186
  "members": [
177
187
  {
178
188
  "kind": "field",
package/dist/index.d.ts CHANGED
@@ -150,6 +150,8 @@ export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-ac
150
150
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
151
151
  * @event {CustomEvent} pie-modal-leading-action-click - when the modal leading action is clicked.
152
152
  * @event {CustomEvent} pie-modal-supporting-action-click - when the modal supporting action is clicked.
153
+ * @slot footer - The footer slot
154
+ * @slot - Default slot
153
155
  */
154
156
  export declare class PieModal extends PieModal_base implements ModalProps {
155
157
  aria: ModalProps['aria'];
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { LitElement as P, unsafeCSS as T, nothing as p } from "lit";
2
- import { property as l, query as K } from "lit/decorators.js";
3
- import { html as c, unsafeStatic as I } from "lit/static-html.js";
2
+ import { property as d, query as K } from "lit/decorators.js";
3
+ import { html as s, unsafeStatic as I } from "lit/static-html.js";
4
4
  import { classMap as B } from "lit/directives/class-map.js";
5
5
  import { ifDefined as b } from "lit/directives/if-defined.js";
6
6
  import "@justeattakeaway/pie-button";
@@ -10,24 +10,24 @@ 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
- var j = Object.defineProperty, V = (n, e, t, o) => {
14
- for (var i = void 0, r = n.length - 1, m; r >= 0; r--)
15
- (m = n[r]) && (i = m(e, t, i) || i);
16
- return i && j(e, t, i), i;
13
+ var j = Object.defineProperty, V = (n, e, o, i) => {
14
+ for (var t = void 0, l = n.length - 1, m; l >= 0; l--)
15
+ (m = n[l]) && (t = m(e, o, t) || t);
16
+ return t && j(e, o, t), t;
17
17
  };
18
18
  class O extends P {
19
19
  constructor() {
20
- super(...arguments), this.v = "1.5.1";
20
+ super(...arguments), this.v = "1.6.0";
21
21
  }
22
22
  }
23
23
  V([
24
- l({ type: String, reflect: !0 })
24
+ d({ type: String, reflect: !0 })
25
25
  ], O.prototype, "v");
26
26
  function Y(n) {
27
27
  if (Array.isArray(n)) {
28
- for (var e = 0, t = Array(n.length); e < n.length; e++)
29
- t[e] = n[e];
30
- return t;
28
+ for (var e = 0, o = Array(n.length); e < n.length; e++)
29
+ o[e] = n[e];
30
+ return o;
31
31
  } else
32
32
  return Array.from(n);
33
33
  }
@@ -40,42 +40,42 @@ if (typeof window < "u") {
40
40
  };
41
41
  window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
42
42
  }
43
- var M = 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 = [], y = !1, D = -1, u = void 0, f = void 0, $ = function(e) {
44
- return g.some(function(t) {
45
- return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
43
+ var M = 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 = [], y = !1, $ = -1, u = void 0, f = void 0, D = function(e) {
44
+ return g.some(function(o) {
45
+ return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
46
46
  });
47
47
  }, k = function(e) {
48
- var t = e || window.event;
49
- return $(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
48
+ var o = e || window.event;
49
+ return D(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
50
50
  }, H = function(e) {
51
51
  if (f === void 0) {
52
- var t = !1, o = window.innerWidth - document.documentElement.clientWidth;
53
- t && o > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
52
+ var o = !1, i = window.innerWidth - document.documentElement.clientWidth;
53
+ o && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
54
54
  }
55
55
  u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
56
56
  }, q = function() {
57
57
  f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
58
58
  }, U = function(e) {
59
59
  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
60
- }, X = function(e, t) {
61
- var o = e.targetTouches[0].clientY - D;
62
- return $(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || U(t) && o < 0 ? k(e) : (e.stopPropagation(), !0);
63
- }, G = function(e, t) {
60
+ }, X = function(e, o) {
61
+ var i = e.targetTouches[0].clientY - $;
62
+ return D(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || U(o) && i < 0 ? k(e) : (e.stopPropagation(), !0);
63
+ }, G = function(e, o) {
64
64
  if (!e) {
65
65
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
66
66
  return;
67
67
  }
68
- if (!g.some(function(i) {
69
- return i.targetElement === e;
68
+ if (!g.some(function(t) {
69
+ return t.targetElement === e;
70
70
  })) {
71
- var o = {
71
+ var i = {
72
72
  targetElement: e,
73
73
  options: {}
74
74
  };
75
- g = [].concat(Y(g), [o]), M ? (e.ontouchstart = function(i) {
76
- i.targetTouches.length === 1 && (D = i.targetTouches[0].clientY);
77
- }, e.ontouchmove = function(i) {
78
- i.targetTouches.length === 1 && X(i, e);
75
+ g = [].concat(Y(g), [i]), M ? (e.ontouchstart = function(t) {
76
+ t.targetTouches.length === 1 && ($ = t.targetTouches[0].clientY);
77
+ }, e.ontouchmove = function(t) {
78
+ t.targetTouches.length === 1 && X(t, e);
79
79
  }, y || (document.addEventListener("touchmove", k, x ? { passive: !1 } : void 0), y = !0)) : H();
80
80
  }
81
81
  }, J = function(e) {
@@ -83,11 +83,11 @@ var M = typeof window < "u" && window.navigator && window.navigator.platform &&
83
83
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
84
84
  return;
85
85
  }
86
- g = g.filter(function(t) {
87
- return t.targetElement !== e;
86
+ g = g.filter(function(o) {
87
+ return o.targetElement !== e;
88
88
  }), M ? (e.ontouchstart = null, e.ontouchmove = null, y && g.length === 0 && (document.removeEventListener("touchmove", k, x ? { passive: !1 } : void 0), y = !1)) : g.length || q();
89
89
  };
90
- 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);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 .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"], te = ["top", "center"], A = "pie-modal-close", w = "pie-modal-open", L = "pie-modal-back", oe = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click", s = {
90
+ 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);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}}', Z = ["h1", "h2", "h3", "h4", "h5", "h6"], ee = ["small", "medium", "large"], oe = ["top", "center"], A = "pie-modal-close", w = "pie-modal-open", L = "pie-modal-back", te = "pie-modal-leading-action-click", ie = "pie-modal-supporting-action-click", c = {
91
91
  hasBackButton: !1,
92
92
  hasStackedActions: !1,
93
93
  headingLevel: "h2",
@@ -99,27 +99,27 @@ const Q = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
99
99
  position: "center",
100
100
  size: "medium"
101
101
  };
102
- var ne = Object.defineProperty, d = (n, e, t, o) => {
103
- for (var i = void 0, r = n.length - 1, m; r >= 0; r--)
104
- (m = n[r]) && (i = m(e, t, i) || i);
105
- return i && ne(e, t, i), i;
102
+ var ne = Object.defineProperty, r = (n, e, o, i) => {
103
+ for (var t = void 0, l = n.length - 1, m; l >= 0; l--)
104
+ (m = n[l]) && (t = m(e, o, t) || t);
105
+ return t && ne(e, o, t), t;
106
106
  };
107
107
  const v = "pie-modal", C = class C extends N(O) {
108
108
  constructor() {
109
- 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._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
109
+ super(...arguments), this.headingLevel = c.headingLevel, this.hasBackButton = c.hasBackButton, this.hasStackedActions = c.hasStackedActions, this.isDismissible = c.isDismissible, this.isFooterPinned = c.isFooterPinned, this.isFullWidthBelowMid = c.isFullWidthBelowMid, this.isLoading = c.isLoading, this.isOpen = c.isOpen, this.position = c.position, this.size = c.size, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
110
110
  e.key === "Escape" && e.preventDefault();
111
111
  }, this._handleDialogLightDismiss = (e) => {
112
112
  if (!this.isDismissible || e.target !== e.currentTarget)
113
113
  return;
114
- const t = this._dialog.getBoundingClientRect(), {
115
- top: o = 0,
116
- bottom: i = 0,
117
- left: r = 0,
114
+ const o = this._dialog.getBoundingClientRect(), {
115
+ top: i = 0,
116
+ bottom: t = 0,
117
+ left: l = 0,
118
118
  right: m = 0
119
- } = t || {};
120
- if (o === 0 && i === 0 && r === 0 && m === 0)
119
+ } = o || {};
120
+ if (i === 0 && t === 0 && l === 0 && m === 0)
121
121
  return;
122
- (e.clientY < o || e.clientY > i || e.clientX < r || e.clientX > m) && (this.isOpen = !1);
122
+ (e.clientY < i || e.clientY > t || e.clientX < l || e.clientX > m) && (this.isOpen = !1);
123
123
  };
124
124
  }
125
125
  get _modalScrollContainer() {
@@ -128,31 +128,31 @@ const v = "pie-modal", C = class C extends N(O) {
128
128
  connectedCallback() {
129
129
  super.connectedCallback(), this._abortController = new AbortController();
130
130
  const { signal: e } = this._abortController;
131
- this.addEventListener("click", (t) => this._handleDialogLightDismiss(t)), this._setupEscKeyListener(), document.addEventListener(w, (t) => this._handleModalOpened(t), { signal: e }), document.addEventListener(A, (t) => this._handleModalClosed(t), { signal: e }), document.addEventListener(L, (t) => this._handleModalClosed(t), { signal: e });
131
+ this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(w, (o) => this._handleModalOpened(o), { signal: e }), document.addEventListener(A, (o) => this._handleModalClosed(o), { signal: e }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: e });
132
132
  }
133
133
  disconnectedCallback() {
134
134
  super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
135
135
  }
136
136
  async firstUpdated(e) {
137
- (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
138
- const { signal: o } = this._abortController;
137
+ (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((t) => t.default)).registerDialog(this._dialog);
138
+ const { signal: i } = this._abortController;
139
139
  this._dialog.addEventListener("close", () => {
140
140
  this.isOpen = !1;
141
- }, { signal: o }), this._handleModalOpenStateOnFirstRender(e);
141
+ }, { signal: i }), this._handleModalOpenStateOnFirstRender(e);
142
142
  }
143
143
  updated(e) {
144
144
  this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
145
145
  }
146
146
  _handleIsDismissibleChanged(e) {
147
- const t = e.get("isDismissible"), o = this.isDismissible;
148
- !t && o && this._removeEscKeyEventListener(), t && !o && this._setupEscKeyListener();
147
+ const o = e.get("isDismissible"), i = this.isDismissible;
148
+ !o && i && this._removeEscKeyEventListener(), o && !i && this._setupEscKeyListener();
149
149
  }
150
150
  /**
151
151
  * Opens the dialog element and disables page scrolling
152
152
  */
153
153
  _handleModalOpened(e) {
154
- const { targetModal: t } = e.detail;
155
- if (t === this) {
154
+ const { targetModal: o } = e.detail;
155
+ if (o === this) {
156
156
  if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
157
157
  return;
158
158
  this._dialog.showModal(), requestAnimationFrame(() => {
@@ -164,8 +164,8 @@ const v = "pie-modal", C = class C extends N(O) {
164
164
  * Closes the dialog element and re-enables page scrolling
165
165
  */
166
166
  _handleModalClosed(e) {
167
- const { targetModal: t } = e.detail;
168
- t === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
167
+ const { targetModal: o } = e.detail;
168
+ o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
169
169
  }
170
170
  /**
171
171
  * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
@@ -174,7 +174,7 @@ const v = "pie-modal", C = class C extends N(O) {
174
174
  if (!this._escKeyAbortController && !this.isDismissible) {
175
175
  this._escKeyAbortController = new AbortController();
176
176
  const { signal: e } = this._escKeyAbortController;
177
- document.addEventListener("keydown", (t) => this._preventModalKeyboardDismissal(t), { signal: e });
177
+ document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: e });
178
178
  }
179
179
  }
180
180
  /**
@@ -190,20 +190,20 @@ const v = "pie-modal", C = class C extends N(O) {
190
190
  }
191
191
  // Handles changes to the modal isOpen property by dispatching any appropriate events
192
192
  _handleModalOpenStateChanged(e) {
193
- const t = e.get("isOpen");
194
- t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, w, { targetModal: this }));
193
+ const o = e.get("isOpen");
194
+ o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, w, { targetModal: this }));
195
195
  }
196
196
  _handleActionClick(e) {
197
- e === "leading" ? (this._dialog.close("leading"), h(this, oe, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, ie, { targetModal: this }));
197
+ e === "leading" ? (this._dialog.close("leading"), h(this, te, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, ie, { targetModal: this }));
198
198
  }
199
199
  /**
200
200
  * Return focus to the specified element, providing the selector is valid
201
201
  * and the chosen element can be found.
202
202
  */
203
203
  _returnFocus() {
204
- var t, o;
205
- const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
206
- e && ((o = document.querySelector(e)) == null || o.focus());
204
+ var o, i;
205
+ const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
206
+ e && ((i = document.querySelector(e)) == null || i.focus());
207
207
  }
208
208
  /**
209
209
  * Enables body scroll by unlocking the scroll container.
@@ -225,7 +225,7 @@ const v = "pie-modal", C = class C extends N(O) {
225
225
  */
226
226
  renderCloseButton() {
227
227
  var e;
228
- return this.isDismissible ? c`
228
+ return this.isDismissible ? s`
229
229
  <pie-icon-button
230
230
  @click="${() => {
231
231
  this.isOpen = !1;
@@ -245,7 +245,7 @@ const v = "pie-modal", C = class C extends N(O) {
245
245
  */
246
246
  renderBackButton() {
247
247
  var e;
248
- return this.hasBackButton ? c`
248
+ return this.hasBackButton ? s`
249
249
  <pie-icon-button
250
250
  @click="${() => {
251
251
  this._backButtonClicked = !0, this.isOpen = !1;
@@ -254,7 +254,7 @@ const v = "pie-modal", C = class C extends N(O) {
254
254
  class="c-modal-backBtn"
255
255
  aria-label="${b((e = this.aria) == null ? void 0 : e.back)}"
256
256
  data-test-id="modal-back-button">
257
- ${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
257
+ ${this.isRTL ? s`<icon-chevron-right></icon-chevron-right>` : s`<icon-chevron-left></icon-chevron-left>`}
258
258
  </pie-icon-button>
259
259
  ` : p;
260
260
  }
@@ -268,16 +268,16 @@ const v = "pie-modal", C = class C extends N(O) {
268
268
  * @private
269
269
  */
270
270
  renderLeadingAction() {
271
- const { ariaLabel: e, text: t, variant: o = "primary" } = this.leadingAction || {};
272
- return t ? c`
271
+ const { ariaLabel: e, text: o, variant: i = "primary" } = this.leadingAction || {};
272
+ return o ? s`
273
273
  <pie-button
274
- variant="${o}"
274
+ variant="${i}"
275
275
  aria-label="${b(e)}"
276
276
  type="submit"
277
277
  ?isFullWidth="${this.hasStackedActions}"
278
278
  @click="${() => this._handleActionClick("leading")}"
279
279
  data-test-id="modal-leading-action">
280
- ${t}
280
+ ${o}
281
281
  </pie-button>
282
282
  ` : p;
283
283
  }
@@ -292,17 +292,17 @@ const v = "pie-modal", C = class C extends N(O) {
292
292
  * @private
293
293
  */
294
294
  renderSupportingAction() {
295
- var i;
296
- const { ariaLabel: e, text: t, variant: o = "ghost" } = this.supportingAction || {};
297
- return !t || !((i = this.leadingAction) != null && i.text) ? p : c`
295
+ var t;
296
+ const { ariaLabel: e, text: o, variant: i = "ghost" } = this.supportingAction || {};
297
+ return !o || !((t = this.leadingAction) != null && t.text) ? p : s`
298
298
  <pie-button
299
- variant="${o}"
299
+ variant="${i}"
300
300
  aria-label="${b(e)}"
301
301
  type="reset"
302
302
  ?isFullWidth="${this.hasStackedActions}"
303
303
  @click="${() => this._handleActionClick("supporting")}"
304
304
  data-test-id="modal-supporting-action">
305
- ${t}
305
+ ${o}
306
306
  </pie-button>
307
307
  `;
308
308
  }
@@ -313,32 +313,35 @@ const v = "pie-modal", C = class C extends N(O) {
313
313
  * @private
314
314
  */
315
315
  renderModalFooter() {
316
- var t, o;
317
- if (!((t = this.leadingAction) != null && t.text))
318
- return (o = this.supportingAction) != null && o.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead."), p;
319
- const e = {
316
+ var t, l;
317
+ const e = (t = this.leadingAction) == null ? void 0 : t.text;
318
+ e || (l = this.supportingAction) != null && l.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.");
319
+ const o = {
320
320
  "c-modal-footer": !0,
321
321
  "c-modal-footer--stackedActions": this.hasStackedActions
322
- };
323
- return c`
324
- <footer class="${B(e)}" data-test-id="pie-modal-footer">
322
+ }, i = e ? s`
323
+ <footer class="${B(o)}" data-test-id="pie-modal-footer">
325
324
  ${this.renderLeadingAction()}
326
325
  ${this.renderSupportingAction()}
327
- </footer>`;
326
+ </footer>` : p;
327
+ return s`
328
+ <slot name="footer">
329
+ ${i}
330
+ </slot>`;
328
331
  }
329
332
  /**
330
333
  * Renders the loading spinner if `isLoading` is true.
331
334
  * @private
332
335
  */
333
336
  renderLoadingSpinner() {
334
- return this.isLoading ? c`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : p;
337
+ return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : p;
335
338
  }
336
339
  /**
337
340
  * Renders the modal inner content and footer of the modal.
338
341
  * @private
339
342
  */
340
343
  renderModalContentAndFooter() {
341
- return c`
344
+ return s`
342
345
  <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
343
346
  <div class="c-modal-contentInner" data-test-id="modal-content-inner">
344
347
  <slot></slot>
@@ -352,36 +355,36 @@ const v = "pie-modal", C = class C extends N(O) {
352
355
  * @private
353
356
  */
354
357
  renderHeading() {
355
- const { heading: e, headingLevel: t } = this, o = I(t);
356
- return c`
357
- <${o} class="c-modal-heading">
358
+ const { heading: e, headingLevel: o } = this, i = I(o);
359
+ return s`
360
+ <${i} class="c-modal-heading">
358
361
  ${e}
359
- </${o}>
362
+ </${i}>
360
363
  `;
361
364
  }
362
365
  render() {
363
366
  const {
364
367
  aria: e,
365
- isDismissible: t,
366
- isFooterPinned: o,
367
- isFullWidthBelowMid: i,
368
- isLoading: r,
368
+ isDismissible: o,
369
+ isFooterPinned: i,
370
+ isFullWidthBelowMid: t,
371
+ isLoading: l,
369
372
  position: m,
370
373
  size: z
371
- } = this, E = r && (e == null ? void 0 : e.loading) || void 0, F = {
374
+ } = this, E = l && (e == null ? void 0 : e.loading) || void 0, F = {
372
375
  "c-modal": !0,
373
376
  [`c-modal--${z}`]: !0,
374
377
  "c-modal--top": m === "top",
375
- "c-modal--dismissible": t,
376
- "c-modal--loading": r,
377
- "c-modal--pinnedFooter": o,
378
- "c-modal--fullWidthBelowMid": i
378
+ "c-modal--dismissible": o,
379
+ "c-modal--loading": l,
380
+ "c-modal--pinnedFooter": i,
381
+ "c-modal--fullWidthBelowMid": t
379
382
  };
380
- return c`
383
+ return s`
381
384
  <dialog
382
385
  id="dialog"
383
386
  class="${B(F)}"
384
- aria-busy="${r ? "true" : "false"}"
387
+ aria-busy="${l ? "true" : "false"}"
385
388
  aria-label="${b(E)}"
386
389
  data-test-id="pie-modal">
387
390
  <header class="c-modal-header" data-test-id="modal-header">
@@ -390,7 +393,7 @@ const v = "pie-modal", C = class C extends N(O) {
390
393
  ${this.renderCloseButton()}
391
394
  </header>
392
395
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
393
- o ? this.renderModalContentAndFooter() : c`
396
+ i ? this.renderModalContentAndFooter() : s`
394
397
  <div class="c-modal-scrollContainer">
395
398
  ${this.renderModalContentAndFooter()}
396
399
  </div>`}
@@ -399,68 +402,68 @@ const v = "pie-modal", C = class C extends N(O) {
399
402
  };
400
403
  C.styles = T(Q);
401
404
  let a = C;
402
- d([
403
- l({ type: Object })
405
+ r([
406
+ d({ type: Object })
404
407
  ], a.prototype, "aria");
405
- d([
406
- l({ type: String }),
408
+ r([
409
+ d({ type: String }),
407
410
  W(v)
408
411
  ], a.prototype, "heading");
409
- d([
410
- l({ type: String }),
411
- _(v, Z, s.headingLevel)
412
+ r([
413
+ d({ type: String }),
414
+ _(v, Z, c.headingLevel)
412
415
  ], a.prototype, "headingLevel");
413
- d([
414
- l({ type: Boolean })
416
+ r([
417
+ d({ type: Boolean })
415
418
  ], a.prototype, "hasBackButton");
416
- d([
417
- l({ type: Boolean })
419
+ r([
420
+ d({ type: Boolean })
418
421
  ], a.prototype, "hasStackedActions");
419
- d([
420
- l({ type: Boolean, reflect: !0 })
422
+ r([
423
+ d({ type: Boolean, reflect: !0 })
421
424
  ], a.prototype, "isDismissible");
422
- d([
423
- l({ type: Boolean })
425
+ r([
426
+ d({ type: Boolean })
424
427
  ], a.prototype, "isFooterPinned");
425
- d([
426
- l({ type: Boolean })
428
+ r([
429
+ d({ type: Boolean })
427
430
  ], a.prototype, "isFullWidthBelowMid");
428
- d([
429
- l({ type: Boolean, reflect: !0 })
431
+ r([
432
+ d({ type: Boolean, reflect: !0 })
430
433
  ], a.prototype, "isLoading");
431
- d([
432
- l({ type: Boolean })
434
+ r([
435
+ d({ type: Boolean })
433
436
  ], a.prototype, "isOpen");
434
- d([
435
- l({ type: Object })
437
+ r([
438
+ d({ type: Object })
436
439
  ], a.prototype, "leadingAction");
437
- d([
438
- l({ type: String }),
439
- _(v, te, s.position)
440
+ r([
441
+ d({ type: String }),
442
+ _(v, oe, c.position)
440
443
  ], a.prototype, "position");
441
- d([
442
- l({ type: String })
444
+ r([
445
+ d({ type: String })
443
446
  ], a.prototype, "returnFocusAfterCloseSelector");
444
- d([
445
- l({ type: String }),
446
- _(v, ee, s.size)
447
+ r([
448
+ d({ type: String }),
449
+ _(v, ee, c.size)
447
450
  ], a.prototype, "size");
448
- d([
449
- l({ type: Object })
451
+ r([
452
+ d({ type: Object })
450
453
  ], a.prototype, "supportingAction");
451
- d([
454
+ r([
452
455
  K("dialog")
453
456
  ], a.prototype, "_dialog");
454
457
  R(v, a);
455
458
  export {
456
459
  L as ON_MODAL_BACK_EVENT,
457
460
  A as ON_MODAL_CLOSE_EVENT,
458
- oe as ON_MODAL_LEADING_ACTION_CLICK,
461
+ te as ON_MODAL_LEADING_ACTION_CLICK,
459
462
  w as ON_MODAL_OPEN_EVENT,
460
463
  ie as ON_MODAL_SUPPORTING_ACTION_CLICK,
461
464
  a as PieModal,
462
- s as defaultProps,
465
+ c as defaultProps,
463
466
  Z as headingLevels,
464
- te as positions,
467
+ oe as positions,
465
468
  ee as sizes
466
469
  };
package/dist/react.d.ts CHANGED
@@ -149,6 +149,8 @@ export declare const PieModal: React_2.ForwardRefExoticComponent<ModalProps & Re
149
149
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
150
150
  * @event {CustomEvent} pie-modal-leading-action-click - when the modal leading action is clicked.
151
151
  * @event {CustomEvent} pie-modal-supporting-action-click - when the modal supporting action is clicked.
152
+ * @slot footer - The footer slot
153
+ * @slot - Default slot
152
154
  */
153
155
  declare class PieModal_2 extends PieModal_base implements ModalProps {
154
156
  aria: ModalProps['aria'];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "1.5.1",
3
+ "version": "1.6.0",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -41,10 +41,10 @@
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
42
  "@justeat/pie-design-tokens": "6.10.0",
43
43
  "@justeattakeaway/pie-button": "1.5.1",
44
- "@justeattakeaway/pie-components-config": "0.19.1",
44
+ "@justeattakeaway/pie-components-config": "0.20.0",
45
45
  "@justeattakeaway/pie-css": "0.16.0",
46
46
  "@justeattakeaway/pie-monorepo-utils": "0.5.0",
47
- "@justeattakeaway/pie-text-input": "0.27.1",
47
+ "@justeattakeaway/pie-text-input": "0.27.2",
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"
@@ -54,8 +54,8 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "@justeattakeaway/pie-button": "1.5.1",
57
- "@justeattakeaway/pie-icon-button": "1.4.1",
58
- "@justeattakeaway/pie-icons-webc": "1.6.2",
57
+ "@justeattakeaway/pie-icon-button": "1.4.2",
58
+ "@justeattakeaway/pie-icons-webc": "1.7.0",
59
59
  "@justeattakeaway/pie-spinner": "1.1.1",
60
60
  "@justeattakeaway/pie-webc-core": "0.25.1",
61
61
  "body-scroll-lock": "3.1.5",
package/src/index.ts CHANGED
@@ -53,6 +53,8 @@ export interface ModalEventDetail {
53
53
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
54
54
  * @event {CustomEvent} pie-modal-leading-action-click - when the modal leading action is clicked.
55
55
  * @event {CustomEvent} pie-modal-supporting-action-click - when the modal supporting action is clicked.
56
+ * @slot footer - The footer slot
57
+ * @slot - Default slot
56
58
  */
57
59
  export class PieModal extends RtlMixin(PieElement) implements ModalProps {
58
60
  @property({ type: Object })
@@ -439,11 +441,11 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
439
441
  * @private
440
442
  */
441
443
  private renderModalFooter (): TemplateResult | typeof nothing {
442
- if (!this.leadingAction?.text) {
444
+ const hasLeadingAction = this.leadingAction?.text;
445
+ if (!hasLeadingAction) {
443
446
  if (this.supportingAction?.text) {
444
447
  console.warn('You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.');
445
448
  }
446
- return nothing;
447
449
  }
448
450
 
449
451
  const footerClasses = {
@@ -451,11 +453,16 @@ export class PieModal extends RtlMixin(PieElement) implements ModalProps {
451
453
  'c-modal-footer--stackedActions': this.hasStackedActions,
452
454
  };
453
455
 
454
- return html`
456
+ const footerContent = hasLeadingAction ? html`
455
457
  <footer class="${classMap(footerClasses)}" data-test-id="pie-modal-footer">
456
458
  ${this.renderLeadingAction()}
457
459
  ${this.renderSupportingAction()}
458
- </footer>`;
460
+ </footer>` : nothing;
461
+
462
+ return html`
463
+ <slot name="footer">
464
+ ${footerContent}
465
+ </slot>`;
459
466
  }
460
467
 
461
468
  /**
package/src/modal.scss CHANGED
@@ -155,6 +155,11 @@
155
155
  }
156
156
  }
157
157
 
158
+ ::slotted([slot="footer"]) {
159
+ display: flex;
160
+ width: 100%;
161
+ }
162
+
158
163
  & .c-modal-header {
159
164
  display: grid;
160
165
  grid-template-areas: 'back heading close';
@@ -261,10 +266,9 @@
261
266
  padding-block-end: var(--modal-content-padding-block-end); // We require a larger bottom padding when there's no footer
262
267
  flex-grow: 1;
263
268
 
264
- // If the footer is rendered, the modal content is not the last child
265
- &:not(:last-child) {
266
- padding-block-end: var(--modal-content-padding-block);
267
- min-block-size: var(--modal-content-min-block-size);
269
+ &:has(+ slot > footer) {
270
+ padding-block-end: var(--modal-content-padding-block);
271
+ min-block-size: var(--modal-content-min-block-size);
268
272
  }
269
273
 
270
274
  &--scrollable {