@justeattakeaway/pie-modal 1.18.2 → 1.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +2 -1
  2. package/custom-elements.json +37 -1
  3. package/dist/index.d.ts +13 -0
  4. package/dist/index.js +219 -177
  5. package/dist/react.d.ts +13 -0
  6. package/dist/react.js +10 -9
  7. package/package.json +10 -10
  8. package/src/defs.ts +29 -0
  9. package/src/index.ts +33 -5
  10. package/src/modal.scss +50 -4
package/README.md CHANGED
@@ -42,6 +42,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
42
42
  | `heading` | — | The heading text of the modal. | — |
43
43
  | `headingLevel` | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | The HTML tag to use for the modal's heading. | `h2` |
44
44
  | `isDismissible` | `true`, `false` | If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the `Esc` key. | `false` |
45
+ | `isHeadingEmphasised` | `true`, `false` | If true, the modal heading will be displayed in an emphasised style. | `false` |
45
46
  | `isFooterPinned` | `true`, `false` | When false, the modal footer will scroll with the content inside the modal body. | `true` |
46
47
  | `isFullWidthBelowMid` | `true`, `false` | If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen. | `false` |
47
48
  | `isLoading` | `true`, `false` | When true, displays a loading spinner in the modal. | `false` |
@@ -53,7 +54,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
53
54
  | `position` | `"center"`, `"top"` | The position of the modal; this controls where it will appear on the page. | `"center"` |
54
55
  | `returnFocusAfterCloseSelector` | — | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal. | — |
55
56
  | `size` | `"small"`, `"medium"`, `"large"` | Determines the maximum width of the modal. Large modals will expand to fill the entire page at narrow viewports. | `"medium"` |
56
-
57
+ | `backgroundColor` | `"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"` | Sets the background color for the modal. | `"default"` |
57
58
 
58
59
  ### Slots
59
60
  | Slot | Description |
package/custom-elements.json CHANGED
@@ -36,6 +36,14 @@
36
36
  },
37
37
  "default": "['top', 'center']"
38
38
  },
39
+ {
40
+ "kind": "variable",
41
+ "name": "backgroundColors",
42
+ "type": {
43
+ "text": "[\n 'default',\n 'subtle',\n 'brand-01',\n 'brand-02',\n 'brand-03',\n 'brand-03-subtle',\n 'brand-04',\n 'brand-04-subtle',\n 'brand-05',\n 'brand-05-subtle',\n 'brand-06',\n 'brand-06-subtle',\n 'brand-08',\n 'brand-08-subtle',\n]"
44
+ },
45
+ "default": "[\n 'default',\n 'subtle',\n 'brand-01',\n 'brand-02',\n 'brand-03',\n 'brand-03-subtle',\n 'brand-04',\n 'brand-04-subtle',\n 'brand-05',\n 'brand-05-subtle',\n 'brand-06',\n 'brand-06-subtle',\n 'brand-08',\n 'brand-08-subtle',\n]"
46
+ },
39
47
  {
40
48
  "kind": "variable",
41
49
  "name": "ON_MODAL_CLOSE_EVENT",
@@ -87,7 +95,7 @@
87
95
  "type": {
88
96
  "text": "DefaultProps"
89
97
  },
90
- "default": "{\n hasBackButton: false,\n hasStackedActions: false,\n headingLevel: 'h2',\n isOpen: false,\n isDismissible: false,\n isFooterPinned: true,\n isFullWidthBelowMid: false,\n isLoading: false,\n position: 'center',\n size: 'medium',\n}"
98
+ "default": "{\n hasBackButton: false,\n hasStackedActions: false,\n headingLevel: 'h2',\n isOpen: false,\n isDismissible: false,\n isHeadingEmphasised: false,\n isFooterPinned: true,\n isFullWidthBelowMid: false,\n isLoading: false,\n position: 'center',\n size: 'medium',\n backgroundColor: 'default',\n}"
91
99
  }
92
100
  ],
93
101
  "exports": [
@@ -115,6 +123,14 @@
115
123
  "module": "src/defs.js"
116
124
  }
117
125
  },
126
+ {
127
+ "kind": "js",
128
+ "name": "backgroundColors",
129
+ "declaration": {
130
+ "name": "backgroundColors",
131
+ "module": "src/defs.js"
132
+ }
133
+ },
118
134
  {
119
135
  "kind": "js",
120
136
  "name": "ON_MODAL_CLOSE_EVENT",
@@ -224,6 +240,11 @@
224
240
  "name": "isDismissible",
225
241
  "privacy": "public"
226
242
  },
243
+ {
244
+ "kind": "field",
245
+ "name": "isHeadingEmphasised",
246
+ "privacy": "public"
247
+ },
227
248
  {
228
249
  "kind": "field",
229
250
  "name": "isFooterPinned",
@@ -278,6 +299,11 @@
278
299
  },
279
300
  "privacy": "public"
280
301
  },
302
+ {
303
+ "kind": "field",
304
+ "name": "backgroundColor",
305
+ "privacy": "public"
306
+ },
281
307
  {
282
308
  "kind": "field",
283
309
  "name": "_dialog",
@@ -500,6 +526,16 @@
500
526
  },
501
527
  "description": "Disables body scroll by locking the scroll container."
502
528
  },
