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

package/library/components/atoms.js

@@ -0,0 +1,180 @@
+import { default as s } from "./alert.js";
+import { bw as C } from "../chunks/am-chart.B_OdX4Q-.js";
+import { default as l } from "./animated-image.js";
+import { a, e as o } from "../chunks/animation.DfUHRQry.js";
+import { C as n } from "../chunks/animation.DfUHRQry.js";
+import { default as g } from "./array-line-clamp.js";
+import { default as b } from "./avatar.js";
+import { default as T } from "./badge.js";
+import { default as A } from "./breadcrumb.js";
+import { default as D } from "./breadcrumb-item.js";
+import { C as P } from "../chunks/button.Dy5bRiPQ.js";
+import { default as G } from "./button-group.js";
+import { default as h } from "./card.js";
+import { default as w } from "./checkbox.js";
+import { default as k } from "./color-picker.js";
+import { default as E } from "./copy-button.js";
+import { default as L } from "./details.js";
+import { C as j } from "../chunks/dialog.DZGlXo8d.js";
+import { default as z } from "./divider.js";
+import { C as q } from "../chunks/dot-pagination.Cp57TPpZ.js";
+import { default as K } from "./dot-status.js";
+import { default as W } from "./drawer.js";
+import { default as Y } from "./dropdown.js";
+import { default as _ } from "./e-chart.js";
+import { default as ee } from "./element-clamp.js";
+import { default as oe } from "./format-bytes.js";
+import { default as te } from "./format-date.js";
+import { default as fe } from "./format-number.js";
+import { default as se } from "./format-time.js";
+import { default as Ce } from "./grid.js";
+import { default as le } from "./grid-item.js";
+import { C as ne } from "../chunks/header.D_90t23Q.js";
+import { C as ge } from "../chunks/hub-connection.CfARlehM.js";
+import { default as be } from "./icon.js";
+import { default as Te } from "./icon-button.js";
+import { C as Ae } from "../chunks/iframe.B0Z8DiDR.js";
+import { C as De } from "../chunks/image.CBjclAIZ.js";
+import { default as Pe } from "./image-comparer.js";
+import { default as Ge } from "./include.js";
+import { default as he } from "./input.js";
+import { default as we } from "./input-group.js";
+import { default as ke } from "./line-clamp.js";
+import { default as Ee } from "./markdown.js";
+import { default as Le } from "./menu.js";
+import { default as je } from "./menu-item.js";
+import { default as ze } from "./menu-label.js";
+import { default as qe } from "./menu-section.js";
+import { default as Ke } from "./mutation-observer.js";
+import { C as We } from "../chunks/option.CiBFEqo6.js";
+import { C as Ye } from "../chunks/pagination.CTKL1LBP.js";
+import { default as _e } from "./popup.js";
+import { default as ea } from "./progress-bar.js";
+import { default as oa } from "./progress-ring.js";
+import { default as ta } from "./qr-code.js";
+import { default as fa } from "./radio.js";
+import { default as sa } from "./radio-button.js";
+import { default as Ca } from "./radio-card.js";
+import { default as la } from "./radio-group.js";
+import { default as na } from "./range.js";
+import { default as ga } from "./rating.js";
+import { default as ba } from "./relative-time.js";
+import { default as Ta } from "./resize-observer.js";
+import { default as Aa } from "./select.js";
+import { default as Da } from "./skeleton.js";
+import { default as Pa } from "./space.js";
+import { default as Ga } from "./spinner.js";
+import { default as ha } from "./split-panel.js";
+import { default as wa } from "./step.js";
+import { default as ka } from "./stepper.js";
+import { default as Ea } from "./switch.js";
+import { default as La } from "./tab.js";
+import { C as ja } from "../chunks/tab-group.3eI4V3C7.js";
+import { C as za } from "../chunks/table.ZGeb7I52.js";
+import { default as qa } from "./tab-panel.js";
+import { default as Ka } from "./tag.js";
+import { default as Wa } from "./textarea.js";
+import { default as Ya } from "./timecode.js";
+import { default as _a } from "./tooltip.js";
+import { a as eo, C as ao } from "../chunks/tree.dSjb5nEi.js";
+import { C as ro } from "../chunks/typography.oDzoLbZS.js";
+import { default as xo } from "./video.js";
+import { default as mo } from "./visually-hidden.js";
+import { c as po } from "../chunks/component.styles.DMSLciL5.js";
+import { g as uo, a as lo, s as no } from "../chunks/animation-registry.HmpwNuGH.js";
+function t() {
+  return Object.entries(a).filter(([e]) => e !== "easings").map(([e]) => e);
+}
+function x() {
+  return Object.entries(o).map(([e]) => e);
+}
+export {
+  s as CxAlert,
+  C as CxAmChart,
+  l as CxAnimatedImage,
+  n as CxAnimation,
+  g as CxArrayLineClamp,
+  b as CxAvatar,
+  T as CxBadge,
+  A as CxBreadcrumb,
+  D as CxBreadcrumbItem,
+  P as CxButton,
+  G as CxButtonGroup,
+  h as CxCard,
+  w as CxCheckbox,
+  k as CxColorPicker,
+  E as CxCopyButton,
+  L as CxDetails,
+  j as CxDialog,
+  z as CxDivider,
+  q as CxDotPagination,
+  K as CxDotStatus,
+  W as CxDrawer,
+  Y as CxDropdown,
+  _ as CxEChart,
+  ee as CxElementClamp,
+  oe as CxFormatBytes,
+  te as CxFormatDate,
+  fe as CxFormatNumber,
+  se as CxFormatTime,
+  Ce as CxGrid,
+  le as CxGridItem,
+  ne as CxHeader,
+  ge as CxHubConnection,
+  be as CxIcon,
+  Te as CxIconButton,
+  Ae as CxIframe,
+  De as CxImage,
+  Pe as CxImageComparer,
+  Ge as CxInclude,
+  he as CxInput,
+  we as CxInputGroup,
+  ke as CxLineClamp,
+  Ee as CxMarkdown,
+  Le as CxMenu,
+  je as CxMenuItem,
+  ze as CxMenuLabel,
+  qe as CxMenuSection,
+  Ke as CxMutationObserver,
+  We as CxOption,
+  Ye as CxPagination,
+  _e as CxPopup,
+  ea as CxProgressBar,
+  oa as CxProgressRing,
+  ta as CxQrCode,
+  fa as CxRadio,
+  sa as CxRadioButton,
+  Ca as CxRadioCard,
+  la as CxRadioGroup,
+  na as CxRange,
+  ga as CxRating,
+  ba as CxRelativeTime,
+  Ta as CxResizeObserver,
+  Aa as CxSelect,
+  Da as CxSkeleton,
+  Pa as CxSpace,
+  Ga as CxSpinner,
+  ha as CxSplitPanel,
+  wa as CxStep,
+  ka as CxStepper,
+  Ea as CxSwitch,
+  La as CxTab,
+  ja as CxTabGroup,
+  qa as CxTabPanel,
+  za as CxTable,
+  Ka as CxTag,
+  Wa as CxTextarea,
+  Ya as CxTimecode,
+  _a as CxTooltip,
+  eo as CxTree,
+  ao as CxTreeItem,
+  ro as CxTypography,
+  xo as CxVideo,
+  mo as CxVisuallyHidden,
+  po as componentStyles,
+  uo as getAnimation,
+  t as getAnimationNames,
+  x as getEasingNames,
+  lo as setAnimation,
+  no as setDefaultAnimation
+};

