@orangelogic/design-system 2.60.0 → 2.61.0

package/library/chunks/color-swatch.DUe3iLLo.js

@@ -1,558 +0,0 @@
-import z from "../components/copy-button.js";
-import R from "../components/line-clamp.js";
-import E from "../components/resize-observer.js";
-import V from "../components/space.js";
-import { C as G } from "./typography.BFpl0WMA.js";
-import { i as M, n as l, C as S, x as C, c as U } from "./custom-element.vnXBMQxc.js";
-import { c as W } from "./component.styles.CI-v8BZa.js";
-import { T as v } from "./index.C1chwzNp.js";
-import { d as H } from "./popup._w5T7x8f.js";
-import { L as D } from "./i18n.BP2FRO1v.js";
-import { w as h } from "./watch.BCJD77bD.js";
-import { r as d } from "./state.Cw55xXlb.js";
-import { e as L } from "./query.BBf1UFkC.js";
-import { e as k } from "./class-map.CoZTSvbM.js";
-import { o as $ } from "./if-defined.MfEgpxEN.js";
-import { c as T } from "./repeat.CauKaXyy.js";
-import { o as m } from "./style-map.CZovMmo_.js";
-import { n as B } from "./when.Dr1es41R.js";
-var y = /* @__PURE__ */ ((t) => (t.Circle = "circle", t.GridItem = "grid-item", t.Oval = "oval", t))(y || {}), p = /* @__PURE__ */ ((t) => (t.Cmyk = "cmyk", t.Hex = "hex", t.Rgb = "rgb", t.Unknown = "unknown", t))(p || {});
-const O = /^#([0-9A-Fa-f]{3}){1,2}$/, j = /^(\s*(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\s*,){2}\s*(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\s*$/, X = /^(\s*(100|[1-9]?\d)\s*,){3}\s*(100|[1-9]?\d)\s*$/, P = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
-function I(t) {
-  return O.test(t) ? "hex" : j.test(t) ? "rgb" : X.test(t) ? "cmyk" : "unknown";
-}
-function _(t, e, s) {
-  return "#" + [t, e, s].map((n) => n.toString(16).padStart(2, "0")).join("").toUpperCase();
-}
-function b(t) {
-  t = t.trim().replace(/^#/, ""), t.length === 8 && (t = t.slice(0, 6)), t.length === 3 && (t = t.split("").map((s) => s + s).join(""));
-  const e = parseInt(t, 16);
-  return {
-    b: e & 255,
-    g: e >> 8 & 255,
-    r: e >> 16 & 255
-  };
-}
-function F(t, e, s) {
-  const n = 1 - t / 255, r = 1 - e / 255, o = 1 - s / 255, a = Math.min(n, r, o);
-  return a === 1 ? { c: 0, k: 100, m: 0, y: 0 } : {
-    c: Math.round((n - a) / (1 - a) * 100),
-    k: Math.round(a * 100),
-    m: Math.round((r - a) / (1 - a) * 100),
-    y: Math.round((o - a) / (1 - a) * 100)
-  };
-}
-function A(t, e, s, n) {
-  const r = 255 * (1 - t / 100) * (1 - n / 100), o = 255 * (1 - e / 100) * (1 - n / 100), a = 255 * (1 - s / 100) * (1 - n / 100);
-  return { b: Math.round(a), g: Math.round(o), r: Math.round(r) };
-}
-function N(t) {
-  switch (t = t.trim(), I(t)) {
-    case "hex":
-      return { hex: t };
-    case "rgb": {
-      const s = t.split(",").map((n) => n.trim());
-      return {
-        blue: parseInt(s[2], 10),
-        green: parseInt(s[1], 10),
-        red: parseInt(s[0], 10)
-      };
-    }
-    case "cmyk": {
-      const s = t.split(",").map((n) => n.trim());
-      return {
-        c: parseInt(s[0], 10),
-        k: parseInt(s[3], 10),
-        m: parseInt(s[1], 10),
-        y: parseInt(s[2], 10)
-      };
-    }
-    default:
-      return {};
-  }
-}
-function u(t, e, s) {
-  const n = I(t), r = N(t);
-  let o = {};
-  if (n === "unknown")
-    return "";
-  if (n === e)
-    return t;
-  switch (e) {
-    case "hex":
-      if (n === "rgb")
-        o.hex = _(r.red, r.green, r.blue);
-      else if (n === "cmyk") {
-        const a = A(r.c, r.m, r.y, r.k);
-        o.hex = _(a.r, a.g, a.b);
-      } else
-        o.hex = r.hex;
-      break;
-    case "rgb":
-      if (n === "hex") {
-        const a = b(r.hex);
-        o.red = a.r, o.green = a.g, o.blue = a.b;
-      } else if (n === "cmyk") {
-        const a = A(r.c, r.m, r.y, r.k);
-        o.red = a.r, o.green = a.g, o.blue = a.b;
-      } else
-        Object.assign(o, r);
-      break;
-    case "cmyk":
-      if (n === "rgb")
-        o = F(r.red, r.green, r.blue);
-      else if (n === "hex") {
-        const a = b(r.hex);
-        o = F(a.r, a.g, a.b);
-      } else
-        Object.assign(o, r);
-      break;
-    default:
-      return t;
-  }
-  return e === "hex" ? o.hex : e === "rgb" ? `${o.red}, ${o.green}, ${o.blue}` : e === "cmyk" ? `${o.c}, ${o.m}, ${o.y}, ${o.k}` : t;
-}
-function K(t, e = "#000", s = "#FFF") {
-  if (!((f) => P.test(f))(t))
-    return t;
-  const { b: r, g: o, r: a } = b(t);
-  return 0.299 * a + 0.587 * o + 0.114 * r > 186 ? e : s;
-}
-function Y(t) {
-  const e = "light-dark", s = t.toLowerCase().indexOf(e + "(");
-  if (s === -1)
-    return "";
-  const n = t.indexOf("(", s + e.length);
-  if (n === -1)
-    return "";
-  let r = 0, o = -1, a = -1;
-  for (let g = n; g < t.length; g++) {
-    const x = t[g];
-    if (x === "(") {
-      r++;
-      continue;
-    }
-    if (x === ")") {
-      if (r--, r === 0) {
-        a = g;
-        break;
-      }
-      continue;
-    }
-    x === "," && r === 1 && o === -1 && (o = g);
-  }
-  if (o === -1 || a === -1)
-    return "";
-  const w = t.slice(n + 1, o).trim(), f = t.slice(o + 1, a).trim();
-  return `${w} ${f}`;
-}
-function Ct(t, e) {
-  const s = new v(t), n = new v(e), r = s.isValid ? t : "transparent", o = n.isValid ? e : "transparent";
-  return `light-dark(${r}, ${o})`;
-}
-function ft(t) {
-  const e = Y(t);
-  if (!e)
-    return null;
-  const s = t.replace(/light-dark\([^()]*(?:\([^()]*\)[^()]*)*\)/i, "").trim();
-  return `${e} ${s}`;
-}
-function xt(t) {
-  const e = t.match(/([a-zA-Z-]+\([^)]*\))/);
-  if (!e)
-    return "";
-  const s = e[1], n = s.replace(/^[a-zA-Z-]+\(|\)$/g, "").trim(), r = t.replace(s, "").trim(), o = n.replace(/,/g, "").trim();
-  return `${r} ${o}`;
-}
-const Z = M`
-  :host {
-    display: block;
-  }
-
-  .color-swatch {
-    border: 1px solid var(--cx-color-neutral-200);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .color-swatch:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .color-swatch--circle {
-    aspect-ratio: 1 / 1;
-    height: auto;
-    width: var(--swatch-size, 350px);
-    min-width: var(--swatch-size, 230px);
-    max-width: 100%;
-    border-radius: var(--cx-border-radius-circle);
-  }
-
-  .color-swatch--oval {
-    height: var(--swatch-size, 350px);
-    width: 100%;
-    border-radius: calc(var(--swatch-size, 350px) / 2);
-  }
-
-  .color-swatch--grid {
-    width: 100%;
-    height: var(--swatch-size, 300px);
-    min-width: var(--swatch-grid-min-width, 165px);
-    border-radius: var(--cx-border-radius-x-large);
-  }
-
-  .color-swatch__content {
-    max-height: 100%;
-    padding: var(--swatch-content-padding, 0);
-    justify-content: space-between;
-    gap: var(--cx-spacing-medium);
-  }
-
-  .color-swatch--circle > .color-swatch__content {
-    max-width: 75%;
-    min-width: 50%;
-  }
-
-  .color-swatch--oval > .color-swatch__content {
-    max-width: 85%;
-  }
-
-  .color-swatch--grid > .color-swatch__content {
-    height: 100%;
-    width: 100%;
-    padding: var(--cx-spacing-large) var(--cx-spacing-medium);
-  }
-
-  .color-swatch__key::part(base) {
-    min-width: 50px;
-    height: 100%;
-    vertical-align: middle;
-  }
-
-  .color-swatch__key[variant='small']::part(base) {
-    display: inline-block;
-  }
-
-  .color-swatch__copy-button::part(button) {
-    min-height: fit-content;
-    height: fit-content;
-    border-width: 0 !important;
-    background: transparent !important;
-    padding: 0;
-  }
-
-  .color-swatch__copy-button::part(label) {
-    height: fit-content;
-    padding: 0;
-  }
-
-  .color-swatch__value {
-    text-transform: none;
-  }
-
-  .color-swatch__value::part(base) {
-    word-break: break-word;
-  }
-
-  .color-swatch__value-wrapper {
-    text-align: left;
-  }
-`;
-var q = Object.defineProperty, J = Object.getOwnPropertyDescriptor, c = (t, e, s, n) => {
-  for (var r = n > 1 ? void 0 : n ? J(e, s) : e, o = t.length - 1, a; o >= 0; o--)
-    (a = t[o]) && (r = (n ? a(e, s, r) : a(r)) || r);
-  return n && r && q(e, s, r), r;
-};
-let i = class extends S {
-  constructor() {
-    super(...arguments), this.localize = new D(this), this.ignoreWatchColorChange = /* @__PURE__ */ new Set(), this.variant = y.Circle, this.name = "", this.hex = "", this.rgb = "", this.cmyk = "", this.pms = "", this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.canFocusCodeOnly = !1, this.noAutoConvert = !1, this.textColor = "#27272A", this.textVariant = "body2", this.lineClamp = 3, this.backgroundColor = "#F9F9F9", this.canFocusContainer = !0, this.isContainerFocused = !1;
-  }
-  runFirstUpdated() {
-    this.handleColorChange();
-  }
-  /**
-   * Change to default color
-   */
-  setDefaultColor() {
-    this.backgroundColor = "#F9F9F9", this.textColor = "#27272A";
-  }
-  handleResize() {
-    const t = this.containerEl.offsetWidth;
-    t > 315 || this.variant === "grid-item" ? (this.textVariant = "body2", this.rowGap = "x-small", this.lineClamp = 3) : t > 230 ? (this.textVariant = "body3", this.rowGap = "2x-small", this.lineClamp = 2) : (this.textVariant = "small", this.rowGap = "3x-small", this.lineClamp = 1);
-  }
-  handleVariantChange() {
-    this.containerEl && this.handleResize();
-  }
-  handleCmykChange() {
-    if (!this.noAutoConvert) {
-      if (this.ignoreWatchColorChange.has("cmyk") || this.cmyk === "" && !this.hasUpdated) {
-        this.ignoreWatchColorChange.delete("cmyk");
-        return;
-      }
-      this.ignoreWatchColorChange.add("hex"), this.ignoreWatchColorChange.add("rgb"), this.hex = u(this.cmyk, p.Hex), this.rgb = u(this.cmyk, p.Rgb);
-    }
-  }
-  handleRGBChange() {
-    if (!this.noAutoConvert) {
-      if (this.ignoreWatchColorChange.has("rgb") || this.rgb === "" && !this.hasUpdated) {
-        this.ignoreWatchColorChange.delete("rgb");
-        return;
-      }
-      this.ignoreWatchColorChange.add("hex"), this.ignoreWatchColorChange.add("cmyk"), this.hex = u(this.rgb, p.Hex), this.cmyk = u(this.rgb, p.Cmyk);
-    }
-  }
-  handleHexChange() {
-    if (!this.noAutoConvert) {
-      if (this.ignoreWatchColorChange.has("hex") || this.hex === "" && !this.hasUpdated) {
-        this.ignoreWatchColorChange.delete("hex");
-        return;
-      }
-      this.ignoreWatchColorChange.add("rgb"), this.ignoreWatchColorChange.add("cmyk"), this.rgb = u(this.hex, p.Rgb), this.cmyk = u(this.hex, p.Cmyk);
-    }
-  }
-  async handleColorChange() {
-    await this.updateComplete, this.hex && O.test(this.hex) ? (this.textColor = K(this.hex, "#27272A", "#F9F9F9"), this.backgroundColor = this.hex) : this.setDefaultColor();
-  }
-  handleCanFocusCodeOnlyChange() {
-    this.isContainerFocused || (this.canFocusContainer = !this.canFocusCodeOnly);
-  }
-  handleFocusIn() {
-    this.isContainerFocused = !0;
-  }
-  handleFocusOut() {
-    this.isContainerFocused = !1;
-  }
-  render() {
-    const t = [
-      { key: "HEX", value: this.hex },
-      { key: "RGB", value: this.rgb },
-      { key: "CMYK", value: this.cmyk },
-      { key: "PMS", value: this.pms }
-    ].filter((e) => this.showCodes.includes(e.key));
-    return C`
-      <cx-resize-observer @cx-resize=${this.handleResize}>
-        <div
-          part="base"
-          tabindex=${$(this.canFocusContainer ? "0" : void 0)}
-          class=${k({
-      "color-swatch": !0,
-      "color-swatch--circle": this.variant === y.Circle,
-      "color-swatch--grid": this.variant === y.GridItem,
-      "color-swatch--oval": this.variant === y.Oval
-    })}
-          style=${m({
-      backgroundColor: this.backgroundColor
-    })}
-          @focusin=${this.handleFocusIn}
-          @focusout=${this.handleFocusOut}
-        >
-          <cx-space
-            part="content"
-            direction="vertical"
-            class="color-swatch__content"
-          >
-            <cx-typography
-              variant="h5"
-              part="name"
-              style=${m({
-      "--color": this.textColor
-    })}
-            >
-              ${this.name}
-            </cx-typography>
-            <cx-space
-              direction="vertical"
-              spacing=${this.rowGap}
-              part="content"
-            >
-              ${T(
-      t,
-      (e) => e.key,
-      (e) => C`<cx-space
-                    direction="horizontal"
-                    align-items="center"
-                    spacing="small"
-                    part="item"
-                    wrap="nowrap"
-                  >
-                    <cx-typography
-                      variant=${this.textVariant}
-                      class="color-swatch__key"
-                      part="key"
-                      style=${m({
-        "--color": this.textColor
-      })}
-                    >
-                      ${e.key}
-                    </cx-typography>
-                    ${B(
-        this.canCopy && e.value !== "",
-        () => C`
-                        <cx-copy-button
-                          part="copy-button"
-                          tabindex=${$(
-          this.canFocusCodeOnly ? void 0 : "-1"
-        )}
-                          class="color-swatch__copy-button"
-                          copy-label=${this.localize.term("clickToCopy")}
-                          focus-copy-label=${this.localize.term(
-          "pressEnterOrCtrlCToCopy"
-        )}
-                          label=${`${e.key} ${e.value}`}
-                          no-icon
-                          value=${e.value}
-                        >
-                          <cx-line-clamp
-                            lines=${this.lineClamp}
-                            disabled-tooltip
-                            class=${k({
-          "color-swatch__value-wrapper": !0
-        })}
-                          >
-                            <cx-typography
-                              variant=${this.textVariant}
-                              style=${m({
-          "--color": this.textColor
-        })}
-                              class="color-swatch__value"
-                              part="value"
-                            >
-                              ${e.value}
-                            </cx-typography>
-                          </cx-line-clamp>
-                        </cx-copy-button>
-                      `,
-        () => C`
-                        <cx-line-clamp
-                          lines=${this.lineClamp}
-                          disabled-tooltip
-                          class="color-swatch__value-wrapper"
-                        >
-                          <cx-typography
-                            variant=${this.textVariant}
-                            style=${m({
-          "--color": this.textColor
-        })}
-                            class="color-swatch__value"
-                            part="value"
-                          >
-                            ${e.value}
-                          </cx-typography>
-                        </cx-line-clamp>
-                      `
-      )}
-                  </cx-space>`
-    )}
-            </cx-space>
-          </cx-space>
-        </div>
-      </cx-resize-observer>
-    `;
-  }
-};
-i.styles = [W, Z];
-i.dependencies = {
-  "cx-copy-button": z,
-  "cx-line-clamp": R,
-  "cx-resize-observer": E,
-  "cx-space": V,
-  "cx-typography": G
-};
-c([
-  L(".color-swatch")
-], i.prototype, "containerEl", 2);
-c([
-  l({ reflect: !0, type: String })
-], i.prototype, "variant", 2);
-c([
-  l({ reflect: !0, type: String })
-], i.prototype, "name", 2);
-c([
-  l({ reflect: !0, type: String })
-], i.prototype, "hex", 2);
-c([
-  l({ reflect: !0, type: String })
-], i.prototype, "rgb", 2);
-c([
-  l({ reflect: !0, type: String })
-], i.prototype, "cmyk", 2);
-c([
-  l({ reflect: !0, type: String })
-], i.prototype, "pms", 2);
-c([
-  l({ attribute: "can-copy", reflect: !0, type: Boolean })
-], i.prototype, "canCopy", 2);
-c([
-  l({
-    attribute: "show-codes",
-    converter: {
-      fromAttribute: (t) => t?.split(" ") ?? [],
-      toAttribute: (t) => t.join(" ")
-    }
-  })
-], i.prototype, "showCodes", 2);
-c([
-  l({ attribute: "can-focus-code-only", reflect: !0, type: Boolean })
-], i.prototype, "canFocusCodeOnly", 2);
-c([
-  l({ attribute: "no-auto-convert", reflect: !0, type: Boolean })
-], i.prototype, "noAutoConvert", 2);
-c([
-  d()
-], i.prototype, "textColor", 2);
-c([
-  d()
-], i.prototype, "textVariant", 2);
-c([
-  d()
-], i.prototype, "rowGap", 2);
-c([
-  d()
-], i.prototype, "lineClamp", 2);
-c([
-  d()
-], i.prototype, "backgroundColor", 2);
-c([
-  d()
-], i.prototype, "canFocusContainer", 2);
-c([
-  d()
-], i.prototype, "isContainerFocused", 2);
-c([
-  H(50)
-], i.prototype, "handleResize", 1);
-c([
-  h("variant")
-], i.prototype, "handleVariantChange", 1);
-c([
-  h("cmyk")
-], i.prototype, "handleCmykChange", 1);
-c([
-  h("rgb")
-], i.prototype, "handleRGBChange", 1);
-c([
-  h("hex")
-], i.prototype, "handleHexChange", 1);
-c([
-  h("hex", { waitUntilFirstUpdate: !0 }),
-  h("rgb", { waitUntilFirstUpdate: !0 }),
-  h("cmyk", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleColorChange", 1);
-c([
-  h("canFocusCodeOnly", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleCanFocusCodeOnlyChange", 1);
-i = c([
-  U("cx-color-swatch")
-], i);
-export {
-  i as C,
-  y as a,
-  p as b,
-  u as c,
-  Y as d,
-  xt as e,
-  Ct as g,
-  ft as p
-};

package/library/chunks/dom.C0OFx7ND.js

@@ -1,78 +0,0 @@
-import { s as d } from "./string.BCk3SmdZ.js";
-import { B as l } from "./custom-element.vnXBMQxc.js";
-const g = (e) => e.nodeType === Node.ELEMENT_NODE, h = (e, n) => {
-  if (!e)
-    return !1;
-  let t = e;
-  for (; t && t.parentNode; ) {
-    if (t.parentNode === n)
-      return !0;
-    t.parentNode.host ? t = t.parentNode.host : t = t.parentNode;
-  }
-  return !1;
-}, u = (e = document) => {
-  const n = e.activeElement;
-  return n ? n.shadowRoot ? u(n.shadowRoot) : n : null;
-}, f = (e, n = document.body, t = "width") => {
-  const i = e?.trim();
-  if (!i)
-    return 0;
-  const o = i.split(/\s+/)[0];
-  if (o.endsWith("px"))
-    return parseFloat(o);
-  const s = o.startsWith("-"), r = document.createElement("div");
-  r.style[t] = s ? o.substring(1) : o, r.style.position = "absolute", r.style.visibility = "hidden", n.appendChild(r);
-  const c = r.getBoundingClientRect(), a = t === "width" ? c.width : c.height;
-  return n.removeChild(r), s ? -a : a;
-}, E = (e, n) => {
-  const t = n.getBoundingClientRect(), o = (e.clientX - t.left) / t.width * 100;
-  return Math.max(0, Math.min(100, o));
-}, w = (e, n) => new Promise((t, i) => {
-  const o = document, s = o.querySelector(
-    `script[src="${e}"]`
-  );
-  if (s) {
-    if (s.getAttribute("data-loaded") === "true")
-      return t();
-    s.addEventListener("load", () => t()), s.addEventListener("error", (c) => i(c));
-    return;
-  }
-  const r = o.createElement("script");
-  r.src = e, r.async = !0, r.onload = () => {
-    r.setAttribute("data-loaded", "true"), t();
-  }, r.onerror = () => i(new Error(`Failed to load ${e}`)), o.head.appendChild(r);
-});
-function C(e) {
-  return [...e].sort((n, t) => {
-    const i = n.getBoundingClientRect().top, o = t.getBoundingClientRect().top;
-    return i - o;
-  });
-}
-function M() {
-  return window.StackMgr?.GetInstance()?.GetIndex() ?? 99999;
-}
-function R(e) {
-  const n = document.createElement("template");
-  return l(e, n.content), n.content.firstElementChild;
-}
-function T(e) {
-  const n = document.createElement("template");
-  return n.innerHTML = d(e), n.content.firstElementChild;
-}
-function N(e, n, t = 0) {
-  const i = e.getBoundingClientRect(), o = n.getBoundingClientRect();
-  return Math.round(o.left) >= Math.round(i.left) - t && Math.round(o.right) <= Math.round(i.right) + t;
-}
-export {
-  T as a,
-  E as b,
-  f as c,
-  M as d,
-  u as e,
-  h as f,
-  R as g,
-  g as h,
-  N as i,
-  w as l,
-  C as s
-};