@justeattakeaway/pie-modal 1.26.12 → 1.26.14

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 +2 -8
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +73 -70
  4. package/dist/react.d.ts +2 -2
  5. package/package.json +8 -8
  6. package/src/defs.ts +3 -2
  7. package/src/index.ts +7 -4
package/custom-elements.json CHANGED
@@ -111,7 +111,7 @@
111
111
  "type": {
112
112
  "text": "DefaultProps"
113
113
  },
114
- "default": "{ hasBackButton: false, hasStackedActions: false, headingLevel: 'h2', isOpen: false, isDismissible: false, isHeadingEmphasised: false, isFooterPinned: true, isFullWidthBelowMid: false, isLoading: false, position: 'center', size: 'medium', backgroundColor: 'default', imageSlotAspectRatio: 'medium', }"
114
+ "default": "{ heading: '', hasBackButton: false, hasStackedActions: false, headingLevel: 'h2', isOpen: false, isDismissible: false, isHeadingEmphasised: false, isFooterPinned: true, isFullWidthBelowMid: false, isLoading: false, position: 'center', size: 'medium', backgroundColor: 'default', imageSlotAspectRatio: 'medium', }"
115
115
  }
116
116
  ],
117
117
  "exports": [
@@ -248,9 +248,6 @@
248
248
  {
249
249
  "kind": "field",
250
250
  "name": "heading",
251
- "type": {
252
- "text": "string"
253
- },
254
251
  "privacy": "public",
255
252
  "attribute": "heading"
256
253
  },
@@ -695,7 +692,7 @@
695
692
  "privacy": "private",
696
693
  "return": {
697
694
  "type": {
698
- "text": "TemplateResult"
695
+ "text": "TemplateResult | typeof nothing"
699
696
  }
700
697
  },
701
698
  "description": "Renders the modal heading content in the correct heading tag"
@@ -763,9 +760,6 @@
763
760
  },
764
761
  {
765
762
  "name": "heading",
766
- "type": {
767
- "text": "string"
768
- },
769
763
  "fieldName": "heading"
770
764
  },
