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

package/library/components/border-input-group.js

@@ -0,0 +1,92 @@
+import n from "./input.js";
+import p from "./space.js";
+import { n as u, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as h } from "../chunks/component.styles.DMSLciL5.js";
+import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as x } from "../chunks/i18n.Bge6Wbrz.js";
+import { i as v, x as b } from "../chunks/lit-element.jLBm65_O.js";
+import f from "./bicolor-picker.js";
+const g = v`
+  .border-width {
+    width: 72px;
+  }
+`;
+var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (r, e, t, o) => {
+  for (var a = o > 1 ? void 0 : o ? w(e, t) : e, s = r.length - 1, l; s >= 0; s--)
+    (l = r[s]) && (a = (o ? l(e, t, a) : l(a)) || a);
+  return o && a && C(e, t, a), a;
+};
+let i = class extends m {
+  constructor() {
+    super(...arguments), this.localize = new x(this), this.value = ["", "", "0px"];
+  }
+  handleBiColorPickerChange(r) {
+    const e = [...this.value];
+    e[0] = r.detail.value[0], e[1] = r.detail.value[1];
+    const t = e[2];
+    e[2] = Number.isNaN(Number.parseFloat(t)) ? "0px" : t, this.value = e, this.emit("cx-border-input-group-change", {
+      detail: {
+        value: e
+      }
+    });
+  }
+  handleBorderWidthInputChange(r) {
+    const e = r.target, t = [...this.value], o = e.value;
+    t[2] = Number.isNaN(Number.parseFloat(o)) ? "0px" : o, this.value = t, this.emit("cx-border-input-group-change", {
+      detail: {
+        value: t
+      }
+    });
+  }
+  render() {
+    return b`<cx-space spacing="x-small" wrap="nowrap">
+      <cx-bicolor-picker
+        part="border-color"
+        value=${`${this.value[0]} ${this.value[1]}`}
+        .form=${this.closest("form")}
+        @cx-bicolor-picker-change=${this.handleBiColorPickerChange}
+      ></cx-bicolor-picker>
+      <cx-input
+        part="border-width"
+        class="border-width"
+        value=${this.value[2]}
+        mask="numpx"
+        .maskBlocks=${{
+      num: {
+        mask: Number,
+        min: 0,
+        scale: 0,
+        thousandsSeparator: ""
+      }
+    }}
+        .form=${this.closest("form")}
+        @cx-change=${this.handleBorderWidthInputChange}
+        placeholder=${this.localize.term("borderWidth")}
+      ></cx-input>
+    </cx-space>`;
+  }
+};
+i.styles = [h, g];
+i.dependencies = {
+  "cx-bi-color-picker": f,
+  "cx-input": n,
+  "cx-space": p
+};
+c([
+  u({
+    converter: {
+      fromAttribute: (r) => {
+        const e = (r ?? "").split(" ");
+        return [e[0] ?? "", e[1] ?? "", e[2] ?? "0px"];
+      },
+      toAttribute: (r) => r.join(" ")
+    },
+    type: String
+  })
+], i.prototype, "value", 2);
+i = c([
+  d("cx-border-input-group")
+], i);
+export {
+  i as default
+};

package/library/components/breadcrumb-item.d.ts

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

package/library/components/breadcrumb-item.js

