@orangelogic/design-system 2.19.0-pr77202.21

package/library/chunks/modal.BqNLxgs1.js

@@ -0,0 +1,81 @@
+import { a as u } from "./tabbable.CcMz3mIL.js";
+function* h(t = document.activeElement) {
+  t != null && (yield t, "shadowRoot" in t && t.shadowRoot && t.shadowRoot.mode !== "closed" && (yield* h(t.shadowRoot.activeElement)));
+}
+function d() {
+  return [...h()].pop();
+}
+let r = [];
+class f {
+  constructor(e) {
+    this.tabDirection = "forward", this.handleFocusIn = () => {
+      this.isActive() && this.checkFocus();
+    }, this.handleKeyDown = (n) => {
+      if (n.key !== "Tab" || this.isExternalActivated || !this.isActive())
+        return;
+      const c = d();
+      if (this.previousFocus = c, this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus))
+        return;
+      n.shiftKey ? this.tabDirection = "backward" : this.tabDirection = "forward";
+      const s = u(this.element);
+      let i = s.findIndex(
+        (o) => o === c
+      );
+      this.previousFocus = this.currentFocus;
+      const a = this.tabDirection === "forward" ? 1 : -1;
+      for (; ; ) {
+        i + a >= s.length ? i = 0 : i + a < 0 ? i = s.length - 1 : i += a, this.previousFocus = this.currentFocus;
+        const o = (
+          /** @type {HTMLElement} */
+          s[i]
+        );
+        if (this.tabDirection === "backward" && this.previousFocus && this.possiblyHasTabbableChildren(this.previousFocus) || o && this.possiblyHasTabbableChildren(o))
+          return;
+        n.preventDefault(), this.currentFocus = o, this.currentFocus?.focus({ preventScroll: !1 });
+        const l = [...h()];
+        if (l.includes(this.currentFocus) || !l.includes(this.previousFocus))
+          break;
+      }
+      setTimeout(() => this.checkFocus());
+    }, this.handleKeyUp = () => {
+      this.tabDirection = "forward";
+    }, this.element = e, this.elementsWithTabbableControls = ["iframe"];
+  }
+  /** Activates focus trapping. */
+  activate() {
+    r.push(this.element), document.addEventListener("focusin", this.handleFocusIn), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("keyup", this.handleKeyUp);
+  }
+  /** Deactivates focus trapping. */
+  deactivate() {
+    r = r.filter((e) => e !== this.element), this.currentFocus = null, document.removeEventListener("focusin", this.handleFocusIn), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("keyup", this.handleKeyUp);
+  }
+  /** Determines if this modal element is currently active or not. */
+  isActive() {
+    return r[r.length - 1] === this.element;
+  }
+  /** Activates external modal behavior and temporarily disables focus trapping. */
+  activateExternal() {
+    this.isExternalActivated = !0;
+  }
+  /** Deactivates external modal behavior and re-enables focus trapping. */
+  deactivateExternal() {
+    this.isExternalActivated = !1;
+  }
+  checkFocus() {
+    if (this.isActive() && !this.isExternalActivated) {
+      const e = u(this.element);
+      if (!this.element.matches(":focus-within")) {
+        const n = e[0], c = e[e.length - 1], s = this.tabDirection === "forward" ? n : c;
+        typeof s?.focus == "function" && (this.currentFocus = s, s.focus({ preventScroll: !1 }));
+      }
+    }
+  }
+  possiblyHasTabbableChildren(e) {
+    return this.elementsWithTabbableControls.includes(
+      e.tagName.toLowerCase()
+    ) || e.hasAttribute("controls");
+  }
+}
+export {
+  f as M
+};

package/library/chunks/number.eX2EGPvy.js