771
765
  {
package/dist/index.d.ts CHANGED
@@ -28,7 +28,7 @@ declare type AriaProps = {
28
28
 
29
29
  export declare const backgroundColors: readonly ["default", "subtle", "brand-01", "brand-02", "brand-03", "brand-03-subtle", "brand-04", "brand-04-subtle", "brand-05", "brand-05-subtle", "brand-06", "brand-06-subtle", "brand-08", "brand-08-subtle"];
30
30
 
31
- export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
31
+ export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
32
32
 
33
33
  export declare const defaultProps: DefaultProps;
34
34
 
@@ -60,7 +60,7 @@ export declare type ModalProps = {
60
60
  /**
61
61
  * The text to display in the modal's heading.
62
62
  */
63
- heading: string;
63
+ heading?: string;
64
64
  /**
65
65
  * The HTML heading tag to use for the modal's heading. Can be h1-h6.
66
66
  */
package/dist/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { LitElement as T, unsafeCSS as K, nothing as g } from "lit";
2
2
  import { html as m, unsafeStatic as H } from "lit/static-html.js";
3
- import { property as d, query as R } from "lit/decorators.js";
3
+ import { property as r, query as R } from "lit/decorators.js";
4
4
  import { classMap as _ } from "lit/directives/class-map.js";
5
5
  import { ifDefined as u } from "lit/directives/if-defined.js";
6
6
  import "@justeattakeaway/pie-button";
7
7
  import "@justeattakeaway/pie-icon-button";
8
- import { requiredProperty as W, validPropertyValues as k, safeCustomElement as N, dispatchCustomEvent as b } from "@justeattakeaway/pie-webc-core";
8
+ import { validPropertyValues as y, safeCustomElement as W, dispatchCustomEvent as b } from "@justeattakeaway/pie-webc-core";
9
9
  import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
10
10
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
11
11
  import "@justeattakeaway/pie-spinner";
@@ -14,9 +14,9 @@ const x = class x extends T {
14
14
  this.getAttribute("v") || this.setAttribute("v", x.v);
15
15
  }
16
16
  };
17
- x.v = "1.26.12";
17
+ x.v = "1.26.14";
18
18
  let B = x;
19
- function V(o) {
19
+ function N(o) {
20
20
  if (Array.isArray(o)) {
21
21
  for (var t = 0, a = Array(o.length); t < o.length; t++)
22
22
  a[t] = o[t];
@@ -33,27 +33,27 @@ if (typeof window < "u") {
33
33
  };
34
34
  window.addEventListener("testPassive", null, O), window.removeEventListener("testPassive", null, O);
35
35
  }
36
- var $ = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], w = !1, D = -1, v = void 0, y = void 0, E = function(t) {
36
+ var $ = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], w = !1, D = -1, f = void 0, v = void 0, E = function(t) {
37
37
  return p.some(function(a) {
38
38
  return !!(a.options.allowTouchMove && a.options.allowTouchMove(t));
39
39
  });
40
40
  }, S = function(t) {
41
41
  var a = t || window.event;
42
42
  return E(a.target) || a.touches.length > 1 ? !0 : (a.preventDefault && a.preventDefault(), !1);
43
- }, j = function(t) {
44
- if (y === void 0) {
43
+ }, V = function(t) {
44
+ if (v === void 0) {
45
45
  var a = !1, i = window.innerWidth - document.documentElement.clientWidth;
46
- a && i > 0 && (y = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
46
+ a && i > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
47
47
  }
48
- v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
49
- }, Y = function() {
50
- y !== void 0 && (document.body.style.paddingRight = y, y = void 0), v !== void 0 && (document.body.style.overflow = v, v = void 0);
51
- }, q = function(t) {
48
+ f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
49
+ }, j = function() {
50
+ v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
51
+ }, Y = function(t) {
52
52
  return t ? t.scrollHeight - t.scrollTop <= t.clientHeight : !1;
53
- }, U = function(t, a) {
53
+ }, q = function(t, a) {
54
54
  var i = t.targetTouches[0].clientY - D;
55
- return E(t.target) ? !1 : a && a.scrollTop === 0 && i > 0 || q(a) && i < 0 ? S(t) : (t.stopPropagation(), !0);
56
- }, X = function(t, a) {
55
+ return E(t.target) ? !1 : a && a.scrollTop === 0 && i > 0 || Y(a) && i < 0 ? S(t) : (t.stopPropagation(), !0);
56
+ }, U = function(t, a) {
57
57
  if (!t) {
58
58
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
59
59
  return;
@@ -65,22 +65,22 @@ var $ = typeof window < "u" && window.navigator && window.navigator.platform &&
65
65
  targetElement: t,
66
66
  options: {}
67
67
  };
68
- p = [].concat(V(p), [i]), $ ? (t.ontouchstart = function(e) {
68
+ p = [].concat(N(p), [i]), $ ? (t.ontouchstart = function(e) {
69
69
  e.targetTouches.length === 1 && (D = e.targetTouches[0].clientY);
70
70
  }, t.ontouchmove = function(e) {
71
- e.targetTouches.length === 1 && U(e, t);
72
- }, w || (document.addEventListener("touchmove", S, A ? { passive: !1 } : void 0), w = !0)) : j();
71
+ e.targetTouches.length === 1 && q(e, t);
72
+ }, w || (document.addEventListener("touchmove", S, A ? { passive: !1 } : void 0), w = !0)) : V();
73
73
  }
74
- }, G = function(t) {
74
+ }, X = function(t) {
75
75
  if (!t) {
76
76
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
77
77
  return;
78
78
  }
79
79
  p = p.filter(function(a) {
80
80
  return a.targetElement !== t;
81
- }), $ ? (t.ontouchstart = null, t.ontouchmove = null, w && p.length === 0 && (document.removeEventListener("touchmove", S, A ? { passive: !1 } : void 0), w = !1)) : p.length || Y();
81
+ }), $ ? (t.ontouchstart = null, t.ontouchmove = null, w && p.length === 0 && (document.removeEventListener("touchmove", S, A ? { passive: !1 } : void 0), w = !1)) : p.length || j();
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;--modal-easing: var(--dt-motion-easing-persistent-functional);--modal-transition-duration: var(--dt-motion-timing-150);--backdrop-transition-duration: var(--dt-motion-timing-200)}.c-modal:focus-visible{outline:none}@media(max-width:767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal{opacity:0;transform:translateY(-40px);transition:opacity var(--modal-transition-duration) var(--modal-easing),transform var(--modal-transition-duration) var(--modal-easing),display var(--modal-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete}.c-modal[open]{--modal-transition-duration: var(--dt-motion-timing-250);--backdrop-transition-duration: var(--dt-motion-timing-300);opacity:1;transform:translateY(0)}@starting-style{.c-modal[open]{opacity:0;transform:translateY(-40px)}}.c-modal[open]::backdrop{opacity:1}@starting-style{.c-modal[open]::backdrop{opacity:0}}.c-modal{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;display:flex;flex-direction:column;--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)}@media(min-width:769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal{--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.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.is-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.is-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.is-fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay);opacity:0;transition:opacity var(--backdrop-transition-duration) var(--modal-easing),display var(--backdrop-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete}@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:16/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:4/3}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}@media(min-width:769px){.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{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-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}}@media(min-width:768px){.c-modal .c-modal-footer.c-modal-footer--stackedActions>pie-button{width:auto}}.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-xl-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-xl-italic-weight);--modal-header-font-style: var(--dt-font-heading-xl-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-xl-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-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.is-dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media(min-width:769px){.c-modal.is-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)}@media(min-width:769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content{position:relative;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}.c-modal .c-modal-content:has(+slot>footer){padding-block-end:var(--modal-content-padding-block)}.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.is-pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.is-loading .c-modal-content pie-spinner{display:flex;justify-content:center;align-items:center;padding:var(--dt-spacing-j) calc(var(--dt-spacing-j) + var(--dt-spacing-d))}.c-modal.is-loading .c-modal-content .c-modal-contentInner{display:none}@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-content-color: var(--dt-color-content-dark);--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-content-color: var(--dt-color-content-dark);--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-content-color: var(--dt-color-content-dark);--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-content-color: var(--dt-color-content-dark);--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-light);--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-content-color: var(--dt-color-content-dark);--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)}@media(prefers-reduced-motion:reduce){.c-modal,.c-modal::backdrop{transition:none;transform:none}}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], to = ["small", "medium", "large"], ao = [
83
+ const G = '*,*: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;--modal-easing: var(--dt-motion-easing-persistent-functional);--modal-transition-duration: var(--dt-motion-timing-150);--backdrop-transition-duration: var(--dt-motion-timing-200)}.c-modal:focus-visible{outline:none}@media(max-width:767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal{opacity:0;transform:translateY(-40px);transition:opacity var(--modal-transition-duration) var(--modal-easing),transform var(--modal-transition-duration) var(--modal-easing),display var(--modal-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete}.c-modal[open]{--modal-transition-duration: var(--dt-motion-timing-250);--backdrop-transition-duration: var(--dt-motion-timing-300);opacity:1;transform:translateY(0)}@starting-style{.c-modal[open]{opacity:0;transform:translateY(-40px)}}.c-modal[open]::backdrop{opacity:1}@starting-style{.c-modal[open]::backdrop{opacity:0}}.c-modal{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;display:flex;flex-direction:column;--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)}@media(min-width:769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal{--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.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.is-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.is-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.is-fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay);opacity:0;transition:opacity var(--backdrop-transition-duration) var(--modal-easing),display var(--backdrop-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete}@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:16/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:4/3}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}@media(min-width:769px){.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{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-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}}@media(min-width:768px){.c-modal .c-modal-footer.c-modal-footer--stackedActions>pie-button{width:auto}}.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-xl-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-xl-italic-weight);--modal-header-font-style: var(--dt-font-heading-xl-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-xl-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-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.is-dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media(min-width:769px){.c-modal.is-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)}@media(min-width:769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content{position:relative;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}.c-modal .c-modal-content:has(+slot>footer){padding-block-end:var(--modal-content-padding-block)}.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.is-pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.is-loading .c-modal-content pie-spinner{display:flex;justify-content:center;align-items:center;padding:var(--dt-spacing-j) calc(var(--dt-spacing-j) + var(--dt-spacing-d))}.c-modal.is-loading .c-modal-content .c-modal-contentInner{display:none}@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-content-color: var(--dt-color-content-dark);--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-content-color: var(--dt-color-content-dark);--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-content-color: var(--dt-color-content-dark);--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-content-color: var(--dt-color-content-dark);--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-light);--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-content-color: var(--dt-color-content-dark);--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)}@media(prefers-reduced-motion:reduce){.c-modal,.c-modal::backdrop{transition:none;transform:none}}', J = ["h1", "h2", "h3", "h4", "h5", "h6"], Q = ["small", "medium", "large"], Z = ["top", "center"], yo = ["image", "illustration"], oo = ["small", "medium", "large"], to = [
84
84
  "default",
85
85
  "subtle",
86
86
  "brand-01",
@@ -95,7 +95,8 @@ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
95
95
  "brand-06-subtle",
96
96
  "brand-08",
97
97
  "brand-08-subtle"
98
- ], M = "pie-modal-close", C = "pie-modal-open", L = "pie-modal-back", eo = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
98
+ ], M = "pie-modal-close", C = "pie-modal-open", L = "pie-modal-back", ao = "pie-modal-leading-action-click", eo = "pie-modal-supporting-action-click", d = {
99
+ heading: "",
99
100
  hasBackButton: !1,
100
101
  hasStackedActions: !1,
101
102
  headingLevel: "h2",
@@ -110,15 +111,15 @@ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
110
111
  backgroundColor: "default",
111
112
  imageSlotAspectRatio: "medium"
112
113
  };
