@justeattakeaway/pie-modal 1.22.4 → 1.23.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 (3) hide show
  1. package/dist/index.js +15 -15
  2. package/package.json +4 -4
  3. package/src/modal.scss +22 -8
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { LitElement as T, unsafeCSS as K, nothing as c } from "lit";
2
2
  import { html as s, unsafeStatic as H } from "lit/static-html.js";
3
3
  import { property as d, query as R } from "lit/decorators.js";
4
- import { classMap as S } from "lit/directives/class-map.js";
4
+ import { classMap as _ } 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";
@@ -9,13 +9,13 @@ import { requiredProperty as N, validPropertyValues as y, safeCustomElement as W
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 _ = class _ extends T {
12
+ const S = class S extends T {
13
13
  willUpdate() {
14
- this.getAttribute("v") || this.setAttribute("v", _.v);
14
+ this.getAttribute("v") || this.setAttribute("v", S.v);
15
15
  }
16
16
  };
17
- _.v = "1.22.4";
18
- let x = _;
17
+ S.v = "1.23.0";
18
+ let C = S;
19
19
  function j(e) {
20
20
  if (Array.isArray(e)) {
21
21
  for (var o = 0, t = Array(e.length); o < e.length; o++)
@@ -80,7 +80,7 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
80
80
  return t.targetElement !== o;
81
81
  }), O ? (o.ontouchstart = null, o.ontouchmove = null, k && g.length === 0 && (document.removeEventListener("touchmove", w, B ? { passive: !1 } : void 0), k = !1)) : g.length || Y();
82
82
  };
83
- const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-content-color: var(--dt-color-content-default);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);--modal-image-slot-bg-color: none;position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--modal-content-color);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration{display:flex;justify-content:center;align-items:center;height:200px;background-color:var(--modal-image-slot-bg-color)}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration ::slotted([slot=image]){width:168px;height:168px;overflow:hidden}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{overflow:hidden;aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:4/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:21/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}.c-modal .c-modal-imageSlot .c-modal-closeBtn{position:absolute;inset-block-start:0;inset-inline-end:0;margin-block-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);--modal-header-font-style: normal;font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);font-style:var(--modal-header-font-style);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:16px}@media (min-width: 769px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:22px}}.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-l-italic-weight);--modal-header-font-style: var(--dt-font-heading-l-italic-font-style);font-variation-settings:"slnt" -20}@media (min-width: 769px){.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-l-italic-line-height--wide) * 1px)}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);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}@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)}.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{display:flex;justify-content:center;align-items:center;padding:var(--dt-spacing-j) calc(var(--dt-spacing-j) + var(--dt-spacing-d))}.c-modal.c-modal--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-bg-color: var(--dt-color-support-brand-01)}.c-modal.c-modal--bg-brand-02{--modal-bg-color: var(--dt-color-support-brand-02)}.c-modal.c-modal--bg-brand-03{--modal-bg-color: var(--dt-color-support-brand-03)}.c-modal.c-modal--bg-brand-03-subtle{--modal-bg-color: var(--dt-color-support-brand-03-subtle)}.c-modal.c-modal--bg-brand-04{--modal-bg-color: var(--dt-color-support-brand-04)}.c-modal.c-modal--bg-brand-04-subtle{--modal-bg-color: var(--dt-color-support-brand-04-subtle)}.c-modal.c-modal--bg-brand-05{--modal-bg-color: var(--dt-color-support-brand-05)}.c-modal.c-modal--bg-brand-05-subtle{--modal-bg-color: var(--dt-color-support-brand-05-subtle)}.c-modal.c-modal--bg-brand-06{--modal-content-color: var(--dt-color-content-inverse);--modal-bg-color: var(--dt-color-support-brand-06)}.c-modal.c-modal--bg-brand-06-subtle{--modal-bg-color: var(--dt-color-support-brand-06-subtle)}.c-modal.c-modal--bg-brand-08{--modal-bg-color: var(--dt-color-support-brand-08)}.c-modal.c-modal--bg-brand-08-subtle{--modal-bg-color: var(--dt-color-support-brand-08-subtle)}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], eo = ["small", "medium", "large"], to = [
83
+ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-content-color: var(--dt-color-content-default);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);--modal-image-slot-bg-color: none;position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--modal-content-color);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration{display:flex;justify-content:center;align-items:center;height:200px;background-color:var(--modal-image-slot-bg-color)}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration ::slotted([slot=image]){width:168px;height:168px;overflow:hidden}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{overflow:hidden;aspect-ratio: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}}.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.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);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}@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)}.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{display:flex;justify-content:center;align-items:center;padding:var(--dt-spacing-j) calc(var(--dt-spacing-j) + var(--dt-spacing-d))}.c-modal.c-modal--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-bg-color: var(--dt-color-support-brand-01)}.c-modal.c-modal--bg-brand-02{--modal-bg-color: var(--dt-color-support-brand-02)}.c-modal.c-modal--bg-brand-03{--modal-bg-color: var(--dt-color-support-brand-03)}.c-modal.c-modal--bg-brand-03-subtle{--modal-bg-color: var(--dt-color-support-brand-03-subtle)}.c-modal.c-modal--bg-brand-04{--modal-bg-color: var(--dt-color-support-brand-04)}.c-modal.c-modal--bg-brand-04-subtle{--modal-bg-color: var(--dt-color-support-brand-04-subtle)}.c-modal.c-modal--bg-brand-05{--modal-bg-color: var(--dt-color-support-brand-05)}.c-modal.c-modal--bg-brand-05-subtle{--modal-bg-color: var(--dt-color-support-brand-05-subtle)}.c-modal.c-modal--bg-brand-06{--modal-content-color: var(--dt-color-content-inverse);--modal-bg-color: var(--dt-color-support-brand-06)}.c-modal.c-modal--bg-brand-06-subtle{--modal-bg-color: var(--dt-color-support-brand-06-subtle)}.c-modal.c-modal--bg-brand-08{--modal-bg-color: var(--dt-color-support-brand-08)}.c-modal.c-modal--bg-brand-08-subtle{--modal-bg-color: var(--dt-color-support-brand-08-subtle)}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], eo = ["small", "medium", "large"], to = [
84
84
  "default",
85
85
  "subtle",
86
86
  "brand-01",
@@ -95,7 +95,7 @@ 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
- ], L = "pie-modal-close", C = "pie-modal-open", M = "pie-modal-back", ao = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
98
+ ], L = "pie-modal-close", x = "pie-modal-open", M = "pie-modal-back", ao = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
99
99
  hasBackButton: !1,