package/library/components/avatar.d.ts

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

package/library/components/avatar.js

@@ -0,0 +1,155 @@
+import { n as i, C as p } 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 { w as v } from "../chunks/watch.q1sEjPWL.js";
+import { i as g, x as l } from "../chunks/lit-element.jLBm65_O.js";
+import { r as u } from "../chunks/state.CSDxrqLd.js";
+import { e as f } from "../chunks/class-map.BiVq-cVR.js";
+import _ from "./icon.js";
+const x = g`
+  :host {
+    display: inline-block;
+
+    --size: 3rem;
+  }
+
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    background-color: var(--cx-color-neutral-400);
+    font-family: var(--cx-font-sans);
+    font-size: calc(var(--size) * 0.5);
+    font-weight: var(--cx-font-weight-regular);
+    color: var(--cx-color-neutral-0);
+    user-select: none;
+    -webkit-user-select: none;
+    vertical-align: middle;
+  }
+
+  .avatar--circle,
+  .avatar--circle .avatar__image {
+    border-radius: var(--cx-border-radius-circle);
+  }
+
+  .avatar--rounded,
+  .avatar--rounded .avatar__image {
+    border-radius: var(--cx-border-radius-small);
+  }
+
+  .avatar--square {
+    border-radius: 0;
+  }
+
+  .avatar__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .avatar__initials {
+    line-height: 1;
+    text-transform: uppercase;
+  }
+
+  .avatar__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    overflow: hidden;
+  }
+`;
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (o, r, n, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(r, n) : r, c = o.length - 1, h; c >= 0; c--)
+    (h = o[c]) && (t = (s ? h(r, n, t) : h(t)) || t);
+  return s && t && b(r, n, t), t;
+};
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.hasError = !1, this.image = "", this.label = "", this.initials = "", this.loading = "eager", this.shape = "circle";
+  }
+  handleImageChange() {
+    this.hasError = !1;
+  }
+  handleImageLoadError() {
+    this.hasError = !0, this.emit("cx-error");
+  }
+  render() {
+    const o = l`
+      <img
+        part="image"
+        class="avatar__image"
+        src=${this.image}
+        loading=${this.loading}
+        alt=""
+        @error=${this.handleImageLoadError}
+      />
+    `;
+    let r = null;
+    return this.initials ? r = l`<div part="initials" class="avatar__initials">
+        ${this.initials}
+      </div>` : r = l`
+        <div part="icon" class="avatar__icon" aria-hidden="true">
+          <slot name="icon">
+            <cx-icon name="person"></cx-icon>
+          </slot>
+        </div>
+      `, l`
+      <div
+        part="base"
+        class=${f({
+      avatar: !0,
+      "avatar--circle": this.shape === "circle",
+      "avatar--rounded": this.shape === "rounded",
+      "avatar--square": this.shape === "square"
+    })}
+        role="img"
+        aria-label=${this.label}
+      >
+        ${this.image && !this.hasError ? o : r}
+      </div>
+    `;
+  }
+};
+a.styles = [d, x];
+a.dependencies = {
+  "cx-icon": _
+};
+e([
+  u()
+], a.prototype, "hasError", 2);
+e([
+  i()
+], a.prototype, "image", 2);
+e([
+  i()
+], a.prototype, "label", 2);
+e([
+  i()
+], a.prototype, "initials", 2);
+e([
+  i()
+], a.prototype, "loading", 2);
+e([
+  i({ reflect: !0 })
+], a.prototype, "shape", 2);
+e([
+  v("image")
+], a.prototype, "handleImageChange", 1);
+a = e([
+  m("cx-avatar")
+], a);
+export {
+  a as default
+};