113
- var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (o, t, a, i) => {
114
- for (var e = i > 1 ? void 0 : i ? lo(t, a) : t, s = o.length - 1, c; s >= 0; s--)
114
+ var io = Object.defineProperty, no = Object.getOwnPropertyDescriptor, l = (o, t, a, i) => {
115
+ for (var e = i > 1 ? void 0 : i ? no(t, a) : t, s = o.length - 1, c; s >= 0; s--)
115
116
  (c = o[s]) && (e = (i ? c(t, a, e) : c(e)) || e);
116
- return i && e && no(t, a, e), e;
117
+ return i && e && io(t, a, e), e;
117
118
  };
118
- const f = "pie-modal";
119
+ const k = "pie-modal";
119
120
  let n = class extends B {
120
121
  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 = (o) => {
122
+ super(...arguments), this.heading = d.heading, this.headingLevel = d.headingLevel, this.hasBackButton = d.hasBackButton, this.hasStackedActions = d.hasStackedActions, this.isDismissible = d.isDismissible, this.isHeadingEmphasised = d.isHeadingEmphasised, this.isFooterPinned = d.isFooterPinned, this.isFullWidthBelowMid = d.isFullWidthBelowMid, this.isLoading = d.isLoading, this.isOpen = d.isOpen, this.position = d.position, this.size = d.size, this.backgroundColor = d.backgroundColor, this.imageSlotAspectRatio = d.imageSlotAspectRatio, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (o) => {
122
123
  o.key === "Escape" && o.preventDefault();
123
124
  }, this._handleDialogLightDismiss = (o) => {
124
125
  if (!this.isDismissible || o.target !== o.currentTarget)
@@ -207,7 +208,7 @@ let n = class extends B {
207
208
  t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, b(this, L, { targetModal: this })) : b(this, M, { targetModal: this }) : b(this, C, { targetModal: this }));
208
209
  }
209
210
  _handleActionClick(o) {
210
- o === "leading" ? (this._dialog.close("leading"), b(this, eo, { targetModal: this })) : o === "supporting" && (this._dialog.close("supporting"), b(this, io, { targetModal: this }));
211
+ o === "leading" ? (this._dialog.close("leading"), b(this, ao, { targetModal: this })) : o === "supporting" && (this._dialog.close("supporting"), b(this, eo, { targetModal: this }));
211
212
  }
212
213
  /**
213
214
  * Return focus to the specified element, providing the selector is valid
@@ -222,13 +223,13 @@ let n = class extends B {
222
223
  * Enables body scroll by unlocking the scroll container.
223
224
  */
224
225
  _enableBodyScroll() {
225
- this._scrollableContainer && G(this._scrollableContainer);
226
+ this._scrollableContainer && X(this._scrollableContainer);
226
227
  }
227
228
  /**
228
229
  * Disables body scroll by locking the scroll container.
229
230
  */
230
231
  _disableBodyScroll() {
231
- this._modalScrollContainer && X(this._modalScrollContainer);
232
+ this._modalScrollContainer && U(this._modalScrollContainer);
232
233
  }
233
234
  _getHeaderButtonVariant() {
234
235
  const { imageSlotMode: o, backgroundColor: t } = this, a = !!o, i = !!t && t !== "default", e = t.indexOf("subtle") !== -1 || t === "brand-02", s = t === "default", c = t === "brand-06", h = e || s ? "ghost-secondary" : "ghost-secondary-dark";
@@ -403,7 +404,10 @@ let n = class extends B {
403
404
  * @private
404
405
  */
405
406
  renderHeading() {
406
- const { heading: o, headingLevel: t, isHeadingEmphasised: a } = this, i = H(t);
407
+ const { heading: o, headingLevel: t, isHeadingEmphasised: a } = this;
408
+ if (!o)
409
+ return g;
410
+ const i = H(t);
407
411
  return m`
408
412
  <${i} id="modal-heading" class="${_({
409
413
  "c-modal-heading": !0,
@@ -424,7 +428,7 @@ let n = class extends B {
424
428
  size: c,
425
429
  backgroundColor: h,
426
430
  imageSlotMode: F
427
- } = this, P = !!!F, I = {
431
+ } = this, I = !!!F, P = {
428
432
  "c-modal": !0,
429
433
  [`c-modal--${c}`]: !0,
430
434
  "c-modal--top": s === "top",
@@ -439,7 +443,7 @@ let n = class extends B {
439
443
  id="dialog"
440
444
  aria-label="${u(z)}"
441
445
  aria-labelledby="${u(z ? void 0 : "modal-heading")}"
442
- class="${_(I)}"
446
+ class="${_(P)}"
443
447
  aria-live="polite"
444
448
  aria-busy="${e ? "true" : "false"}"
445
449
  data-test-id="pie-modal">
@@ -447,7 +451,7 @@ let n = class extends B {
447
451
  <header class="c-modal-header" data-test-id="modal-header">
448
452
  ${this.renderBackButton()}
449
453
  ${this.renderHeading()}
450
- ${P ? this.renderCloseButton() : g}
454
+ ${I ? this.renderCloseButton() : g}
451
455
  <slot name="headerContent"></slot>
452
456
  </header>
453
457
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
@@ -458,88 +462,87 @@ let n = class extends B {
458
462
  </dialog>`;
459
463
  }
460
464
  };
461
- n.styles = K(J);
465
+ n.styles = K(G);
462
466
  l([
463
- d({ type: Object })
467
+ r({ type: Object })
464
468
  ], n.prototype, "aria", 2);
465
469
  l([
466
- d({ type: String }),
467
- W(f)
470
+ r({ type: String })
468
471
  ], n.prototype, "heading", 2);
469
472
  l([
470
- d({ type: String }),
471
- k(f, Q, r.headingLevel)
473
+ r({ type: String }),
474
+ y(k, J, d.headingLevel)
472
475
  ], n.prototype, "headingLevel", 2);
473
476
  l([
474
- d({ type: Boolean })
477
+ r({ type: Boolean })
475
478
  ], n.prototype, "hasBackButton", 2);
476
479
  l([
477
- d({ type: Boolean })
480
+ r({ type: Boolean })
478
481
  ], n.prototype, "hasStackedActions", 2);
479
482
  l([
480
- d({ type: Boolean, reflect: !0 })
483
+ r({ type: Boolean, reflect: !0 })
481
484
  ], n.prototype, "isDismissible", 2);
482
485
  l([
483
- d({ type: Boolean })
486
+ r({ type: Boolean })
484
487
  ], n.prototype, "isHeadingEmphasised", 2);
485
488
  l([
486
- d({ type: Boolean })
489
+ r({ type: Boolean })
487
490
  ], n.prototype, "isFooterPinned", 2);
488
491
  l([
489
- d({ type: Boolean })
492
+ r({ type: Boolean })
490
493
  ], n.prototype, "isFullWidthBelowMid", 2);
491
494
  l([
492
- d({ type: Boolean, reflect: !0 })
495
+ r({ type: Boolean, reflect: !0 })
493
496
  ], n.prototype, "isLoading", 2);
494
497
  l([
495
- d({ type: Boolean })
498
+ r({ type: Boolean })
496
499
  ], n.prototype, "isOpen", 2);
497
500
  l([
498
- d({ type: Object })
501
+ r({ type: Object })
499
502
  ], n.prototype, "leadingAction", 2);
500
503
  l([
501
- d({ type: String }),
502
- k(f, oo, r.position)
504
+ r({ type: String }),
505
+ y(k, Z, d.position)
503
506
  ], n.prototype, "position", 2);
504
507
  l([
505
- d({ type: String })
508
+ r({ type: String })
506
509
  ], n.prototype, "returnFocusAfterCloseSelector", 2);
507
510
  l([
508
- d({ type: String }),
509
- k(f, Z, r.size)
511
+ r({ type: String }),
512
+ y(k, Q, d.size)
510
513
  ], n.prototype, "size", 2);
511
514
  l([
512
- d({ type: Object })
515
+ r({ type: Object })
513
516
  ], n.prototype, "supportingAction", 2);
514
517
  l([
515
- d({ type: String }),
516
- k(f, ao, r.backgroundColor)
518
+ r({ type: String }),
519
+ y(k, to, d.backgroundColor)
517
520
  ], n.prototype, "backgroundColor", 2);
518
521
  l([
519
- d({ type: String })
522
+ r({ type: String })
520
523
  ], n.prototype, "imageSlotMode", 2);
521
524
  l([
522
- d({ type: String }),
523
- k(f, to, r.imageSlotAspectRatio)
525
+ r({ type: String }),
526
+ y(k, oo, d.imageSlotAspectRatio)
524
527
  ], n.prototype, "imageSlotAspectRatio", 2);
525
528
  l([
526
529
  R("dialog")
527
530
  ], n.prototype, "_dialog", 2);
528
531
  n = l([
529
- N("pie-modal")
532
+ W("pie-modal")
530
533
  ], n);
531
534
  export {
532
535
  L as ON_MODAL_BACK_EVENT,
533
536
  M as ON_MODAL_CLOSE_EVENT,
534
- eo as ON_MODAL_LEADING_ACTION_CLICK,
537
+ ao as ON_MODAL_LEADING_ACTION_CLICK,
535
538
  C as ON_MODAL_OPEN_EVENT,
536
- io as ON_MODAL_SUPPORTING_ACTION_CLICK,
539
+ eo as ON_MODAL_SUPPORTING_ACTION_CLICK,
537
540
  n as PieModal,
538
- ao as backgroundColors,
539
- r as defaultProps,
540
- Q as headingLevels,
541
- to as imageSlotAspectRatios,
542
- ko as imageSlotModes,
543
- oo as positions,
544
- Z as sizes
541
+ to as backgroundColors,
542
+ d as defaultProps,
543
+ J as headingLevels,
544
+ oo as imageSlotAspectRatios,
545
+ yo as imageSlotModes,
546
+ Z as positions,
547
+ Q as sizes
545
548
  };
package/dist/react.d.ts CHANGED
@@ -29,7 +29,7 @@ declare type AriaProps = {
29
29
 
30
30
  export declare const backgroundColors: readonly ["default", "subtle", "brand-01", "brand-02", "brand-03", "brand-03-subtle", "brand-04", "brand-04-subtle", "brand-05", "brand-05-subtle", "brand-06", "brand-06-subtle", "brand-08", "brand-08-subtle"];
31
31
 
32
- export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
32
+ export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
33
33
 
34
34
  export declare const defaultProps: DefaultProps;
35
35
 
@@ -57,7 +57,7 @@ export declare type ModalProps = {
57
57
  /**
58
58
  * The text to display in the modal's heading.
59
59
  */
60
- heading: string;
60
+ heading?: string;
61
61
  /**
62
62
  * The HTML heading tag to use for the modal's heading. Can be h1-h6.
63
63
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "1.26.12",
3
+ "version": "1.26.14",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -47,20 +47,20 @@
47
47
  "license": "Apache-2.0",
48
48
  "devDependencies": {
49
49
  "@justeat/pie-design-tokens": "7.11.1",
50
- "@justeattakeaway/pie-button": "1.14.5",
50
+ "@justeattakeaway/pie-button": "1.14.6",
51
51
  "@justeattakeaway/pie-components-config": "0.21.3",
52
52
  "@justeattakeaway/pie-css": "1.2.0",
53
53
  "@justeattakeaway/pie-monorepo-utils": "0.9.6",
54
- "@justeattakeaway/pie-text-input": "0.30.1",
54
+ "@justeattakeaway/pie-text-input": "0.30.2",
55
55
  "@justeattakeaway/pie-wrapper-react": "0.14.5",
56
56
  "@types/body-scroll-lock": "3.1.2"
57
57
  },
58
58
  "dependencies": {
59
- "@justeattakeaway/pie-button": "1.14.5",
60
- "@justeattakeaway/pie-icon-button": "2.7.20",
61
- "@justeattakeaway/pie-icons-webc": "1.25.2",
62
- "@justeattakeaway/pie-spinner": "1.4.18",
63
- "@justeattakeaway/pie-webc-core": "15.0.1",
59
+ "@justeattakeaway/pie-button": "1.14.6",
60
+ "@justeattakeaway/pie-icon-button": "2.7.21",
61
+ "@justeattakeaway/pie-icons-webc": "1.25.3",
62
+ "@justeattakeaway/pie-spinner": "1.4.19",
63
+ "@justeattakeaway/pie-webc-core": "15.1.0",
64
64
  "body-scroll-lock": "3.1.5",
65
65
  "dialog-polyfill": "0.5.6"
66
66
  },
package/src/defs.ts CHANGED
@@ -67,7 +67,7 @@ export type ModalProps = {
67
67
  /**
68
68
  * The text to display in the modal's heading.
69
69
  */
70
- heading: string;
70
+ heading?: string;
71
71
 
72
72
  /**
73
73
  * The HTML heading tag to use for the modal's heading. Can be h1-h6.
@@ -190,9 +190,10 @@ export const ON_MODAL_SUPPORTING_ACTION_CLICK = 'pie-modal-supporting-action-cli
190
190
 
191
191
  export type ModalActionType = 'leading' | 'supporting';
192
192
 
193
- export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
193
+ export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
194
194
 
195
195
  export const defaultProps: DefaultProps = {
196
+ heading: '',
196
197
  hasBackButton: false,
197
198
  hasStackedActions: false,
198
199
  headingLevel: 'h2',
package/src/index.ts CHANGED
@@ -11,7 +11,6 @@ import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
11
11
  import '@justeattakeaway/pie-button';
12
12
  import '@justeattakeaway/pie-icon-button';
13
13
  import {
14
- requiredProperty,
15
14
  validPropertyValues,
16
15
  dispatchCustomEvent,
17
16
  safeCustomElement,
@@ -63,8 +62,7 @@ export class PieModal extends PieElement implements ModalProps {
63
62
  public aria: ModalProps['aria'];
64
63
 
65
64
  @property({ type: String })
66
- @requiredProperty(componentSelector)
67
- public heading!: string;
65
+ public heading = defaultProps.heading;
68
66
 
69
67
  @property({ type: String })
70
68
  @validPropertyValues(componentSelector, headingLevels, defaultProps.headingLevel)
@@ -600,8 +598,13 @@ export class PieModal extends PieElement implements ModalProps {
600
598
  * Renders the modal heading content in the correct heading tag
601
599
  * @private
602
600
  */
603
- private renderHeading (): TemplateResult {
601
+ private renderHeading (): TemplateResult | typeof nothing {
604
602
  const { heading, headingLevel, isHeadingEmphasised } = this;
603
+
604
+ if (!heading) {
605
+ return nothing;
606
+ }
607
+
605
608
  const headingTag = unsafeStatic(headingLevel);
606
609
 
607
610
  const headingClasses = {