100
100
  hasStackedActions: !1,
101
101
  headingLevel: "h2",
@@ -116,7 +116,7 @@ var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (e, o,
116
116
  return a && i && no(o, t, i), i;
117
117
  };
118
118
  const b = "pie-modal";
119
- let n = class extends x {
119
+ let n = class extends C {
120
120
  constructor() {
121
121
  super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isHeadingEmphasised = r.isHeadingEmphasised, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this.backgroundColor = r.backgroundColor, this.imageSlotAspectRatio = r.imageSlotAspectRatio, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
122
122
  e.key === "Escape" && e.preventDefault();
@@ -141,7 +141,7 @@ let n = class extends x {
141
141
  connectedCallback() {
142
142
  super.connectedCallback(), this._abortController = new AbortController();
143
143
  const { signal: e } = this._abortController;
144
- this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(C, (o) => this._handleModalOpened(o), { signal: e }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: e }), document.addEventListener(M, (o) => this._handleModalClosed(o), { signal: e });
144
+ 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(M, (o) => this._handleModalClosed(o), { signal: e });
145
145
  }
146
146
  disconnectedCallback() {
147
147
  super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
@@ -199,12 +199,12 @@ let n = class extends x {
199
199
  }
200
200
  // Handles the value of the isOpen property on first render of the component
201
201
  _handleModalOpenStateOnFirstRender(e) {
202
- e.get("isOpen") === void 0 && this.isOpen && u(this, C, { targetModal: this });
202
+ e.get("isOpen") === void 0 && this.isOpen && u(this, x, { targetModal: this });
203
203
  }
204
204
  // Handles changes to the modal isOpen property by dispatching any appropriate events
205
205
  _handleModalOpenStateChanged(e) {
206
206
  const o = e.get("isOpen");
207
- o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, M, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, C, { targetModal: this }));
207
+ o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, M, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, x, { targetModal: this }));
208
208
  }