529
+ {
530
+ "kind": "method",
531
+ "name": "_getHeaderButtonVariant",
532
+ "privacy": "private",
533
+ "return": {
534
+ "type": {
535
+ "text": "'ghost-secondary' | 'ghost-inverse'"
536
+ }
537
+ }
538
+ },
503
539
  {
504
540
  "kind": "method",
505
541
  "name": "renderCloseButton",
package/dist/index.d.ts CHANGED
@@ -26,6 +26,8 @@ declare type AriaProps = {
26
26
  loading?: string;
27
27
  };
28
28
 
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
+
29
31
  export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
30
32
 
31
33
  export declare const defaultProps: DefaultProps;
@@ -75,6 +77,10 @@ export declare type ModalProps = {
75
77
  *
76
78
  */
77
79
  isDismissible?: boolean;
80
+ /**
81
+ * When true, displays the heading with emphasised style
82
+ */
83
+ isHeadingEmphasised?: boolean;
78
84
  /**
79
85
  * When false, the modal footer will scroll with the content inside the modal body.
80
86
  */
@@ -104,6 +110,10 @@ export declare type ModalProps = {
104
110
  * The size of the modal; this controls how wide it will appear on the page.
105
111
  */
106
112
  size?: typeof sizes[number];
113
+ /**
114
+ * The background color for the modal.
115
+ */
116
+ backgroundColor?: typeof backgroundColors[number];
107
117
  };
108
118
 
109
119
  /**
@@ -159,6 +169,7 @@ export declare class PieModal extends PieElement implements ModalProps {
159
169
  hasBackButton: boolean;
160
170
  hasStackedActions: boolean;
161
171
  isDismissible: boolean;
172
+ isHeadingEmphasised: boolean;
162
173
  isFooterPinned: boolean;
163
174
  isFullWidthBelowMid: boolean;
164
175
  isLoading: boolean;
@@ -168,6 +179,7 @@ export declare class PieModal extends PieElement implements ModalProps {
168
179
  returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
169
180
  size: "medium" | "large" | "small";
170
181
  supportingAction: ModalProps['supportingAction'];
182
+ backgroundColor: "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";
171
183
  private _dialog;
172
184
  private _scrollableContainer;
173
185
  private _backButtonClicked;
@@ -219,6 +231,7 @@ export declare class PieModal extends PieElement implements ModalProps {
219
231
  * Disables body scroll by locking the scroll container.
220
232
  */
221
233
  private _disableBodyScroll;
234
+ private _getHeaderButtonVariant;
222
235
  /**
223
236
  * Template for the close button element. Called within the
224
237
  * main render function.
package/dist/index.js CHANGED
@@ -1,153 +1,170 @@
1
- import { LitElement as F, unsafeCSS as P, nothing as m } from "lit";
2
- import { html as s, unsafeStatic as T } from "lit/static-html.js";
3
- import { property as d, query as K } from "lit/decorators.js";
4
- import { classMap as A } from "lit/directives/class-map.js";
1
+ import { LitElement as P, unsafeCSS as T, nothing as m } from "lit";
2
+ import { html as s, unsafeStatic as K } from "lit/static-html.js";
3
+ import { property as d, query as I } from "lit/decorators.js";
4
+ import { classMap as C } from "lit/directives/class-map.js";
5
5
  import { ifDefined as h } from "lit/directives/if-defined.js";
6
6
  import "@justeattakeaway/pie-button";
7
7
  import "@justeattakeaway/pie-icon-button";
8
- import { requiredProperty as I, validPropertyValues as C, safeCustomElement as N, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
8
+ import { requiredProperty as H, validPropertyValues as _, safeCustomElement as N, dispatchCustomEvent as u } 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";
12
- const k = class k extends F {
12
+ const w = class w extends P {
13
13
  willUpdate() {
14
- this.getAttribute("v") || this.setAttribute("v", k.v);
14
+ this.getAttribute("v") || this.setAttribute("v", w.v);
15
15
  }
16
16
  };
17
- k.v = "1.18.2";
18
- let x = k;
19
- function W(o) {
20
- if (Array.isArray(o)) {
21
- for (var e = 0, t = Array(o.length); e < o.length; e++)
22
- t[e] = o[e];
17
+ w.v = "1.20.0";
18
+ let B = w;
19
+ function W(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
23
  return t;
24
24
  } else
25
- return Array.from(o);
25
+ return Array.from(e);
26
26
  }
27
- var B = !1;
27
+ var z = !1;
28
28
  if (typeof window < "u") {
29
29
  var S = {
30
30
  get passive() {
31
- B = !0;
31
+ z = !0;
32
32
  }
33
33
  };
34
34
  window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
35
35
  }
36
- var M = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], v = !1, D = -1, f = void 0, b = void 0, $ = function(e) {
36
+ var M = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], y = !1, $ = -1, b = void 0, f = void 0, D = function(o) {
37
37
  return g.some(function(t) {
38
- return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
38
+ return !!(t.options.allowTouchMove && t.options.allowTouchMove(o));
39
39
  });
40
- }, y = function(e) {
41
- var t = e || window.event;
42
- return $(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
43
- }, j = function(e) {
44
- if (b === void 0) {
45
- var t = !1, i = window.innerWidth - document.documentElement.clientWidth;
46
- t && i > 0 && (b = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
47
- }
48
- f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
49
- }, R = function() {
50
- b !== void 0 && (document.body.style.paddingRight = b, b = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
51
- }, V = function(e) {
52
- return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
53
- }, Y = function(e, t) {
54
- var i = e.targetTouches[0].clientY - D;
55
- return $(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || V(t) && i < 0 ? y(e) : (e.stopPropagation(), !0);
56
- }, H = function(e, t) {
57
- if (!e) {
40
+ }, k = function(o) {
41
+ var t = o || window.event;
42
+ return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
43
+ }, V = function(o) {
44
+ if (f === void 0) {
45
+ var t = !1, a = window.innerWidth - document.documentElement.clientWidth;
46
+ t && a > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = a + "px");
47
+ }
48
+ b === void 0 && (b = document.body.style.overflow, document.body.style.overflow = "hidden");
49
+ }, j = function() {
50
+ f !== void 0 && (document.body.style.paddingRight = f, f = void 0), b !== void 0 && (document.body.style.overflow = b, b = void 0);
51
+ }, R = function(o) {
52
+ return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
53
+ }, Y = function(o, t) {
54
+ var a = o.targetTouches[0].clientY - $;
55
+ return D(o.target) ? !1 : t && t.scrollTop === 0 && a > 0 || R(t) && a < 0 ? k(o) : (o.stopPropagation(), !0);
56
+ }, q = function(o, t) {
57
+ if (!o) {
58
58
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
59
59
  return;
60
60
  }
61
- if (!g.some(function(a) {
62
- return a.targetElement === e;
61
+ if (!g.some(function(n) {
62
+ return n.targetElement === o;
63
63
  })) {
64
- var i = {
65
- targetElement: e,
64
+ var a = {
65
+ targetElement: o,
66
66
  options: {}
67
67
  };
68
- g = [].concat(W(g), [i]), M ? (e.ontouchstart = function(a) {
69
- a.targetTouches.length === 1 && (D = a.targetTouches[0].clientY);
70
- }, e.ontouchmove = function(a) {
71
- a.targetTouches.length === 1 && Y(a, e);
72
- }, v || (document.addEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !0)) : j();
73
- }
74
- }, q = function(e) {
75
- if (!e) {
68
+ g = [].concat(W(g), [a]), M ? (o.ontouchstart = function(n) {
69
+ n.targetTouches.length === 1 && ($ = n.targetTouches[0].clientY);
70
+ }, o.ontouchmove = function(n) {
71
+ n.targetTouches.length === 1 && Y(n, o);
72
+ }, y || (document.addEventListener("touchmove", k, z ? { passive: !1 } : void 0), y = !0)) : V();
73
+ }
74
+ }, U = function(o) {
75
+ if (!o) {
76
76
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
77
77
  return;
78
78
  }
79
79
  g = g.filter(function(t) {
80
- return t.targetElement !== e;
81
- }), M ? (e.ontouchstart = null, e.ontouchmove = null, v && g.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : g.length || R();
80
+ return t.targetElement !== o;
81
+ }), M ? (o.ontouchstart = null, o.ontouchmove = null, y && g.length === 0 && (document.removeEventListener("touchmove", k, z ? { passive: !1 } : void 0), y = !1)) : g.length || j();
82
82
  };
83
- const U = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--dt-color-content-default);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::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);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 769px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-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(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}', X = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], J = ["top", "center"], L = "pie-modal-close", _ = "pie-modal-open", O = "pie-modal-back", Q = "pie-modal-leading-action-click", Z = "pie-modal-supporting-action-click", r = {
83
+ const X = '*,*: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);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-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)}@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-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-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-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)}', G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], Z = [
84
+ "default",
85
+ "subtle",
86
+ "brand-01",
87
+ "brand-02",
88
+ "brand-03",
89
+ "brand-03-subtle",
90
+ "brand-04",
91
+ "brand-04-subtle",
92
+ "brand-05",
93
+ "brand-05-subtle",
94
+ "brand-06",
95
+ "brand-06-subtle",
96
+ "brand-08",
97
+ "brand-08-subtle"
98
+ ], L = "pie-modal-close", x = "pie-modal-open", O = "pie-modal-back", oo = "pie-modal-leading-action-click", eo = "pie-modal-supporting-action-click", r = {
84
99
  hasBackButton: !1,
85
100
  hasStackedActions: !1,
86
101
  headingLevel: "h2",
87
102
  isOpen: !1,
88
103
  isDismissible: !1,
104
+ isHeadingEmphasised: !1,
89
105
  isFooterPinned: !0,
90
106
  isFullWidthBelowMid: !1,
91
107
  isLoading: !1,
92
108
  position: "center",
93
- size: "medium"
109
+ size: "medium",
110
+ backgroundColor: "default"
94
111
  };
95
- var ee = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, l = (o, e, t, i) => {
96
- for (var a = i > 1 ? void 0 : i ? oe(e, t) : e, c = o.length - 1, p; c >= 0; c--)
97
- (p = o[c]) && (a = (i ? p(e, t, a) : p(a)) || a);
98
- return i && a && ee(e, t, a), a;
112
+ var to = Object.defineProperty, ao = Object.getOwnPropertyDescriptor, l = (e, o, t, a) => {
113
+ for (var n = a > 1 ? void 0 : a ? ao(o, t) : o, c = e.length - 1, p; c >= 0; c--)
114
+ (p = e[c]) && (n = (a ? p(o, t, n) : p(n)) || n);
115
+ return a && n && to(o, t, n), n;
99
116
  };
100
- const w = "pie-modal";
101
- let n = class extends x {
117
+ const v = "pie-modal";
118
+ let i = class extends B {
102
119
  constructor() {
103
- super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (o) => {
104
- o.key === "Escape" && o.preventDefault();
105
- }, this._handleDialogLightDismiss = (o) => {
106
- if (!this.isDismissible || o.target !== o.currentTarget)
120
+ 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._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
121
+ e.key === "Escape" && e.preventDefault();
122
+ }, this._handleDialogLightDismiss = (e) => {
123
+ if (!this.isDismissible || e.target !== e.currentTarget)
107
124
  return;
108
- const e = this._dialog.getBoundingClientRect(), {
125
+ const o = this._dialog.getBoundingClientRect(), {
109
126
  top: t = 0,
110
- bottom: i = 0,
111
- left: a = 0,
127
+ bottom: a = 0,
128
+ left: n = 0,
112
129
  right: c = 0
113
- } = e || {};
114
- if (t === 0 && i === 0 && a === 0 && c === 0)
130
+ } = o || {};
131
+ if (t === 0 && a === 0 && n === 0 && c === 0)
115
132
  return;
116
- (o.clientY < t || o.clientY > i || o.clientX < a || o.clientX > c) && (this.isOpen = !1);
133
+ (e.clientY < t || e.clientY > a || e.clientX < n || e.clientX > c) && (this.isOpen = !1);
117
134
  };
118
135
  }
119
136
  get _modalScrollContainer() {
120
- var o;
121
- return this._scrollableContainer || (this._scrollableContainer = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
137
+ var e;
138
+ return this._scrollableContainer || (this._scrollableContainer = (e = this._dialog) == null ? void 0 : e.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
122
139
  }
123
140
  connectedCallback() {
124
141
  super.connectedCallback(), this._abortController = new AbortController();
125
- const { signal: o } = this._abortController;
126
- this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), this._setupEscKeyListener(), document.addEventListener(_, (e) => this._handleModalOpened(e), { signal: o }), document.addEventListener(L, (e) => this._handleModalClosed(e), { signal: o }), document.addEventListener(O, (e) => this._handleModalClosed(e), { signal: o });
142
+ const { signal: e } = this._abortController;
143
+ this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(x, (o) => this._handleModalOpened(o), { signal: e }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: e }), document.addEventListener(O, (o) => this._handleModalClosed(o), { signal: e });
127
144
  }
128
145
  disconnectedCallback() {
129
146
  super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
130
147
  }
131
- async firstUpdated(o) {
132
- (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
148
+ async firstUpdated(e) {
149
+ (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((a) => a.default)).registerDialog(this._dialog);
133
150
  const { signal: t } = this._abortController;
134
151
  this._dialog.addEventListener("close", () => {
135
152
  this.isOpen = !1;
136
- }, { signal: t }), this._handleModalOpenStateOnFirstRender(o);
153
+ }, { signal: t }), this._handleModalOpenStateOnFirstRender(e);
137
154
  }
138
- updated(o) {
139
- this._handleModalOpenStateChanged(o), this._handleIsDismissibleChanged(o);
155
+ updated(e) {
156
+ this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
140
157
  }
141
- _handleIsDismissibleChanged(o) {
142
- const e = o.get("isDismissible"), t = this.isDismissible;
143
- !e && t && this._removeEscKeyEventListener(), e && !t && this._setupEscKeyListener();
158
+ _handleIsDismissibleChanged(e) {
159
+ const o = e.get("isDismissible"), t = this.isDismissible;
160
+ !o && t && this._removeEscKeyEventListener(), o && !t && this._setupEscKeyListener();
144
161
  }
145
162
  /**
146
163
  * Opens the dialog element and disables page scrolling
147
164
  */
148
- _handleModalOpened(o) {
149
- const { targetModal: e } = o.detail;
150
- if (e === this) {
165
+ _handleModalOpened(e) {
166
+ const { targetModal: o } = e.detail;
167
+ if (o === this) {
151
168
  if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
152
169
  return;
153
170
  this._dialog.showModal(), requestAnimationFrame(() => {
@@ -158,9 +175,9 @@ let n = class extends x {
158
175
  /**
159
176
  * Closes the dialog element and re-enables page scrolling
160
177
  */
161
- _handleModalClosed(o) {
162
- const { targetModal: e } = o.detail;
163
- e === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
178
+ _handleModalClosed(e) {
179
+ const { targetModal: o } = e.detail;
180
+ o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
164
181
  }
165
182
  /**
166
183
  * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
@@ -168,49 +185,52 @@ let n = class extends x {
168
185
  _setupEscKeyListener() {
169
186
  if (!this._escKeyAbortController && !this.isDismissible) {
170
187
  this._escKeyAbortController = new AbortController();
171
- const { signal: o } = this._escKeyAbortController;
172
- document.addEventListener("keydown", (e) => this._preventModalKeyboardDismissal(e), { signal: o });
188
+ const { signal: e } = this._escKeyAbortController;
189
+ document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: e });
173
190
  }
174
191
  }
175
192
  /**
176
193
  * Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
177
194
  */
178
195
  _removeEscKeyEventListener() {
179
- var o;
180
- (o = this._escKeyAbortController) == null || o.abort(), this._escKeyAbortController = null;
196
+ var e;
197
+ (e = this._escKeyAbortController) == null || e.abort(), this._escKeyAbortController = null;
181
198
  }
182
199
  // Handles the value of the isOpen property on first render of the component
183
- _handleModalOpenStateOnFirstRender(o) {
184
- o.get("isOpen") === void 0 && this.isOpen && u(this, _, { targetModal: this });
200
+ _handleModalOpenStateOnFirstRender(e) {
201
+ e.get("isOpen") === void 0 && this.isOpen && u(this, x, { targetModal: this });
185
202
  }
186
203
  // Handles changes to the modal isOpen property by dispatching any appropriate events
187
- _handleModalOpenStateChanged(o) {
188
- const e = o.get("isOpen");
189
- e !== void 0 && (e ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, O, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, _, { targetModal: this }));
204
+ _handleModalOpenStateChanged(e) {
205
+ const o = e.get("isOpen");
206
+ o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, O, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, x, { targetModal: this }));
190
207
  }
191
- _handleActionClick(o) {
192
- o === "leading" ? (this._dialog.close("leading"), u(this, Q, { targetModal: this })) : o === "supporting" && (this._dialog.close("supporting"), u(this, Z, { targetModal: this }));
208
+ _handleActionClick(e) {
209
+ e === "leading" ? (this._dialog.close("leading"), u(this, oo, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), u(this, eo, { targetModal: this }));
193
210
  }
194
211
  /**
195
212
  * Return focus to the specified element, providing the selector is valid
196
213
  * and the chosen element can be found.
197
214
  */
198
215
  _returnFocus() {
199
- var e, t;
200
- const o = (e = this.returnFocusAfterCloseSelector) == null ? void 0 : e.trim();
201
- o && ((t = document.querySelector(o)) == null || t.focus());
216
+ var o, t;
217
+ const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
218
+ e && ((t = document.querySelector(e)) == null || t.focus());
202
219
  }
203
220
  /**
204
221
  * Enables body scroll by unlocking the scroll container.
205
222
  */
206
223
  _enableBodyScroll() {
207
- this._scrollableContainer && q(this._scrollableContainer);
224
+ this._scrollableContainer && U(this._scrollableContainer);
208
225
  }
209
226
  /**
210
227
  * Disables body scroll by locking the scroll container.
211
228
  */
212
229
  _disableBodyScroll() {
213
- this._modalScrollContainer && H(this._modalScrollContainer);
230
+ this._modalScrollContainer && q(this._modalScrollContainer);
231
+ }
232
+ _getHeaderButtonVariant() {
233
+ return this.backgroundColor === "brand-06" ? "ghost-inverse" : "ghost-secondary";
214
234
  }
215
235
  /**
216
236
  * Template for the close button element. Called within the
@@ -219,18 +239,21 @@ let n = class extends x {
219
239
  * @private
220
240
  */
221
241
  renderCloseButton() {
222
- var o, e;
223
- return this.isDismissible ? s`
242
+ var o, t;
243
+ if (!this.isDismissible)
244
+ return m;
245
+ const e = this._getHeaderButtonVariant();
246
+ return s`
224
247
  <pie-icon-button
225
248
  @click="${() => {
226
249
  this.isOpen = !1;
227
250
  }}"
228
- variant="ghost-secondary"
251
+ variant="${e}"
229
252
  class="c-modal-closeBtn"
230
- .aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (e = this.aria) == null ? void 0 : e.close } : m}
253
+ .aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (t = this.aria) == null ? void 0 : t.close } : m}
231
254
  data-test-id="modal-close-button">
232
255
  <icon-close></icon-close>
233
- </pie-icon-button>` : m;
256
+ </pie-icon-button>`;
234
257
  }
235
258
  /**
236
259
  * Template for the back button element. Called within the
@@ -239,19 +262,22 @@ let n = class extends x {
239
262
  * @private
240
263
  */
241
264
  renderBackButton() {
242
- var o, e;
243
- return this.hasBackButton ? s`
265
+ var o, t;
266
+ if (!this.hasBackButton)
267
+ return m;
268
+ const e = this._getHeaderButtonVariant();
269
+ return s`
244
270
  <pie-icon-button
245
271
  @click="${() => {
246
272
  this._backButtonClicked = !0, this.isOpen = !1;
247
273
  }}"
248
- variant="ghost-secondary"
274
+ variant="${e}"
249
275
  class="c-modal-backBtn"
250
- .aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (e = this.aria) == null ? void 0 : e.back } : m}
276
+ .aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (t = this.aria) == null ? void 0 : t.back } : m}
251
277
  data-test-id="modal-back-button">
