@orangelogic/design-system 2.0.0-29DUO2-beta-1

package/library/chunks/custom-element.L4WJXn1j.js

@@ -0,0 +1,14 @@
+const m = (e, n) => (window.customElements.get(e) || window.customElements.define(e, n), n), u = (e, n) => {
+  const { elements: t, kind: o } = n;
+  return {
+    elements: t,
+    // This callback is called once the class is otherwise fully defined
+    finisher(s) {
+      window.customElements.get(e) || window.customElements.define(e, s);
+    },
+    kind: o
+  };
+}, i = (e) => (n) => typeof n == "function" ? m(e, n) : u(e, n);
+export {
+  i as c
+};

package/library/chunks/debounce.DaHuiSGU.js

@@ -0,0 +1,15 @@
+const c = (s, n = !1) => {
+  const a = Symbol(), o = Symbol();
+  return (u, d, t) => {
+    const l = t.value;
+    t.value = function(...i) {
+      const e = this;
+      clearTimeout(e[a]), n && !e[o] && (l.apply(this, i), e[o] = !0), e[a] = window.setTimeout(() => {
+        n || l.apply(this, i), e[o] = !1;
+      }, s);
+    }, t.configurable === !1 && (t.configurable = !0);
+  };
+};
+export {
+  c as d
+};

package/library/chunks/default-value.COZopaet.js

@@ -0,0 +1,15 @@
+import { u as a } from "./lit-element.jLBm65_O.js";
+const C = (o = "value") => (u, s) => {
+  const e = u.constructor, b = e.prototype.attributeChangedCallback;
+  e.prototype.attributeChangedCallback = function(i, f, n) {
+    const t = e.getPropertyOptions(o), l = typeof t.attribute == "string" ? t.attribute : o;
+    if (i === l) {
+      const r = t.converter || a, c = (typeof r == "function" ? r : r?.fromAttribute ?? a.fromAttribute)(n, t.type);
+      this[o] !== c && (this[s] = c);
+    }
+    b.call(this, i, f, n);
+  };
+};
+export {
+  C as d
+};

package/library/chunks/dialog.DZGlXo8d.js

