@orangelogic/design-system 2.19.0-pr77202.21

package/library/components/atoms.js

@@ -0,0 +1,170 @@
+import { default as s } from "./alert.js";
+import { default as C } from "./animated-image.js";
+import { a as o, e as r } from "../chunks/animation.DPqSuC7g.js";
+import { C as d } from "../chunks/animation.DPqSuC7g.js";
+import { default as n } from "./avatar.js";
+import { default as g } from "./badge.js";
+import { default as b } from "./breadcrumb.js";
+import { default as T } from "./breadcrumb-item.js";
+import { C as S } from "../chunks/button.G_W-dK6b.js";
+import { default as A } from "./button-group.js";
+import { default as P } from "./card.js";
+import { default as G } from "./checkbox.js";
+import { default as v } from "./color-picker.js";
+import { default as k } from "./copy-button.js";
+import { default as h } from "./details.js";
+import { C as H } from "../chunks/dialog.upIZWR3x.js";
+import { default as j } from "./divider.js";
+import { C as L } from "../chunks/dot-pagination.EWl_NO9m.js";
+import { default as z } from "./drawer.js";
+import { default as q } from "./dropdown.js";
+import { default as K } from "./element-clamp.js";
+import { default as W } from "./format-bytes.js";
+import { default as Y } from "./format-date.js";
+import { default as _ } from "./format-number.js";
+import { default as ee } from "./grid.js";
+import { default as re } from "./grid-item.js";
+import { C as te } from "../chunks/header.CzGjJnha.js";
+import { C as fe } from "../chunks/hub-connection.BiLljnv2.js";
+import { default as se } from "./icon.js";
+import { default as Ce } from "./icon-button.js";
+import { C as de } from "../chunks/iframe.CVP0aR9K.js";
+import { C as ne } from "../chunks/image.CRcv0x3Z.js";
+import { default as ge } from "./image-comparer.js";
+import { default as be } from "./include.js";
+import { default as Te } from "./input.js";
+import { default as Se } from "./input-group.js";
+import { default as Ae } from "./line-clamp.js";
+import { default as Pe } from "./markdown.js";
+import { default as Ge } from "./menu.js";
+import { C as ve } from "../chunks/menu-item.HK2A6RqD.js";
+import { default as ke } from "./menu-label.js";
+import { default as he } from "./menu-section.js";
+import { default as He } from "./mutation-observer.js";
+import { C as je } from "../chunks/option.pgg_ZoHY.js";
+import { default as Le } from "./pagination.js";
+import { default as ze } from "./popup.js";
+import { default as qe } from "./progress-bar.js";
+import { default as Ke } from "./progress-ring.js";
+import { default as We } from "./qr-code.js";
+import { default as Ye } from "./radio.js";
+import { default as _e } from "./radio-button.js";
+import { default as eo } from "./radio-card.js";
+import { default as ro } from "./radio-group.js";
+import { default as to } from "./range.js";
+import { default as fo } from "./rating.js";
+import { default as so } from "./relative-time.js";
+import { default as Co } from "./resize-observer.js";
+import { C as lo } from "../chunks/select.DMdl1Kdd.js";
+import { default as io } from "./skeleton.js";
+import { default as co } from "./space.js";
+import { default as Io } from "./spinner.js";
+import { default as Bo } from "./split-panel.js";
+import { default as Ro } from "./step.js";
+import { default as Do } from "./stepper.js";
+import { default as yo } from "./switch.js";
+import { default as Mo } from "./tab.js";
+import { C as Oo } from "../chunks/tab-group.3F6gRchD.js";
+import { C as wo } from "../chunks/table.BarE1-gL.js";
+import { default as Fo } from "./tab-panel.js";
+import { default as No } from "./tag.js";
+import { default as Eo } from "./textarea.js";
+import { C as Vo } from "../chunks/timecode.C9Yc2sWq.js";
+import { default as Qo } from "./tooltip.js";
+import { a as Jo, C as Ko } from "../chunks/tree.5Cb85J9q.js";
+import { C as Wo } from "../chunks/typography.trna8y2b.js";
+import { default as Yo } from "./video.js";
+import { default as _o } from "./visually-hidden.js";
+import { c as er } from "../chunks/component.styles.DtouHn2g.js";
+import { g as rr, d as ar, s as tr } from "../chunks/animation-registry.DavRkTTr.js";
+function t() {
+  return Object.entries(o).filter(([e]) => e !== "easings").map(([e]) => e);
+}
+function x() {
+  return Object.entries(r).map(([e]) => e);
+}
+export {
+  s as CxAlert,
+  C as CxAnimatedImage,
+  d as CxAnimation,
+  n as CxAvatar,
+  g as CxBadge,
+  b as CxBreadcrumb,
+  T as CxBreadcrumbItem,
+  S as CxButton,
+  A as CxButtonGroup,
+  P as CxCard,
+  G as CxCheckbox,
+  v as CxColorPicker,
+  k as CxCopyButton,
+  h as CxDetails,
+  H as CxDialog,
+  j as CxDivider,
+  L as CxDotPagination,
+  z as CxDrawer,
+  q as CxDropdown,
+  K as CxElementClamp,
+  W as CxFormatBytes,
+  Y as CxFormatDate,
+  _ as CxFormatNumber,
+  ee as CxGrid,
+  re as CxGridItem,
+  te as CxHeader,
+  fe as CxHubConnection,
+  se as CxIcon,
+  Ce as CxIconButton,
+  de as CxIframe,
+  ne as CxImage,
+  ge as CxImageComparer,
+  be as CxInclude,
+  Te as CxInput,
+  Se as CxInputGroup,
+  Ae as CxLineClamp,
+  Pe as CxMarkdown,
+  Ge as CxMenu,
+  ve as CxMenuItem,
+  ke as CxMenuLabel,
+  he as CxMenuSection,
+  He as CxMutationObserver,
+  je as CxOption,
+  Le as CxPagination,
+  ze as CxPopup,
+  qe as CxProgressBar,
+  Ke as CxProgressRing,
+  We as CxQrCode,
+  Ye as CxRadio,
+  _e as CxRadioButton,
+  eo as CxRadioCard,
+  ro as CxRadioGroup,
+  to as CxRange,
+  fo as CxRating,
+  so as CxRelativeTime,
+  Co as CxResizeObserver,
+  lo as CxSelect,
+  io as CxSkeleton,
+  co as CxSpace,
+  Io as CxSpinner,
+  Bo as CxSplitPanel,
+  Ro as CxStep,
+  Do as CxStepper,
+  yo as CxSwitch,
+  Mo as CxTab,
+  Oo as CxTabGroup,
+  Fo as CxTabPanel,
+  wo as CxTable,
+  No as CxTag,
+  Eo as CxTextarea,
+  Vo as CxTimecode,
+  Qo as CxTooltip,
+  Jo as CxTree,
+  Ko as CxTreeItem,
+  Wo as CxTypography,
+  Yo as CxVideo,
+  _o as CxVisuallyHidden,
+  er as componentStyles,
+  rr as getAnimation,
+  t as getAnimationNames,
+  x as getEasingNames,
+  ar as setAnimation,
+  tr 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,153 @@
+import { i as d, n as i, C as p, x as l, c as v } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as m } from "../chunks/component.styles.DtouHn2g.js";
+import { w as g } from "../chunks/watch.BCJD77bD.js";
+import { r as u } from "../chunks/state.Dt9F_SuS.js";
+import { e as f } from "../chunks/class-map.DqNfBvJI.js";
+import _ from "./icon.js";
+const x = d`
+  :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, r = (s, e, n, o) => {
+  for (var t = o > 1 ? void 0 : o ? y(e, n) : e, c = s.length - 1, h; c >= 0; c--)
+    (h = s[c]) && (t = (o ? h(e, n, t) : h(t)) || t);
+  return o && t && b(e, 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 s = l`
+      <img
+        part="image"
+        class="avatar__image"
+        src=${this.image}
+        loading=${this.loading}
+        alt=""
+        @error=${this.handleImageLoadError}
+      />
+    `;
+    let e = null;
+    return this.initials ? e = l`<div part="initials" class="avatar__initials">
+        ${this.initials}
+      </div>` : e = 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 ? s : e}
+      </div>
+    `;
+  }
+};
+a.styles = [m, x];
+a.dependencies = {
+  "cx-icon": _
+};
+r([
+  u()
+], a.prototype, "hasError", 2);
+r([
+  i()
+], a.prototype, "image", 2);
+r([
+  i()
+], a.prototype, "label", 2);
+r([
+  i()
+], a.prototype, "initials", 2);
+r([
+  i()
+], a.prototype, "loading", 2);
+r([
+  i({ reflect: !0 })
+], a.prototype, "shape", 2);
+r([
+  g("image")
+], a.prototype, "handleImageChange", 1);
+a = r([
+  v("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,177 @@
+import { i as d, n as s, C as g, x as p, c as u } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as m } from "../chunks/component.styles.DtouHn2g.js";
+import { e as x } from "../chunks/class-map.DqNfBvJI.js";
+const v = d`
+  :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 g {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.pill = !1, this.pulse = !1, this.size = "medium";
+  }
+  render() {
+    return p`
+      <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 = [m, 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([
+  u("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,89 @@
+import u from "./color-picker.js";
+import h from "./space.js";
+import { i as m, n as p, C as v, x as f, c as x } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as C } from "../chunks/component.styles.DtouHn2g.js";
+import { o as s } from "../chunks/style-map.lEJHEwk3.js";
+const g = m``;
+var F = Object.defineProperty, d = Object.getOwnPropertyDescriptor, n = (r, e, l, c) => {
+  for (var t = c > 1 ? void 0 : c ? d(e, l) : e, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (t = (c ? i(e, l, t) : i(t)) || t);
+  return c && t && F(e, l, t), t;
+};
+let o = class extends v {
+  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 f`<cx-space spacing="x-small" wrap="nowrap">
+      <cx-color-picker
+        variant="button"
+        value=${this.value[0]}
+        hoist
+        opacity
+        .form=${this.form}
+        @cx-change=${this.handleFirstColorPickerChange}
+        style=${s({
+      "--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}
+        @cx-change=${this.handleSecondColorPickerChange}
+        style=${s({
+      "--control-button-color": "#1A1A1E",
+      "--control-caret-color": "#FFFFFF"
+    })}
+      ></cx-color-picker>
+    </cx-space>`;
+  }
+};
+o.styles = [C, g];
+o.dependencies = {
+  "cx-color-picker": u,
+  "cx-space": h
+};
+n([
+  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
+  })
+], o.prototype, "value", 2);
+n([
+  p({ reflect: !1 })
+], o.prototype, "form", 2);
+o = n([
+  x("cx-bicolor-picker")
+], o);
+export {
+  o 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

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

@@ -0,0 +1,90 @@
+import n from "./input.js";
+import p from "./space.js";
+import { i as u, n as h, C as m, x as d, c as x } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as v } from "../chunks/component.styles.DtouHn2g.js";
+import { L as b } from "../chunks/i18n.C6c6_pqI.js";
+import f from "./bicolor-picker.js";
+const g = u`
+  .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 b(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 d`<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 = [v, g];
+i.dependencies = {
+  "cx-bi-color-picker": f,
+  "cx-input": n,
+  "cx-space": p
+};
+c([
+  h({
+    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([
+  x("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