@orangelogic/design-system 2.19.0-ci.5

package/library/components/tooltip.js

@@ -0,0 +1,268 @@
+import { i as v, n as i, C as b, x as w, c as x } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as C } from "../chunks/component.styles.DtouHn2g.js";
+import { s as g, p as c, a as u, g as y, b as m } from "../chunks/animation-registry.DavRkTTr.js";
+import { w as f } from "../chunks/event.mFzZi4sr.js";
+import { L as k } from "../chunks/i18n.C6c6_pqI.js";
+import { w as l } from "../chunks/watch.BCJD77bD.js";
+import { e as d } from "../chunks/query.BBf1UFkC.js";
+import { e as B } from "../chunks/class-map.DqNfBvJI.js";
+import D from "./popup.js";
+const O = v`
+  :host {
+    --hide-delay: 0ms;
+    --show-delay: 500ms;
+
+    display: contents;
+  }
+
+  .tooltip {
+    --arrow-size: var(--cx-tooltip-arrow-size);
+    --arrow-color: var(--cx-tooltip-background-color);
+  }
+
+  .tooltip::part(popup) {
+    z-index: var(--cx-z-index-tooltip);
+  }
+
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .tooltip--disabled-hover::part(popup) {
+    pointer-events: none;
+  }
+
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width, min(80vw, 40rem));
+    border-radius: var(--cx-tooltip-border-radius);
+    background-color: var(--cx-tooltip-background-color);
+    font-family: var(--cx-tooltip-font-family);
+    font-size: var(--cx-tooltip-font-size);
+    font-weight: var(--cx-tooltip-font-weight);
+    line-height: var(--cx-tooltip-line-height);
+    text-align: start;
+    white-space: normal;
+    color: var(--cx-tooltip-color);
+    padding: var(--cx-tooltip-padding);
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+    overflow-wrap: break-word;
+  }
+`;
+var T = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (o, s, n, a) => {
+  for (var r = a > 1 ? void 0 : a ? _(s, n) : s, p = o.length - 1, h; p >= 0; p--)
+    (h = o[p]) && (r = (a ? h(s, n, r) : h(r)) || r);
+  return a && r && T(s, n, r), r;
+};
+let t = class extends b {
+  constructor() {
+    super(), this.localize = new k(this), this.content = "", this.placement = "top", this.disabled = !1, this.distance = 8, this.open = !1, this.skidding = 0, this.trigger = "hover focus", this.hoist = !1, this.hoverBridge = !0, this.handleBlur = this.handleBlur.bind(this), this.handleFocus = this.handleFocus.bind(this), this.handleClick = this.handleClick.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this), this.handleMouseOut = this.handleMouseOut.bind(this), this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this), this.addEventListener("blur", this.handleBlur, !0), this.addEventListener("focus", this.handleFocus, !0), this.addEventListener("click", this.handleClick), this.addEventListener("mouseover", this.handleMouseOver), this.addEventListener("mouseout", this.handleMouseOut);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.closeWatcher?.destroy(), document.removeEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  runFirstUpdated() {
+    this.body.hidden = !this.open, this.open && (this.popup.active = !0, this.popup.reposition());
+  }
+  handleBlur() {
+    this.hasTrigger("focus") && this.hide();
+  }
+  handleClick() {
+    this.hasTrigger("click") && (this.open ? this.hide() : this.show());
+  }
+  handleFocus() {
+    this.hasTrigger("focus") && this.show();
+  }
+  handleDocumentKeyDown(o) {
+    o.key === "Escape" && (o.stopPropagation(), this.hide());
+  }
+  handleMouseOver() {
+    if (this.hasTrigger("hover")) {
+      const o = c(
+        getComputedStyle(this).getPropertyValue("--show-delay")
+      );
+      clearTimeout(this.hoverTimeout), this.hoverTimeout = window.setTimeout(() => this.show(), o);
+    }
+  }
+  handleMouseOut() {
+    if (this.hasTrigger("hover")) {
+      const o = c(
+        getComputedStyle(this).getPropertyValue("--hide-delay")
+      );
+      clearTimeout(this.hoverTimeout), this.hoverTimeout = window.setTimeout(() => this.hide(), o);
+    }
+  }
+  hasTrigger(o) {
+    return this.trigger.split(" ").includes(o);
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.disabled)
+        return;
+      this.emit("cx-show"), "CloseWatcher" in window ? (this.closeWatcher?.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
+        this.hide();
+      }) : document.addEventListener("keydown", this.handleDocumentKeyDown), await u(this.body), this.body.hidden = !1, this.popup.active = !0;
+      const { keyframes: o, options: s } = y(this, "tooltip.show", {
+        dir: this.localize.dir()
+      });
+      await m(this.popup.popup, o, s), this.popup.reposition(), this.emit("cx-after-show");
+    } else {
+      this.emit("cx-hide"), this.closeWatcher?.destroy(), document.removeEventListener("keydown", this.handleDocumentKeyDown), await u(this.body);
+      const { keyframes: o, options: s } = y(this, "tooltip.hide", {
+        dir: this.localize.dir()
+      });
+      await m(this.popup.popup, o, s), this.popup.active = !1, this.body.hidden = !0, this.emit("cx-after-hide");
+    }
+  }
+  async handleOptionsChange() {
+    this.hasUpdated && (await this.updateComplete, this.popup.reposition());
+  }
+  handleDisabledChange() {
+    this.disabled && this.open && this.hide();
+  }
+  /** Shows the tooltip. */
+  async show() {
+    if (!this.open)
+      return this.open = !0, f(this, "cx-after-show");
+  }
+  /** Hides the tooltip */
+  async hide() {
+    if (this.open)
+      return this.open = !1, f(this, "cx-after-hide");
+  }
+  //
+  // NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into
+  // announcing the content. It works really well, but it violates an accessibility rule. We're also adding the
+  // aria-describedby attribute to a slot, which is required by <cx-popup> to correctly locate the first assigned
+  // element, otherwise positioning is incorrect.
+  //
+  render() {
+    return w`
+      <cx-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
+        class=${B({
+      tooltip: !0,
+      "tooltip--disabled-hover": !this.hoverBridge,
+      "tooltip--open": this.open
+    })}
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "overlay" : "absolute"}
+        flip
+        shift
+        arrow
+        ?hover-bridge=${this.hoverBridge}
+        .anchor=${this.anchor}
+        .flipBoundary=${this.flipBoundary}
+        .shiftBoundary=${this.shiftBoundary}
+      >
+        <slot slot="anchor" aria-describedby="tooltip"></slot>
+        <div
+          part="body"
+          id="tooltip"
+          class="tooltip__body"
+          role="tooltip"
+          aria-live=${this.open ? "polite" : "off"}
+        >
+          <slot name="content">${this.content}</slot>
+        </div>
+      </cx-popup>
+    `;
+  }
+};
+t.styles = [C, O];
+t.dependencies = { "cx-popup": D };
+e([
+  d("slot:not([name])")
+], t.prototype, "defaultSlot", 2);
+e([
+  d(".tooltip__body")
+], t.prototype, "body", 2);
+e([
+  d("cx-popup")
+], t.prototype, "popup", 2);
+e([
+  i()
+], t.prototype, "anchor", 2);
+e([
+  i()
+], t.prototype, "content", 2);
+e([
+  i()
+], t.prototype, "placement", 2);
+e([
+  i({ reflect: !0, type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  i({ type: Number })
+], t.prototype, "distance", 2);
+e([
+  i({ reflect: !0, type: Boolean })
+], t.prototype, "open", 2);
+e([
+  i({ type: Number })
+], t.prototype, "skidding", 2);
+e([
+  i()
+], t.prototype, "trigger", 2);
+e([
+  i({ type: Boolean })
+], t.prototype, "hoist", 2);
+e([
+  i({ attribute: "hover-bridge", reflect: !0, type: Boolean })
+], t.prototype, "hoverBridge", 2);
+e([
+  i({ attribute: "flip-boundary", type: Object })
+], t.prototype, "flipBoundary", 2);
+e([
+  i({ attribute: "shift-boundary", type: Object })
+], t.prototype, "shiftBoundary", 2);
+e([
+  l("open", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleOpenChange", 1);
+e([
+  l(["content", "distance", "hoist", "placement", "skidding"])
+], t.prototype, "handleOptionsChange", 1);
+e([
+  l("disabled")
+], t.prototype, "handleDisabledChange", 1);
+t = e([
+  x("cx-tooltip")
+], t);
+g("tooltip.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.8 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+g("tooltip.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.8 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+export {
+  t as default
+};

package/library/components/tree-item.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/tree-item/tree-item'
+import _default from '../packages/atoms/src/components/tree-item/tree-item'
+export default _default

package/library/components/tree-item.js

@@ -0,0 +1,18 @@
+import "../chunks/custom-element.fmLrnDZr.js";
+import "../chunks/component.styles.DtouHn2g.js";
+import "../chunks/animation-registry.DavRkTTr.js";
+import "../chunks/i18n.C6c6_pqI.js";
+import "../chunks/watch.BCJD77bD.js";
+import "../chunks/state.Dt9F_SuS.js";
+import "../chunks/query.BBf1UFkC.js";
+import "../chunks/class-map.DqNfBvJI.js";
+import "../chunks/if-defined.CKupVaWs.js";
+import "../chunks/live.DCdtYl87.js";
+import "../chunks/when.Dr1es41R.js";
+import "./checkbox.js";
+import "./icon.js";
+import "./spinner.js";
+import { C as c } from "../chunks/tree.5Cb85J9q.js";
+export {
+  c as default
+};

package/library/components/tree.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/tree/tree'
+import _default from '../packages/atoms/src/components/tree/tree'
+export default _default

package/library/components/tree.js

@@ -0,0 +1,14 @@
+import "../chunks/custom-element.fmLrnDZr.js";
+import "../chunks/component.styles.DtouHn2g.js";
+import "../chunks/i18n.C6c6_pqI.js";
+import "../chunks/math.DqTA6ya4.js";
+import "../chunks/watch.BCJD77bD.js";
+import { a as c, b as n, s as y, c as b } from "../chunks/tree.5Cb85J9q.js";
+import "../chunks/state.Dt9F_SuS.js";
+import "../chunks/query.BBf1UFkC.js";
+export {
+  c as default,
+  n as syncAncestors,
+  y as syncCheckboxes,
+  b as syncParentItem
+};

package/library/components/typeface.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/molecules/src/typeface/typeface'
+import _default from '../packages/molecules/src/typeface/typeface'
+export default _default

package/library/components/typeface.js

@@ -0,0 +1,203 @@
+import d from "./grid.js";
+import m from "./grid-item.js";
+import x from "./icon-button.js";
+import h from "./line-clamp.js";
+import g from "./space.js";
+import { C as w } from "../chunks/typography.trna8y2b.js";
+import { i as u, n as a, C as _, x as r, c as v } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as S } from "../chunks/component.styles.DtouHn2g.js";
+import { L as $ } from "../chunks/i18n.C6c6_pqI.js";
+import { o as y } from "../chunks/if-defined.CKupVaWs.js";
+import { o as b } from "../chunks/style-map.lEJHEwk3.js";
+import { n as p } from "../chunks/when.Dr1es41R.js";
+import { c as C } from "../chunks/capitalize.CNStXZBq.js";
+const D = u`
+  :host {
+    --typeface-font-family: var(--cx-font-sans);
+    --typeface-font-style: normal;
+    --typeface-font-weight: var(--cx-font-weight-normal);
+
+    display: block;
+    width: 100%;
+  }
+
+  .typeface__name,
+  .typeface__preview-text,
+  .typeface__static-text,
+  .typeface__description {
+    color: var(--color);
+    overflow-wrap: break-word;
+  }
+
+  .typeface__name,
+  .typeface__preview-text,
+  .typeface__static-text {
+    --font-family: var(--typeface-font-family);
+    --font-style: var(--typeface-font-style);
+    --font-weight: var(--typeface-font-weight);
+  }
+
+  .typeface__preview-text {
+    --font-size: var(--cx-font-size-4x-large);
+    text-align: var(--text-align, left);
+  }
+
+  .typeface__preview-text::part(base) {
+    line-height: 1.5;
+    padding-right: var(--cx-spacing-x-large);
+  }
+
+  .typeface__static-text {
+    --font-size: var(--cx-font-size-medium-large);
+    --line-height: 1;
+  }
+
+  .typeface__description {
+    flex-basis: 120px;
+    font-family: var(--cx-font-sans);
+  }
+`;
+var z = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (o, c, l, n) => {
+  for (var i = n > 1 ? void 0 : n ? I(c, l) : c, s = o.length - 1, f; s >= 0; s--)
+    (f = o[s]) && (i = (n ? f(c, l, i) : f(i)) || i);
+  return n && i && z(c, l, i), i;
+};
+let t = class extends _ {
+  constructor() {
+    super(...arguments), this.localize = new $(this), this.previewText = "", this.fontFamily = "", this.fontWeight = "", this.fontStyle = "", this.fontSrc = "", this.canDownload = !1, this.downloadIconName = "cloud_download", this.downloadIconSrc = "", this.canSelfDownload = !1, this.variant = "detailed";
+  }
+  handleDownload(o) {
+    o.preventDefault(), this.canSelfDownload ? this.ownerDocument.defaultView?.open(this.fontSrc, "_blank") : this.emit("cx-typeface-download", { detail: this.fontSrc });
+  }
+  render() {
+    const o = this.variant === "compact" ? "6" : "5";
+    return r`<div
+      class="typeface"
+      style=${b({
+      "--typeface-font-family": `"${this.fontFamily.replace(/"/g, '\\"')}"`,
+      "--typeface-font-style": this.fontStyle,
+      "--typeface-font-weight": this.fontWeight
+    })}
+    >
+      ${p(
+      this.variant === "detailed",
+      () => r`<cx-typography class="typeface__name">
+            ${this.fontFamily}-${this.fontWeight}
+          </cx-typography>`
+    )}
+      <cx-grid
+        columns=${o}
+        wrap="wrap"
+        column-spacing="var(--cx-spacing-medium)"
+        row-spacing="var(--cx-spacing-medium)"
+        use-flex-gap
+        use-container
+      >
+        ${p(
+      this.variant === "compact",
+      () => r`<cx-grid-item xs=${o} md="1"></cx-grid-item>`
+    )}
+        <cx-grid-item xs=${o} md="2">
+          <cx-line-clamp lines="1">
+            <cx-typography class="typeface__preview-text">
+              ${this.previewText}
+            </cx-typography>
+          </cx-line-clamp>
+        </cx-grid-item>
+        <cx-grid-item xs=${o} md="2">
+          <cx-typography class="typeface__static-text">
+            ABCDEFGHIJKLMNOPQRSTUVWXYZ
+          </cx-typography>
+          <cx-typography class="typeface__static-text">
+            abcdefghijklmnopqrstuvwxyz
+          </cx-typography>
+          <cx-typography class="typeface__static-text">
+            1234567890!@#$%^&*()-=/:;.,”
+          </cx-typography>
+        </cx-grid-item>
+        <cx-grid-item xs=${o} md="1">
+          <cx-space
+            direction="horizontal"
+            align-items="center"
+            justify-content="space-between"
+            wrap="nowrap"
+          >
+            ${p(
+      this.variant === "detailed",
+      () => r`
+                <div class="typeface__description">
+                  <cx-typography>${this.fontFamily}</cx-typography>
+                  <cx-typography>Weight: ${this.fontWeight}</cx-typography>
+                  <cx-typography>
+                    Style: ${C(this.fontStyle)}
+                  </cx-typography>
+                </div>
+              `
+    )}
+            ${p(
+      this.canDownload && this.fontSrc,
+      () => r`
+                <cx-icon-button
+                  name=${y(
+        this.downloadIconSrc ? void 0 : this.downloadIconName
+      )}
+                  src=${y(this.downloadIconSrc || void 0)}
+                  class="typeface__download"
+                  label=${this.localize.term("download")}
+                  @click=${this.handleDownload}
+                >
+                  Download
+                </cx-icon-button>
+              `
+    )}
+          </cx-space>
+        </cx-grid-item>
+      </cx-grid>
+    </div>`;
+  }
+};
+t.styles = [S, D];
+t.dependencies = {
+  "cx-grid": d,
+  "cx-grid-item": m,
+  "cx-icon-button": x,
+  "cx-line-clamp": h,
+  "cx-space": g,
+  "cx-typography": w
+};
+e([
+  a({ attribute: "preview-text", reflect: !0, type: String })
+], t.prototype, "previewText", 2);
+e([
+  a({ attribute: "font-family", reflect: !0, type: String })
+], t.prototype, "fontFamily", 2);
+e([
+  a({ attribute: "font-weight", reflect: !0, type: String })
+], t.prototype, "fontWeight", 2);
+e([
+  a({ attribute: "font-style", reflect: !0, type: String })
+], t.prototype, "fontStyle", 2);
+e([
+  a({ attribute: "font-src", reflect: !0, type: String })
+], t.prototype, "fontSrc", 2);
+e([
+  a({ attribute: "can-download", reflect: !0, type: Boolean })
+], t.prototype, "canDownload", 2);
+e([
+  a({ attribute: "download-icon-name", reflect: !0, type: String })
+], t.prototype, "downloadIconName", 2);
+e([
+  a({ attribute: "download-icon-src", reflect: !0, type: String })
+], t.prototype, "downloadIconSrc", 2);
+e([
+  a({ attribute: "can-self-download", reflect: !0, type: Boolean })
+], t.prototype, "canSelfDownload", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "variant", 2);
+t = e([
+  v("cx-typeface")
+], t);
+export {
+  t as default
+};