252
278
  <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
253
279
  </pie-icon-button>
254
- ` : m;
280
+ `;
255
281
  }
256
282
  /**
257
283
  * Renders the "leadingAction" button if the text is provided.
@@ -263,16 +289,16 @@ let n = class extends x {
263
289
  * @private
264
290
  */
265
291
  renderLeadingAction() {
266
- const { ariaLabel: o, text: e, variant: t = "primary" } = this.leadingAction || {};
267
- return e ? s`
292
+ const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
293
+ return o ? s`
268
294
  <pie-button
269
295
  variant="${t}"
270
- aria-label="${h(o)}"
296
+ aria-label="${h(e)}"
271
297
  type="submit"
272
298
  ?isFullWidth="${this.hasStackedActions}"
273
299
  @click="${() => this._handleActionClick("leading")}"
274
300
  data-test-id="modal-leading-action">
275
- ${e}
301
+ ${o}
276
302
  </pie-button>
277
303
  ` : m;
278
304
  }
@@ -287,17 +313,17 @@ let n = class extends x {
287
313
  * @private
288
314
  */
289
315
  renderSupportingAction() {
290
- var i;
291
- const { ariaLabel: o, text: e, variant: t = "ghost" } = this.supportingAction || {};
292
- return !e || !((i = this.leadingAction) != null && i.text) ? m : s`
316
+ var a;
317
+ const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
318
+ return !o || !((a = this.leadingAction) != null && a.text) ? m : s`
293
319
  <pie-button
294
320
  variant="${t}"
295
- aria-label="${h(o)}"
321
+ aria-label="${h(e)}"
296
322
  type="reset"
297
323
  ?isFullWidth="${this.hasStackedActions}"
298
324
  @click="${() => this._handleActionClick("supporting")}"
299
325
  data-test-id="modal-supporting-action">
300
- ${e}
326
+ ${o}
301
327
  </pie-button>
302
328
  `;
303
329
  }