@@ -0,0 +1,208 @@
+import { n as p, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as d } from "../chunks/component.styles.DMSLciL5.js";
+import { c as f } from "../chunks/custom-element.L4WJXn1j.js";
+import { H as h } from "../chunks/slot.j5oheLJC.js";
+import { w as u } from "../chunks/watch.q1sEjPWL.js";
+import { i as x, x as s } from "../chunks/lit-element.jLBm65_O.js";
+import { r as _ } from "../chunks/state.CSDxrqLd.js";
+import { e as g } from "../chunks/query.BBf1UFkC.js";
+import { e as y } from "../chunks/class-map.BiVq-cVR.js";
+import { o as c } from "../chunks/if-defined.BRoBj_Rp.js";
+const v = x`
+  :host {
+    display: inline-flex;
+  }
+
+  .breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--cx-font-sans);
+    font-size: var(--cx-font-size-small);
+    font-weight: var(--cx-font-weight-semibold);
+    color: var(--cx-color-neutral);
+    line-height: var(--cx-line-height-large);
+    white-space: nowrap;
+  }
+
+  .breadcrumb-item__label {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-decoration: none;
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: var(--cx-border-radius-small);
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: var(--cx-transition-fast) --color;
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label {
+    color: var(--cx-color-primary);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
+    color: var(--cx-color-primary);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
+    color: var(--cx-color-primary);
+  }
+
+  .breadcrumb-item__label:focus {
+    outline: none;
+  }
+
+  .breadcrumb-item__label:focus-visible {
+    outline: var(--cx-focus-ring);
+    outline-offset: var(--cx-focus-ring-offset);
+  }
+
+  .breadcrumb-item__prefix,
+  .breadcrumb-item__suffix {
+    display: none;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
+    display: inline-flex;
+    margin-inline-end: var(--cx-spacing-x-small);
+  }
+
+  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
+    display: inline-flex;
+    margin-inline-start: var(--cx-spacing-x-small);
+  }
+
+  :host(:last-of-type) .breadcrumb-item__separator {
+    display: none;
+  }
+
+  .breadcrumb-item__separator {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 var(--cx-spacing-x-small);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;
+var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, t = (i, a, l, o) => {
+  for (var r = o > 1 ? void 0 : o ? C(a, l) : a, n = i.length - 1, m; n >= 0; n--)
+    (m = i[n]) && (r = (o ? m(a, l, r) : m(r)) || r);
+  return o && r && w(a, l, r), r;
+};
+let e = class extends b {
+  constructor() {
+    super(...arguments), this.hasSlotController = new h(
+      this,
+      "prefix",
+      "suffix"
+    ), this.renderType = "button", this.rel = "noreferrer noopener";
+  }
+  setRenderType() {
+    const i = this.defaultSlot.assignedElements({ flatten: !0 }).filter((a) => a.tagName.toLowerCase() === "cx-dropdown").length > 0;
+    if (this.href) {
+      this.renderType = "link";
+      return;
+    }
+    if (i) {
+      this.renderType = "dropdown";
+      return;
+    }
+    this.renderType = "button";
+  }
+  hrefChanged() {
+    this.setRenderType();
+  }
+  handleSlotChange() {
+    this.setRenderType();
+  }
+  render() {
+    return s`
+      <div
+        part="base"
+        class=${y({
+      "breadcrumb-item": !0,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${this.renderType === "link" ? s`
+              <a
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--link"
+                href=${this.href}
+                target=${c(this.target ? this.target : void 0)}
+                rel=${c(this.target ? this.rel : void 0)}
+              >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </a>
+            ` : ""}
+        ${this.renderType === "button" ? s`
+              <button
+                part="label"
+                type="button"
+                class="breadcrumb-item__label breadcrumb-item__label--button"
+              >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </button>
+            ` : ""}
+        ${this.renderType === "dropdown" ? s`
+              <div
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--drop-down"
+              >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </div>
+            ` : ""}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span
+          part="separator"
+          class="breadcrumb-item__separator"
+          aria-hidden="true"
+        >
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+e.styles = [d, v];
+t([
+  g("slot:not([name])")
+], e.prototype, "defaultSlot", 2);
+t([
+  _()
+], e.prototype, "renderType", 2);
+t([
+  p()
+], e.prototype, "href", 2);
+t([
+  p()
+], e.prototype, "target", 2);
+t([
+  p()
+], e.prototype, "rel", 2);
+t([
+  u("href", { waitUntilFirstUpdate: !0 })
+], e.prototype, "hrefChanged", 1);
+e = t([
+  f("cx-breadcrumb-item")
+], e);
+export {
+  e as default
+};

package/library/components/breadcrumb.d.ts

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

package/library/components/breadcrumb.js

@@ -0,0 +1,76 @@
+import { n as p, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as d } from "../chunks/component.styles.DMSLciL5.js";
+import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as u } from "../chunks/i18n.Bge6Wbrz.js";
+import { i as f, x as b } from "../chunks/lit-element.jLBm65_O.js";
+import { e as c } from "../chunks/query.BBf1UFkC.js";
+import g from "./icon.js";
+const S = f`
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+`;
+var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (s, e, r, t) => {
+  for (var a = t > 1 ? void 0 : t ? v(e, r) : e, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (a = (t ? n(e, r, a) : n(a)) || a);
+  return t && a && x(e, r, a), a;
+};
+let o = class extends h {
+  constructor() {
+    super(...arguments), this.localize = new u(this), this.separatorDir = this.localize.dir(), this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const e = this.separatorSlot.assignedElements({
+      flatten: !0
+    })[0].cloneNode(!0);
+    return [e, ...e.querySelectorAll("[id]")].forEach(
+      (r) => r.removeAttribute("id")
+    ), e.setAttribute("data-default", ""), e.slot = "separator", e;
+  }
+  handleSlotChange() {
+    const s = [
+      ...this.defaultSlot.assignedElements({ flatten: !0 })
+    ].filter(
+      (e) => e.tagName.toLowerCase() === "cx-breadcrumb-item"
+    );
+    s.forEach((e, r) => {
+      const t = e.querySelector('[slot="separator"]');
+      t === null ? e.append(this.getSeparator()) : t.hasAttribute("data-default") && t.replaceWith(this.getSeparator()), r === s.length - 1 ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current");
+    });
+  }
+  render() {
+    return this.separatorDir !== this.localize.dir() && (this.separatorDir = this.localize.dir(), this.updateComplete.then(() => this.handleSlotChange())), b`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true" style="display: none">
+        <slot name="separator" @slotchange=${this.handleSlotChange}>
+          <cx-icon
+            name=${this.localize.dir() === "rtl" ? "chevron_left" : "chevron_right"}
+          ></cx-icon>
+        </slot>
+      </span>
+    `;
+  }
+};
+o.styles = [d, S];
+o.dependencies = { "cx-icon": g };
+l([
+  c("slot")
+], o.prototype, "defaultSlot", 2);
+l([
+  c('slot[name="separator"]')
+], o.prototype, "separatorSlot", 2);
+l([
+  p()
+], o.prototype, "label", 2);
+o = l([
+  m("cx-breadcrumb")
+], o);
+export {
+  o as default
+};

package/library/components/button-group.d.ts

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

package/library/components/button-group.js

@@ -0,0 +1,98 @@
+import { n as i, C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { c as p } from "../chunks/custom-element.L4WJXn1j.js";
+import { i as d, x as f } from "../chunks/lit-element.jLBm65_O.js";
+import { r as h } from "../chunks/state.CSDxrqLd.js";
+import { e as x } from "../chunks/query.BBf1UFkC.js";
+const _ = d`
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    row-gap: var(--cx-spacing-x-small);
+    overflow: unset;
+  }
+`;
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (t, o, r, e) => {
+  for (var u = e > 1 ? void 0 : e ? v(o, r) : o, l = t.length - 1, b; l >= 0; l--)
+    (b = t[l]) && (u = (e ? b(o, r, u) : b(u)) || u);
+  return e && u && m(o, r, u), u;
+};
+let n = class extends c {
+  constructor() {
+    super(...arguments), this.disableRole = !1, this.label = "";
+  }
+  handleFocus(t) {
+    s(t.target)?.toggleAttribute("data-cx-button-group__button--focus", !0);
+  }
+  handleBlur(t) {
+    s(t.target)?.toggleAttribute("data-cx-button-group__button--focus", !1);
+  }
+  handleMouseOver(t) {
+    s(t.target)?.toggleAttribute("data-cx-button-group__button--hover", !0);
+  }
+  handleMouseOut(t) {
+    s(t.target)?.toggleAttribute("data-cx-button-group__button--hover", !1);
+  }
+  handleSlotChange() {
+    const t = [
+      ...this.defaultSlot.assignedElements({ flatten: !0 })
+    ];
+    t.forEach((o) => {
+      const r = t.indexOf(o), e = s(o);
+      e && (e.toggleAttribute("data-cx-button-group__button", !0), e.toggleAttribute(
+        "data-cx-button-group__button--first",
+        r === 0
+      ), e.toggleAttribute(
+        "data-cx-button-group__button--inner",
+        r > 0 && r < t.length - 1
+      ), e.toggleAttribute(
+        "data-cx-button-group__button--last",
+        r === t.length - 1
+      ), e.toggleAttribute(
+        "data-cx-button-group__button--radio",
+        e.tagName.toLowerCase() === "cx-radio-button"
+      ));
+    });
+  }
+  render() {
+    return f`
+      <div
+        part="base"
+        class="button-group"
+        role=${this.disableRole ? "presentation" : "group"}
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+n.styles = [g, _];
+a([
+  x("slot")
+], n.prototype, "defaultSlot", 2);
+a([
+  h()
+], n.prototype, "disableRole", 2);
+a([
+  i()
+], n.prototype, "label", 2);
+n = a([
+  p("cx-button-group")
+], n);
+function s(t) {
+  const o = "cx-button, cx-radio-button, cx-icon-button";
+  return t.closest(o) ?? t.querySelector(o);
+}
+export {
+  n as default
+};

package/library/components/button.d.ts

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

package/library/components/button.js

@@ -0,0 +1,20 @@
+import "../chunks/lib-cortex-element.CVMmyPMC.js";
+import "../chunks/component.styles.DMSLciL5.js";
+import { C as h } from "../chunks/button.Dy5bRiPQ.js";
+import "../chunks/custom-element.L4WJXn1j.js";
+import "../chunks/form.DgwYWi0O.js";
+import "../chunks/i18n.Bge6Wbrz.js";
+import "../chunks/slot.j5oheLJC.js";
+import "../chunks/watch.q1sEjPWL.js";
+import "../chunks/state.CSDxrqLd.js";
+import "../chunks/query.BBf1UFkC.js";
+import "../chunks/class-map.BiVq-cVR.js";
+import "../chunks/if-defined.BRoBj_Rp.js";
+import "../chunks/when.Dr1es41R.js";
+import "../chunks/static.UA3G1Deq.js";
+import "./icon.js";
+import "./spinner.js";
+import "../chunks/button.styles.Dl5IQLHU.js";
+export {
+  h as default
+};

package/library/components/card.d.ts

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

package/library/components/card.js

@@ -0,0 +1,171 @@
+import { n as c, C as n } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as h } from "../chunks/component.styles.DMSLciL5.js";
+import { c as p } from "../chunks/custom-element.L4WJXn1j.js";
+import { H as b } from "../chunks/slot.j5oheLJC.js";
+import { i as v, x as m } from "../chunks/lit-element.jLBm65_O.js";
+import { e as g } from "../chunks/class-map.BiVq-cVR.js";
+const f = v`
+  :host {
+    --border-color: var(--cx-color-neutral-200);
+    --border-radius: var(--cx-border-radius-x-large);
+    --box-shadow: var(--cx-shadow-x-small);
+    --image-border-radius: var(--cx-border-radius-x-large);
+    --border-width: 1px;
+    --padding: var(--cx-spacing-large);
+
+    display: inline-block;
+    width: var(--card-width, auto);
+    height: var(--card-height, auto);
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--cx-panel-background-color);
+    box-shadow: var(--box-shadow);
+    border: solid var(--border-width) var(--border-color);
+    border-radius: var(--border-radius);
+    padding: var(--padding);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  .card--interactive {
+    --border-color: var(--cx-color-primary-300);
+
+    box-shadow: none;
+    cursor: pointer;
+    transition: box-shadow 0.2s ease-in-out;
+  }
+
+  .card--interactive:hover {
+    box-shadow: var(--cx-shadow-medium);
+  }
+
+  .card--disabled::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgb(from var(--cx-color-neutral-0) r g b / 50%);
+    z-index: 1;
+  }
+
+  .card__image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--cx-color-neutral-100);
+    border-radius: var(--image-border-radius);
+    margin: calc(-1 * var(--border-width));
+    overflow: hidden;
+    margin-bottom: var(--padding);
+    flex-shrink: 0;
+  }
+
+  .card__image::slotted(img) {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+
+  .card:not(.card--has-image) .card__image {
+    display: none;
+  }
+
+  .card__header {
+    display: block;
+    border-bottom: solid var(--header-border-width, var(--border-width))
+      var(--border-color);
+    padding-bottom: var(--padding);
+    margin-bottom: var(--padding);
+  }
+
+  .card:not(.card--has-header) .card__header {
+    display: none;
+  }
+
+  .card__title {
+    display: block;
+    font-size: var(--cx-font-size-large);
+    font-weight: var(--cx-font-weight-bold);
+  }
+
+  .card:not(.card--has-title) .card__title {
+    display: none;
+  }
+
+  .card__body {
+    display: block;
+    width: 100%;
+  }
+
+  .card--has-footer .card__footer {
+    display: block;
+    border-top: solid var(--border-width) var(--border-color);
+    padding-top: var(--padding);
+    margin-top: var(--padding);
+  }
+
+  .card:not(.card--has-footer) .card__footer {
+    display: none;
+  }
+`;
+var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (o, e, d, t) => {
+  for (var r = t > 1 ? void 0 : t ? _(e, d) : e, i = o.length - 1, s; i >= 0; i--)
+    (s = o[i]) && (r = (t ? s(e, d, r) : s(r)) || r);
+  return t && r && u(e, d, r), r;
+};
+let a = class extends n {
+  constructor() {
+    super(...arguments), this.interactive = !1, this.disabled = !1, this.hasSlotController = new b(
+      this,
+      "footer",
+      "header",
+      "image"
+    );
+  }
+  handleClick(o) {
+    this.disabled && o.preventDefault();
+  }
+  render() {
+    return m`
+      <div
+        part="base"
+        class=${g({
+      card: !0,
+      "card--disabled": this.disabled,
+      "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-header": this.hasSlotController.test("header"),
+      "card--has-image": this.hasSlotController.test("image"),
+      "card--has-title": this.hasSlotController.test("title"),
+      "card--interactive": this.interactive
+    })}
+        @click=${this.handleClick}
+      >
+        <slot name="image" part="image" class="card__image"></slot>
+        <slot name="header" part="header" class="card__header"></slot>
+        <slot name="title" part="title" class="card__title"></slot>
+        <slot part="body" class="card__body"></slot>
+        <slot name="footer" part="footer" class="card__footer"></slot>
+      </div>
+    `;
+  }
+};
+a.styles = [h, f];
+l([
+  c({ reflect: !0, type: Boolean })
+], a.prototype, "interactive", 2);
+l([
+  c({ reflect: !0, type: Boolean })
+], a.prototype, "disabled", 2);
+a = l([
+  p("cx-card")
+], a);
+export {
+  a as default
+};

package/library/components/checkbox.d.ts

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