@orangelogic/design-system 2.19.0-ci.5

package/library/components/breadcrumb-item.js

@@ -0,0 +1,206 @@
+import { i as b, n as p, C as d, x as s, c as f } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as h } from "../chunks/component.styles.DtouHn2g.js";
+import { H as u } from "../chunks/slot.DJLm4Dig.js";
+import { w as x } from "../chunks/watch.BCJD77bD.js";
+import { r as _ } from "../chunks/state.Dt9F_SuS.js";
+import { e as g } from "../chunks/query.BBf1UFkC.js";
+import { e as y } from "../chunks/class-map.DqNfBvJI.js";
+import { o as c } from "../chunks/if-defined.CKupVaWs.js";
+const v = b`
+  :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 d {
+  constructor() {
+    super(...arguments), this.hasSlotController = new u(
+      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 = [h, 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([
+  x("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,74 @@
+import { i as p, n as h, C as d, x as u, c as m } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as f } from "../chunks/component.styles.DtouHn2g.js";
+import { L as b } from "../chunks/i18n.C6c6_pqI.js";
+import { e as c } from "../chunks/query.BBf1UFkC.js";
+import g from "./icon.js";
+const S = p`
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+`;
+var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (o, e, r, t) => {
+  for (var a = t > 1 ? void 0 : t ? v(e, r) : e, i = o.length - 1, n; i >= 0; i--)
+    (n = o[i]) && (a = (t ? n(e, r, a) : n(a)) || a);
+  return t && a && x(e, r, a), a;
+};
+let s = class extends d {
+  constructor() {
+    super(...arguments), this.localize = new b(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 o = [
+      ...this.defaultSlot.assignedElements({ flatten: !0 })
+    ].filter(
+      (e) => e.tagName.toLowerCase() === "cx-breadcrumb-item"
+    );
+    o.forEach((e, r) => {
+      const t = e.querySelector('[slot="separator"]');
+      t === null ? e.append(this.getSeparator()) : t.hasAttribute("data-default") && t.replaceWith(this.getSeparator()), r === o.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())), u`
+      <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>
+    `;
+  }
+};
+s.styles = [f, S];
+s.dependencies = { "cx-icon": g };
+l([
+  c("slot")
+], s.prototype, "defaultSlot", 2);
+l([
+  c('slot[name="separator"]')
+], s.prototype, "separatorSlot", 2);
+l([
+  h()
+], s.prototype, "label", 2);
+s = l([
+  m("cx-breadcrumb")
+], s);
+export {
+  s 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,96 @@
+import { i, n as c, C as g, x as p, c as d } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as h } from "../chunks/component.styles.DtouHn2g.js";
+import { r as f } from "../chunks/state.Dt9F_SuS.js";
+import { e as x } from "../chunks/query.BBf1UFkC.js";
+const _ = i`
+  :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, u, e) => {
+  for (var n = e > 1 ? void 0 : e ? v(o, u) : o, l = t.length - 1, b; l >= 0; l--)
+    (b = t[l]) && (n = (e ? b(o, u, n) : b(n)) || n);
+  return e && n && m(o, u, n), n;
+};
+let r = class extends g {
+  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 u = t.indexOf(o), e = s(o);
+      e && (e.toggleAttribute("data-cx-button-group__button", !0), e.toggleAttribute(
+        "data-cx-button-group__button--first",
+        u === 0
+      ), e.toggleAttribute(
+        "data-cx-button-group__button--inner",
+        u > 0 && u < t.length - 1
+      ), e.toggleAttribute(
+        "data-cx-button-group__button--last",
+        u === t.length - 1
+      ), e.toggleAttribute(
+        "data-cx-button-group__button--radio",
+        e.tagName.toLowerCase() === "cx-radio-button"
+      ));
+    });
+  }
+  render() {
+    return p`
+      <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>
+    `;
+  }
+};
+r.styles = [h, _];
+a([
+  x("slot")
+], r.prototype, "defaultSlot", 2);
+a([
+  f()
+], r.prototype, "disableRole", 2);
+a([
+  c()
+], r.prototype, "label", 2);
+r = a([
+  d("cx-button-group")
+], r);
+function s(t) {
+  const o = "cx-button, cx-radio-button, cx-icon-button";
+  return t.closest(o) ?? t.querySelector(o);
+}
+export {
+  r 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,19 @@
+import "../chunks/custom-element.fmLrnDZr.js";
+import "../chunks/component.styles.DtouHn2g.js";
+import { C as g } from "../chunks/button.G_W-dK6b.js";
+import "../chunks/form.BFLbw9Rz.js";
+import "../chunks/i18n.C6c6_pqI.js";
+import "../chunks/slot.DJLm4Dig.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/if-defined.CKupVaWs.js";
+import "../chunks/when.Dr1es41R.js";
+import "../chunks/static.kLXgh3Gq.js";
+import "./icon.js";
+import "./spinner.js";
+import "../chunks/button.styles.CRh5_Ev4.js";
+export {
+  g 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,162 @@
+import { i as n, n as c, C as h, x as b, c as p } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as v } from "../chunks/component.styles.DtouHn2g.js";
+import { H as g } from "../chunks/slot.DJLm4Dig.js";
+import { e as m } from "../chunks/class-map.DqNfBvJI.js";
+const f = n`
+  :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;
+  }
+
+  .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__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, s = (e, o, d, t) => {
+  for (var r = t > 1 ? void 0 : t ? _(o, d) : o, i = e.length - 1, l; i >= 0; i--)
+    (l = e[i]) && (r = (t ? l(o, d, r) : l(r)) || r);
+  return t && r && u(o, d, r), r;
+};
+let a = class extends h {
+  constructor() {
+    super(...arguments), this.interactive = !1, this.disabled = !1, this.hasSlotController = new g(
+      this,
+      "footer",
+      "header",
+      "image"
+    );
+  }
+  handleClick(e) {
+    this.disabled && e.preventDefault();
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${m({
+      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--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 = [v, f];
+s([
+  c({ reflect: !0, type: Boolean })
+], a.prototype, "interactive", 2);
+s([
+  c({ reflect: !0, type: Boolean })
+], a.prototype, "disabled", 2);
+a = s([
+  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