@@ -308,14 +334,14 @@ let n = class extends x {
308
334
  * @private
309
335
  */
310
336
  renderModalFooter() {
311
- var i, a;
312
- const o = (i = this.leadingAction) == null ? void 0 : i.text;
313
- o || (a = this.supportingAction) != null && a.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.");
314
- const e = {
337
+ var a, n;
338
+ const e = (a = this.leadingAction) == null ? void 0 : a.text;
339
+ e || (n = this.supportingAction) != null && n.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.");
340
+ const o = {
315
341
  "c-modal-footer": !0,
316
342
  "c-modal-footer--stackedActions": this.hasStackedActions
317
- }, t = o ? s`
318
- <footer class="${A(e)}" data-test-id="pie-modal-footer">
343
+ }, t = e ? s`
344
+ <footer class="${C(o)}" data-test-id="pie-modal-footer">
319
345
  ${this.renderLeadingAction()}
320
346
  ${this.renderSupportingAction()}
321
347
  </footer>` : m;
@@ -329,7 +355,10 @@ let n = class extends x {
329
355
  * @private
330
356
  */
331
357
  renderLoadingSpinner() {
332
- return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : m;
358
+ if (!this.isLoading)
359
+ return m;
360
+ const e = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
361
+ return s`<pie-spinner size="xlarge" variant="${e}"></pie-spinner>`;
333
362
  }
334
363
  /**
335
364
  * Renders the modal inner content and footer of the modal.
@@ -350,39 +379,44 @@ let n = class extends x {
350
379
  * @private
351
380
  */
352
381
  renderHeading() {
353
- const { heading: o, headingLevel: e } = this, t = T(e);
382
+ const { heading: e, headingLevel: o, isHeadingEmphasised: t } = this, a = K(o);
354
383
  return s`
355
- <${t} id="modal-heading" class="c-modal-heading">
356
- ${o}
357
- </${t}>
384
+ <${a} id="modal-heading" class="${C({
385
+ "c-modal-heading": !0,
386
+ "c-modal-heading--emphasised": t
387
+ })}">
388
+ ${e}
389
+ </${a}>
358
390
  `;
359
391
  }
360
392
  render() {
361
393
  const {
362
- aria: o,
363
- isDismissible: e,
394
+ aria: e,
395
+ isDismissible: o,
364
396
  isFooterPinned: t,
365
- isFullWidthBelowMid: i,
366
- isLoading: a,
397
+ isFullWidthBelowMid: a,
398
+ isLoading: n,
367
399
  position: c,
368
- size: p
369
- } = this, E = {
400
+ size: p,
401
+ backgroundColor: E
402
+ } = this, F = {
370
403
  "c-modal": !0,
371
404
  [`c-modal--${p}`]: !0,
372
405
  "c-modal--top": c === "top",
373
- "c-modal--dismissible": e,
374
- "c-modal--loading": a,
406
+ "c-modal--dismissible": o,
407
+ "c-modal--loading": n,
375
408
  "c-modal--pinnedFooter": t,
376
- "c-modal--fullWidthBelowMid": i
377
- }, z = a && (o == null ? void 0 : o.loading) || void 0;
409
+ "c-modal--fullWidthBelowMid": a,
410
+ [`c-modal--bg-${E}`]: !0
411
+ }, A = n && (e == null ? void 0 : e.loading) || void 0;
378
412
  return s`