package/library/components/badge.d.ts

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

package/library/components/badge.js

@@ -0,0 +1,179 @@
+import { n as s, C as d } 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 u, x as m } from "../chunks/lit-element.jLBm65_O.js";
+import { e as x } from "../chunks/class-map.BiVq-cVR.js";
+const v = u`
+  :host {
+    display: inline-flex;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-size, var(--cx-font-size-small));
+    font-weight: var(--cx-font-weight-medium);
+    letter-spacing: var(--cx-letter-spacing-normal);
+    line-height: 1;
+    border-radius: var(--cx-border-radius-small);
+    border: solid 1px var(--cx-color-neutral-0);
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: inherit;
+    line-height: normal;
+  }
+
+  /* Variant modifiers */
+  .badge--primary {
+    background-color: var(--cx-color-primary);
+    border-color: var(--cx-color-primary);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .badge--success {
+    background-color: var(--cx-color-success);
+    border-color: var(--cx-color-success);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .badge--neutral {
+    background-color: var(--cx-color-neutral-100);
+    border-color: var(--cx-color-neutral-100);
+    color: var(--cx-color-neutral);
+  }
+
+  .badge--warning {
+    background-color: var(--cx-color-warning);
+    border-color: var(--cx-color-warning);
+    color: var(--cx-color-neutral-0);
+  }
+
+  .badge--danger {
+    background-color: var(--cx-color-danger);
+    border-color: var(--cx-color-danger);
+    color: var(--cx-color-danger-0);
+  }
+
+  /* Size modifiers */
+  .badge--x-small {
+    padding: var(--cx-spacing-2x-small) var(--cx-spacing-x-small);
+    height: var(--cx-spacing-x-small);
+    min-width: var(--cx-spacing-x-small);
+    font-size: var(--font-size, var(--cx-font-size-2x-small));
+  }
+
+  .badge--small {
+    padding: var(--cx-spacing-2x-small) var(--cx-spacing-x-small);
+    height: var(--cx-input-height-small);
+    min-width: var(--cx-input-height-small);
+  }
+
+  .badge--medium {
+    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
+    height: var(--cx-input-height-medium);
+    min-width: var(--cx-input-height-medium);
+  }
+
+  .badge--large {
+    padding: var(--cx-spacing-small) var(--cx-spacing-medium);
+    height: var(--cx-input-height-large);
+    min-width: var(--cx-input-height-large);
+  }
+
+  /* Pill modifier */
+  .badge--pill {
+    border-radius: var(--cx-border-radius-pill);
+  }
+
+  /* Pulse modifier */
+  .badge--pulse {
+    animation: pulse 1.5s infinite;
+  }
+
+  .badge--pulse.badge--primary {
+    --pulse-color: var(--cx-color-primary);
+  }
+
+  .badge--pulse.badge--success {
+    --pulse-color: var(--cx-color-success);
+  }
+
+  .badge--pulse.badge--neutral {
+    --pulse-color: var(--cx-color-neutral-600);
+  }
+
+  .badge--pulse.badge--warning {
+    --pulse-color: var(--cx-color-warning);
+  }
+
+  .badge--pulse.badge--danger {
+    --pulse-color: var(--cx-color-danger);
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--pulse-color);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+`;
+var b = Object.defineProperty, h = Object.getOwnPropertyDescriptor, a = (n, l, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? h(l, i) : l, c = n.length - 1, t; c >= 0; c--)
+    (t = n[c]) && (r = (o ? t(l, i, r) : t(r)) || r);
+  return o && r && b(l, i, r), r;
+};
+let e = class extends d {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.pill = !1, this.pulse = !1, this.size = "medium";
+  }
+  render() {
+    return m`
+      <span
+        part="base"
+        class=${x({
+      badge: !0,
+      "badge--danger": this.variant === "danger",
+      "badge--large": this.size === "large",
+      "badge--medium": this.size === "medium",
+      "badge--neutral": this.variant === "neutral",
+      "badge--pill": this.pill,
+      "badge--primary": this.variant === "primary",
+      "badge--pulse": this.pulse,
+      "badge--small": this.size === "small",
+      "badge--success": this.variant === "success",
+      "badge--warning": this.variant === "warning",
+      "badge--x-small": this.size === "x-small"
+    })}
+        role="status"
+      >
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+e.styles = [g, v];
+a([
+  s({ reflect: !0 })
+], e.prototype, "variant", 2);
+a([
+  s({ reflect: !0, type: Boolean })
+], e.prototype, "pill", 2);
+a([
+  s({ reflect: !0, type: Boolean })
+], e.prototype, "pulse", 2);
+a([
+  s({ reflect: !0 })
+], e.prototype, "size", 2);
+e = a([
+  p("cx-badge")
+], e);
+export {
+  e as default
+};

package/library/components/bicolor-picker.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/molecules/src/bicolor-picker/bicolor-picker'
+import _default from '../packages/molecules/src/bicolor-picker/bicolor-picker'
+export default _default

package/library/components/bicolor-picker.js

@@ -0,0 +1,91 @@
+import h from "./color-picker.js";
+import m from "./space.js";
+import { n as p, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as f } from "../chunks/component.styles.DMSLciL5.js";
+import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
+import { i as x, x as C } from "../chunks/lit-element.jLBm65_O.js";
+import { o as n } from "../chunks/style-map.llVFPd__.js";
+const g = x``;
+var F = Object.defineProperty, d = Object.getOwnPropertyDescriptor, s = (r, e, l, c) => {
+  for (var o = c > 1 ? void 0 : c ? d(e, l) : e, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (o = (c ? i(e, l, o) : i(o)) || o);
+  return c && o && F(e, l, o), o;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.value = ["", ""], this.form = void 0;
+  }
+  handleFirstColorPickerChange(r) {
+    const e = [...this.value];
+    e[0] = r.target.value.replaceAll(" ", ""), this.value = e, this.emit("cx-bicolor-picker-change", {
+      detail: {
+        value: e
+      }
+    });
+  }
+  handleSecondColorPickerChange(r) {
+    const e = [...this.value];
+    e[1] = r.target.value.replaceAll(" ", ""), this.value = e, this.emit("cx-bicolor-picker-change", {
+      detail: {
+        value: e
+      }
+    });
+  }
+  render() {
+    return C`<cx-space spacing="x-small" wrap="nowrap">
+      <cx-color-picker
+        variant="button"
+        value=${this.value[0]}
+        hoist
+        opacity
+        .form=${this.form || this.closest("form")}
+        @cx-change=${this.handleFirstColorPickerChange}
+        style=${n({
+      "--control-button-color": "#FFFFFF",
+      "--control-caret-color": "#1A1A1E"
+    })}
+      ></cx-color-picker>
+      <cx-color-picker
+        variant="button"
+        value=${this.value[1]}
+        hoist
+        opacity
+        .form=${this.form || this.closest("form")}
+        @cx-change=${this.handleSecondColorPickerChange}
+        style=${n({
+      "--control-button-color": "#1A1A1E",
+      "--control-caret-color": "#FFFFFF"
+    })}
+      ></cx-color-picker>
+    </cx-space>`;
+  }
+};
+t.styles = [f, g];
+t.dependencies = {
+  "cx-color-picker": h,
+  "cx-space": m
+};
+s([
+  p({
+    converter: {
+      fromAttribute: (r) => {
+        const e = (r ?? "").split(" ");
+        return [
+          !e[0] || e[0] === "transparent" ? "" : e[0],
+          !e[1] || e[1] === "transparent" ? "" : e[1]
+        ];
+      },
+      toAttribute: (r) => r.join(" ")
+    },
+    type: String
+  })
+], t.prototype, "value", 2);
+s([
+  p({ reflect: !1 })
+], t.prototype, "form", 2);
+t = s([
+  v("cx-bicolor-picker")
+], t);
+export {
+  t as default
+};

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

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