@orangelogic/design-system 4.2.0 → 4.4.0

package/library/chunks/{header.BioJzPlg.js → header.2RH_nPmz.js}

@@ -1,16 +1,19 @@
-import x from "../components/copy-button.js";
-import { n as c, C as b } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as k } from "./component.styles.CAS3c9pM.js";
-import { i as p } from "./lit-element.jLBm65_O.js";
-import { c as v } from "./custom-element.L4WJXn1j.js";
-import { L as w } from "./i18n.rtxrs1c1.js";
-import { w as y } from "./watch.DJF5K-8U.js";
-import { e as m } from "./query.BBf1UFkC.js";
-import { e as u } from "./class-map.BiVq-cVR.js";
-import { o as P } from "./style-map.llVFPd__.js";
-import { n as M } from "./when.Dr1es41R.js";
-import { i as l, u as g } from "./static.UA3G1Deq.js";
-const z = p`insert,span[format]{background-color:var(--cx-color-success-200)}delete{background-color:var(--cx-color-neutral-200);text-decoration:line-through}annotate{background-color:var(--cx-color-warning-200)}.ProseMirror figure[data-track*=deletion] [data-node-type=figure],.ProseMirror cx-rich-text-code-block[data-track*=deletion],.ProseMirror cx-rich-text-image-viewer[data-track*=deletion]{border:3px solid var(--cx-color-neutral);position:relative}.ProseMirror figure[data-track*=deletion] [data-node-type=figure]:after,.ProseMirror cx-rich-text-code-block[data-track*=deletion]:after,.ProseMirror cx-rich-text-image-viewer[data-track*=deletion]:after{content:"";box-sizing:border-box;pointer-events:none;background-image:repeating-linear-gradient(45deg, var(--cx-color-neutral), var(--cx-color-neutral) 10px, #fff 10px, #fff 20px);opacity:.4;width:100%;height:100%;position:absolute;top:0;left:0}.ProseMirror figure[data-track*=insertion] [data-node-type=figure],.ProseMirror cx-rich-text-code-block[data-track*=insertion],.ProseMirror cx-rich-text-image-viewer[data-track*=insertion]{border:3px solid var(--cx-color-success)}.ProseMirror figure[data-track*=annotation] [data-node-type=figure],.ProseMirror cx-rich-text-code-block[data-track*=annotation],.ProseMirror cx-rich-text-image-viewer[data-track*=annotation]{border:3px solid var(--cx-color-warning-200)}`, C = p`
+import v from "../components/copy-button.js";
+import { n as i, C as y } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as w } from "./component.styles.CAS3c9pM.js";
+import { i as m } from "./lit-element.jLBm65_O.js";
+import { D as p } from "./content-builder.CBBdfVOl.js";
+import { c as P } from "./custom-element.L4WJXn1j.js";
+import { L as z } from "./i18n.BSPmBQ73.js";
+import { w as b } from "./watch.DJF5K-8U.js";
+import { g as M, a as g } from "./responsive.BmBJSzC4.js";
+import { r as C } from "./state.CSDxrqLd.js";
+import { e as k } from "./query.BBf1UFkC.js";
+import { e as f } from "./class-map.BiVq-cVR.js";
+import { o as S } from "./style-map.llVFPd__.js";
+import { n as T } from "./when.Dr1es41R.js";
+import { i as l, u } from "./static.UA3G1Deq.js";
+const L = m`insert,span[format]{background-color:var(--cx-color-success-200)}delete{background-color:var(--cx-color-neutral-200);text-decoration:line-through}annotate{background-color:var(--cx-color-warning-200)}.ProseMirror figure[data-track*=deletion] [data-node-type=figure],.ProseMirror cx-rich-text-code-block[data-track*=deletion],.ProseMirror cx-rich-text-image-viewer[data-track*=deletion]{border:3px solid var(--cx-color-neutral);position:relative}.ProseMirror figure[data-track*=deletion] [data-node-type=figure]:after,.ProseMirror cx-rich-text-code-block[data-track*=deletion]:after,.ProseMirror cx-rich-text-image-viewer[data-track*=deletion]:after{content:"";box-sizing:border-box;pointer-events:none;background-image:repeating-linear-gradient(45deg, var(--cx-color-neutral), var(--cx-color-neutral) 10px, #fff 10px, #fff 20px);opacity:.4;width:100%;height:100%;position:absolute;top:0;left:0}.ProseMirror figure[data-track*=insertion] [data-node-type=figure],.ProseMirror cx-rich-text-code-block[data-track*=insertion],.ProseMirror cx-rich-text-image-viewer[data-track*=insertion]{border:3px solid var(--cx-color-success)}.ProseMirror figure[data-track*=annotation] [data-node-type=figure],.ProseMirror cx-rich-text-code-block[data-track*=annotation],.ProseMirror cx-rich-text-image-viewer[data-track*=annotation]{border:3px solid var(--cx-color-warning-200)}`, D = m`
   .column-resize-handle {
     background-color: var(--editor-table-resize-handle-color);
     bottom: -2px;
@@ -137,6 +140,16 @@ const z = p`insert,span[format]{background-color:var(--cx-color-success-200)}del
     position: absolute;
   }
 
+  .ProseMirror[contenteditable='true'] [data-metafield] {
+    background-color: var(--cx-color-neutral-100);
+    border-radius: var(--cx-border-radius-small);
+    padding-inline: var(--cx-spacing-3x-small);
+  }
+
+  .ProseMirror[contenteditable='true'] [data-metafield].ProseMirror-selectednode {
+    background-color: var(--cx-color-primary-100);
+  }
+
   .ProseMirror .mce-item-anchor {
     position: relative;
     text-decoration: none !important;
@@ -561,38 +574,38 @@ const z = p`insert,span[format]{background-color:var(--cx-color-success-200)}del
     cursor: not-allowed;
   }
 
-  ${z}
+  ${L}
 `;
-var t = /* @__PURE__ */ ((e) => (e.H1 = "h1", e.H2 = "h2", e.H3 = "h3", e.H4 = "h4", e.H5 = "h5", e.H6 = "h6", e))(t || {}), f = /* @__PURE__ */ ((e) => (e.Center = "center", e.Justify = "justify", e.Left = "left", e.Right = "right", e))(f || {});
-const H = p`:host{--color:light-dark(#000,#fff);--line-height:1.5;--text-align:left;--padding:0;width:100%;display:block}:host([alignment=center]) .container{--text-align:center;justify-content:center}:host([alignment=right]) .container{--text-align:right;flex-direction:row-reverse}:host([alignment=left]) .container{--text-align:left;justify-content:flex-start}:host([alignment=justify]) .container{--text-align:justify;justify-content:flex-start}.container{padding:var(--padding,0px);flex-direction:row;align-items:center;display:flex}.container ::slotted(p),.container p{line-height:var(--line-height,1.5);word-wrap:break-word}.heading{color:var(--color);font-family:var(--font-family), var(--cx-font-sans);font-style:var(--font-style,normal);text-align:var(--text-align,left);max-width:100%;min-height:calc(var(--line-height,1) * 1em);flex:auto;min-height:1lh;margin-block:0}.container.container--has-copy-button .heading{flex:none;max-width:calc(100% - 32px)}.copy-button{opacity:0;transition:opacity var(--cx-transition-fast);color:var(--cx-color-neutral-600);pointer-events:none;user-select:none;line-height:0}.container:hover .copy-button,.copy-button:focus-within{opacity:1;pointer-events:auto;user-select:auto}.heading-1{font-size:var(--cx-font-size-3x-large);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-3x-large))}.heading-2{font-size:var(--cx-font-size-2x-large);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-3x-large))}.heading-3{font-size:var(--cx-font-size-x-large);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-2x-large))}.heading-4{font-size:var(--cx-font-size-large);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-x-large))}.heading-5{font-size:var(--cx-font-size-medium);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-large))}.heading-6{font-size:var(--cx-font-size-small);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-medium))}:host([custom-line-height]) .heading{line-height:unset}`;
-var L = Object.defineProperty, A = Object.getOwnPropertyDescriptor, n = (e, r, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? A(r, a) : r, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (i = (s ? d(r, a, i) : d(i)) || i);
-  return s && i && L(r, a, i), i;
+var r = /* @__PURE__ */ ((e) => (e.H1 = "h1", e.H2 = "h2", e.H3 = "h3", e.H4 = "h4", e.H5 = "h5", e.H6 = "h6", e))(r || {}), x = /* @__PURE__ */ ((e) => (e.Center = "center", e.Justify = "justify", e.Left = "left", e.Right = "right", e))(x || {});
+const H = m`:host{--color:light-dark(#000,#fff);--line-height:1.5;--text-align:left;--padding:0;width:100%;display:block}:host([alignment=center]) .container{--text-align:center;justify-content:center}:host([alignment=right]) .container{--text-align:right;flex-direction:row-reverse}:host([alignment=left]) .container{--text-align:left;justify-content:flex-start}:host([alignment=justify]) .container{--text-align:justify;justify-content:flex-start}.container{padding:var(--padding,0px);flex-direction:row;align-items:center;display:flex}.container ::slotted(p),.container p{line-height:var(--line-height,1.5);word-wrap:break-word}.heading{color:var(--color);font-family:var(--font-family), var(--cx-font-sans);font-style:var(--font-style,normal);text-align:var(--text-align,left);max-width:100%;min-height:calc(var(--line-height,1) * 1em);flex:auto;min-height:1lh;margin-block:0}.container.container--has-copy-button .heading{flex:none;max-width:calc(100% - 32px)}.copy-button{opacity:0;transition:opacity var(--cx-transition-fast);color:var(--cx-color-neutral-600);pointer-events:none;user-select:none;line-height:0}.container:hover .copy-button,.copy-button:focus-within{opacity:1;pointer-events:auto;user-select:auto}.heading-1{font-size:var(--cx-font-size-3x-large);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-3x-large))}.heading-2{font-size:var(--cx-font-size-2x-large);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-3x-large))}.heading-3{font-size:var(--cx-font-size-x-large);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-2x-large))}.heading-4{font-size:var(--cx-font-size-large);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-x-large))}.heading-5{font-size:var(--cx-font-size-medium);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-large))}.heading-6{font-size:var(--cx-font-size-small);font-weight:var(--font-weight,var(--cx-font-weight-semibold));line-height:var(--line-height,var(--cx-line-height-medium))}:host([custom-line-height]) .heading{line-height:unset}`;
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (e, n, a, s) => {
+  for (var c = s > 1 ? void 0 : s ? E(n, a) : n, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (c = (s ? h(n, a, c) : h(c)) || c);
+  return s && c && A(n, a, c), c;
 };
-const S = {
-  [t.H1]: "heading-1",
-  [t.H2]: "heading-2",
-  [t.H3]: "heading-3",
-  [t.H4]: "heading-4",
-  [t.H5]: "heading-5",
-  [t.H6]: "heading-6"
-}, T = {
-  [t.H1]: l`h1`,
-  [t.H2]: l`h2`,
-  [t.H3]: l`h3`,
-  [t.H4]: l`h4`,
-  [t.H5]: l`h5`,
-  [t.H6]: l`h6`
+const R = {
+  [r.H1]: "heading-1",
+  [r.H2]: "heading-2",
+  [r.H3]: "heading-3",
+  [r.H4]: "heading-4",
+  [r.H5]: "heading-5",
+  [r.H6]: "heading-6"
+}, F = {
+  [r.H1]: l`h1`,
+  [r.H2]: l`h2`,
+  [r.H3]: l`h3`,
+  [r.H4]: l`h4`,
+  [r.H5]: l`h5`,
+  [r.H6]: l`h6`
 };
-let o = class extends b {
+let t = class extends y {
   constructor() {
-    super(), this.localize = new w(this), this.variant = t.H6, this.fontSize = void 0, this.hasAnchorLink = !1, this.anchorLink = "", this.alignment = f.Left, this.disabledCopyButton = !1, this.customLineHeight = !1, this.cms5PageReadyTimeout = null, this.scrollToAnchor = () => {
+    super(), this.localize = new z(this), this.variant = r.H6, this.fontSize = void 0, this.fontSizeTablet = void 0, this.fontSizeDesktop = void 0, this.deviceType = p.Desktop, this.breakpoints = [350, 696, 1024], this.hasAnchorLink = !1, this.anchorLink = "", this.alignment = x.Left, this.disabledCopyButton = !1, this.customLineHeight = !1, this.cms5PageReadyTimeout = null, this.scrollToAnchor = () => {
       const e = this.getAnchorID();
       !e || e !== this.anchorID || this.scrollIntoView({
         block: "start"
       });
-    }, this.handleClick = this.handleClick.bind(this), this.handleCMS5PageReady = this.handleCMS5PageReady.bind(this);
+    }, this.handleClick = this.handleClick.bind(this), this.handleCMS5PageReady = this.handleCMS5PageReady.bind(this), this.handleWindowResize = this.handleWindowResize.bind(this);
   }
   /**
    * Get the owner window
@@ -609,13 +622,21 @@ let o = class extends b {
   get anchorID() {
     return this.hasAnchorLink && (this.anchorLink || this.textContent?.trim().replace(/\s+/g, "-").toLowerCase()) || "";
   }
+  /**
+   * The font size for the current device. The base font size is the fallback,
+   * so a heading with no tablet/desktop size of its own keeps the same size on
+   * every breakpoint.
+   */
+  get currentFontSize() {
+    return this.deviceType === p.Desktop ? this.fontSizeDesktop || this.fontSize || "" : this.deviceType === p.Tablet ? this.fontSizeTablet || this.fontSize || "" : this.fontSize || "";
+  }
   runFirstUpdated() {
-    this.setAttribute("role", "heading"), setTimeout(() => {
+    this.setAttribute("role", "heading"), this.breakpoints = M(this, this.breakpoints), this.deviceType = g(this.breakpoints), setTimeout(() => {
       this.scrollToAnchor();
     }, 200);
   }
-  runConnectedCallback() {
-    this.addEventListener("click", this.handleClick), this.hasAnchorLink && (this.ownerWindow.addEventListener("hashchange", this.scrollToAnchor), this.ownerWindow.addEventListener(
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this.handleClick), window.addEventListener("resize", this.handleWindowResize), this.hasAnchorLink && (this.ownerWindow.addEventListener("hashchange", this.scrollToAnchor), this.ownerWindow.addEventListener(
       "cx-cms5-page-ready",
       this.handleCMS5PageReady,
       {
@@ -624,7 +645,7 @@ let o = class extends b {
     ));
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.ownerWindow.removeEventListener("hashchange", this.scrollToAnchor), this.ownerWindow.removeEventListener(
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), window.removeEventListener("resize", this.handleWindowResize), this.ownerWindow.removeEventListener("hashchange", this.scrollToAnchor), this.ownerWindow.removeEventListener(
       "cx-cms5-page-ready",
       this.scrollToAnchor
     ), this.cms5PageReadyTimeout && (clearTimeout(this.cms5PageReadyTimeout), this.cms5PageReadyTimeout = null);
@@ -638,6 +659,9 @@ let o = class extends b {
       this.scrollToAnchor();
     }, 100);
   }
+  handleWindowResize() {
+    this.deviceType = g(this.breakpoints);
+  }
   handleClick(e) {
     this.contentEditable === "true" && e.stopPropagation();
   }
@@ -656,6 +680,9 @@ let o = class extends b {
     const e = this.ownerDocument.createElement("slot");
     this.heading.appendChild(e);
   }
+  handleDeviceTypeChange() {
+    this.deviceType || (this.deviceType = g(this.breakpoints));
+  }
   handleHeadingChange() {
     this.setAttribute("aria-level", this.variant.replace("h", ""));
   }
@@ -663,63 +690,78 @@ let o = class extends b {
     e.stopPropagation();
   }
   renderHeading() {
-    const e = S[this.variant], r = T[this.variant], a = /\d/.test(this.fontSize || "");
-    return g`<${r} part="heading" class=${u({ heading: !0, [e]: !0 })} style=${P({
-      fontSize: a ? this.fontSize : void 0
-    })}><slot></slot></${r}>`;
+    const e = R[this.variant], n = F[this.variant], a = this.currentFontSize, s = /\d/.test(a);
+    return u`<${n} part="heading" class=${f({ heading: !0, [e]: !0 })} style=${S({
+      fontSize: s ? a : void 0
+    })}><slot></slot></${n}>`;
   }
   render() {
-    const e = this.hasAnchorLink ? `${this.ownerWindow.location.href.split("#")[0]}#${encodeURIComponent(this.anchorID)}` : "", r = this.hasAnchorLink && !this.disabledCopyButton;
-    return g`<div part="base" class=${u({
+    const e = this.hasAnchorLink ? `${this.ownerWindow.location.href.split("#")[0]}#${encodeURIComponent(this.anchorID)}` : "", n = this.hasAnchorLink && !this.disabledCopyButton;
+    return u`<div part="base" class=${f({
       container: !0,
-      "container--has-copy-button": r
+      "container--has-copy-button": n
     })}>${this.renderHeading()}
-        ${M(r, () => g`<cx-copy-button part="copy-button" class="copy-button" value=${e} hoist="" label=${this.localize.term("copy")} @click=${this.handleCopyButtonClick}><cx-icon slot="copy-icon" name="attachment"></cx-icon></cx-copy-button>`)}</div>`;
+        ${T(n, () => u`<cx-copy-button part="copy-button" class="copy-button" value=${e} hoist="" label=${this.localize.term("copy")} @click=${this.handleCopyButtonClick}><cx-icon slot="copy-icon" name="attachment"></cx-icon></cx-copy-button>`)}</div>`;
   }
 };
-o.styles = [
-  k,
-  C,
+t.styles = [
+  w,
+  D,
   H
 ];
-o.dependencies = {
-  "cx-copy-button": x
+t.dependencies = {
+  "cx-copy-button": v
 };
-n([
-  m("slot")
-], o.prototype, "defaultSlot", 2);
-n([
-  m(".heading")
-], o.prototype, "heading", 2);
-n([
-  c({ reflect: !0, type: String })
-], o.prototype, "variant", 2);
-n([
-  c({ attribute: "font-size", reflect: !0, type: String })
-], o.prototype, "fontSize", 2);
-n([
-  c({ attribute: "has-anchor-link", type: Boolean })
-], o.prototype, "hasAnchorLink", 2);
-n([
-  c({ attribute: "anchor-link", type: String })
-], o.prototype, "anchorLink", 2);
-n([
-  c({ type: String })
-], o.prototype, "alignment", 2);
-n([
-  c({ attribute: "disabled-copy-button", reflect: !0, type: Boolean })
-], o.prototype, "disabledCopyButton", 2);
-n([
-  c({ attribute: "custom-line-height", reflect: !0, type: Boolean })
-], o.prototype, "customLineHeight", 2);
-n([
-  y("variant")
-], o.prototype, "handleHeadingChange", 1);
-o = n([
-  v("cx-header")
-], o);
+o([
+  k("slot")
+], t.prototype, "defaultSlot", 2);
+o([
+  k(".heading")
+], t.prototype, "heading", 2);
+o([
+  i({ reflect: !0, type: String })
+], t.prototype, "variant", 2);
+o([
+  i({ attribute: "font-size", reflect: !0, type: String })
+], t.prototype, "fontSize", 2);
+o([
+  i({ attribute: "font-size-tablet", reflect: !0, type: String })
+], t.prototype, "fontSizeTablet", 2);
+o([
+  i({ attribute: "font-size-desktop", reflect: !0, type: String })
+], t.prototype, "fontSizeDesktop", 2);
+o([
+  i({ attribute: "device-type", reflect: !0, type: String })
+], t.prototype, "deviceType", 2);
+o([
+  C()
+], t.prototype, "breakpoints", 2);
+o([
+  i({ attribute: "has-anchor-link", type: Boolean })
+], t.prototype, "hasAnchorLink", 2);
+o([
+  i({ attribute: "anchor-link", type: String })
+], t.prototype, "anchorLink", 2);
+o([
+  i({ type: String })
+], t.prototype, "alignment", 2);
+o([
+  i({ attribute: "disabled-copy-button", reflect: !0, type: Boolean })
+], t.prototype, "disabledCopyButton", 2);
+o([
+  i({ attribute: "custom-line-height", reflect: !0, type: Boolean })
+], t.prototype, "customLineHeight", 2);
+o([
+  b("deviceType")
+], t.prototype, "handleDeviceTypeChange", 1);
+o([
+  b("variant")
+], t.prototype, "handleHeadingChange", 1);
+t = o([
+  P("cx-header")
+], t);
 export {
-  f as A,
-  o as C,
-  t as V
+  x as A,
+  t as C,
+  r as V
 };