@orangelogic/design-system 2.19.0-pr77202.21

package/library/components/menu.js

@@ -0,0 +1,427 @@
+import { i as f, n as c, C as p, x as d, c as b } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as g } from "../chunks/component.styles.DtouHn2g.js";
+import { L as v } from "../chunks/i18n.C6c6_pqI.js";
+import { r as y } from "../chunks/state.Dt9F_SuS.js";
+import { e as w } from "../chunks/query.BBf1UFkC.js";
+import { n as x } from "../chunks/when.Dr1es41R.js";
+import { C as M } from "../chunks/menu-item.HK2A6RqD.js";
+const k = f`
+  :host {
+    display: block;
+    position: relative;
+    background: var(--cx-panel-background-color);
+    border: solid var(--cx-panel-border-width) var(--cx-panel-border-color);
+    border-radius: var(--cx-border-radius-large);
+    padding: var(--cx-spacing-x-small) 0;
+    overflow: auto;
+
+    --divider-color: var(--cx-panel-border-color);
+    --divider-width: var(--cx-panel-border-width);
+    --divider-spacing: var(--cx-spacing-x-small);
+  }
+
+  :host([horizontal]) {
+    display: flex;
+    padding: 0 var(--cx-spacing-x-small);
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  ::slotted(cx-divider) {
+    --color: var(--divider-color);
+    --width: var(--divider-width);
+    --spacing: var(--divider-spacing);
+  }
+
+  ::slotted([data-alternating-grouping])::before {
+    content: ' ';
+    background-color: var(--divider-color);
+
+    display: block;
+    margin: var(--divider-spacing) 0;
+    height: var(--divider-width);
+  }
+
+  ::slotted([data-alternating-grouping='horizontal'])::before {
+    display: inline-block;
+    height: 100%;
+    margin: 0 var(--divider-spacing);
+    width: var(--divider-width);
+  }
+
+  :host([horizontal]) ::slotted(cx-menu-section) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  :host([horizontal]) ::slotted(cx-menu-item) {
+    display: flex;
+  }
+
+  :host([variant='multiple']) {
+    position: relative;
+    overflow: hidden;
+  }
+
+  :host([variant='multiple']) ::slotted(cx-menu[name]) {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-50%);
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: none;
+    transition:
+      opacity var(--cx-transition-fast) ease-in-out,
+      transform var(--cx-transition-medium) ease-in-out;
+  }
+
+  :host([variant='multiple']) ::slotted(cx-menu[active]) {
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: auto;
+  }
+
+  .back__button::part(checked-icon),
+  .back__button::part(submenu-icon) {
+    display: none;
+  }
+
+  .back__divider {
+    --spacing: var(--cx-spacing-x-small);
+  }
+`;
+var A = Object.defineProperty, I = Object.getOwnPropertyDescriptor, u = (e, t, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? I(t, r) : t, h = e.length - 1, n; h >= 0; h--)
+    (n = e[h]) && (o = (i ? n(t, r, o) : n(o)) || o);
+  return i && o && A(t, r, o), o;
+};
+function m(e) {
+  return e.tagName.toLowerCase() === "cx-menu" && e instanceof l && e.getAttribute("role") === "menu";
+}
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.localize = new v(this), this.horizontal = !1, this.variant = "default", this.active = !1, this.name = "", this.back = "", this.default = !1, this.bubbleKeyDown = !1, this.ignoredKeys = [], this.disabledTabLoop = !1, this.resizeObserver = null, this.slotMutationObserver = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "menu"), this.slotMutationObserver = new MutationObserver(() => this.handleSlotChange()), this.slotMutationObserver.observe(this, {
+      attributeFilter: ["inert", "is-empty"],
+      attributes: !0,
+      subtree: !0
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.slotMutationObserver && (this.slotMutationObserver.disconnect(), this.slotMutationObserver = null);
+  }
+  runFirstUpdated() {
+    if (this.variant === "multiple") {
+      const e = this.getAllSubMenus();
+      this.setActiveMenu(e[0]?.name ?? ""), this.updateComplete.then(() => {
+        this.adjustMenuSize();
+      });
+    }
+  }
+  handleClick(e) {
+    const t = ["menuitem", "menuitemcheckbox"], r = e.composedPath(), i = r.find(
+      (a) => t.includes(a?.getAttribute?.("role") || "")
+    );
+    if (!i)
+      return;
+    const o = i.menu;
+    if (o) {
+      this.setActiveMenu(o);
+      return;
+    }
+    if (r.find(
+      (a) => a?.getAttribute?.("role") === "menu"
+    ) !== this)
+      return;
+    const s = i;
+    s.type === "checkbox" && (s.checked = !s.checked), this.emit("cx-select", { detail: { item: s } });
+  }
+  handleKeyDown(e) {
+    if (!this.ignoredKeys.includes(e.key)) {
+      if (this.isMenuItem(e.target) && (e.key === "Enter" || e.key === " ")) {
+        const t = this.getCurrentItem();
+        e.preventDefault(), this.bubbleKeyDown || e.stopPropagation(), t?.click();
+      } else if ([
+        "Home",
+        "End",
+        "Tab",
+        "ArrowDown",
+        "ArrowUp",
+        "ArrowLeft",
+        "ArrowRight"
+      ].includes(e.key)) {
+        const t = this.getAllItems(), r = this.getCurrentItem();
+        let i = r ? t.indexOf(r) : 0;
+        if (["ArrowLeft", "ArrowRight"].includes(e.key) && !this.bubbleKeyDown && !(this.parentElement instanceof l) && !(this.parentElement instanceof M) && e.stopPropagation(), t.length > 0) {
+          const o = this.horizontal ? e.key === "ArrowRight" || i === t.length - 1 && e.key === "ArrowDown" : e.key === "ArrowDown", h = this.horizontal ? e.key === "ArrowLeft" || i === 0 && e.key === "ArrowUp" : e.key === "ArrowUp";
+          if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(
+            e.key
+          ) && !o && !h)
+            return;
+          if (this.bubbleKeyDown || e.stopPropagation(), o || e.key === "Tab" && !e.shiftKey)
+            i++;
+          else if (h || e.key === "Tab" && e.shiftKey)
+            i--;
+          else if (e.key === "Home") {
+            e.preventDefault();
+            let n = this.parentElement?.firstElementChild;
+            for (; n && !m(n); )
+              n = n.nextElementSibling;
+            if (n) {
+              const s = n.getAllItems();
+              if (s.length > 0) {
+                n.setCurrentItem(s[0]), s[0].focus();
+                return;
+              }
+            }
+            i = 0;
+          } else if (e.key === "End") {
+            e.preventDefault();
+            let n = this.parentElement?.lastElementChild;
+            for (; n && !m(n); )
+              n = n.previousElementSibling;
+            if (n) {
+              const s = n.getAllItems();
+              if (s.length > 0) {
+                n.setCurrentItem(s[s.length - 1]), s[s.length - 1].focus();
+                return;
+              }
+            }
+            i = 0;
+          }
+          if (i < 0 && !this.disabledTabLoop) {
+            e.preventDefault();
+            let n = this.previousElementSibling;
+            for (; n && !m(n); )
+              n = n.previousElementSibling;
+            if (n) {
+              const s = n.getAllItems();
+              if (s.length > 0) {
+                n.setCurrentItem(
+                  s[s.length - 1]
+                ), s[s.length - 1].focus();
+                return;
+              }
+            } else {
+              let s = this.parentElement?.lastElementChild;
+              for (; s && !m(s); )
+                s = s.previousElementSibling;
+              if (s) {
+                const a = s.getAllItems();
+                if (a.length > 0) {
+                  s.setCurrentItem(a[a.length - 1]), a[a.length - 1].focus();
+                  return;
+                }
+              }
+              i = 0;
+            }
+          }
+          if (i > t.length - 1 && !this.disabledTabLoop) {
+            e.preventDefault();
+            let n = this.nextElementSibling;
+            for (; n && !m(n); )
+              n = n.nextElementSibling;
+            if (n) {
+              const s = n.getAllItems();
+              if (s.length > 0) {
+                n.setCurrentItem(s[0]), s[0].focus();
+                return;
+              }
+            } else {
+              let s = this.parentElement?.firstElementChild;
+              for (; s && !m(s); )
+                s = s.nextElementSibling;
+              if (s) {
+                const a = s.getAllItems();
+                if (a.length > 0) {
+                  s.setCurrentItem(a[0]), a[0].focus();
+                  return;
+                }
+              }
+              i = 0;
+            }
+          }
+          if (i < 0 || i > t.length - 1)
+            return;
+          e.preventDefault(), this.setCurrentItem(t[i]), t[i].focus();
+        }
+      }
+    }
+  }
+  handleMouseDown(e) {
+    const t = e.target;
+    this.isMenuItem(t) && this.setCurrentItem(t);
+  }
+  handleSlotChange() {
+    const e = this.getAllItems();
+    e.length > 0 && this.setCurrentItem(e[0]);
+    let t = null;
+    this.defaultSlot.assignedElements().filter((r) => {
+      const i = r;
+      return this.isMenuItem(i) || this.isMenuSection(i);
+    }).forEach((r) => {
+      const i = r, o = !i.inert && !i.hasAttribute("is-empty");
+      t && o && (this.isMenuSection(t) && this.isMenuItem(i) || this.isMenuSection(i) && i.childElementCount > 0) ? i.setAttribute(
+        "data-alternating-grouping",
+        this.horizontal ? "horizontal" : ""
+      ) : i.removeAttribute("data-alternating-grouping"), o && (t = i);
+    });
+  }
+  isMenuSection(e) {
+    return e instanceof HTMLElement ? e.tagName.toLowerCase() === "cx-menu-section" : !1;
+  }
+  isMenuItem(e) {
+    return e instanceof HTMLElement ? e.tagName.toLowerCase() === "cx-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes(
+      e.getAttribute("role") ?? ""
+    ) : !1;
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return this.defaultSlot.assignedElements({ flatten: !0 }).flatMap((t) => {
+      if (this.isMenuSection(t)) {
+        const r = t.shadowRoot?.querySelector("slot");
+        return r ? [...r.assignedElements({ flatten: !0 })] : [];
+      }
+      return t;
+    }).filter((t) => !(t.inert || !this.isMenuItem(t)));
+  }
+  /** @internal Gets all slotted submenus, used for 'multiple' variant */
+  getAllSubMenus() {
+    return [...this.querySelectorAll("cx-menu")];
+  }
+  setActiveMenu(e) {
+    const t = this.getAllSubMenus();
+    let r = null;
+    t.forEach((i) => {
+      i.name === e ? (i.active = !0, r = i) : i.active = !1;
+    }), this.adjustMenuSize(), r && (this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.resizeObserver = new ResizeObserver(() => {
+      this.adjustMenuSize();
+    }), this.resizeObserver.observe(r));
+  }
+  async adjustMenuSize(e = 250) {
+    const t = this.getActiveMenu();
+    if (t) {
+      await t.updateComplete;
+      const r = t.offsetWidth, i = t.offsetHeight;
+      this.animate(
+        [
+          {
+            height: this.style.height ?? `${i}px`,
+            width: this.style.width ?? `${r}px`
+          },
+          { height: `${i}px`, width: `${r}px` }
+          // Fade out
+        ],
+        {
+          duration: this.offsetHeight === 0 ? 0 : e,
+          fill: "forwards"
+        }
+      ).play();
+    } else
+      this.style.width = "", this.style.height = "";
+  }
+  resetActiveMenu() {
+    this.getAllSubMenus().forEach((t) => {
+      t.default && this.setActiveMenu(t.name);
+    });
+  }
+  getActiveMenu() {
+    return this.getAllSubMenus().find((t) => t.active) || void 0;
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((e) => e.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(e) {
+    this.getAllItems().forEach((r) => {
+      r.setAttribute("tabindex", r === e ? "0" : "-1");
+    });
+  }
+  render() {
+    const e = x(
+      this.back,
+      () => d`
+        <slot name="back-button" role="menuitem" menu=${this.back}>
+          <cx-menu-item
+            part="back-button"
+            class="back__button"
+            menu=${this.back}
+          >
+            <cx-icon slot="prefix" name="chevron_left"></cx-icon>
+            ${this.localize.term("back")}
+          </cx-menu-item>
+          <cx-divider class="back__divider"></cx-divider>
+        </slot>
+      `
+    );
+    return this.variant === "multiple" ? d`${e}<slot
+          @slotchange=${this.handleSlotChange}
+          @click=${this.handleClick}
+          @keydown=${this.handleKeyDown}
+          @mousedown=${this.handleMouseDown}
+        ></slot>` : d`${e}<slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>`;
+  }
+};
+l.styles = [g, k];
+u([
+  w("slot")
+], l.prototype, "defaultSlot", 2);
+u([
+  c({ type: Boolean })
+], l.prototype, "horizontal", 2);
+u([
+  c({ reflect: !0 })
+], l.prototype, "variant", 2);
+u([
+  c({ reflect: !0, type: Boolean })
+], l.prototype, "active", 2);
+u([
+  c({ reflect: !0 })
+], l.prototype, "name", 2);
+u([
+  c({ reflect: !0 })
+], l.prototype, "back", 2);
+u([
+  c({ reflect: !0, type: Boolean })
+], l.prototype, "default", 2);
+u([
+  c({ attribute: "bubble-keydown", reflect: !0, type: Boolean })
+], l.prototype, "bubbleKeyDown", 2);
+u([
+  c({
+    attribute: "ignored-keys",
+    converter: {
+      fromAttribute: (e) => e?.split(" ") ?? [],
+      toAttribute: (e) => e.join(" ")
+    },
+    type: String
+  })
+], l.prototype, "ignoredKeys", 2);
+u([
+  c({ attribute: "disabled-tab-loop", reflect: !0, type: Boolean })
+], l.prototype, "disabledTabLoop", 2);
+u([
+  y()
+], l.prototype, "resizeObserver", 2);
+l = u([
+  b("cx-menu")
+], l);
+export {
+  l as default
+};

package/library/components/molecules.js

@@ -0,0 +1,38 @@
+import { default as e } from "./bicolor-picker.js";
+import { default as a } from "./border-input-group.js";
+import { C as p } from "../chunks/color-swatch.JL7CbNRm.js";
+import { C } from "../chunks/confirm-popover.DwSAxWFi.js";
+import { default as u } from "./corner-position-input-group.js";
+import { C as m } from "../chunks/cropper.3qRm5dEe.js";
+import { default as i } from "./dynamic-select.js";
+import { C as c } from "../chunks/folder-select.BsbsjikP.js";
+import { C as P } from "../chunks/list-editor.BPUsGMW-.js";
+import { default as I } from "./masonry.js";
+import { default as y } from "./padding-input-group.js";
+import { default as w } from "./position-picker.js";
+import { default as B } from "./shadow-input-group.js";
+import { default as b } from "./share-option-list.js";
+import { default as v } from "./sidebar.js";
+import { default as E } from "./size-input-group.js";
+import { default as M } from "./stepper-wizard.js";
+import { default as T } from "./typeface.js";
+export {
+  e as CxBicolorPicker,
+  a as CxBorderInputGroup,
+  p as CxColorSwatch,
+  C as CxConfirmPopover,
+  u as CxCornerPositionInputGroup,
+  m as CxCropper,
+  i as CxDynamicSelect,
+  c as CxFolderSelect,
+  P as CxListEditor,
+  I as CxMasonry,
+  y as CxPaddingInputGroup,
+  w as CxPositionPicker,
+  B as CxShadowInputGroup,
+  b as CxShareOptionList,
+  v as CxSidebar,
+  E as CxSizeInputGroup,
+  M as CxStepperWizard,
+  T as CxTypeface
+};

package/library/components/mutation-observer.d.ts

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

package/library/components/mutation-observer.js

@@ -0,0 +1,100 @@
+import { i as c, n as o, C as u, x as p, c as b } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as v } from "../chunks/component.styles.DtouHn2g.js";
+import { w as l } from "../chunks/watch.BCJD77bD.js";
+import { e as O } from "../chunks/query.BBf1UFkC.js";
+const f = c`
+  :host {
+    display: contents;
+  }
+`;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (a, i, n, r) => {
+  for (var s = r > 1 ? void 0 : r ? y(i, n) : i, h = a.length - 1, d; h >= 0; h--)
+    (d = a[h]) && (s = (r ? d(i, n, s) : d(s)) || s);
+  return r && s && m(i, n, s), s;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.attrOldValue = !1, this.charData = !1, this.charDataOldValue = !1, this.childList = !1, this.disabled = !1, this.handleMutation = (a) => {
+      this.emit("cx-mutation", {
+        detail: { mutationList: a }
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.mutationObserver = new MutationObserver(this.handleMutation), this.disabled || this.startObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.stopObserver();
+  }
+  startObserver() {
+    const a = typeof this.attr == "string" && this.attr.length > 0, i = a && this.attr !== "*" ? this.attr.split(" ") : void 0;
+    (this.mutationSlot?.assignedNodes({ flatten: !0 }) || []).forEach((r) => {
+      if (r.nodeType === Node.ELEMENT_NODE)
+        try {
+          this.mutationObserver.observe(r, {
+            attributeFilter: i,
+            attributeOldValue: this.attrOldValue,
+            attributes: a,
+            characterData: this.charData,
+            characterDataOldValue: this.charDataOldValue,
+            childList: this.childList,
+            subtree: !0
+          });
+        } catch {
+        }
+    });
+  }
+  stopObserver() {
+    this.mutationObserver.disconnect();
+  }
+  handleDisabledChange() {
+    this.disabled ? this.stopObserver() : this.startObserver();
+  }
+  handleSlotChange() {
+    this.stopObserver(), this.startObserver();
+  }
+  handleChange() {
+    this.stopObserver(), this.startObserver();
+  }
+  render() {
+    return p`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+};
+t.styles = [v, f];
+e([
+  O("slot")
+], t.prototype, "mutationSlot", 2);
+e([
+  o({ reflect: !0 })
+], t.prototype, "attr", 2);
+e([
+  o({ attribute: "attr-old-value", reflect: !0, type: Boolean })
+], t.prototype, "attrOldValue", 2);
+e([
+  o({ attribute: "char-data", reflect: !0, type: Boolean })
+], t.prototype, "charData", 2);
+e([
+  o({ attribute: "char-data-old-value", reflect: !0, type: Boolean })
+], t.prototype, "charDataOldValue", 2);
+e([
+  o({ attribute: "child-list", reflect: !0, type: Boolean })
+], t.prototype, "childList", 2);
+e([
+  o({ reflect: !0, type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  l("disabled")
+], t.prototype, "handleDisabledChange", 1);
+e([
+  l("attr", { waitUntilFirstUpdate: !0 }),
+  l("attr-old-value", { waitUntilFirstUpdate: !0 }),
+  l("char-data", { waitUntilFirstUpdate: !0 }),
+  l("char-data-old-value", { waitUntilFirstUpdate: !0 }),
+  l("childList", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleChange", 1);
+t = e([
+  b("cx-mutation-observer")
+], t);
+export {
+  t as default
+};

package/library/components/option.d.ts

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

package/library/components/option.js

@@ -0,0 +1,14 @@
+import "../chunks/custom-element.fmLrnDZr.js";
+import "../chunks/component.styles.DtouHn2g.js";
+import { C as u } from "../chunks/option.pgg_ZoHY.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/when.Dr1es41R.js";
+import "./icon.js";
+import "./space.js";
+export {
+  u as default
+};

package/library/components/organisms.js

@@ -0,0 +1,8 @@
+import { C } from "../chunks/asset-link-format.CNLtOgSn.js";
+import { C as e } from "../chunks/color-swatch-group.fL5ADbZF.js";
+import { C as x } from "../chunks/file-on-demand.Cb4mtesb.js";
+export {
+  C as CxAssetLinkFormat,
+  e as CxColorSwatchGroup,
+  x as CxFileOnDemand
+};

package/library/components/padding-input-group.d.ts

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