@@ -0,0 +1,83 @@
+function d({
+  decimals: e = 2,
+  inputUnit: n = "B",
+  targetUnit: t = "B",
+  value: s
+}) {
+  const r = {
+    B: 1,
+    GB: 1073741824,
+    KB: 1024,
+    MB: 1048576,
+    TB: 1099511627776
+  }, o = {
+    Gb: 1024 ** 3 / 8,
+    Kb: 1024 / 8,
+    Mb: 1024 ** 2 / 8,
+    Tb: 1024 ** 4 / 8,
+    b: 1 / 8
+  }, i = { ...r, ...o }, a = i[t], c = s * i[n], u = parseFloat((c / a).toFixed(e));
+  return Number.isNaN(u) ? 0 : u;
+}
+function h(e) {
+  return e > 360 ? 360 : e < -360 ? -360 : e;
+}
+function l(e, n) {
+  const t = (i, a) => a === 0 ? i : t(a, i % a), s = Math.round(e), r = Math.round(n), o = t(s, r);
+  return {
+    height: r / o,
+    width: s / o
+  };
+}
+function f(e, n, t) {
+  const s = t * Math.PI / 180;
+  if (t % 90 === 0)
+    return {
+      height: t % 180 === 0 ? n : e,
+      width: t % 180 === 0 ? e : n
+    };
+  const r = Math.abs(Math.cos(s)), o = Math.abs(Math.sin(s)), i = e * r + n * o, a = e * o + n * r;
+  return {
+    height: Math.round(a),
+    width: Math.round(i)
+  };
+}
+function v(e) {
+  if (!e || typeof e != "string")
+    return 0;
+  const n = e.trim();
+  if (!n)
+    return 0;
+  if (n.endsWith("s") && !n.endsWith("ms")) {
+    const t = parseFloat(n);
+    return isNaN(t) || t < 0 ? 0 : t * 1e3;
+  }
+  if (n.endsWith("m")) {
+    const t = parseFloat(n);
+    return isNaN(t) || t < 0 ? 0 : t * 60 * 1e3;
+  }
+  if (n.endsWith("h")) {
+    const t = parseFloat(n);
+    return isNaN(t) || t < 0 ? 0 : t * 60 * 60 * 1e3;
+  }
+  if (n.endsWith("ms")) {
+    const t = parseFloat(n);
+    return isNaN(t) || t < 0 ? 0 : t;
+  }
+  return 0;
+}
+function M(e) {
+  const n = /^(-?\d*\.?\d+)([a-zA-Z%]*)$/.exec(e.trim());
+  if (!n)
+    return null;
+  const t = Number.parseFloat(n[1]);
+  return { unit: n[2] || "", value: t };
+}
+export {
+  d as a,
+  v as b,
+  l as c,
+  M as e,
+  f as r,
+  h as s
+};

package/library/chunks/option.pgg_ZoHY.js

