@justeattakeaway/pie-modal 1.21.0 → 1.22.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/README.md +6 -0
  2. package/dist/index.js +97 -97
  3. package/package.json +8 -5
  4. package/src/index.ts +1 -2
package/README.md CHANGED
@@ -16,6 +16,7 @@
16
16
  - [Properties](#properties)
17
17
  - [Slots](#slots)
18
18
  - [CSS Variables](#css-variables)
19
+ - [CSS Parts](#css-parts)
19
20
  - [Events](#events)
20
21
  - [Legacy browser support](#legacy-browser-support)
21
22
  - [Usage Examples](#usage-examples)
@@ -83,6 +84,11 @@ The order of content rendering is as follows:
83
84
  ### CSS Variables
84
85
  This component does not expose any CSS variables for style overrides.
85
86
 
87
+ ### CSS Parts
88
+ | Part | Description |
89
+ |-----------|--------------------------------------------------------------|
90
+ | `heading` | This part allows consumers to fully rewrite the styles of the heading element. |
91
+
86
92
  ### Events
87
93
  | Event | Type | Description |
88
94
  |---------------------------------------|---------------|-----------------------------------------------------------|
package/dist/index.js CHANGED
@@ -14,15 +14,15 @@ const _ = class _ extends T {
14
14
  this.getAttribute("v") || this.setAttribute("v", _.v);
15
15
  }
16
16
  };
17
- _.v = "1.21.0";
17
+ _.v = "1.22.1";
18
18
  let x = _;
19
- function V(e) {
20
- if (Array.isArray(e)) {
21
- for (var o = 0, t = Array(e.length); o < e.length; o++)
22
- t[o] = e[o];
23
- return t;
19
+ function V(t) {
20
+ if (Array.isArray(t)) {
21
+ for (var o = 0, e = Array(t.length); o < t.length; o++)
22
+ e[o] = t[o];
23
+ return e;
24
24
  } else
25
- return Array.from(e);
25
+ return Array.from(t);
26
26
  }
27
27
  var B = !1;
28
28
  if (typeof window < "u") {
@@ -34,26 +34,26 @@ if (typeof window < "u") {
34
34
  window.addEventListener("testPassive", null, z), window.removeEventListener("testPassive", null, z);
35
35
  }
36
36
  var O = 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 = [], k = !1, $ = -1, f = void 0, v = void 0, D = function(o) {
37
- return g.some(function(t) {
38
- return !!(t.options.allowTouchMove && t.options.allowTouchMove(o));
37
+ return g.some(function(e) {
38
+ return !!(e.options.allowTouchMove && e.options.allowTouchMove(o));
39
39
  });
40
40
  }, w = function(o) {
41
- var t = o || window.event;
42
- return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
41
+ var e = o || window.event;
42
+ return D(e.target) || e.touches.length > 1 ? !0 : (e.preventDefault && e.preventDefault(), !1);
43
43
  }, j = function(o) {
44
44
  if (v === void 0) {
45
- var t = !1, a = window.innerWidth - document.documentElement.clientWidth;
46
- t && a > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = a + "px");
45
+ var e = !1, a = window.innerWidth - document.documentElement.clientWidth;
46
+ e && a > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = a + "px");
47
47
  }
48
48
  f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
49
49
  }, Y = function() {
50
50
  v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
51
51
  }, q = function(o) {
52
52
  return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
53
- }, U = function(o, t) {
53
+ }, U = function(o, e) {
54
54
  var a = o.targetTouches[0].clientY - $;
55
- return D(o.target) ? !1 : t && t.scrollTop === 0 && a > 0 || q(t) && a < 0 ? w(o) : (o.stopPropagation(), !0);
56
- }, X = function(o, t) {
55
+ return D(o.target) ? !1 : e && e.scrollTop === 0 && a > 0 || q(e) && a < 0 ? w(o) : (o.stopPropagation(), !0);
56
+ }, X = function(o, e) {
57
57
  if (!o) {
58
58
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
59
59
  return;
@@ -76,11 +76,11 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
76
76
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
77
77
  return;
78
78
  }
79
- g = g.filter(function(t) {
80
- return t.targetElement !== o;
79
+ g = g.filter(function(e) {
80
+ return e.targetElement !== o;
81
81
  }), O ? (o.ontouchstart = null, o.ontouchmove = null, k && g.length === 0 && (document.removeEventListener("touchmove", w, B ? { passive: !1 } : void 0), k = !1)) : g.length || Y();
82
82
  };
83
- const J = '*,*: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-content-color: var(--dt-color-content-default);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);--modal-image-slot-bg-color: none;position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--modal-content-color);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-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-imageSlot.c-modal-imageSlot--illustration{display:flex;justify-content:center;align-items:center;height:200px;background-color:var(--modal-image-slot-bg-color)}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration ::slotted([slot=image]){width:168px;height:168px;overflow:hidden}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{overflow:hidden;aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:4/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:21/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}.c-modal .c-modal-imageSlot .c-modal-closeBtn{position:absolute;inset-block-start:0;inset-inline-end:0;margin-block-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d)}.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 ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";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);--modal-header-font-style: normal;font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);font-style:var(--modal-header-font-style);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:16px}@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:22px}}.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-l-italic-weight);--modal-header-font-style: var(--dt-font-heading-l-italic-font-style);font-variation-settings:"slnt" -20}@media (min-width: 769px){.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-l-italic-line-height--wide) * 1px)}}.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-content{--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-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(--modal-bg-color) 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)}.c-modal.c-modal--bg-subtle{--modal-image-slot-bg-color: var(--dt-color-container-subtle)}.c-modal.c-modal--bg-brand-01{--modal-bg-color: var(--dt-color-support-brand-01)}.c-modal.c-modal--bg-brand-02{--modal-bg-color: var(--dt-color-support-brand-02)}.c-modal.c-modal--bg-brand-03{--modal-bg-color: var(--dt-color-support-brand-03)}.c-modal.c-modal--bg-brand-03-subtle{--modal-bg-color: var(--dt-color-support-brand-03-subtle)}.c-modal.c-modal--bg-brand-04{--modal-bg-color: var(--dt-color-support-brand-04)}.c-modal.c-modal--bg-brand-04-subtle{--modal-bg-color: var(--dt-color-support-brand-04-subtle)}.c-modal.c-modal--bg-brand-05{--modal-bg-color: var(--dt-color-support-brand-05)}.c-modal.c-modal--bg-brand-05-subtle{--modal-bg-color: var(--dt-color-support-brand-05-subtle)}.c-modal.c-modal--bg-brand-06{--modal-content-color: var(--dt-color-content-inverse);--modal-bg-color: var(--dt-color-support-brand-06)}.c-modal.c-modal--bg-brand-06-subtle{--modal-bg-color: var(--dt-color-support-brand-06-subtle)}.c-modal.c-modal--bg-brand-08{--modal-bg-color: var(--dt-color-support-brand-08)}.c-modal.c-modal--bg-brand-08-subtle{--modal-bg-color: var(--dt-color-support-brand-08-subtle)}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], eo = ["small", "medium", "large"], to = [
83
+ const J = '*,*: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-content-color: var(--dt-color-content-default);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);--modal-image-slot-bg-color: none;position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--modal-content-color);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-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-imageSlot.c-modal-imageSlot--illustration{display:flex;justify-content:center;align-items:center;height:200px;background-color:var(--modal-image-slot-bg-color)}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration ::slotted([slot=image]){width:168px;height:168px;overflow:hidden}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{overflow:hidden;aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:4/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:21/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}.c-modal .c-modal-imageSlot .c-modal-closeBtn{position:absolute;inset-block-start:0;inset-inline-end:0;margin-block-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d)}.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 ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";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);--modal-header-font-style: normal;font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);font-style:var(--modal-header-font-style);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:16px}@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:22px}}.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-l-italic-weight);--modal-header-font-style: var(--dt-font-heading-l-italic-font-style);font-variation-settings:"slnt" -20}@media (min-width: 769px){.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-l-italic-line-height--wide) * 1px)}}.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-content{--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-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(--modal-bg-color) 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)}.c-modal.c-modal--bg-subtle{--modal-image-slot-bg-color: var(--dt-color-container-subtle)}.c-modal.c-modal--bg-brand-01{--modal-bg-color: var(--dt-color-support-brand-01)}.c-modal.c-modal--bg-brand-02{--modal-bg-color: var(--dt-color-support-brand-02)}.c-modal.c-modal--bg-brand-03{--modal-bg-color: var(--dt-color-support-brand-03)}.c-modal.c-modal--bg-brand-03-subtle{--modal-bg-color: var(--dt-color-support-brand-03-subtle)}.c-modal.c-modal--bg-brand-04{--modal-bg-color: var(--dt-color-support-brand-04)}.c-modal.c-modal--bg-brand-04-subtle{--modal-bg-color: var(--dt-color-support-brand-04-subtle)}.c-modal.c-modal--bg-brand-05{--modal-bg-color: var(--dt-color-support-brand-05)}.c-modal.c-modal--bg-brand-05-subtle{--modal-bg-color: var(--dt-color-support-brand-05-subtle)}.c-modal.c-modal--bg-brand-06{--modal-content-color: var(--dt-color-content-inverse);--modal-bg-color: var(--dt-color-support-brand-06)}.c-modal.c-modal--bg-brand-06-subtle{--modal-bg-color: var(--dt-color-support-brand-06-subtle)}.c-modal.c-modal--bg-brand-08{--modal-bg-color: var(--dt-color-support-brand-08)}.c-modal.c-modal--bg-brand-08-subtle{--modal-bg-color: var(--dt-color-support-brand-08-subtle)}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], to = ["small", "medium", "large"], eo = [
84
84
  "default",
85
85
  "subtle",
86
86
  "brand-01",
@@ -110,61 +110,61 @@ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
110
110
  backgroundColor: "default",
111
111
  imageSlotAspectRatio: "medium"
112
112
  };
113
- var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (e, o, t, a) => {
114
- for (var i = a > 1 ? void 0 : a ? lo(o, t) : o, m = e.length - 1, p; m >= 0; m--)
115
- (p = e[m]) && (i = (a ? p(o, t, i) : p(i)) || i);
116
- return a && i && no(o, t, i), i;
113
+ var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (t, o, e, a) => {
114
+ for (var i = a > 1 ? void 0 : a ? lo(o, e) : o, m = t.length - 1, p; m >= 0; m--)
115
+ (p = t[m]) && (i = (a ? p(o, e, i) : p(i)) || i);
116
+ return a && i && no(o, e, i), i;
117
117
  };
118
118
  const b = "pie-modal";
119
119
  let n = class extends x {
120
120
  constructor() {
121
- super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isHeadingEmphasised = r.isHeadingEmphasised, 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.backgroundColor = r.backgroundColor, this.imageSlotAspectRatio = r.imageSlotAspectRatio, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
122
- e.key === "Escape" && e.preventDefault();
123
- }, this._handleDialogLightDismiss = (e) => {
124
- if (!this.isDismissible || e.target !== e.currentTarget)
121
+ super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isHeadingEmphasised = r.isHeadingEmphasised, 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.backgroundColor = r.backgroundColor, this.imageSlotAspectRatio = r.imageSlotAspectRatio, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (t) => {
122
+ t.key === "Escape" && t.preventDefault();
123
+ }, this._handleDialogLightDismiss = (t) => {
124
+ if (!this.isDismissible || t.target !== t.currentTarget)
125
125
  return;
126
126
  const o = this._dialog.getBoundingClientRect(), {
127
- top: t = 0,
127
+ top: e = 0,
128
128
  bottom: a = 0,
129
129
  left: i = 0,
130
130
  right: m = 0
131
131
  } = o || {};
132
- if (t === 0 && a === 0 && i === 0 && m === 0)
132
+ if (e === 0 && a === 0 && i === 0 && m === 0)
133
133
  return;
134
- (e.clientY < t || e.clientY > a || e.clientX < i || e.clientX > m) && (this.isOpen = !1);
134
+ (t.clientY < e || t.clientY > a || t.clientX < i || t.clientX > m) && (this.isOpen = !1);
135
135
  };
136
136
  }
137
137
  get _modalScrollContainer() {
138
- var e;
139
- return this._scrollableContainer || (this._scrollableContainer = (e = this._dialog) == null ? void 0 : e.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
138
+ var t;
139
+ return this._scrollableContainer || (this._scrollableContainer = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
140
140
  }
141
141
  connectedCallback() {
142
142
  super.connectedCallback(), this._abortController = new AbortController();
143
- const { signal: e } = this._abortController;
144
- this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(C, (o) => this._handleModalOpened(o), { signal: e }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: e }), document.addEventListener(M, (o) => this._handleModalClosed(o), { signal: e });
143
+ const { signal: t } = this._abortController;
144
+ this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(C, (o) => this._handleModalOpened(o), { signal: t }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: t }), document.addEventListener(M, (o) => this._handleModalClosed(o), { signal: t });
145
145
  }
146
146
  disconnectedCallback() {
147
147
  super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
148
148
  }
149
- async firstUpdated(e) {
149
+ async firstUpdated(t) {
150
150
  (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((a) => a.default)).registerDialog(this._dialog);
151
- const { signal: t } = this._abortController;
151
+ const { signal: e } = this._abortController;
152
152
  this._dialog.addEventListener("close", () => {
153
153
  this.isOpen = !1;
154
- }, { signal: t }), this._handleModalOpenStateOnFirstRender(e);
154
+ }, { signal: e }), this._handleModalOpenStateOnFirstRender(t);
155
155
  }
156
- updated(e) {
157
- this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
156
+ updated(t) {
157
+ this._handleModalOpenStateChanged(t), this._handleIsDismissibleChanged(t);
158
158
  }
159
- _handleIsDismissibleChanged(e) {
160
- const o = e.get("isDismissible"), t = this.isDismissible;
161
- !o && t && this._removeEscKeyEventListener(), o && !t && this._setupEscKeyListener();
159
+ _handleIsDismissibleChanged(t) {
160
+ const o = t.get("isDismissible"), e = this.isDismissible;
161
+ !o && e && this._removeEscKeyEventListener(), o && !e && this._setupEscKeyListener();
162
162
  }
163
163
  /**
164
164
  * Opens the dialog element and disables page scrolling
165
165
  */
166
- _handleModalOpened(e) {
167
- const { targetModal: o } = e.detail;
166
+ _handleModalOpened(t) {
167
+ const { targetModal: o } = t.detail;
168
168
  if (o === this) {
169
169
  if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
170
170
  return;
@@ -176,8 +176,8 @@ let n = class extends x {
176
176
  /**
177
177
  * Closes the dialog element and re-enables page scrolling
178
178
  */
179
- _handleModalClosed(e) {
180
- const { targetModal: o } = e.detail;
179
+ _handleModalClosed(t) {
180
+ const { targetModal: o } = t.detail;
181
181
  o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
182
182
  }
183
183
  /**
@@ -186,37 +186,37 @@ let n = class extends x {
186
186
  _setupEscKeyListener() {
187
187
  if (!this._escKeyAbortController && !this.isDismissible) {
188
188
  this._escKeyAbortController = new AbortController();
189
- const { signal: e } = this._escKeyAbortController;
190
- document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: e });
189
+ const { signal: t } = this._escKeyAbortController;
190
+ document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: t });
191
191
  }
192
192
  }
193
193
  /**
194
194
  * Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
195
195
  */
196
196
  _removeEscKeyEventListener() {
197
- var e;
198
- (e = this._escKeyAbortController) == null || e.abort(), this._escKeyAbortController = null;
197
+ var t;
198
+ (t = this._escKeyAbortController) == null || t.abort(), this._escKeyAbortController = null;
199
199
  }
200
200
  // Handles the value of the isOpen property on first render of the component
201
- _handleModalOpenStateOnFirstRender(e) {
202
- e.get("isOpen") === void 0 && this.isOpen && u(this, C, { targetModal: this });
201
+ _handleModalOpenStateOnFirstRender(t) {
202
+ t.get("isOpen") === void 0 && this.isOpen && u(this, C, { targetModal: this });
203
203
  }
204
204
  // Handles changes to the modal isOpen property by dispatching any appropriate events
205
- _handleModalOpenStateChanged(e) {
206
- const o = e.get("isOpen");
205
+ _handleModalOpenStateChanged(t) {
206
+ const o = t.get("isOpen");
207
207
  o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, M, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, C, { targetModal: this }));
208
208
  }
209
- _handleActionClick(e) {
210
- e === "leading" ? (this._dialog.close("leading"), u(this, ao, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), u(this, io, { targetModal: this }));
209
+ _handleActionClick(t) {
210
+ t === "leading" ? (this._dialog.close("leading"), u(this, ao, { targetModal: this })) : t === "supporting" && (this._dialog.close("supporting"), u(this, io, { targetModal: this }));
211
211
  }
212
212
  /**
213
213
  * Return focus to the specified element, providing the selector is valid
214
214
  * and the chosen element can be found.
215
215
  */
216
216
  _returnFocus() {
217
- var o, t;
218
- const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
219
- e && ((t = document.querySelector(e)) == null || t.focus());
217
+ var o, e;
218
+ const t = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
219
+ t && ((e = document.querySelector(t)) == null || e.focus());
220
220
  }
221
221
  /**
222
222
  * Enables body scroll by unlocking the scroll container.
@@ -231,8 +231,8 @@ let n = class extends x {
231
231
  this._modalScrollContainer && X(this._modalScrollContainer);
232
232
  }
233
233
  _getHeaderButtonVariant() {
234
- const { imageSlotMode: e, backgroundColor: o } = this, t = !!e, a = !!o && o !== "default", i = o === "brand-06";
235
- return t ? e === "illustration" && !a ? "ghost-secondary" : i ? "ghost-inverse" : "secondary" : i ? "ghost-inverse" : "ghost-secondary";
234
+ const { imageSlotMode: t, backgroundColor: o } = this, e = !!t, a = !!o && o !== "default", i = o === "brand-06";
235
+ return e ? t === "illustration" && !a ? "ghost-secondary" : i ? "ghost-inverse" : "secondary" : i ? "ghost-inverse" : "ghost-secondary";
236
236
  }
237
237
  /**
238
238
  * Template for the close button element. Called within the
@@ -241,26 +241,26 @@ let n = class extends x {
241
241
  * @private
242
242
  */
243
243
  renderCloseButton() {
244
- var o, t;
244
+ var o, e;
245
245
  if (!this.isDismissible)
246
246
  return c;
247
- const e = this._getHeaderButtonVariant();
247
+ const t = this._getHeaderButtonVariant();
248
248
  return s`
249
249
  <pie-icon-button
250
250
  @click="${() => {
251
251
  this.isOpen = !1;
252
252
  }}"
253
- variant="${e}"
253
+ variant="${t}"
254
254
  class="c-modal-closeBtn"
255
- .aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (t = this.aria) == null ? void 0 : t.close } : c}
255
+ .aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (e = this.aria) == null ? void 0 : e.close } : c}
256
256
  data-test-id="modal-close-button">
257
257
  <icon-close></icon-close>
258
258
  </pie-icon-button>`;
259
259
  }
260
260
  renderModalImageSlot() {
261
- const { imageSlotMode: e, imageSlotAspectRatio: o } = this;
262
- return e ? s`
263
- <div class="c-modal-imageSlot c-modal-imageSlot--${e} c-modal-imageSlot--${o}" data-test-id="modal-image">
261
+ const { imageSlotMode: t, imageSlotAspectRatio: o } = this;
262
+ return t ? s`
263
+ <div class="c-modal-imageSlot c-modal-imageSlot--${t} c-modal-imageSlot--${o}" data-test-id="modal-image">
264
264
  <slot name="image"></slot>
265
265
  ${this.renderCloseButton()}
266
266
  </div>
@@ -273,18 +273,18 @@ let n = class extends x {
273
273
  * @private
274
274
  */
275
275
  renderBackButton() {
276
- var o, t;
276
+ var o, e;
277
277
  if (!this.hasBackButton)
278
278
  return c;
279
- const e = this._getHeaderButtonVariant();
279
+ const t = this._getHeaderButtonVariant();
280
280
  return s`
281
281
  <pie-icon-button
282
282
  @click="${() => {
283
283
  this._backButtonClicked = !0, this.isOpen = !1;
284
284
  }}"
285
- variant="${e}"
285
+ variant="${t}"
286
286
  class="c-modal-backBtn"
287
- .aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (t = this.aria) == null ? void 0 : t.back } : c}
287
+ .aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (e = this.aria) == null ? void 0 : e.back } : c}
288
288
  data-test-id="modal-back-button">
289
289
  <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
290
290
  </pie-icon-button>
@@ -300,11 +300,11 @@ let n = class extends x {
300
300
  * @private
301
301
  */
302
302
  renderLeadingAction() {
303
- const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
303
+ const { ariaLabel: t, text: o, variant: e = "primary" } = this.leadingAction || {};
304
304
  return o ? s`
305
305
  <pie-button
306
- variant="${t}"
307
- aria-label="${h(e)}"
306
+ variant="${e}"
307
+ aria-label="${h(t)}"
308
308
  type="submit"
309
309
  ?isFullWidth="${this.hasStackedActions}"
310
310
  @click="${() => this._handleActionClick("leading")}"
@@ -325,11 +325,11 @@ let n = class extends x {
325
325
  */
326
326
  renderSupportingAction() {
327
327
  var a;
328
- const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
328
+ const { ariaLabel: t, text: o, variant: e = "ghost" } = this.supportingAction || {};
329
329
  return !o || !((a = this.leadingAction) != null && a.text) ? c : s`
330
330
  <pie-button
331
- variant="${t}"
332
- aria-label="${h(e)}"
331
+ variant="${e}"
332
+ aria-label="${h(t)}"
333
333
  type="reset"
334
334
  ?isFullWidth="${this.hasStackedActions}"
335
335
  @click="${() => this._handleActionClick("supporting")}"
@@ -346,19 +346,19 @@ let n = class extends x {
346
346
  */
347
347
  renderModalFooter() {
348
348
  var a, i;
349
- const e = (a = this.leadingAction) == null ? void 0 : a.text;
350
- e || (i = this.supportingAction) != null && i.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.");
349
+ const t = (a = this.leadingAction) == null ? void 0 : a.text;
350
+ t || (i = this.supportingAction) != null && i.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.");
351
351
  const o = {
352
352
  "c-modal-footer": !0,
353
353
  "c-modal-footer--stackedActions": this.hasStackedActions
354
- }, t = e ? s`
354
+ }, e = t ? s`
355
355
  <footer class="${S(o)}" data-test-id="pie-modal-footer">
356
356
  ${this.renderLeadingAction()}
357
357
  ${this.renderSupportingAction()}
358
358
  </footer>` : c;
359
359
  return s`
360
360
  <slot name="footer">
361
- ${t}
361
+ ${e}
362
362
  </slot>`;
363
363
  }
364
364
  /**
@@ -368,8 +368,8 @@ let n = class extends x {
368
368
  renderLoadingSpinner() {
369
369
  if (!this.isLoading)
370
370
  return c;
371
- const e = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
372
- return s`<pie-spinner size="xlarge" variant="${e}"></pie-spinner>`;
371
+ const t = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
372
+ return s`<pie-spinner size="xlarge" variant="${t}"></pie-spinner>`;
373
373
  }
374
374
  /**
375
375
  * Renders the modal inner content and footer of the modal.
@@ -390,21 +390,21 @@ let n = class extends x {
390
390
  * @private
391
391
  */
392
392
  renderHeading() {
393
- const { heading: e, headingLevel: o, isHeadingEmphasised: t } = this, a = H(o);
393
+ const { heading: t, headingLevel: o, isHeadingEmphasised: e } = this, a = H(o);
394
394
  return s`
395
395
  <${a} id="modal-heading" class="${S({
396
396
  "c-modal-heading": !0,
397
- "c-modal-heading--emphasised": t
398
- })}">
399
- ${e}
397
+ "c-modal-heading--emphasised": e
398
+ })}" part="heading" data-test-id="modal-heading">
399
+ ${t}
400
400
  </${a}>
401
401
  `;
402
402
  }
403
403
  render() {
404
404
  const {
405
- aria: e,
405
+ aria: t,
406
406
  isDismissible: o,
407
- isFooterPinned: t,
407
+ isFooterPinned: e,
408
408
  isFullWidthBelowMid: a,
409
409
  isLoading: i,
410
410
  position: m,
@@ -417,10 +417,10 @@ let n = class extends x {
417
417
  "c-modal--top": m === "top",
418
418
  "c-modal--dismissible": o,
419
419
  "c-modal--loading": i,
420
- "c-modal--pinnedFooter": t,
420
+ "c-modal--pinnedFooter": e,
421
421
  "c-modal--fullWidthBelowMid": a,
422
422
  [`c-modal--bg-${E}`]: !0
423
- }, A = i && (e == null ? void 0 : e.loading) || void 0;
423
+ }, A = i && (t == null ? void 0 : t.loading) || void 0;
424
424
  return s`
425
425
  <dialog
426
426
  id="dialog"
@@ -438,7 +438,7 @@ let n = class extends x {
438
438
  <slot name="headerContent"></slot>
439
439
  </header>
440
440
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
441
- t ? this.renderModalContentAndFooter() : s`
441
+ e ? this.renderModalContentAndFooter() : s`
442
442
  <div class="c-modal-scrollContainer">
443
443
  ${this.renderModalContentAndFooter()}
444
444
  </div>`}
@@ -500,14 +500,14 @@ l([
500
500
  ], n.prototype, "supportingAction", 2);
501
501
  l([
502
502
  d({ type: String }),
503
- y(b, to, r.backgroundColor)
503
+ y(b, eo, r.backgroundColor)
504
504
  ], n.prototype, "backgroundColor", 2);
505
505
  l([
506
506
  d({ type: String })
507
507
  ], n.prototype, "imageSlotMode", 2);
508
508
  l([
509
509
  d({ type: String }),
510
- y(b, eo, r.imageSlotAspectRatio)
510
+ y(b, to, r.imageSlotAspectRatio)
511
511
  ], n.prototype, "imageSlotAspectRatio", 2);
512
512
  l([
513
513
  R("dialog")
@@ -522,10 +522,10 @@ export {
522
522
  C as ON_MODAL_OPEN_EVENT,
523
523
  io as ON_MODAL_SUPPORTING_ACTION_CLICK,
524
524
  n as PieModal,
525
- to as backgroundColors,
525
+ eo as backgroundColors,
526
526
  r as defaultProps,
527
527
  Q as headingLevels,
528
- eo as imageSlotAspectRatios,
528
+ to as imageSlotAspectRatios,
529
529
  ko as imageSlotModes,
530
530
  oo as positions,
531
531
  Z as sizes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "1.21.0",
3
+ "version": "1.22.1",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -22,7 +22,10 @@
22
22
  "componentStatus": "stable",
23
23
  "replaces": {
24
24
  "snacks": [
25
- "Modal"
25
+ "Modal",
26
+ "ModalContent",
27
+ "ModalFooter",
28
+ "ModalScrollContent"
26
29
  ]
27
30
  }
28
31
  },
@@ -49,7 +52,7 @@
49
52
  "@justeattakeaway/pie-components-config": "0.21.0",
50
53
  "@justeattakeaway/pie-css": "0.25.0",
51
54
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
52
- "@justeattakeaway/pie-text-input": "0.29.8",
55
+ "@justeattakeaway/pie-text-input": "0.29.9",
53
56
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
54
57
  "@types/body-scroll-lock": "3.1.2",
55
58
  "cem-plugin-module-file-extensions": "0.0.5"
@@ -59,8 +62,8 @@
59
62
  },
60
63
  "dependencies": {
61
64
  "@justeattakeaway/pie-button": "1.10.0",
62
- "@justeattakeaway/pie-icon-button": "2.3.3",
63
- "@justeattakeaway/pie-icons-webc": "1.17.1",
65
+ "@justeattakeaway/pie-icon-button": "2.3.4",
66
+ "@justeattakeaway/pie-icons-webc": "1.18.0",
64
67
  "@justeattakeaway/pie-spinner": "1.3.5",
65
68
  "@justeattakeaway/pie-webc-core": "5.0.0",
66
69
  "body-scroll-lock": "3.1.5",
package/src/index.ts CHANGED
@@ -29,7 +29,6 @@ import {
29
29
  sizes,
30
30
  backgroundColors,
31
31
  defaultProps,
32
- imageSlotModes,
33
32
  imageSlotAspectRatios,
34
33
  ON_MODAL_BACK_EVENT,
35
34
  ON_MODAL_CLOSE_EVENT,
@@ -568,7 +567,7 @@ export class PieModal extends PieElement implements ModalProps {
568
567
  };
569
568
 
570
569
  return html`
571
- <${headingTag} id="modal-heading" class="${classMap(headingClasses)}">
570
+ <${headingTag} id="modal-heading" class="${classMap(headingClasses)}" part="heading" data-test-id="modal-heading">
572
571
  ${heading}
573
572
  </${headingTag}>
574
573
  `;