209
209
  _handleActionClick(e) {
210
210
  e === "leading" ? (this._dialog.close("leading"), u(this, ao, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), u(this, io, { targetModal: this }));
@@ -352,7 +352,7 @@ let n = class extends x {
352
352
  "c-modal-footer": !0,
353
353
  "c-modal-footer--stackedActions": this.hasStackedActions
354
354
  }, t = e ? s`
355
- <footer class="${S(o)}" data-test-id="pie-modal-footer">
355
+ <footer class="${_(o)}" data-test-id="pie-modal-footer">
356
356
  ${this.renderLeadingAction()}
357
357
  ${this.renderSupportingAction()}
358
358
  </footer>` : c;
@@ -392,7 +392,7 @@ let n = class extends x {
392
392
  renderHeading() {
393
393
  const { heading: e, headingLevel: o, isHeadingEmphasised: t } = this, a = H(o);
394
394
  return s`
395
- <${a} id="modal-heading" class="${S({
395
+ <${a} id="modal-heading" class="${_({
396
396
  "c-modal-heading": !0,
397
397
  "c-modal-heading--emphasised": t
398
398
  })}" part="heading" data-test-id="modal-heading">
@@ -426,7 +426,7 @@ let n = class extends x {
426
426
  id="dialog"
427
427
  aria-label="${h(A)}"
428
428
  aria-labelledby="${h(A ? void 0 : "modal-heading")}"
429
- class="${S(I)}"
429
+ class="${_(I)}"
430
430
  aria-live="polite"
431
431
  aria-busy="${i ? "true" : "false"}"
432
432
  data-test-id="pie-modal">
@@ -519,7 +519,7 @@ export {
519
519
  M as ON_MODAL_BACK_EVENT,
520
520
  L as ON_MODAL_CLOSE_EVENT,
521
521
  ao as ON_MODAL_LEADING_ACTION_CLICK,
522
- C as ON_MODAL_OPEN_EVENT,
522
+ x as ON_MODAL_OPEN_EVENT,
523
523
  io as ON_MODAL_SUPPORTING_ACTION_CLICK,
524
524
  n as PieModal,
525
525
  to as backgroundColors,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "1.22.4",
3
+ "version": "1.23.0",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -48,7 +48,7 @@
48
48
  "devDependencies": {
49
49
  "@custom-elements-manifest/analyzer": "0.9.0",
50
50
  "@justeat/pie-design-tokens": "7.10.2",
51
- "@justeattakeaway/pie-button": "1.10.2",
51
+ "@justeattakeaway/pie-button": "1.11.0",
52
52
  "@justeattakeaway/pie-components-config": "0.21.0",
53
53
  "@justeattakeaway/pie-css": "0.26.1",
54
54
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
@@ -61,8 +61,8 @@
61
61
  "extends": "../../../package.json"
62
62
  },
63
63
  "dependencies": {
64
- "@justeattakeaway/pie-button": "1.10.2",
65
- "@justeattakeaway/pie-icon-button": "2.4.0",
64
+ "@justeattakeaway/pie-button": "1.11.0",
65
+ "@justeattakeaway/pie-icon-button": "2.5.0",
66
66
  "@justeattakeaway/pie-icons-webc": "1.18.2",
67
67
  "@justeattakeaway/pie-spinner": "1.3.7",
68
68
  "@justeattakeaway/pie-webc-core": "6.0.1",
package/src/modal.scss CHANGED
@@ -169,19 +169,33 @@
169
169
  overflow: hidden;
170
170
 
171
171
  // imageSlot--medium = default
172
- aspect-ratio: 3/1;
172
+ aspect-ratio: 16/9;
173
173
 
174
174
  &.c-modal-imageSlot--small {
175
- aspect-ratio: 4/1;
175
+ aspect-ratio: 3/1;
176
176
  }
177
177
 
178
178
  &.c-modal-imageSlot--large {
179
- aspect-ratio: 21/9;
179
+ aspect-ratio: 4/3;
180
180
  }
181
181
 
182
182
  ::slotted([slot="image"]) {
183
183
  width: 100%;
184
184
  }
185
+
186
+ @include media('>md') {
187
+ // imageSlot--medium = default
188
+ aspect-ratio: 3/1;
189
+
190
+ &.c-modal-imageSlot--small {
191
+ aspect-ratio: 4/1;
192
+ }
193
+
194
+ &.c-modal-imageSlot--large {
195
+ aspect-ratio: 21/9;
196
+ }
197
+ }
198
+
185
199
  }
186
200
 
187
201
  & .c-modal-closeBtn {
@@ -263,15 +277,15 @@
263
277
  }
264
278
 
265
279
  &.c-modal-heading--emphasised {
266
- --modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--narrow) * 1px);
280
+ --modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--narrow) * 1px);
267
281
  --modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);
268
- --modal-header-font-weight: var(--dt-font-heading-l-italic-weight);
269
- --modal-header-font-style: var(--dt-font-heading-l-italic-font-style);
282
+ --modal-header-font-weight: var(--dt-font-heading-xl-italic-weight);
283
+ --modal-header-font-style: var(--dt-font-heading-xl-italic-font-style);
270
284
  font-variation-settings: "slnt" -20;
271
285
 
272
286
  @include media('>md') {
273
- --modal-header-font-size: calc(var(--dt-font-heading-l-italic-size--wide) * 1px);
274
- --modal-header-font-line-height: calc(var(--dt-font-heading-l-italic-line-height--wide) * 1px);
287
+ --modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--wide) * 1px);
288
+ --modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--wide) * 1px);
275
289
  }
276
290
  }
277
291
  }