379
413
  <dialog
380
414
  id="dialog"
381
- aria-label="${h(z)}"
382
- aria-labelledby="${h(z ? void 0 : "modal-heading")}"
383
- class="${A(E)}"
415
+ aria-label="${h(A)}"
416
+ aria-labelledby="${h(A ? void 0 : "modal-heading")}"
417
+ class="${C(F)}"
384
418
  aria-live="polite"
385
- aria-busy="${a ? "true" : "false"}"
419
+ aria-busy="${n ? "true" : "false"}"
386
420
  data-test-id="pie-modal">
387
421
  <header class="c-modal-header" data-test-id="modal-header">
388
422
  ${this.renderBackButton()}
@@ -398,71 +432,79 @@ let n = class extends x {
398
432
  </dialog>`;
399
433
  }
400
434
  };
401
- n.styles = P(U);
435
+ i.styles = T(X);
402
436
  l([
403
437
  d({ type: Object })
404
- ], n.prototype, "aria", 2);
438
+ ], i.prototype, "aria", 2);
405
439
  l([
406
440
  d({ type: String }),
407
- I(w)
408
- ], n.prototype, "heading", 2);
441
+ H(v)
442
+ ], i.prototype, "heading", 2);
409
443
  l([
410
444
  d({ type: String }),
411
- C(w, X, r.headingLevel)
412
- ], n.prototype, "headingLevel", 2);
445
+ _(v, G, r.headingLevel)
446
+ ], i.prototype, "headingLevel", 2);
413
447
  l([
414
448
  d({ type: Boolean })
415
- ], n.prototype, "hasBackButton", 2);
449
+ ], i.prototype, "hasBackButton", 2);
416
450
  l([
417
451
  d({ type: Boolean })
418
- ], n.prototype, "hasStackedActions", 2);
452
+ ], i.prototype, "hasStackedActions", 2);
419
453
  l([
420
454
  d({ type: Boolean, reflect: !0 })
421
- ], n.prototype, "isDismissible", 2);
455
+ ], i.prototype, "isDismissible", 2);
422
456
  l([
423
457
  d({ type: Boolean })
424
- ], n.prototype, "isFooterPinned", 2);
458
+ ], i.prototype, "isHeadingEmphasised", 2);
425
459
  l([
426
460
  d({ type: Boolean })
427
- ], n.prototype, "isFullWidthBelowMid", 2);
461
+ ], i.prototype, "isFooterPinned", 2);
462
+ l([
463
+ d({ type: Boolean })
464
+ ], i.prototype, "isFullWidthBelowMid", 2);
428
465
  l([
429
466
  d({ type: Boolean, reflect: !0 })
430
- ], n.prototype, "isLoading", 2);
467
+ ], i.prototype, "isLoading", 2);
431
468
  l([
432
469
  d({ type: Boolean })
433
- ], n.prototype, "isOpen", 2);
470
+ ], i.prototype, "isOpen", 2);
434
471
  l([
435
472
  d({ type: Object })
436
- ], n.prototype, "leadingAction", 2);
473
+ ], i.prototype, "leadingAction", 2);
437
474
  l([
438
475
  d({ type: String }),
439
- C(w, J, r.position)
440
- ], n.prototype, "position", 2);
476
+ _(v, Q, r.position)
477
+ ], i.prototype, "position", 2);
441
478
  l([
442
479
  d({ type: String })
443
- ], n.prototype, "returnFocusAfterCloseSelector", 2);
480
+ ], i.prototype, "returnFocusAfterCloseSelector", 2);
444
481
  l([
445
482
  d({ type: String }),
446
- C(w, G, r.size)
447
- ], n.prototype, "size", 2);
483
+ _(v, J, r.size)
484
+ ], i.prototype, "size", 2);
448
485
  l([
449
486
  d({ type: Object })
450
- ], n.prototype, "supportingAction", 2);
487
+ ], i.prototype, "supportingAction", 2);
488
+ l([
489
+ d({ type: String }),
490
+ _(v, Z, r.backgroundColor)
491
+ ], i.prototype, "backgroundColor", 2);
451
492
  l([
452
- K("dialog")
453
- ], n.prototype, "_dialog", 2);
454
- n = l([
493
+ I("dialog")
494
+ ], i.prototype, "_dialog", 2);
495
+ i = l([
455
496
  N("pie-modal")
456
- ], n);
497
+ ], i);
457
498
  export {
458
499
  O as ON_MODAL_BACK_EVENT,
459
500
  L as ON_MODAL_CLOSE_EVENT,
460
- Q as ON_MODAL_LEADING_ACTION_CLICK,
461
- _ as ON_MODAL_OPEN_EVENT,
462
- Z as ON_MODAL_SUPPORTING_ACTION_CLICK,
463
- n as PieModal,
501
+ oo as ON_MODAL_LEADING_ACTION_CLICK,
502
+ x as ON_MODAL_OPEN_EVENT,
503
+ eo as ON_MODAL_SUPPORTING_ACTION_CLICK,
504
+ i as PieModal,
505
+ Z as backgroundColors,
464
506
  r as defaultProps,
465
- X as headingLevels,
466
- J as positions,
467
- G as sizes
507
+ G as headingLevels,
508
+ Q as positions,
509
+ J as sizes
468
510
  };
package/dist/react.d.ts CHANGED
@@ -27,6 +27,8 @@ declare type AriaProps = {
27
27
  loading?: string;
28
28
  };
29
29
 
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
+
30
32
  export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
31
33
 
32
34
  export declare const defaultProps: DefaultProps;
@@ -72,6 +74,10 @@ export declare type ModalProps = {
72
74
  *
73
75
  */
74
76
  isDismissible?: boolean;
77
+ /**
78
+ * When true, displays the heading with emphasised style
79
+ */
80
+ isHeadingEmphasised?: boolean;
75
81
  /**
76
82
  * When false, the modal footer will scroll with the content inside the modal body.
77
83
  */
@@ -101,6 +107,10 @@ export declare type ModalProps = {
101
107
  * The size of the modal; this controls how wide it will appear on the page.
102
108
  */
103
109
  size?: typeof sizes[number];
110
+ /**
111
+ * The background color for the modal.
112
+ */
113
+ backgroundColor?: typeof backgroundColors[number];
104
114
  };
105
115
 
106
116
  /**
@@ -158,6 +168,7 @@ declare class PieModal_2 extends PieElement implements ModalProps {
158
168
  hasBackButton: boolean;
159
169
  hasStackedActions: boolean;
160
170
  isDismissible: boolean;
171
+ isHeadingEmphasised: boolean;
161
172
  isFooterPinned: boolean;
162
173
  isFullWidthBelowMid: boolean;
163
174
  isLoading: boolean;
@@ -167,6 +178,7 @@ declare class PieModal_2 extends PieElement implements ModalProps {
167
178
  returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
168
179
  size: "medium" | "large" | "small";
169
180
  supportingAction: ModalProps['supportingAction'];
181
+ backgroundColor: "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";
170
182
  private _dialog;
171
183
  private _scrollableContainer;
172
184
  private _backButtonClicked;
@@ -218,6 +230,7 @@ declare class PieModal_2 extends PieElement implements ModalProps {
218
230
  * Disables body scroll by locking the scroll container.
219
231
  */
220
232
  private _disableBodyScroll;
233
+ private _getHeaderButtonVariant;
221
234
  /**
222
235
  * Template for the close button element. Called within the
223
236
  * main render function.
package/dist/react.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as o from "react";
2
2
  import { createComponent as e } from "@lit/react";
3
- import { PieModal as i } from "./index.js";
4
- import { ON_MODAL_BACK_EVENT as c, ON_MODAL_CLOSE_EVENT as m, ON_MODAL_LEADING_ACTION_CLICK as s, ON_MODAL_OPEN_EVENT as _, ON_MODAL_SUPPORTING_ACTION_CLICK as O, defaultProps as M, headingLevels as N, positions as r, sizes as P } from "./index.js";
5
- const a = e({
3
+ import { PieModal as a } from "./index.js";
4
+ import { ON_MODAL_BACK_EVENT as c, ON_MODAL_CLOSE_EVENT as s, ON_MODAL_LEADING_ACTION_CLICK as m, ON_MODAL_OPEN_EVENT as _, ON_MODAL_SUPPORTING_ACTION_CLICK as r, backgroundColors as O, defaultProps as M, headingLevels as N, positions as C, sizes as P } from "./index.js";
5
+ const i = e({
6
6
  displayName: "PieModal",
7
- elementClass: i,
7
+ elementClass: a,
8
8
  react: o,
9
9
  tagName: "pie-modal",
10
10
  events: {
@@ -19,16 +19,17 @@ const a = e({
19
19
  onPieModalSupportingActionClick: "pie-modal-supporting-action-click"
20
20
  // when the modal supporting action is clicked.
21
21
  }
22
- }), t = a;
22
+ }), t = i;
23
23
  export {
24
24
  c as ON_MODAL_BACK_EVENT,
25
- m as ON_MODAL_CLOSE_EVENT,
26
- s as ON_MODAL_LEADING_ACTION_CLICK,
25
+ s as ON_MODAL_CLOSE_EVENT,
26
+ m as ON_MODAL_LEADING_ACTION_CLICK,
27
27
  _ as ON_MODAL_OPEN_EVENT,
28
- O as ON_MODAL_SUPPORTING_ACTION_CLICK,
28
+ r as ON_MODAL_SUPPORTING_ACTION_CLICK,
29
29
  t as PieModal,
30
+ O as backgroundColors,
30
31
  M as defaultProps,
31
32
  N as headingLevels,
32
- r as positions,
33
+ C as positions,
33
34
  P as sizes
34
35
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "1.18.2",
3
+ "version": "1.20.0",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -44,12 +44,12 @@
44
44
  "license": "Apache-2.0",
45
45
  "devDependencies": {
46
46
  "@custom-elements-manifest/analyzer": "0.9.0",
47
- "@justeat/pie-design-tokens": "7.9.0",
48
- "@justeattakeaway/pie-button": "1.9.4",
47
+ "@justeat/pie-design-tokens": "7.10.0",
48
+ "@justeattakeaway/pie-button": "1.10.0",
49
49
  "@justeattakeaway/pie-components-config": "0.21.0",
50
- "@justeattakeaway/pie-css": "0.24.0",
50
+ "@justeattakeaway/pie-css": "0.25.0",
51
51
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
52
- "@justeattakeaway/pie-text-input": "0.29.7",
52
+ "@justeattakeaway/pie-text-input": "0.29.8",
53
53
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
54
54
  "@types/body-scroll-lock": "3.1.2",
55
55
  "cem-plugin-module-file-extensions": "0.0.5"
@@ -58,11 +58,11 @@
58
58
  "extends": "../../../package.json"
59
59
  },
60
60
  "dependencies": {
61
- "@justeattakeaway/pie-button": "1.9.4",
62
- "@justeattakeaway/pie-icon-button": "2.3.2",
63
- "@justeattakeaway/pie-icons-webc": "1.17.0",
64
- "@justeattakeaway/pie-spinner": "1.3.4",
65
- "@justeattakeaway/pie-webc-core": "4.0.0",
61
+ "@justeattakeaway/pie-button": "1.10.0",
62
+ "@justeattakeaway/pie-icon-button": "2.3.3",
63
+ "@justeattakeaway/pie-icons-webc": "1.17.1",
64
+ "@justeattakeaway/pie-spinner": "1.3.5",
65
+ "@justeattakeaway/pie-webc-core": "5.0.0",
66
66
  "body-scroll-lock": "3.1.5",
67
67
  "dialog-polyfill": "0.5.6"
68
68
  },
package/src/defs.ts CHANGED
@@ -29,6 +29,23 @@ type ActionProps = {
29
29
  ariaLabel?: string;
30
30
  };
31
31
 
32
+ export const backgroundColors = [
33
+ 'default',
34
+ 'subtle',
35
+ 'brand-01',
36
+ 'brand-02',
37
+ 'brand-03',
38
+ 'brand-03-subtle',
39
+ 'brand-04',
40
+ 'brand-04-subtle',
41
+ 'brand-05',
42
+ 'brand-05-subtle',
43
+ 'brand-06',
44
+ 'brand-06-subtle',
45
+ 'brand-08',
46
+ 'brand-08-subtle',
47
+ ] as const;
48
+
32
49
  export type ModalProps = {
33
50
  /**
34
51
  * The ARIA labels used for the modal close and back buttons, as well as for the loading state.
@@ -73,6 +90,11 @@ export type ModalProps = {
73
90
  */
74
91
  isDismissible?: boolean;
75
92
 
93
+ /**
94
+ * When true, displays the heading with emphasised style
95
+ */
96
+ isHeadingEmphasised?: boolean;
97
+
76
98
  /**
77
99
  * When false, the modal footer will scroll with the content inside the modal body.
78
100
  */
@@ -112,6 +134,11 @@ export type ModalProps = {
112
134
  * The size of the modal; this controls how wide it will appear on the page.
113
135
  */
114
136
  size?: typeof sizes[number];
137
+
138
+ /**
139
+ * The background color for the modal.
140
+ */
141
+ backgroundColor?: typeof backgroundColors[number];
115
142
  };
116
143
 
117
144
  /**
@@ -159,9 +186,11 @@ export const defaultProps: DefaultProps = {
159
186
  headingLevel: 'h2',
160
187
  isOpen: false,
161
188
  isDismissible: false,
189
+ isHeadingEmphasised: false,
162
190
  isFooterPinned: true,
163
191
  isFullWidthBelowMid: false,
164
192
  isLoading: false,
165
193
  position: 'center',
166
194
  size: 'medium',
195
+ backgroundColor: 'default',
167
196
  };
package/src/index.ts CHANGED
@@ -27,6 +27,7 @@ import {
27
27
  headingLevels,
28
28
  positions,
29
29
  sizes,
30
+ backgroundColors,
30
31
  defaultProps,
31
32
  ON_MODAL_BACK_EVENT,
32
33
  ON_MODAL_CLOSE_EVENT,
@@ -77,6 +78,9 @@ export class PieModal extends PieElement implements ModalProps {
77
78
  @property({ type: Boolean, reflect: true })
78
79
  public isDismissible = defaultProps.isDismissible;
79
80
 
81
+ @property({ type: Boolean })
82
+ public isHeadingEmphasised = defaultProps.isHeadingEmphasised;
83
+
80
84
  @property({ type: Boolean })
81
85
  public isFooterPinned = defaultProps.isFooterPinned;
82
86
 
@@ -106,6 +110,10 @@ export class PieModal extends PieElement implements ModalProps {
106
110
  @property({ type: Object })
107
111
  public supportingAction: ModalProps['supportingAction'];
108
112
 
113
+ @property({ type: String })
114
+ @validPropertyValues(componentSelector, backgroundColors, defaultProps.backgroundColor)
115
+ public backgroundColor = defaultProps.backgroundColor;
116
+
109
117
  @query('dialog')
110
118
  private _dialog!: HTMLDialogElement;
111
119
 
@@ -339,6 +347,13 @@ export class PieModal extends PieElement implements ModalProps {
339
347
  }
340
348
  }
341
349
 
350
+ private _getHeaderButtonVariant (): 'ghost-secondary' | 'ghost-inverse' {
351
+ const isInverted = this.backgroundColor === 'brand-06';
352
+ const variant = isInverted ? 'ghost-inverse' : 'ghost-secondary';
353
+
354
+ return variant;
355
+ }
356
+
342
357
  /**
343
358
  * Template for the close button element. Called within the
344
359
  * main render function.
@@ -350,10 +365,12 @@ export class PieModal extends PieElement implements ModalProps {
350
365
  return nothing;
351
366
  }
352
367
 
368
+ const variant = this._getHeaderButtonVariant();
369
+
353
370
  return html`
354
371
  <pie-icon-button
355
372
  @click="${() => { this.isOpen = false; }}"
356
- variant="ghost-secondary"
373
+ variant="${variant}"
357
374
  class="c-modal-closeBtn"
358
375
  .aria=${ifDefined(this.aria?.close) ? { label: this.aria?.close } : nothing}
359
376
  data-test-id="modal-close-button">
@@ -372,10 +389,12 @@ export class PieModal extends PieElement implements ModalProps {
372
389
  return nothing;
373
390
  }
374
391
 
392
+ const variant = this._getHeaderButtonVariant();
393
+
375
394
  return html`
376
395
  <pie-icon-button
377
396
  @click="${() => { this._backButtonClicked = true; this.isOpen = false; }}"
378
- variant="ghost-secondary"
397
+ variant="${variant}"
379
398
  class="c-modal-backBtn"
380
399
  .aria=${ifDefined(this.aria?.back) ? { label: this.aria?.back } : nothing}
381
400
  data-test-id="modal-back-button">
@@ -481,7 +500,9 @@ export class PieModal extends PieElement implements ModalProps {
481
500
  return nothing;
482
501
  }
483
502
 
484
- return html`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>`;
503
+ const variant = this.backgroundColor === 'brand-06' ? 'inverse' : 'secondary';
504
+
505
+ return html`<pie-spinner size="xlarge" variant="${variant}"></pie-spinner>`;
485
506
  }
486
507
 
487
508
  /**
@@ -504,11 +525,16 @@ export class PieModal extends PieElement implements ModalProps {
504
525
  * @private
505
526
  */
506
527
  private renderHeading (): TemplateResult {
507
- const { heading, headingLevel } = this;
528
+ const { heading, headingLevel, isHeadingEmphasised } = this;
508
529
  const headingTag = unsafeStatic(headingLevel);
509
530
 
531
+ const headingClasses = {
532
+ 'c-modal-heading': true,
533
+ 'c-modal-heading--emphasised': isHeadingEmphasised,
534
+ };
535
+
510
536
  return html`
511
- <${headingTag} id="modal-heading" class="c-modal-heading">
537
+ <${headingTag} id="modal-heading" class="${classMap(headingClasses)}">
512
538
  ${heading}
513
539
  </${headingTag}>
514
540
  `;
@@ -523,6 +549,7 @@ export class PieModal extends PieElement implements ModalProps {
523
549
  isLoading,
524
550
  position,
525
551
  size,
552
+ backgroundColor,
526
553
  } = this;
527
554
 
528
555
  const modalClasses = {
@@ -533,6 +560,7 @@ export class PieModal extends PieElement implements ModalProps {
533
560
  'c-modal--loading': isLoading,
534
561
  'c-modal--pinnedFooter': isFooterPinned,
535
562
  'c-modal--fullWidthBelowMid': isFullWidthBelowMid,
563
+ [`c-modal--bg-${backgroundColor}`]: true,
536
564
  };
537
565
 
538
566
  const ariaLabelForLoading = (isLoading && aria?.loading) || undefined;
package/src/modal.scss CHANGED
@@ -13,6 +13,7 @@
13
13
  // The base modal defaults
14
14
  --modal-border-radius: var(--dt-radius-rounded-d);
15
15
  --modal-font: var(--dt-font-interactive-l-family);
16
+ --modal-content-color: var(--dt-color-content-default);
16
17
  --modal-bg-color: var(--dt-color-container-default);
17
18
  --modal-elevation: var(--dt-elevation-below-20);
18
19
 
@@ -42,7 +43,7 @@
42
43
  border: none;
43
44
  box-shadow: var(--modal-elevation);
44
45
  font-family: var(--modal-font);
45
- color: var(--dt-color-content-default);
46
+ color: var(--modal-content-color);
46
47
  background-color: var(--modal-bg-color);
47
48
 
48
49
  padding: 0;
@@ -180,23 +181,37 @@
180
181
  --modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);
181
182
  --modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);
182
183
  --modal-header-font-weight: var(--dt-font-heading-m-weight);
184
+ --modal-header-font-style: normal;
183
185
 
184
186
  font-size: var(--modal-header-font-size);
185
187
  line-height: var(--modal-header-font-line-height);
186
188
  font-weight: var(--modal-header-font-weight);
189
+ font-style: var(--modal-header-font-style);
187
190
  margin: 0;
188
191
  grid-area: heading;
189
192
 
190
193
  margin-inline-start: var(--dt-spacing-d);
191
194
  margin-inline-end: var(--dt-spacing-d);
192
- margin-block: 14px; // This is deliberately not a custom property
195
+ margin-block: 16px; // This is deliberately not a custom property
193
196
 
194
197
  @include media('>md') {
195
198
  --modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
196
199
  --modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
197
200
  margin-inline-start: var(--dt-spacing-e);
198
201
  margin-inline-end: var(--dt-spacing-e);
199
- margin-block: 20px; // This is deliberately not a custom property
202
+ margin-block: 22px; // This is deliberately not a custom property
203
+ }
204
+
205
+ &.c-modal-heading--emphasised {
206
+ --modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--narrow) * 1px);
207
+ --modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);
208
+ --modal-header-font-weight: var(--dt-font-heading-l-italic-weight);
209
+ --modal-header-font-style: var(--dt-font-heading-l-italic-font-style);
210
+
211
+ @include media('>md') {
212
+ --modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--wide) * 1px);
213
+ --modal-header-font-line-height: calc(var(--dt-font-heading-l-italic-line-height--wide) * 1px);
214
+ }
200
215
  }
201
216
  }
202
217
 
@@ -304,7 +319,7 @@
304
319
  overflow-y: auto;
305
320
 
306
321
  // These are the shadows used to indicate scrolling above and below content
307
- --bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;
322
+ --bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--modal-bg-color) 70%) 0 100%;
308
323
  --bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
309
324
 
310
325
  // Sizes of the scroll shadows
@@ -360,4 +375,35 @@
360
375
  .c-modal-backBtn-icon:dir(rtl) {
361
376
  transform: rotate(180deg);
362
377
  }
378
+
379
+ // Additional background colors
380
+ // TODO: This will be implemented by DSW-3541 since this color only applies to image slot background, not the whole modal
381
+ // &.c-modal--bg-subtle { --modal-bg-color: var(--dt-color-container-subtle); }
382
+
383
+ &.c-modal--bg-brand-01 { --modal-bg-color: var(--dt-color-support-brand-01); }
384
+
385
+ &.c-modal--bg-brand-02 { --modal-bg-color: var(--dt-color-support-brand-02); }
386
+
387
+ &.c-modal--bg-brand-03 { --modal-bg-color: var(--dt-color-support-brand-03); }
388
+
389
+ &.c-modal--bg-brand-03-subtle { --modal-bg-color: var(--dt-color-support-brand-03-subtle); }
390
+
391
+ &.c-modal--bg-brand-04 { --modal-bg-color: var(--dt-color-support-brand-04); }
392
+
393
+ &.c-modal--bg-brand-04-subtle { --modal-bg-color: var(--dt-color-support-brand-04-subtle); }
394
+
395
+ &.c-modal--bg-brand-05 { --modal-bg-color: var(--dt-color-support-brand-05); }
396
+
397
+ &.c-modal--bg-brand-05-subtle { --modal-bg-color: var(--dt-color-support-brand-05-subtle); }
398
+
399
+ &.c-modal--bg-brand-06 {
400
+ --modal-content-color: var(--dt-color-content-inverse);
401
+ --modal-bg-color: var(--dt-color-support-brand-06);
402
+ }
403
+
404
+ &.c-modal--bg-brand-06-subtle { --modal-bg-color: var(--dt-color-support-brand-06-subtle); }
405
+
406
+ &.c-modal--bg-brand-08 { --modal-bg-color: var(--dt-color-support-brand-08); }
407
+
408
+ &.c-modal--bg-brand-08-subtle { --modal-bg-color: var(--dt-color-support-brand-08-subtle); }
363
409
  }