@orangelogic/design-system 2.133.0 → 2.135.0

package/library/chunks/color-swatch-group.DlTVQ3Ul.js

@@ -1,362 +0,0 @@
-import z from "../components/space.js";
-import { C as $ } from "./table.DuP4v5FN.js";
-import { C as k } from "./typography.DJC_UXgs.js";
-import { n as h, C as F } from "./lib-cortex-element.CVMmyPMC.js";
-import { C, a as g } from "./color-swatch.0zyBEfL_.js";
-import { c as A } from "./component.styles.CRO4Odto.js";
-import { D as p } from "./content-builder.BGzxZUgi.js";
-import { c as S } from "./custom-element.L4WJXn1j.js";
-import { d as T } from "./debounce.DaHuiSGU.js";
-import { L as E } from "./i18n.DoMIwXr2.js";
-import { w as x } from "./watch.CThbualB.js";
-import { g as D, a as R } from "./responsive.Cf65FCWd.js";
-import { x as l, B as H, i as O } from "./lit-element.jLBm65_O.js";
-import { r as d } from "./state.CSDxrqLd.js";
-import { e as P } from "./query.BBf1UFkC.js";
-import { r as W } from "./query-all.i3PyvTUQ.js";
-import { e as w } from "./class-map.BiVq-cVR.js";
-import { i as b } from "./guard.D4axKaMo.js";
-import { o as M } from "./if-defined.BRoBj_Rp.js";
-import { c as G } from "./repeat.DbF2p5ae.js";
-import { o as f } from "./style-map.llVFPd__.js";
-import { n as L } from "./when.Dr1es41R.js";
-var c = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(c || {});
-const y = 165, B = ["HEX", "RGB", "CMYK", "PMS"], I = {
-  resizable: !1
-}, _ = [
-  {
-    field: "hex",
-    formatter: (e) => {
-      const r = document.createElement("div");
-      r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = "center", r.style.width = "100%", r.style.height = "100%", r.style.userSelect = "none";
-      const t = document.createElement("div");
-      return t.style.backgroundColor = e.getValue(), t.style.width = "64px", t.style.height = "32px", t.style.borderRadius = "var(--cx-border-radius-large)", t.style.padding = "0 var(--cx-spacing-medium)", r.appendChild(t), r;
-    },
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    title: "Name",
-    width: 80
-  },
-  {
-    field: "name",
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "left",
-    widthGrow: 3
-  },
-  {
-    field: "hex",
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    minWidth: 130,
-    title: "Hex"
-  },
-  {
-    field: "rgb",
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    minWidth: 130,
-    title: "RGB"
-  },
-  {
-    field: "cmyk",
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    minWidth: 150,
-    title: "CMYK"
-  },
-  {
-    field: "pms",
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    responsive: 0,
-    title: "PMS",
-    widthGrow: 2
-  }
-];
-function u(e, r, t) {
-  const i = r.getValue() ?? "";
-  if (!i)
-    return null;
-  const s = l`<cx-copy-button copy-label=${e.term("clickToCopy")} focus-copy-label=${e.term("pressEnterOrCtrlCToCopy")} hoist label=${`${t}, ${r.getField()} ${e.term("code")} ${i}. ${e.term("clickOrPressCtrlCToCopy")}`} no-icon tooltip-distance="0" value=${i} style=${f({
-    "--button-background-color": "transparent",
-    "--button-font-size": "var(--cx-font-size-large)",
-    "--button-padding": "0",
-    "max-width": "100%"
-  })}><span style=${f({
-    display: "inline-block",
-    maxWidth: "100%",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    verticalAlign: "middle",
-    whiteSpace: "nowrap"
-  })}>${i}</span></cx-copy-button>`, n = document.createDocumentFragment();
-  return H(s, n), n.firstElementChild;
-}
-const K = (e, r) => [
-  ..._.slice(0, 2),
-  {
-    field: "hex",
-    formatter: (t) => u(e, t, r),
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    minWidth: 130,
-    title: "Hex"
-  },
-  {
-    field: "rgb",
-    formatter: (t) => u(e, t, r),
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    minWidth: 130,
-    title: "RGB"
-  },
-  {
-    field: "cmyk",
-    formatter: (t) => u(e, t, r),
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    minWidth: 150,
-    title: "CMYK"
-  },
-  {
-    field: "pms",
-    formatter: (t) => u(e, t, r),
-    headerHozAlign: "center",
-    headerSort: !1,
-    hozAlign: "center",
-    title: "PMS",
-    widthGrow: 2
-  }
-], N = O`:host{--grid-gap:var(--cx-spacing-medium);--padding:0;padding:var(--cx-focus-ring-width);width:100%;min-width:0;display:block;overflow:auto}.color-swatch-group__swatches{padding:var(--padding,0);width:100%;max-width:100%;height:100%}.color-swatch-group__table-container{max-width:100%}.color-swatch-group__table-container:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch-group__swatches--circles--horizontal>cx-color-swatch:not(:first-child){margin-left:var(--swatch-group-horizontal-gap,-100px)}.color-swatch-group__swatches--circles--vertical>cx-color-swatch:not(:first-child){margin-top:var(--swatch-group-vertical-gap,-50px)}.color-swatch-group__swatches--circles--horizontal__item{--swatch-content-padding:0 min(calc(var(--swatch-group-horizontal-gap,-100px) * -.5), 0) 0 0}.color-swatch-group__swatches--circles--vertical__item{--swatch-content-padding:0 0 min(calc(var(--swatch-group-vertical-gap,-50px) * -.5), 0) 0}.color-swatch-group__swatches--circles--vertical__item--mobile{--swatch-size:100%}.color-swatch-group__swatches--grid{gap:var(--grid-gap,var(--cx-spacing-medium));display:grid}.color-swatch-group__table{--body-background-color:transparent;--row-background-color:transparent;--row-even-background-color:transparent;--row-hover-background-color:var(--cx-color-neutral-50);--row-even-hover-background-color:var(--cx-color-neutral-50);--header-background-color:transparent;--group-row-background-color:transparent;--cell-border-color:transparent;--cell-bottom-border-color:transparent;--header-font-size:var(--cx-font-size-large);--header-font-weight:var(--cx-font-weight-semibold);--header-border-right:none;--cell-font-size:var(--cx-font-size-large);--cell-font-weight:var(--cx-font-weight-regular);--cell-line-height:40px;--cell-hover-background-color:transparent;--placeholder-font-size:var(--cx-font-size-medium-large);--cell-horizontal-padding:var(--cx-spacing-2x-small);--header-horizontal-padding:var(--cx-spacing-2x-small);--header-border-bottom:1px solid var(--cx-color-neutral-200);--hover-menu-background-color:var(--row-hover-background-color);--outer-border-color:transparent}.color-swatch-group__table::part(table){background-color:#0000}`;
-var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, a = (e, r, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(r, t) : r, n = e.length - 1, m; n >= 0; n--)
-    (m = e[n]) && (s = (i ? m(r, t, s) : m(s)) || s);
-  return i && s && U(r, t, s), s;
-};
-const v = "unnamed";
-let o = class extends F {
-  constructor() {
-    super(), this.localize = new E(this), this.variant = c.Table, this.data = [], this.maxCol = 4, this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.multiLanguage = !1, this.breakpoints = [350, 696, 1024], this.deviceType = p.Desktop, this.currentCol = 0, this.isFocused = !1, this.canFocusContainer = !0, this.isContainerFocused = !1, this.handleWindowResize = this.handleWindowResize.bind(this);
-  }
-  runFirstUpdated() {
-    this.setAttribute("role", "region"), this.setAttribute("aria-label", this.localize.term("colorSwatches")), this.setAttribute(
-      "aria-roledescription",
-      this.localize.term("colorSwatches")
-    ), this.breakpoints = D(this, this.breakpoints), this.handleResize();
-  }
-  runConnectedCallback() {
-    window.addEventListener("resize", this.handleWindowResize);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("resize", this.handleWindowResize);
-  }
-  handleWindowResize() {
-    this.handleResize();
-  }
-  handleResize() {
-    const e = window.innerWidth;
-    switch (this.variant) {
-      case c.Grid: {
-        const r = Number.parseFloat(
-          getComputedStyle(this.containerEl).getPropertyValue("--grid-gap")
-        );
-        this.currentCol = Math.floor(
-          (e + r) / (y + r)
-        );
-        break;
-      }
-      case c.Circles: {
-        this.deviceType = R(this.breakpoints);
-        break;
-      }
-    }
-  }
-  handleKeyDown(e) {
-    !(e.target instanceof C) && !e.target?.closest(
-      "[data-table-container]"
-    ) || (e.key === "Enter" || e.key === " ") && (this.isFocused = !0);
-  }
-  handleFocusIn() {
-    this.isContainerFocused = !0;
-  }
-  handleFocusOut(e) {
-    this.isContainerFocused = !1, requestAnimationFrame(() => {
-      (e.target === this || !this.shadowRoot?.activeElement) && (this.isFocused = !1);
-    });
-  }
-  /**
-   * Filter out the columns that are not in the showCodes
-   */
-  getTableColumns(e) {
-    const r = this.canCopy ? K(this.localize, e) : _;
-    return [
-      ...r.slice(0, 2),
-      ...r.slice(2).filter(
-        (t) => this.showCodes.includes(t.field.toUpperCase())
-      )
-    ];
-  }
-  /**
-   * Categorize the color swatches by palette
-   */
-  categorizeByPalette() {
-    return Object.values(
-      this.data.reduce((e, r) => {
-        const t = r.palette?.trim() ? r.palette : v;
-        return e[t] || (e[t] = { colors: [], palette: t }), e[t].colors.push(r), e;
-      }, {})
-    );
-  }
-  handleIsFocusedChange() {
-    if (this.isFocused)
-      for (const e of this.tableEls)
-        e.removeAttribute("tabindex");
-    else
-      for (const e of this.tableEls)
-        e.setAttribute("tabindex", "-1");
-    this.isContainerFocused || (this.canFocusContainer = !this.isFocused);
-  }
-  /**
-   * Get current direction of the color swatch group
-   */
-  get currentDirection() {
-    return this.variant === c.Circles && this.deviceType !== p.Desktop ? "vertical" : "horizontal";
-  }
-  /**
-   * Get the variant of the color swatch
-   */
-  get swatchVariant() {
-    switch (this.variant) {
-      case c.Circles:
-        return this.deviceType === p.Tablet ? g.Oval : g.Circle;
-      case c.Grid:
-        return g.GridItem;
-      default:
-        return;
-    }
-  }
-  render() {
-    const e = this.currentDirection, r = this.localize.lang();
-    return l`
-      ${L(
-      this.variant === c.Table,
-      () => l`<cx-space class="color-swatch-group__swatches" direction="vertical" spacing="2x-small">${b(
-        [this.data, this.canCopy],
-        () => this.categorizeByPalette().map(
-          (t) => {
-            const i = this.multiLanguage && r ? t.colors.map((s) => ({
-              ...s,
-              name: s[`name-${r.toLowerCase()}`] ?? s.name
-            })) : t.colors;
-            return l`<div tabindex=${M(
-              this.canFocusContainer ? "0" : void 0
-            )} data-table-container class="color-swatch-group__table-container" @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.handleKeyDown}><cx-typography variant="h3">${t.palette === v ? this.localize.term("noPalette") : this.localize.term("shadesPalette", t.palette)}</cx-typography><cx-table part="table" tabindex=${this.isFocused ? void 0 : "-1"} no-selectable layout="fitColumns" .columns=${b(
-              [this.showCodes, this.canCopy, this.localize],
-              () => this.getTableColumns(t.palette)
-            )} .columnDefaults=${I} .rowHeight=${48} .data=${i} class="color-swatch-group__table"></cx-table></div>`;
-          }
-        )
-      )}</cx-space>`,
-      () => l`<cx-space part="color-swatch" role="list" aria-label=${this.localize.term("listOfColors")} aria-roledescription=${this.localize.term("listOfColors")} direction=${e} justify-content="flex-start" wrap=${this.variant === "circles" ? "nowrap" : "wrap"} class=${w({
-        "color-swatch-group__swatches": !0,
-        "color-swatch-group__swatches--grid": this.variant === c.Grid,
-        [`color-swatch-group__swatches--circles--${e}`]: this.variant === c.Circles
-      })} style=${f({
-        gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${y}px, 1fr))`
-      })}>${G(
-        this.data,
-        (t) => t.name,
-        (t, i) => l`<cx-color-swatch part="color-swatch-item" role="listitem" aria-label=${this.localize.term(
-          "colorOfTotal",
-          i + 1,
-          this.data.length
-        )} hex=${t.hex} rgb=${t.rgb} cmyk=${t.cmyk} pms=${t.pms} name=${this.multiLanguage && r ? t[`name-${r.toLowerCase()}`] ?? t.name : t.name} variant=${this.swatchVariant} ?can-copy=${this.canCopy} ?can-focus-code-only=${this.isFocused} .showCodes=${this.showCodes} no-auto-convert class=${w({
-          [`color-swatch-group__swatches--circles--${e}__item`]: this.variant === c.Circles,
-          "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === c.Circles && this.deviceType === p.Mobile
-        })} @keydown=${this.handleKeyDown} @focusout=${this.handleFocusOut}></cx-color-swatch>`
-      )}</cx-space>`
-    )}
-    `;
-  }
-};
-o.styles = [A, N];
-o.dependencies = {
-  "cx-color-swatch": C,
-  "cx-space": z,
-  "cx-table": $,
-  "cx-typography": k
-};
-a([
-  P(".color-swatch-group__swatches")
-], o.prototype, "containerEl", 2);
-a([
-  W("cx-table")
-], o.prototype, "tableEls", 2);
-a([
-  h({ reflect: !0, type: String })
-], o.prototype, "variant", 2);
-a([
-  h({ reflect: !0, type: Array })
-], o.prototype, "data", 2);
-a([
-  h({ attribute: "max-col", reflect: !0, type: Number })
-], o.prototype, "maxCol", 2);
-a([
-  h({ attribute: "can-copy", reflect: !0, type: Boolean })
-], o.prototype, "canCopy", 2);
-a([
-  h({
-    attribute: "show-codes",
-    converter: {
-      fromAttribute: (e) => (e?.split(" ") ?? []).filter((t) => B.includes(t)),
-      toAttribute: (e) => e.join(" ")
-    },
-    reflect: !0
-  })
-], o.prototype, "showCodes", 2);
-a([
-  h({ attribute: "multi-language", reflect: !0, type: Boolean })
-], o.prototype, "multiLanguage", 2);
-a([
-  d()
-], o.prototype, "breakpoints", 2);
-a([
-  d()
-], o.prototype, "deviceType", 2);
-a([
-  d()
-], o.prototype, "currentCol", 2);
-a([
-  d()
-], o.prototype, "isFocused", 2);
-a([
-  d()
-], o.prototype, "canFocusContainer", 2);
-a([
-  d()
-], o.prototype, "isContainerFocused", 2);
-a([
-  T(100)
-], o.prototype, "handleWindowResize", 1);
-a([
-  x("variant", { waitUntilFirstUpdate: !0 })
-], o.prototype, "handleResize", 1);
-a([
-  x("isFocused", { waitUntilFirstUpdate: !0 })
-], o.prototype, "handleIsFocusedChange", 1);
-o = a([
-  S("cx-color-swatch-group")
-], o);
-export {
-  o as C,
-  c as a
-};

package/library/chunks/directive-helpers.Dm4rc594.js

@@ -1,37 +0,0 @@
-import { Z as d } from "./lit-element.jLBm65_O.js";
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const { I: c } = d, v = (e) => e.strings === void 0, f = () => document.createComment(""), p = (e, i, t) => {
-  const s = e._$AA.parentNode, $ = i === void 0 ? e._$AB : i._$AA;
-  if (t === void 0) {
-    const r = s.insertBefore(f(), $), _ = s.insertBefore(f(), $);
-    t = new c(r, _, e, e.options);
-  } else {
-    const r = t._$AB.nextSibling, _ = t._$AM, o = _ !== e;
-    if (o) {
-      let A;
-      t._$AQ?.(e), t._$AM = e, t._$AP !== void 0 && (A = e._$AU) !== _._$AU && t._$AP(A);
-    }
-    if (r !== $ || o) {
-      let A = t._$AA;
-      for (; A !== r; ) {
-        const n = A.nextSibling;
-        s.insertBefore(A, $), A = n;
-      }
-    }
-  }
-  return t;
-}, B = (e, i, t = e) => (e._$AI(i, t), e), m = {}, a = (e, i = m) => e._$AH = i, g = (e) => e._$AH, u = (e) => {
-  e._$AR(), e._$AA.remove();
-};
-export {
-  u as M,
-  v as f,
-  a as m,
-  g as p,
-  p as s,
-  B as v
-};