@@ -0,0 +1,294 @@
+import { i as x, n as r, C as v, x as h, c as m } from "./custom-element.fmLrnDZr.js";
+import { c as g } from "./component.styles.DtouHn2g.js";
+import { L as b } from "./i18n.C6c6_pqI.js";
+import { w as d } from "./watch.BCJD77bD.js";
+import { r as f } from "./state.Dt9F_SuS.js";
+import { e as _ } from "./query.BBf1UFkC.js";
+import { e as y } from "./class-map.DqNfBvJI.js";
+import { n as u } from "./when.Dr1es41R.js";
+import k from "../components/icon.js";
+import w from "../components/space.js";
+var s = /* @__PURE__ */ ((t) => (t.Left = "left", t.Right = "right", t))(s || {});
+const C = x`
+  :host {
+    display: block;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  .option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-family: var(--cx-font-sans);
+    font-size: var(--cx-font-size-small);
+    font-weight: var(--option-font-weight, var(--cx-font-weight-regular));
+    line-height: var(--cx-line-height-large);
+    letter-spacing: var(--cx-letter-spacing-normal);
+    color: var(--option-color, var(--cx-color-neutral-700));
+    padding: var(--cx-spacing-x-small) var(--cx-spacing-medium)
+      var(--cx-spacing-x-small) var(--cx-spacing-x-small);
+    transition: var(--cx-transition-fast) fill;
+    cursor: pointer;
+  }
+
+  .option:not(.option--show-check) {
+    padding-inline: var(--cx-spacing-small);
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: var(--cx-menu-item-background-color-hover);
+  }
+
+  .option--current,
+  .option--current.option--disabled {
+    background-color: var(--cx-menu-item-background-color-hover);
+    opacity: 1;
+  }
+
+  .option--selected {
+    color: var(--option-selected-color, var(--cx-color-primary));
+    font-weight: var(
+      --option-selected-font-weight,
+      var(--cx-font-weight-regular)
+    );
+  }
+
+  .option--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .option__content {
+    flex: 1;
+  }
+
+  .option__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    line-height: var(--cx-line-height-medium);
+  }
+
+  .option .option__check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    padding-inline-end: var(--cx-spacing-2x-small);
+    display: none;
+  }
+
+  .option--show-check .option__check {
+    display: block;
+  }
+
+  .option--show-check.option--selected .option__check {
+    visibility: visible;
+  }
+
+  .option__help-text {
+    color: var(--option-help-text-color, var(--cx-color-neutral-600));
+    font-weight: var(
+      --option-help-text-font-weight,
+      var(--cx-font-weight-regular)
+    );
+  }
+
+  .option--selected .option__content .option__help-text {
+    color: var(--option-selected-help-text-color, var(--cx-color-primary));
+    font-weight: var(
+      --option-selected-help-text-font-weight,
+      var(--cx-font-weight-regular)
+    );
+  }
+
+  .option__prefix,
+  .option__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option__prefix::slotted(*) {
+    margin-inline-end: var(--cx-spacing-x-small);
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: var(--cx-spacing-x-small);
+  }
+
+  .option__prefix {
+    align-self: var(--prefix-alignment, center);
+  }
+
+  .option__suffix {
+    align-self: var(--suffix-alignment, center);
+  }
+
+  .option__check {
+    align-self: var(--check-alignment, center);
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .option {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+var L = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, a, i, l) => {
+  for (var n = l > 1 ? void 0 : l ? E(a, i) : a, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (n = (l ? p(a, i, n) : p(n)) || n);
+  return l && n && L(a, i, n), n;
+};
+let e = class extends v {
+  constructor() {
+    super(...arguments), this.localize = new b(this), this.current = !1, this.selected = !1, this.hasHover = !1, this.value = "", this.disabled = !1, this.showCheck = !1, this.checkPlacement = s.Left;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "option"), this.setAttribute("aria-selected", "false");
+  }
+  handleDefaultSlotChange() {
+    const t = this.getTextLabel();
+    if (typeof this.cachedTextLabel > "u") {
+      this.cachedTextLabel = t;
+      return;
+    }
+    t !== this.cachedTextLabel && (this.cachedTextLabel = t, this.emit("slotchange", {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !1
+    }));
+  }
+  handleMouseEnter() {
+    this.hasHover = !0;
+  }
+  handleMouseLeave() {
+    this.hasHover = !1;
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleSelectedChange() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  handleValueChange() {
+    typeof this.value != "string" && (this.value = String(this.value)), this.value.includes(" ") && (console.error(
+      "Option values cannot include a space. All spaces have been replaced with underscores.",
+      this
+    ), this.value = this.value.replace(/ /g, "_"));
+  }
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    const t = this.childNodes;
+    let a = "";
+    return [...t].forEach((i) => {
+      i.nodeType === Node.ELEMENT_NODE && (i.hasAttribute("slot") || (a += i.textContent)), i.nodeType === Node.TEXT_NODE && (a += i.textContent);
+    }), a.trim();
+  }
+  render() {
+    return h`
+      <div
+        part="base"
+        class=${y({
+      option: !0,
+      "option--current": this.current,
+      "option--disabled": this.disabled,
+      "option--hover": this.hasHover,
+      "option--selected": this.selected,
+      "option--show-check": this.showCheck
+    })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        ${u(
+      this.checkPlacement === s.Left,
+      () => h`<cx-icon
+              part="checked-icon"
+              class="option__check"
+              name="check"
+              library="system"
+              aria-hidden="true"
+            ></cx-icon> `
+    )}
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <cx-space
+          part="content"
+          class="option__content"
+          direction="vertical"
+          spacing="3x-small"
+        >
+          <slot
+            part="label"
+            class="option__label"
+            @slotchange=${this.handleDefaultSlotChange}
+          ></slot>
+          <slot
+            part="help-text"
+            name="help-text"
+            class="option__help-text"
+          ></slot>
+        </cx-space>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+        ${u(
+      this.checkPlacement === s.Right,
+      () => h`<cx-icon
+              part="checked-icon"
+              class="option__check"
+              name="check"
+              library="system"
+              aria-hidden="true"
+            ></cx-icon> `
+    )}
+      </div>
+    `;
+  }
+};
+e.styles = [g, C];
+e.dependencies = { "cx-icon": k, "cx-space": w };
+o([
+  _(".option__label")
+], e.prototype, "defaultSlot", 2);
+o([
+  f()
+], e.prototype, "current", 2);
+o([
+  f()
+], e.prototype, "selected", 2);
+o([
+  f()
+], e.prototype, "hasHover", 2);
+o([
+  r({ reflect: !0 })
+], e.prototype, "value", 2);
+o([
+  r({ reflect: !0, type: Boolean })
+], e.prototype, "disabled", 2);
+o([
+  r({ attribute: "show-check", reflect: !0, type: Boolean })
+], e.prototype, "showCheck", 2);
+o([
+  r({ attribute: "check-placement", reflect: !0, type: String })
+], e.prototype, "checkPlacement", 2);
+o([
+  d("disabled")
+], e.prototype, "handleDisabledChange", 1);
+o([
+  d("selected")
+], e.prototype, "handleSelectedChange", 1);
+o([
+  d("value")
+], e.prototype, "handleValueChange", 1);
+e = o([
+  m("cx-option")
+], e);
+export {
+  e as C,
+  s as a
+};