@@ -0,0 +1,570 @@
+import { n, C as z } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as S } from "./component.styles.DMSLciL5.js";
+import { O, C as D, H as B, z as L, o as P } from "./overlayscrollbars.XhGWx9Zk.js";
+import { a as h, s as u } from "./animate.El-MpOws.js";
+import { c as $ } from "./custom-element.L4WJXn1j.js";
+import { w as x } from "./event.mFzZi4sr.js";
+import { L as H } from "./i18n.Bge6Wbrz.js";
+import { M as E } from "./modal.U1QltQKe.js";
+import { l as w, u as _ } from "./scroll.xtO5yojm.js";
+import { H as R } from "./slot.j5oheLJC.js";
+import { w as k } from "./watch.q1sEjPWL.js";
+import { i as W, x as y, E as q } from "./lit-element.jLBm65_O.js";
+import { r as m } from "./state.CSDxrqLd.js";
+import { e as b } from "./query.BBf1UFkC.js";
+import { e as v } from "./class-map.BiVq-cVR.js";
+import { o as C } from "./if-defined.BRoBj_Rp.js";
+import { o as A } from "./style-map.llVFPd__.js";
+import { n as g } from "./when.Dr1es41R.js";
+import { s as p, g as c } from "./animation-registry.HmpwNuGH.js";
+import F from "../components/divider.js";
+import I from "../components/icon-button.js";
+import T from "../components/popup.js";
+var l = /* @__PURE__ */ ((e) => (e.Both = "both", e.Footer = "footer", e.Header = "header", e.None = "none", e))(l || {});
+const U = W`
+  :host {
+    --width: 31rem;
+    --header-spacing: var(--cx-spacing-small) var(--cx-spacing-large);
+    --body-spacing: var(--cx-spacing-medium) var(--cx-spacing-large);
+    --divider-spacing: 0;
+    --footer-spacing: var(--cx-spacing-medium);
+    --max-width: 100%;
+    --max-height: 100%;
+    --overlay-background-color: var(--cx-overlay-background-color);
+
+    display: contents;
+  }
+
+  .dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dialog--absolute {
+    position: absolute;
+  }
+
+  .dialog__panel {
+    display: flex;
+    flex-direction: column;
+    width: var(--width);
+    height: var(--dialog-height, auto);
+    background-color: var(--cx-panel-background-color);
+    border-radius: var(--cx-border-radius-medium);
+    box-shadow: var(--cx-shadow-x-large);
+    overflow: hidden;
+    max-width: calc(var(--max-width) - var(--cx-spacing-2x-large));
+    max-height: calc(var(--max-height) - var(--cx-spacing-2x-large));
+  }
+
+  .dialog__panel:focus {
+    outline: none;
+  }
+
+  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
+  @media screen and (max-width: 420px) {
+    .dialog__panel {
+      max-height: 80vh;
+    }
+  }
+
+  .dialog--open .dialog__panel {
+    display: flex;
+    opacity: 1;
+  }
+
+  .dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+    padding: var(--header-spacing);
+  }
+
+  .dialog__header-divider,
+  .dialog__footer-divider {
+    --spacing: 0;
+    padding: var(--divider-spacing);
+  }
+
+  .dialog__title {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    font: inherit;
+    font-family: var(--cx-font-sans);
+    font-size: var(--cx-font-size-large);
+    font-weight: var(--cx-font-weight-regular);
+    line-height: var(--cx-line-height-large);
+    margin: 0;
+  }
+
+  .dialog__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--cx-spacing-2x-small);
+  }
+
+  .dialog__header-actions cx-icon-button,
+  .dialog__header-actions ::slotted(cx-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--cx-font-size-3x-large);
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    font-size: var(--cx-font-size-medium);
+    font-weight: var(--cx-font-weight-regular);
+    line-height: var(--cx-line-height-small);
+    position: relative;
+    /* https://link.orangelogic.com/Tasks/41SL03 */
+    z-index: 2;
+  }
+
+  .dialog--overlay-scrollbar .dialog__body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dialog__footer {
+    flex: 0 0 auto;
+    text-align: right;
+    padding: var(--footer-spacing);
+    position: relative;
+    z-index: 1;
+  }
+
+  .dialog__footer ::slotted(cx-button:not(:first-of-type)) {
+    margin-inline-start: var(--cx-spacing-x-small);
+  }
+
+  .dialog:not(.dialog--has-footer) .dialog__footer {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .dialog__panel {
+      border: solid 1px var(--cx-color-neutral-0);
+    }
+  }
+
+  .dialog__overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--overlay-background-color);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .dialog--open .dialog__overlay {
+    opacity: 1;
+    pointer-events: auto;
+  }
+`;
+var j = Object.defineProperty, M = Object.getOwnPropertyDescriptor, a = (e, o, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? M(o, i) : o, d = e.length - 1, f; d >= 0; d--)
+    (f = e[d]) && (s = (r ? f(o, i, s) : f(s)) || s);
+  return r && s && j(o, i, s), s;
+};
+O.plugin({
+  ClickScroll: L,
+  ScrollbarsHiding: B,
+  SizeObserver: D
+});
+let t = class extends z {
+  constructor() {
+    super(), this.hasSlotController = new R(this, "footer"), this.localize = new H(this), this.modal = new E(this), this.open = !1, this.label = "", this.noHeader = !1, this.boundary = document.body, this.dividerPosition = l.Header, this.useOverlayScrollbar = !1, this.disableOverlayClick = !1, this.stayOpenOutsideClick = !1, this.strategy = "fixed", this.osInstance = null, this.boundaryObserver = null, this.boundarySize = {
+      height: 0,
+      width: 0
+    }, this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this), this.preventBoundaryDialogClose = this.preventBoundaryDialogClose.bind(this), this.handleWindowResize = this.handleWindowResize.bind(this);
+  }
+  runFirstUpdated() {
+    this.overlay = this.shadowRoot?.querySelector(
+      ".dialog__overlay"
+    );
+  }
+  connectedUpdatedCallback() {
+    this.popup.hidden = !this.open, this.open && (this.addOpenListeners(), this.modal.activate(), (!this.boundary || this.boundary === document.body) && w(this)), this.updatePopupAnchor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.modal.deactivate(), (!this.boundary || this.boundary === document.body) && _(this), this.removeOpenListeners(), window.removeEventListener("resize", this.handleWindowResize), this.boundaryObserver?.disconnect(), this.boundaryObserver = null;
+  }
+  shouldUpdate(e) {
+    if (e.has("boundary")) {
+      const o = e.get("boundary");
+      o instanceof t && o.removeEventListener(
+        "cx-request-close",
+        this.preventBoundaryDialogClose
+      ), o === document.body && window.removeEventListener("resize", this.handleWindowResize), this.boundaryObserver?.disconnect(), this.boundaryObserver = null, this.open && this.boundary instanceof t && this.boundary.addEventListener(
+        "cx-request-close",
+        this.preventBoundaryDialogClose
+      );
+    }
+    return !0;
+  }
+  async updatePopupAnchor() {
+    if (!this.boundary || !this.popup || (this.popup.anchor = this.boundary, !this.overlay))
+      return;
+    let e = this.boundary;
+    this.boundary instanceof t && (this.boundary.hasUpdated || await this.boundary.updateComplete, e = this.boundary.panel), this.boundary === document.body ? (this.boundarySize = {
+      height: window.innerHeight,
+      width: window.innerWidth
+    }, this.boundaryObserver = null, window.addEventListener("resize", this.handleWindowResize)) : (this.boundarySize = {
+      height: e.clientHeight,
+      width: e.clientWidth
+    }, this.boundaryObserver = new ResizeObserver((o) => {
+      for (const i of o)
+        this.boundarySize = {
+          height: i.contentRect.height,
+          width: i.contentRect.width
+        };
+    }), this.boundaryObserver.observe(e));
+  }
+  handleWindowResize() {
+    this.boundary === document.body && (this.boundarySize = {
+      height: window.innerHeight,
+      width: window.innerWidth
+    });
+  }
+  requestClose(e) {
+    const o = this.emit("cx-request-close", {
+      cancelable: !0,
+      detail: { source: e }
+    });
+    if (o.defaultPrevented || this.disableOverlayClick && e === "overlay") {
+      if (o.detail.preventedReason === "nested" || !this.disableOverlayClick && e === "overlay")
+        return !1;
+      const i = c(this, "dialog.denyClose", {
+        dir: this.localize.dir()
+      });
+      return h(this.panel, i.keyframes, i.options), !1;
+    }
+    return this.hide(), !0;
+  }
+  /**
+   * If there are multiple dialogs open, should only close the top-most dialog when clicking outside dialog panel.
+   * @param event - The event object.
+   */
+  preventBoundaryDialogClose(e) {
+    e.target === this.boundary && (e.detail.preventedReason = "nested", e.preventDefault());
+  }
+  addOpenListeners() {
+    "CloseWatcher" in window && (this.closeWatcher?.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
+      this.requestClose("keyboard");
+    }), document.addEventListener("keydown", this.handleDocumentKeyDown, !0), document.addEventListener("mousedown", this.handleDocumentMouseDown, !0), this.boundary instanceof t && this.boundary.addEventListener(
+      "cx-request-close",
+      this.preventBoundaryDialogClose
+    );
+  }
+  removeOpenListeners() {
+    this.closeWatcher?.destroy(), document.removeEventListener("keydown", this.handleDocumentKeyDown, !0), document.removeEventListener(
+      "mousedown",
+      this.handleDocumentMouseDown,
+      !0
+    ), this.boundary instanceof t && this.boundary.removeEventListener(
+      "cx-request-close",
+      this.preventBoundaryDialogClose
+    );
+  }
+  handleDocumentMouseDown(e) {
+    const o = e.composedPath(), i = o[0], r = o.some((d) => d === this.panel), s = !this.contains(i) && !this.shadowRoot?.contains(i);
+    r || this.stayOpenOutsideClick && s || this.requestClose("overlay");
+  }
+  handleDocumentKeyDown(e) {
+    e.key === "Escape" && this.modal.isActive() && this.open && this.requestClose("keyboard") && (e.stopPropagation(), e.stopImmediatePropagation());
+  }
+  handleCloseButtonClick() {
+    this.requestClose("close-button");
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("cx-show"), this.originalTrigger = document.activeElement, this.modal.activate(), this.useOverlayScrollbar && (this.osInstance = O(this.body, {
+        scrollbars: {
+          autoHide: "scroll",
+          autoHideDelay: 1e3
+        }
+      })), (!this.boundary || this.boundary === document.body) && w(this);
+      const e = this.querySelector("[autofocus]");
+      e && e.removeAttribute("autofocus"), await Promise.all([
+        u(this.popup),
+        (() => {
+          this.overlay && u(this.overlay);
+        })()
+      ]), this.popup.hidden = !1, (() => {
+        this.emit("cx-initial-focus", {
+          cancelable: !0
+        }).defaultPrevented || (e ? e.focus({
+          preventScroll: !0
+        }) : this.panel.focus({ preventScroll: !0 })), e && e.setAttribute("autofocus", "");
+      })();
+      const i = c(this, "dialog.show", {
+        dir: this.localize.dir()
+      }), r = c(this, "dialog.overlay.show", {
+        dir: this.localize.dir()
+      });
+      await Promise.all([
+        h(this.panel, i.keyframes, i.options),
+        (async () => {
+          this.overlay && await h(
+            this.overlay,
+            r.keyframes,
+            r.options
+          );
+        })()
+      ]), this.emit("cx-after-show"), this.addOpenListeners();
+    } else {
+      this.emit("cx-hide"), this.removeOpenListeners(), this.modal.deactivate(), this.osInstance?.destroy(), await Promise.all([
+        u(this.popup),
+        (() => {
+          this.overlay && u(this.overlay);
+        })()
+      ]);
+      const e = c(this, "dialog.hide", {
+        dir: this.localize.dir()
+      }), o = c(this, "dialog.overlay.hide", {
+        dir: this.localize.dir()
+      });
+      await Promise.all([
+        (async () => {
+          this.overlay && (await h(
+            this.overlay,
+            o.keyframes,
+            o.options
+          ), this.overlay.hidden = !0);
+        })(),
+        h(
+          this.panel,
+          e.keyframes,
+          e.options
+        ).then(() => {
+          this.panel.hidden = !0;
+        })
+      ]), this.overlay && (this.overlay.hidden = !1), this.panel.hidden = !1, (!this.boundary || this.boundary === document.body) && _(this);
+      const i = this.originalTrigger;
+      typeof i?.focus == "function" && setTimeout(() => i.focus()), this.emit("cx-after-hide");
+    }
+  }
+  /** Shows the dialog. */
+  async show() {
+    if (!this.open)
+      return this.open = !0, x(this, "cx-after-show");
+  }
+  /** Hides the dialog */
+  async hide() {
+    if (this.open)
+      return this.open = !1, x(this, "cx-after-hide");
+  }
+  render() {
+    return y`
+      <cx-popup
+        part="base"
+        ?active=${this.open}
+        strategy=${this.strategy === "overlay" ? "overlay" : "fixed"}
+        class=${v({
+      popup: !0
+    })}
+        placement="center"
+      >
+        <div
+          class=${v({
+      dialog: !0,
+      "dialog--has-footer": this.hasSlotController.test("footer"),
+      "dialog--open": this.open,
+      "dialog--overlay-scrollbar": this.useOverlayScrollbar
+    })}
+        >
+          <div
+            part="overlay"
+            class=${v({
+      dialog__overlay: !0
+    })}
+            tabindex="-1"
+            style=${A({
+      height: `${this.boundarySize.height}px`,
+      width: `${this.boundarySize.width}px`
+    })}
+          >
+            <div
+              part="panel"
+              class="dialog__panel"
+              role="dialog"
+              aria-modal="true"
+              aria-hidden=${this.open ? "false" : "true"}
+              aria-label=${C(this.noHeader ? this.label : void 0)}
+              aria-labelledby=${C(this.noHeader ? void 0 : "title")}
+              tabindex="-1"
+            >
+              ${g(
+      this.noHeader,
+      () => q,
+      () => y`
+                  <header part="header" class="dialog__header">
+                    <h2 part="title" class="dialog__title" id="title">
+                      <slot name="label">
+                        ${this.label.length > 0 ? this.label : "\uFEFF"}
+                      </slot>
+                    </h2>
+                    <div part="header-actions" class="dialog__header-actions">
+                      <slot name="header-actions"></slot>
+                      <cx-icon-button
+                        part="close-button"
+                        exportparts="base:close-button__base"
+                        class="dialog__close"
+                        name="close"
+                        label=${this.localize.term("close")}
+                        @click=${this.handleCloseButtonClick}
+                      ></cx-icon-button>
+                    </div>
+                  </header>
+                  ${g(
+        [
+          l.Header,
+          l.Both
+        ].includes(this.dividerPosition),
+        () => y`
+                      <cx-divider class="dialog__header-divider"></cx-divider>
+                    `
+      )}
+                `
+    )}
+              <!-- The tabindex="-1" is here because the body is technically scrollable if overflowing.
+                However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard.
+                Previously this was just a <slot>, but tabindex="-1" on the slot causes children to not be focusable.
+                https://github.com/shoelace-style/shoelace/issues/1753#issuecomment-1836803277 -->
+              <div part="body" class="dialog__body" tabindex="-1">
+                <slot></slot>
+              </div>
+              ${g(
+      [
+        l.Footer,
+        l.Both
+      ].includes(this.dividerPosition),
+      () => y`
+                  <cx-divider class="dialog__footer-divider"></cx-divider>
+                `
+    )}
+              <footer part="footer" class="dialog__footer">
+                <slot name="footer"></slot>
+              </footer>
+            </div>
+          </div>
+        </div>
+      </cx-popup>
+    `;
+  }
+};
+t.styles = [
+  S,
+  P,
+  U
+];
+t.dependencies = {
+  "cx-divider": F,
+  "cx-icon-button": I,
+  "cx-popup": T
+};
+a([
+  b(".popup")
+], t.prototype, "popup", 2);
+a([
+  b(".dialog__panel")
+], t.prototype, "panel", 2);
+a([
+  b(".dialog__body")
+], t.prototype, "body", 2);
+a([
+  n({ reflect: !0, type: Boolean })
+], t.prototype, "open", 2);
+a([
+  n({ reflect: !0 })
+], t.prototype, "label", 2);
+a([
+  n({ attribute: "no-header", reflect: !0, type: Boolean })
+], t.prototype, "noHeader", 2);
+a([
+  n({ type: Object })
+], t.prototype, "boundary", 2);
+a([
+  n({ attribute: "divider-position", reflect: !0, type: String })
+], t.prototype, "dividerPosition", 2);
+a([
+  n({
+    attribute: "use-overlay-scrollbar",
+    reflect: !0,
+    type: Boolean
+  })
+], t.prototype, "useOverlayScrollbar", 2);
+a([
+  n({
+    attribute: "disable-overlay-click",
+    reflect: !0,
+    type: Boolean
+  })
+], t.prototype, "disableOverlayClick", 2);
+a([
+  n({
+    attribute: "stay-open-outside-click",
+    reflect: !0,
+    type: Boolean
+  })
+], t.prototype, "stayOpenOutsideClick", 2);
+a([
+  n({ reflect: !0 })
+], t.prototype, "strategy", 2);
+a([
+  m()
+], t.prototype, "overlay", 2);
+a([
+  m()
+], t.prototype, "boundaryObserver", 2);
+a([
+  m()
+], t.prototype, "boundarySize", 2);
+a([
+  k(["boundary"], { waitUntilFirstUpdate: !0 })
+], t.prototype, "updatePopupAnchor", 1);
+a([
+  k("open", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleOpenChange", 1);
+t = a([
+  $("cx-dialog")
+], t);
+p("dialog.show", {
+  keyframes: [
+    { opacity: 0 },
+    { opacity: 1 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+p("dialog.hide", {
+  keyframes: [
+    { opacity: 1 },
+    { opacity: 0 }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+p("dialog.denyClose", {
+  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
+  options: { duration: 250 }
+});
+p("dialog.overlay.show", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250 }
+});
+p("dialog.overlay.hide", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250 }
+});
+export {
+  t as C,
+  l as D
+};

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

@@ -0,0 +1,37 @@
+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
+};

package/library/chunks/directive.oAbCiebi.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const s = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4 }, _ = (r) => (...t) => ({ _$litDirective$: r, values: t });
+class $ {
+  constructor(t) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t, e, i) {
+    this._$Ct = t, this._$AM = e, this._$Ci = i;
+  }
+  _$AS(t, e) {
+    return this.update(t, e);
+  }
+  update(t, e) {
+    return this.render(...e);
+  }
+}
+export {
+  _ as e,
+  $ as i,
+  s as t
+};